View the details of your favorite first generation Pokémon with helpful features like search and filters.

Note: The data used for this project is quite minimal and therefore this project should not (or be expected to) substitute existing Pokédex solutions intended for more practical use cases.

View the live demo.

• Written with TypeScript.
• Bootstrapped with Create React App.
• State management with Redux and Redux Toolkit.
• Client-side routing with React Router.
• CSS-in-JS styling with Rebass and Emotion.

Initially, most of the Pokémon data was being fetched via PokéAPI. Given that the data is entirely static and needed some embellishments, I decided to store it as a JSON object and import it directly without having to fetch anything over the wire.

To reduce the number of requests on page load, I decided to use an image sprite for Pokémon within the PokePicker component. I used Spritesmith to compose the image and produce position coordinates, however, I found it difficult to have this process entirely automated– it probably should be but given the (small) scope of this project, it's hard to justify.

• Fix Pokémon details modal on smaller devices.
• A logo for use in header, favicon, and documentation.

Pokémon are © Nintendo/Creatures Inc./GAME FREAK Inc.

Pokémon type icons are governed by the Creative Commons Attribution 3.0 United States license.

Everything else is governed by the MIT license.

• Pokémon type icons by Ilaria Bernareggi.
• Most Pokémon data was collected from PokéAPI.