https://github.com/kaalpanikh/pokemon-showcase
A vibe coded pokemon showcase
https://github.com/kaalpanikh/pokemon-showcase
game-development pokemon vibe-coding
Last synced: 3 months ago
JSON representation
A vibe coded pokemon showcase
- Host: GitHub
- URL: https://github.com/kaalpanikh/pokemon-showcase
- Owner: kaalpanikh
- Created: 2025-04-04T12:51:29.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-04-12T05:14:26.000Z (7 months ago)
- Last Synced: 2025-07-02T14:43:08.574Z (5 months ago)
- Topics: game-development, pokemon, vibe-coding
- Language: JavaScript
- Homepage: https://pokemon.nikhilmishra.live
- Size: 193 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pokémon Card Showcase
A modern, responsive React application that displays Pokémon cards with detailed information using the PokéAPI
## Features
- **Beautiful Card UI**: Modern card design with type-based color theming.
- **Responsive Layout**: Works on all devices - desktop, tablet, and mobile
- **Detailed Information**: View comprehensive stats, abilities, and physical attributes
- **Search Functionality**: Find Pokémon by name or ID
- **Smooth Animations**: Utilizes Framer Motion for fluid transitions
- **Type-Based Theming**: Cards and detail pages colored based on Pokémon type
- **Load More**: Pagination system to load more Pokémon as needed
## Installation
1. Clone the repository:
```
git clone https://github.com/your-username/pokemon-card-showcase.git
cd pokemon-card-showcase
```
2. Install dependencies:
```
npm install
```
3. Start the development server:
```
npm start
```
4. Open your browser and navigate to `http://localhost:3000`
## Building for Production
To create a production build:
```
npm run build
```
This will create optimized files in the `build` folder ready for deployment.
## API Reference
This project uses the [PokéAPI](https://pokeapi.co/) - a free RESTful Pokémon API.
## Credits
- [PokéAPI](https://pokeapi.co/) for providing the Pokémon data
- [Framer Motion](https://www.framer.com/motion/) for animations
- [Styled Components](https://styled-components.com/) for styling