Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hamzalodhi2023/pokemon
Pokemon Project Using React v19 and Tailwind CSS
https://github.com/hamzalodhi2023/pokemon
animation animations css flex flexbox jsx pokemon pokemon-api react react19 reactjs responsive responsive-design responsive-web-design tailwind tailwind-css tailwindcss
Last synced: 3 months ago
JSON representation
Pokemon Project Using React v19 and Tailwind CSS
- Host: GitHub
- URL: https://github.com/hamzalodhi2023/pokemon
- Owner: hamzalodhi2023
- License: mit
- Created: 2024-08-17T10:59:23.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-17T18:08:46.000Z (4 months ago)
- Last Synced: 2024-09-29T10:38:20.980Z (3 months ago)
- Topics: animation, animations, css, flex, flexbox, jsx, pokemon, pokemon-api, react, react19, reactjs, responsive, responsive-design, responsive-web-design, tailwind, tailwind-css, tailwindcss
- Language: JavaScript
- Homepage: https://letscatchpikachu.netlify.app/
- Size: 55.7 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Pokémon Stats Display
This project is a Pokémon statistics display application that provides detailed information about various Pokémon. It showcases their speed, attack, height, weight, experience, abilities, and includes a search functionality to filter Pokémon by name or other attributes.
## Features
- **All Pokémon Stats**: Displays a list of all Pokémon with their respective stats such as speed, attack, height, weight, experience, and abilities.
- **Search Functionality**: Allows users to search for Pokémon by name or filter them based on specific criteria.
- **Responsive Design**: The application is fully responsive and works well on different devices.
## Technologies Used
- **React**: Used for building the user interface.
- **Pokémon API**: (or whichever data source you used) Provides the data for all the Pokémon.
- **CSS**: For styling the application.
- **Netlify**: For hosting the live version of the project.
## Getting Started
### Prerequisites
- Node.js installed on your machine.
- npm or yarn package manager.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/your-username/pokemon-stats-display.git
cd pokemon-stats-display
```
2. Install the dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
```
4. Open your browser and navigate to `http://localhost:5173` to see the app in action.
### Deployment
This project is hosted on Netlify. To deploy your own version:
1. Push your code to a GitHub repository.
2. Link the repository to your Netlify account.
3. Set up a build command (e.g., `npm run build`) and publish the site.
### Live Demo
You can check out the live version of the app [here](https://letscatchpikachu.netlify.app/).
## Contributing
Contributions are welcome! Please feel free to submit a pull request or open an issue if you find any bugs or have suggestions for new features.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- **Pokémon API** for providing the data.
- **React** for making UI development a breeze.
- **Netlify** for hosting the application.