mipmipp / pokex

PokeX: A React-powered Pokedex for exploring detailed information, sprites, and stats of Pokemons. Built with React, React Query, Material UI, JavaScript and Victoria.

PokeX

PokeX is an interactive Pokedex that allows you to explore detailed information about Pokemon. You can navigate through a list of Pokemon, search by name, and view details such as sprites, description, stats, and stat charts in an interactive card. The project is developed in React and utilizes various technologies and libraries to provide a complete experience.

Deployment

PokeX is deployed and accessible online. You can visit the live version of the application by following this link: PokeX Live Demo

Features

• Intuitive navigation through a list of Pokemon.
• Quick search for Pokemon by name.
• Display of sprites, description, stats, and stat charts in an interactive card.
• Dark and light mode to adapt to your visual preferences.
• Loading screen for an improved user experience.
• Error handling for a smooth interaction.
• Built with React, Victoria for stat charts, React Query for caching and storing PokeAPI data to reduce data usage.
• Organized folder structure for clean and maintainable code.
• Utilizes Material UI for an attractive and responsive interface.

Installation

1. Clone this repository on your local machine.
2. Open a terminal in the project folder.
3. Run the following command to install the dependencies:

npm install

4. Once the installation is complete, you can start the application with the following command:

npm run start

5. Access the application in your browser through the URL: http://localhost:3000.

Usage

1. Upon opening the application, you will see the list of available Pokémon.
2. Click on a Pokémon from the list to view its detailed information in an interactive card.
3. Use the search bar to search for a specific Pokémon by name.
4. Explore different details such as sprites, description, stats, and stat charts in the Pokémon's interactive card.
5. Switch between dark and light mode according to your preferences.
6. Enjoy exploring and learning about Pokémon in PokeX.

Contact Me

If you have any questions, suggestions, or feedback, feel free to reach out to me.

• Email: [email protected]

Screenshots

Here are some screenshots of the PokeX application:

PokeX website view on PC.

PokeX website view on tablet.

PokeX website view on phone.