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.
- 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.
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.