This app consumes the excellent PokéAPI, a REST API for all things Pokémon. The app allows the user to browse through all 1154 Pokémon available in the API database. Unfortunately, at the time of writing, new Pokémon from Scralet and Violet have yet to be added but the team behind PokéAPI is amazing and I'm sure it will be added at some point.
The app also shows each individual Pokémon's stats, movesets, abilities and flavor texts.
Some key things about the project:
- React and Typescript are the key building blocks
- Tailwind CSS for styling. I did add some extra colors found in
src/colors/customColors.jswhich was taken from this excellent color set made by David Piesse. The color set was added because I wanted a specific color background for each pokemon type (e.g. fire, water) and the additional colors helped significantly. - I used @tanstack/react-query with axios for handling network requests with caching, staleness verification and infinite scroll. Request specific code can be found under
src/requests. - Accessible search bar which lets users search for any Pokemon. A locally cached indexed list of Pokémon is used to filter through when the user types a search query (the filtering is done after a debounce period). In a real world application, this list would likely be provided by a API endpoint or a microservice like Algolia Elasticsearch.
- Individual Pokémon view details useful information about each Pokémon, such as types, abilities, evolution details, type weaknesses, movesets, and Pokédex entries
The project is hosted on Netlify (using the production branch) which you can view here.
To run the project locally, clone the repository and run:
npm install
npm start