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.

• and more!

🧰 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)

📦 Installation & Local Development

1. Clone the repo

   git clone [email protected]: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

Items

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

🤝 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.