Pokemon React Application
I started this project to learn more about React, I wanted to create something fun that I could use to become more familiar with the various different hooks and features of React.
How this application works
This application is built using react and the Pokemon API. It utilises routing and UI components to fetch specific data and display that data in reusable components. This application takes advantage of various bits of react functionality, like useState() and useEffect() and modular CSS.
This application also utilises higher order array methods in numerous places to display, filter and reduce data retrieved from the Pokemon API.
Application functionality.
The application is split in to several sections and areas, these are the Pokemon listing page, move listing page, Pokemon display page and move display page.
Pokemon Listing page:
The Pokemon listing page displays a paginated list of Pokemon displayed in a Pokeball design, when hovering each item, the button lights up to indicate it can be clicked.
The pagination at the bottom of the page loads the next set of Pokemon and changes the current page in the URL.
Pokemon Display Page:
The display page has several bits of functionality for displaying details about each Pokemon.
As shown above, you can see some of the key sections include an image selector, this is used to view the various sprites for each Pokemon, this allows the user to view the different art styles of the sprites and the shiny versions of each Pokemon.
Name, type abilities and base stats are also shown above the fold as this is common information typically requested by users trying to find out more information about a Pokemon.
Below is a section which displays the Pokedex entry information for each generation in a "Read more" "Read less" togglable section and a section for displaying the pixel sprites.
The Pokemon display page also has a section which tells the users all the move the specific Pokemon can learn, this section will only display the move if it's learnable.
Each move can be clicked and it will display a modal with further information about the move.
Pokemon moves listing page:
The Pokemon moves page displays in a similar way to the Pokemon listing page and also offers the same pagination and overall functionality. This page is built using the reusable components created for the Pokemon listing page.
Pokemon moves display page:
The Pokemon moves display page displays information about the moves, such as accuracy, damage and target. These are all displayed in an easy to read table.
The Pokemon moves display page also shows a list of Pokemon, using their sprites, that are able to learn the selected move. The sprites can also be clicked and they will take the users to the page for that specific Pokemon.
Search functionality:
This application also offers a basic search which allows users to search for specific Pokemon instead of trying to find them through the listing page.
Future changes I'm looking to add
I want to expand the functionality of the search to allow users to select which category they wish to search. For example, currently the users can only search for Pokemon, I would also like users to be able to search for moves.
I would also like to include sprites in the search results to make it a more visual experience instead of just displaying the Pokemon names.