A web application that utilizes data from PokéAPI to search, filter through, and display comprehensive data on various Pokémon species. Users can search from categories including generation, type, shape, habitat, color, as well as directly through Pokémon name or Pokédex number. Pokémon can also be stored as favourites for future referencing.
The app is hosted online and can be run at https://project2-pokedex-lite.vercel.app/
To deploy the app locally, clone the project into a Create-React-App directory, install the additional dependencies react-router and react-router-dom, and run npm start.
- ReactJS
- HTML5
- CSS3
- JavaScript
As a Pokémon gamer, I want a Pokémon list so that I can easily find the Pokémon I'm looking for and all the information about it.
The overall navigation flow of the app. The main pages are the Pokédex and Pokémon page, with the other pages acting as navigation aids to direct users toward the main pages.
Displays a list of locations in that region. Users can click specific locations to get a list of Pokémon found in that location.
Currently displaying the full list of Pokémon available. Clicking any Pokémon card will display detailed information regarding that Pokémon. This page can be used to filter by various properties like Type or Color.
Displays a comprehensive list of information regarding the Pokémon, including:
- Name
- Picture
- Forms
- Stats
- Attributes
- Evolution Chain
- Abilities
- Moves
- Encounters
- Flavor Text
The PokéAPI provides access to an extensive amount of information and resources. While this was incredibly helpful in building an informational app, it also proved challenging to sift through the mountain of data to grab what I required.
Due to the way certain information was structured within the API, I often had to filter, clean, and re-organize the information before it could be presented to the user.
As the project developed, it also gradually became bulkier and harder to make changes without affecting a significant portion of the existing code. This is especially so when modifying data structures that could potentially run through the majority of the app. Thus I understood the importance of planning and tying down the data flow properly before starting on a project.