Pokedex

Demo project for LB*.

Live demo | Source Code

Requirements

1. React.js app using PokéAPI.
   • Display list of Pokémons and detail (name + image) for one selected.
2. Structured and readable code.
3. No CSS-in-JS, any pre/post processor, BEM.
4. Minimal external dependencies.

---

Feature Wishlist

1. Clear selection with one click.
2. Flip-over card to show extra info, e.g. description text.

Known Bugs

User-facing Bugs

1. Tilt
   • Not really smooth transition from stationary to tilted.
   • After deleting a card, there is no tilting on the card that took its place.
     • onMouseEnter event is skipped (in Chrome, FF is fine).
   • Shadow is cut-off when animating to stationary position.
     • zIndex is changed back to zero way too early.
2. No A11Y.
   • At least aria attributes would be nice.
3. Mobile support is sub-optimal.
   • Only one card can be selected.
   • No tilt.
     • Hmm, DeviceMotionEvent.acceleration?
4. Adding/removing cards should be animated. Maybe reorder.
   • Animating grid items is nightmare even with TransitionGroup.
   • aholachek/animate-css-grid, STRML/react-grid-layout
5. More bling – Trianglify.

Developer-facing Bugs

1. Ton of non-optimized code.
   • Moar memo!
2. BEM "bug"
   • Using Block_element__modifier template:
     • Block is PascalCase to match name of the React component.
     • element is camelCase and prefixed with one underscore.
       • PascalCase seems as a better option – when one React component leaks, element often becomes Block.
     • modifier is camelCase and prefixed with two underscores.
   • Intentionally not using this SASS scoping:

     .Block {
         &_element {
             &__modifier {
     
             }
         }
     }