Pokédex

A comprehensive React-based Pokédex application that provides detailed information about Pokémon. Built with modern web technologies, this app allows users to explore Pokémon data through an intuitive interface featuring a searchable list, in-depth analysis, and lore details.

Tech Stack

• React 19: For building the user interface with hooks and modern components
• Vite: For fast development, hot module replacement, and optimized builds
• Ant Design: For UI components and responsive layout
• Tailwind CSS: For utility-first styling and responsive design
• JavaScript (ES6+): Programming language used

Features

🗂️ Pokémon List

• Searchable Grid: Browse through all Pokémon with real-time search functionality
• Pagination: Navigate through pages of Pokémon (48 per page)
• Visual Cards: Each Pokémon displayed with sprite image and name
• Click to Analyze: Select any Pokémon to view detailed information

📊 Pokémon Analysis

• Comprehensive Stats: View base stats including HP, Attack, Defense, Special Attack, Special Defense, and Speed
• Abilities & Effects: Detailed ability descriptions with short and full effects
• Evolution Chain: Visual representation of Pokémon evolution paths with sprites
• Moves Summary: Breakdown of total moves, level-up moves, machine moves, and egg moves
• All Moves List: Complete list of all moves the Pokémon can learn
• Sprite Gallery: Collection of all available sprites, including animated versions
• Physical Attributes: Height, weight, types, and base experience points

📖 Pokémon Lore

• Flavor Text: Official game descriptions and lore from various Pokémon games
• Species Information: Generation, habitat, color, shape, and other biological details
• Game Mechanics: Base happiness, gender rate, egg groups, and evolution details
• Special Classifications: Legendary and mythical Pokémon indicators

🎨 User Interface

• Responsive Design: Optimized for desktop and mobile devices
• Dark Theme: Modern dark color scheme with violet accents
• Sidebar Navigation: Easy switching between List, Analysis, and Lore sections
• Sticky Headers: Persistent search and input bars for better usability

APIs Used

This application utilizes the following public APIs:

PokéAPI

• URL: https://pokeapi.co/
• Purpose: Primary data source for Pokémon information, stats, abilities, moves, evolution chains, and species data
• Endpoints Used:
  • /api/v2/pokemon/{name} - Individual Pokémon data
  • /api/v2/pokemon?limit=2000 - Pokémon list
  • /api/v2/pokemon-species/{name} - Species and lore information
• Credits: PokéAPI is a free, open-source RESTful API for Pokémon data. Special thanks to the PokéAPI team for providing this invaluable resource.

PokéAPI Sprites (GitHub)

• URL: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/
• Purpose: High-quality Pokémon sprite images
• Credits: Sprites hosted on GitHub as part of the PokéAPI project.

Getting Started

Prerequisites

• Node.js (version 18 or higher recommended)
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone <repository-url>
   cd Pokedex

2. Install dependencies:

   npm install

Running the Application

Start the development server:

npm run dev

The application will be available at http://localhost:5173.

Building for Production

Create an optimized production build:

npm run build

Preview the production build:

npm run preview

Linting

Run ESLint to check code quality:

npm run lint

Project Structure

Pokedex/
├── public/
├── src/
│   ├── API_Handling/
│   │   ├── InfoAPI.jsx       # Pokémon analysis component
│   │   ├── PokemonList.jsx   # Pokémon list with search/pagination
│   │   └── PokemonLore.jsx   # Pokémon lore and species info
│   ├── Components/
│   │   ├── Footer.jsx        # App footer with branding
│   │   ├── Header.jsx        # App header
│   │   └── SideBar.jsx       # Navigation sidebar
│   ├── assets/
│   │   └── logo.png          # Monarch logo
│   ├── App.jsx               # Main app component
│   ├── index.css             # Global styles
│   └── main.jsx              # App entry point
├── package.json
├── vite.config.js
├── eslint.config.js
└── README.md

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

This project is for educational purposes. Please respect the copyrights of Pokémon and related intellectual property.

Project Structure

• src/App.jsx: Main application component
• src/Header.jsx: Header component
• src/API_Handling/InfoAPI.jsx: Handles API calls for Pokemon data
• src/main.jsx: Entry point
• src/index.css: Global styles