Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/umigam3/pokedex-api
PokéDex using React. Powered by PokéApi. 👾
https://github.com/umigam3/pokedex-api
css cssmodules html javascript pokeapi react
Last synced: about 2 months ago
JSON representation
PokéDex using React. Powered by PokéApi. 👾
- Host: GitHub
- URL: https://github.com/umigam3/pokedex-api
- Owner: umigam3
- License: mit
- Created: 2024-03-02T20:04:49.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-13T19:19:39.000Z (10 months ago)
- Last Synced: 2024-10-16T19:19:31.313Z (3 months ago)
- Topics: css, cssmodules, html, javascript, pokeapi, react
- Language: JavaScript
- Homepage: https://pokeindex-app.netlify.app/
- Size: 1.59 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Pokedex App
This is a simple **Pokedex application built using React**. It utilizes the PokeAPI to fetch and display information about Pokémon, providing features like displaying Pokémon, loading more Pokémon, searching, and more. Additionally, the app offers both dark and light modes for user preference.
![Pokemon List](public/pokemonList.png)
## Features
- **Display Pokémon:** View a list of Pokémon with their basic information.
- **Load More Pokémon:** Load additional Pokémon as the user scrolls down the list.
- **Search:** Search for specific Pokémon by name.
- **Filter by Types:** Filter Pokémon by their types (e.g., fire, water, grass).
- **View Statistics:** Access detailed statistics of Pokémon.
- **Dark/Light Mode:** Switch between dark and light themes for comfortable viewing.![Pokemon Card](public/pokemonCard.png)
## Technologies Used
![React Badge](https://img.shields.io/badge/React-156D8D?logo=react&logoColor=fff&style=flat)
![Tailwind CSS Badge](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black)
![CSS Badge](https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=css3&logoColor=white)
![HTML Badge](https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white)For this project, I've used JavaScript to handle most of the coding stuff. CSS modules made styling in React easier, keeping things organized. And with React, I've played around with state management and hooks like useEffect and custom hooks to make things more interactive and smooth.
## Usage
1. Clone the repository:
```
git clone https://github.com/your-username/pokedex.git
```2. Navigate into the project directory:
```
cd pokedex
```3. Install dependencies:
```
npm install
```4. Start the development server:
```
npm run dev
```5. Open the application in your browser:
```
http://localhost:5173
```## Contributing
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature/your-feature`).
3. Make your changes.
4. Commit your changes (`git commit -am 'Add some feature'`).
5. Push to the branch (`git push origin feature/your-feature`).
6. Create a new Pull Request.## Credits
This project was created by Gerard Doncel.
Special thanks to the [PokeAPI](https://pokeapi.co/) for providing Pokémon data.