Pokédex Web Application 🔴 ⚡

A modern, interactive Pokédex web application built with Next.js and TypeScript. Experience the world of Pokémon with a sleek interface, smooth animations, and comprehensive Pokémon information.

✨ Features

• Interactive Pokédex Interface: Authentic design inspired by the original Pokédex
• Real-time Search: Instantly find Pokémon by name or number
• Detailed Pokémon Information:
  • Base stats
  • Types
  • Abilities
  • Physical characteristics
• Responsive Design: Seamless experience across all devices
• Dynamic Image Loading: Multiple images per Pokémon with smooth transitions
• Smooth Animations: Engaging user interface with Framer Motion
• Type-Safe Development: Built with TypeScript for reliability

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/ravindraogg/Pokedex-WebApp.git

2. Navigate to the project directory:

cd Pokedex-WebApp

3. Install dependencies:

npm install
# or
yarn install

4. Start the development server:

npm run dev
# or
yarn dev

5. Open http://localhost:3000 in your browser

🛠️ Tech Stack

• Framework: Next.js 13.5
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• UI Components: Custom components inspired by shadcn/ui

📁 Project Structure

Pokedex-WebApp/
├── app/                    # Next.js app directory
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
│   ├── NavBar.tsx        # Navigation bar
│   └── Pokedex.tsx       # Main Pokédex component
├── public/               # Static files
│   └── data/            # Pokémon data and images
├── styles/              # Global styles
└── types/               # TypeScript type definitions

🎯 Key Features Details

Pokédex Display

• Authentic Pokédex design with opening animation
• Interactive buttons and displays
• Real-time stat visualization
• Dynamic image cycling

Search Functionality

• Real-time search results
• Dropdown suggestions
• Image previews in search results
• Search by name or Pokédex number

Navigation

• Custom navbar with search
• Pokémon selection dropdown
• Smooth page transitions
• Responsive menu design

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Pokémon data and images are sourced from various public Pokémon APIs and resources
• Design inspiration from the original Pokédex device
• Thanks to the Next.js and React communities for amazing tools and resources

🔍 SEO Keywords

pokemon, pokedex, nextjs, react, typescript, web application, pokemon database, interactive pokedex, pokemon search, pokemon stats, pokemon info, pokemon guide, pokemon web app, modern pokedex

📫 Contact

Ravindra - @ravindraogg

Project Link: https://github.com/ravindraogg/Pokedex-WebApp