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/. 🚀

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

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

npm install
# or
yarn install

3. Run the development server

npm run dev
# or
yarn dev

Open 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=<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=<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, 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:

   cd The-Pokedex-Database/backend

2. Build and run the API:

   dotnet build
   dotnet run

   or with Docker:

   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.