Pokemon Guessing Game

A Wordle-style Pokemon guessing game built with React, TypeScript, Tailwind CSS, and Shadcn/ui.

🚀 Quick Start

Install Dependencies

bun install

Development Server

bun run dev

Opens at http://localhost:3000 with Vite

Production Build

bun run build

Preview Production Build

bun run preview

🛠️ Tech Stack

• Bun - Fast JavaScript runtime and package manager
• Vite - Next-generation frontend tooling
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS
• Shadcn/ui - Re-usable components
• PokéAPI - Pokemon data

🧪 Testing

Run Tests

bun test

Watch Mode

bun test:watch

Coverage

bun test --coverage

The project includes comprehensive tests:

• ✅ 125 tests across 7 test files
• ✅ Component snapshot tests (GameOver, PokemonImage, PokemonInfos, etc.)
• ✅ Custom hook tests (usePokemonGame with mode switching)
• ✅ 217 expect() calls ensuring functionality
• ✅ 28 snapshots for UI regression testing

🚀 Deployment

Deploy to Netlify with automatic testing:

The project is configured to:

1. ✅ Run all tests before build
2. ✅ Fail deployment if tests fail
3. ✅ Auto-deploy on Git push

See DEPLOYMENT.md for detailed deployment instructions.

📚 Documentation

• Deployment Guide - Netlify deployment with automatic testing
• Agents Best Practices - React, Shadcn, and Tailwind best practices

🎮 Game Features

• Wordle-style Gameplay: Guess Pokemon names with color-coded feedback
• Two Game Modes:
  • 🌫️ Blur Mode: Image progressively unblurs with each guess
  • 🔍 Zoom Mode: Image progressively zooms out from close-up
• Side Menu: Hamburger menu with game settings and info
• Generation Selector: Choose from 9 Pokemon generations (Gen I to Gen IX)
• 5 Attempts: Limited guesses for challenge
• French Localization: All Pokemon names in French
• Accent-Insensitive: Type without accents (e.g., "evoli" matches "évoli")
• Responsive Design: Optimized for mobile and desktop
• Auto-Focus Input: Keyboard-friendly gameplay

🏗️ Project Structure

pokemon-guessing/
├── src/
│   ├── components/        # React components
│   ├── hooks/            # Custom React hooks
│   ├── data/             # Pokemon generation data
│   ├── types/            # TypeScript types
│   └── lib/              # Utility functions
├── styles/               # Global styles
├── index.html           # Entry HTML
└── vite.config.ts       # Vite configuration