Built with React, TypeScript, React Router, JavaScript, styled-components and Bootstrap. It is responsible for:
-
Intuitive user interface: provides an intuitive and easy-to-use user interface for users to interact with the application and view the list of the Pokemon with their respective information.
-
Data visualization: data is displayed in a clear and organized manner, using appropriate components and styles.
Before running this application, make sure you have the following dependencies installed:
- Node.js: Download and install Node.js
- Git: Download and install Git
Once you have installed the dependencies, follow these steps to configure the project:
-
Clone the repository:
git clone https://github.com/KevinVanDerSchans/pokedex-api-react.git -
Navigate to the project directory:
cd pokedex-api-react.git -
Install dependencies:
npm install -
Start a development server:
npm run dev.
The application will be available at localhost:5173 of your browser.
The user will be able to:
-
See the complete list of all Pokemon from the PokéAPI, where the user can see the name, the id, a GIF and the type it belongs to.
-
If the user decides to click on any Pokemon, a Details page will be dynamically created to display the details of the Pokemon. Apart from the data mentioned above, the user will also see the stats (weight, height, HP, attack, defense, special-attack, special-defense and speed) and a button to return to the Home page.
-
Select the number of items per page to be displayed in the list (in this case, between 20, 50, 100 and 150 Pokemon).
-
Navigate through the structured pagination (it has buttons for next page, previous page, next 2 options, previous 2 options, go to the first page and go to the last page).
-
Filter all Pokemon by Type. Among the options, there are: Normal, Fighting, Flying, Poison, Ground, Rock, Bug, Ghost, Steel, Fire, Water, Grass, Electric, Psychic, Ice, Dragon, Dark and Fairy.
-
Search for a Pokemon by name or id.
-
Play a playlist with 6 Pokemon songs. At the same time, the user has a button in the header to activate/deactivate 2 GIFs and make the Pokemon dance to the rhythm of the music.
-
In case the user enters an invalid path or searches for a Pokemon that does not exist, an Error page will provide feedback.
If you want to contribute to this project, follow these steps:
-
Perform a fork to the repository.
-
Create a branch for your feature or bugfix:
git checkout -b feature/your-feature-name -
Make the necessary changes and commits:
git commit -am 'Add some feature' -
Push to branch:
git push origin feature/your-feature-name -
Send a pull request to the original repository.
 Kevin Schans |
|---|