Skip to content

Repository files navigation

Pokédex

The Ultimate Pokémon Encyclopedia

Next.js TypeScript Tailwind CSS License

A modern, feature-rich Pokédex web application built with Next.js 16, TypeScript, and Tailwind CSS. Browse, search, and explore detailed information about all Pokémon from Generation I to IX.

image

Features

Core Features

  • Complete Pokédex - Browse all 1025+ Pokémon with beautiful card layouts
  • Infinite Scroll - Seamless loading of Pokémon as you scroll
  • Search Functionality - Quick Pokémon search with autocomplete
  • Responsive Design - Works perfectly on desktop, tablet, and mobile

Advanced Search & Filtering

  • Filter by Pokémon type (Fire, Water, Grass, etc.)
  • Filter by generation (I-IX)
  • Filter by stats (HP, Attack, Defense, Speed)
  • Sort by name, ID, stats, height, or weight
  • Combined multi-filter search

Pokémon Details

  • Complete base stats with visual indicators
  • Type effectiveness chart (weaknesses/resistances)
  • Evolution chains with detailed requirements
  • Move lists by level up (with power, accuracy, PP)
  • Ability information (regular and hidden)
  • Height and weight measurements
  • Habitat information
  • Breeding data (egg groups, hatch steps, gender ratio)

Visual Features

  • Shiny Pokémon Showcase - Toggle between normal and shiny sprites
  • Type-based color schemes - Each Pokémon card features its type colors
  • Dark/Light mode - Full theme support with system preference
  • Pokémon of the Day - Random featured Pokémon with fun facts

Audio & Interaction

  • Pokémon Cries - Play each Pokémon's unique cry sound
  • QR Code Generation - Generate and share QR codes for any Pokémon
  • Favorites System - Save your favorite Pokémon to local storage
  • Recently Viewed - Track your browsing history

Sharing & Export

  • Share Pokémon via QR code
  • Copy Pokémon links to the clipboard
  • Generate shareable images

Tech Stack

Technology Purpose
Next.js 15 React framework with App Router
TypeScript Type safety and better developer experience
Tailwind CSS Utility-first styling
shadcn/ui Beautiful, accessible components
Lucide Icons Clean icon set
Howler.js Audio playback for Pokémon cries
qrcode.react QR code generation
PokéAPI Pokémon data source

📦 Installation

Prerequisites

  • Node.js 18+ or Bun
  • npm, yarn, or pnpm

Acknowledgments

PokéAPI - For providing the amazing Pokémon data API

⭐ Show Your Support

If you found this project helpful, please give it a star ⭐ on GitHub!

Report Bug · Request Feature

About

A modern Pokémon encyclopedia built with Next.js 15. Browse, search, filter by type/generation, view stats, evolutions, cries, and save favorites. Dark mode and responsive design included.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Contributors

Languages