Pokedex Cards

A modern react frontend app that utilizes the PokeAPI to search for Pokémon and display them as interactive cards.

https://github.com/user-attachments/assets/b6caf092-fc4a-4235-ac7c-fe5bd614fdee

Visit the website

Explore the live app here: Pokedex Cards.

Current Features
Installation
Usage
Technologies Used
Contributing
License
Acknowledgements

Current features

Search by Pokémon name (exact match, case incensitive)
Search by national Pokedex number (1-1025)
Hover on web over the Pokémon image to hear the sound of the Pokémon
Shiny toggle to see the shiny version of the Pokémon
Abilities section and a toggle for showing hidden abilities
Details button that links to the Pokémon's page on Bulbapedia
Display trophies for Pokémon that has International tournament accolades
- Trophy icons are included for Pokémon that are VGC (Masters division) international championship winners and runner-ups
- The gathered data are from 2011-2024 and does not include any tournaments from 2020-2021

Installation

To get started with this project locally, follow these steps:

Clone the repository:

git clone https://github.com/JuCJeff/pokedex-cards.git

Navigate to the project folder:
```
cd pokedex-cards
```
Install dependencies: This project uses Yarn, a package manager for managing dependencies. If you don't have Yarn installed, follow the installation instructions here.

Once Yarn is installed, run the following command to install the project dependencies:
```
yarn install
```
Run the development server: Once the dependencies are installed, you can start the app locally. Run the following command to start the development server:
```
yarn dev
```
This will launch the app locally. You can access it by opening your browser and navigating to http://localhost:3000.

Usage

Once the app is open in your browser, you can:

Search for Pokémon by name or by National Pokédex number.
Hover over Pokémon images to hear their unique sound effects.
Use the Shiny toggle to see the shiny variant of the Pokémon.
View additional information in the Abilities section, including a toggle for hidden abilities.
Click the Details button to view detailed Pokémon info on Bulbapedia.

Technologies Used

HTML5: For the structure of the app.
CSS3: For the styling and responsive design.
JavaScript (ES6+): For dynamic functionality and interaction.
PokeAPI: To fetch Pokémon data.
Bulbapedia: External link for detailed Pokémon info.

Contributing

We welcome contributions! To contribute to the project:

Fork the repository.
Create a new branch (git checkout -b feature-name).
Make your changes.
Commit your changes (git commit -m 'Add new feature').
Push to your fork (git push origin feature-name).
Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

Pokémon Data

The Pokémon data used in this app is provided by the fantastic PokeAPI.

International Tournament Trophy Results

The international tournament trophy data is sourced from various places, including VGCPedia and the official Pokémon website. The following links provide detailed results from multiple years of Pokémon World Championships:

JuCJeff / pokedex-cards

readme