React Pokédex

An interactive, animated Pokédex built with React, Tailwind CSS & Framer Motion.
Browse, search and view detailed stats for over 1,000 Pokémon via the official PokéAPI. Integrated dark/light Theme.

---

🌐 Live Demo

🔗 Deployed on Vercel

---

📸 Showcase

🧭 Hero Section

📋 Pokédex List

🔍 Pokémon Detail Modal

⚔️ Compare Pokémon

⭐ Favorite List

🔎 Search Input

📄 Pagination System

---

🚀 Features

• Hero Slide

  • 3D tilt effect on hover
  • Dynamic gradient background by primary type
  • “Legendary” / “Mythical” badge
  • Cry button to play Pokémon sound
  • “View Profile” opens modal

• Detail Modal

  • GlobalDetail: name, genus, types, description, cry
  • Tabs (with icons):
    • About
    • Base Stats (animated bars & circles)
    • Evolution Chain
    • Moves (searchable, paginated, with icons)

• Pokédex List

  • Debounced search input with clear button
  • Numbered pagination (window of 10 pages)
  • Persists last page in localStorage
  • Responsive grid: 12 cards per page
  • Custom loading spinner & logo

• Reusable Components

  • Buttons, Inputs, Badges, Modals, StatChart, CryButton, etc.

---

🛠 Tech Stack

• Framework: React
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: lucide‑react, Material Icons
• Charts: react-circular-progressbar
• API: PokéAPI
• Deployment: Vercel

---

📦 Installation

1. Clone the repo

   git clone https://github.com/TsioryJonathan/PokedexWithReact.git
   cd PokedexWithReact

2. Install dependencies

   npm install
   # or
   yarn

3. Run development server

   npm run dev
   # or
   yarn dev

4. Build for production

   npm run build
   # or
   yarn build

---

🗂 Project Structure

src/
├── components/
│   ├── HeroSlide.jsx
│   ├── GlobalDetail.jsx
│   ├── PokeDetailModal.jsx
│   ├── PokemonMoves.jsx
│   ├── BaseStatsContent.jsx
│   ├── PokemonList.jsx
│   ├── SearchInput.jsx
│   ├── ...
│   ├── ui/
│   │   ├── Button.jsx
│   │   ├── Input.jsx
│   │   └── ModalBase.jsx
│   └── ...
├── hooks/
│   ├── usePokemonList.js
│   └── usePokemonDetails.js
│   └── ...
├── utils/
│   ├── getTypeAccent.js
│   └── pokemonColors.js
├── constants/
│   └── SummaryStats.js
└── App.jsx

---

🔧 Configuration & Customization

• Type Colors: edit src/utils/pokemonColors.js
• Stat Order: modify STAT_ORDER in src/constants/SummaryStats.js
• Pagination Window: adjust visible pages (default 10) in PokemonList.jsx
• Animation Settings: tweak Framer Motion variants (fade, stagger, etc.)

---

---

🔗 Credits

• Data: PokéAPI
• Icons: Lucide & Material Icons
• Badges: Shields.io