https://github.com/hoangsonww/the-pokedex-database
🐱 An interactive Pokédex app built with Next.js, Tailwind CSS, and React Query for blazing-fast performance and smooth UX. Includes live search, item explorer, and a favorites system powered by local storage.
https://github.com/hoangsonww/the-pokedex-database
framer-motion full-stack next nextjs pokeapi pokedex pokemon pokemon-api react shadcn supabase tailwindcss ui vercel web web-app web-application web-dev web-development
Last synced: 11 months ago
JSON representation
🐱 An interactive Pokédex app built with Next.js, Tailwind CSS, and React Query for blazing-fast performance and smooth UX. Includes live search, item explorer, and a favorites system powered by local storage.
- Host: GitHub
- URL: https://github.com/hoangsonww/the-pokedex-database
- Owner: hoangsonww
- License: mit
- Created: 2025-05-08T23:21:13.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-26T16:41:45.000Z (about 1 year ago)
- Last Synced: 2025-05-27T14:39:15.918Z (about 1 year ago)
- Topics: framer-motion, full-stack, next, nextjs, pokeapi, pokedex, pokemon, pokemon-api, react, shadcn, supabase, tailwindcss, ui, vercel, web, web-app, web-application, web-dev, web-development
- Language: TypeScript
- Homepage: https://pokedex-db.vercel.app/
- Size: 17.9 MB
- Stars: 20
- Watchers: 16
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pokédex App 🏆✨
_A beautifully designed, feature-rich Pokédex built with Next.js (React), Tailwind CSS, React Query, and PokeAPI 🐱._
**Live Web App: [https://pokedex-db.vercel.app/](https://pokedex-db.vercel.app/). 🚀**
Feel free to explore the app and its features!
---
## 🚀 Features
- **Pokémon List**
- Displays all Pokémon in a responsive grid (48 per page).
- Client-side pagination with next/previous controls.
- Instant search with 200 ms debounce to filter by name.
- **Items List**
- Displays all game items in a similar paginated grid.
- Search bar with debounce for item names.
- **Favorites**
- Click the ★ icon on any Pokémon card to toggle favorite.
- Favorites are persisted in `localStorage`.
- Separate “Favorite Pokémon” section that supports search and pagination.
- **Animated Transitions**
- `framer-motion` layout animations for smooth grid reflows.
- **Accessible UI**
- Keyboard event handlers: Enter to submit, Backspace to delete, letter keys to type.
- Heroicons search icon, focus rings, and high-contrast text.
- **Offline-Friendly**
- Core data (all 100 000+ Pokémon & items) is fetched once and cached via React Query.
- **Optional Self-Hosted API**
- Supports running a custom .NET (C#) backend replicating the PokeAPI schema
- Completely optional — you can still use the public PokeAPI without any backend setup.
---
## 🧰 Tech Stack
- **Next.js** (React + file-based routing)
- **TypeScript**, **React Query** (`@tanstack/react-query`)
- **Tailwind CSS** for utility-first styling
- **Framer Motion** for animations
- **Heroicons** for SVG icons
- **PokeAPI** (public REST API for Pokémon data)
- **.NET with C#** (optional backend replication of PokeAPI)
---
## 📦 Installation & Local Development
1. **Clone the repo**
```bash
git clone git@github.com:hoangsonww/The-Pokedex-Database.git
# or use https
git clone https://github.com/hoangsonww/The-Pokedex-Database.git
# then navigate to the web directory
cd The-Pokedex-Database/web
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **Run the development server**
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the app.
---
## ⚙️ Configuration
*No environment variables are required.*
All data is fetched directly from the PokeAPI.
---
## 📑 API Reference
This app consumes the following PokeAPI endpoints:
### Pokémon
| Method | Endpoint | Description |
| ------ | ----------------------------------- | -------------------------------------- |
| GET | `/pokemon?limit=48&offset=` | Paginated list of Pokémon |
| GET | `/pokemon?limit=100000&offset=0` | Full list (for search/favorites cache) |
### Items
| Method | Endpoint | Description |
| ------ | -------------------------------- | ----------------------------------- |
| GET | `/item?limit=48&offset=` | Paginated list of items |
| GET | `/item?limit=100000&offset=0` | Full item list (for search caching) |
*All responses conform to the PokeAPI schema: count, next, previous, results.*
---
## 📂 Folder Structure
```
/
├── components/
│ ├── PokemonCard.tsx
│ ├── ItemCard.tsx
│ └── Pagination.tsx
├── data/
│ └── models/ # TypeScript interfaces (Pokedex, ItemList)
├── pages/
│ └── index.tsx # Home page (Pokémon, Items, Favorites)
├── styles/
│ └── globals.css # Tailwind base styles
├── public/ # Favicons, manifest, images
├── README.md
├── package.json
├── tsconfig.json
└── tailwind.config.js
```
---
## 🖥️ Optional .NET Backend
In addition to using the public [PokeAPI](https://pokeapi.co/), this project also includes an **optional** backend built with **C#** and **.NET**. This backend replicates the functionality of PokeAPI, allowing you to self-host the Pokémon data if you prefer full control over the API.
**Key Details:**
- Implements a local Pokémon API with a schema similar to PokeAPI
- Written in **C#** using **ASP.NET Core**
- Docker support for easy containerized deployment
- Optional: you can skip setting up this backend and continue using the public PokeAPI without any issues
**When to use it?**
✅ If you want to host your own Pokémon API (e.g., for offline use or custom modifications)
✅ If you need full control over the data
✅ Otherwise, you can keep using the public PokeAPI — no extra setup required.
**Getting Started**
If you wish to run the .NET backend:
1. Navigate to the backend directory:
```bash
cd The-Pokedex-Database/backend
```
2. Build and run the API:
```bash
dotnet build
dotnet run
```
or with Docker:
```bash
docker build -t pokedex-backend .
docker run -p 5000:5000 pokedex-backend
```
3. The API will be available at `http://localhost:5000` by default.
Be sure to update the frontend to point to your local server if you switch away from the public PokeAPI.
---
## 🤝 Contributing
Contributions welcome! Feel free to open issues or submit pull requests.
1. Fork this repository
2. Create a feature branch (`git checkout -b feature/YourFeature`)
3. Commit your changes (`git commit -m "feat: add your feature"`)
4. Push to your branch (`git push origin feature/YourFeature`)
5. Open a Pull Request
---
## 📜 License
This project is licensed under the MIT License.