Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ravindraogg/pokedex-webapp

A modern, interactive Pokédex web application built with Next.js, TypeScript, and Framer Motion. Features real-time search, authentic Pokédex design, and comprehensive Pokémon information. For mobile users: View in "Desktop site" mode for the best experience! 🔴 ⚡
https://github.com/ravindraogg/pokedex-webapp

animation framer-motion javascript nextjs pokedex pokemon pokemon-api react-web-development responsive-design tailwindcss typescript webapp

Last synced: 6 days ago
JSON representation

Host: GitHub
URL: https://github.com/ravindraogg/pokedex-webapp
Owner: ravindraogg
License: mit
Created: 2025-01-17T13:12:25.000Z (10 days ago)
Default Branch: main
Last Pushed: 2025-01-17T17:06:46.000Z (10 days ago)
Last Synced: 2025-01-17T18:26:51.636Z (10 days ago)
Topics: animation, framer-motion, javascript, nextjs, pokedex, pokemon, pokemon-api, react-web-development, responsive-design, tailwindcss, typescript, webapp
Language: TypeScript
Homepage: https://pokedex-webapp-ravindra.vercel.app/
Size: 58.1 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Pokédex Web Application 🔴 ⚡

[![Next.js](https://img.shields.io/badge/Next.js-13.5-black)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.2.2-blue)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.0-38B2AC)](https://tailwindcss.com/)
[![Framer Motion](https://img.shields.io/badge/Framer_Motion-10.16.4-ff69b4)](https://www.framer.com/motion/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

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.

![Pokédex Preview](https://github.com/user-attachments/assets/ae432daa-9912-4001-945d-dc40584a37fc)

## ✨ 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:
```bash
git clone https://github.com/ravindraogg/Pokedex-WebApp.git
```

2. Navigate to the project directory:
```bash
cd Pokedex-WebApp
```

3. Install dependencies:
```bash
npm install
# or
yarn install
```

4. Start the development server:
```bash
npm run dev
# or
yarn dev
```

5. Open [http://localhost:3000](http://localhost:3000) in your browser

## 🛠️ Tech Stack

- **Framework**: [Next.js 13.5](https://nextjs.org/)
- **Language**: [TypeScript](https://www.typescriptlang.org/)
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
- **Animations**: [Framer Motion](https://www.framer.com/motion/)
- **Icons**: [Lucide React](https://lucide.dev/)
- **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](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](https://github.com/ravindraogg)

Project Link: [https://github.com/ravindraogg/Pokedex-WebApp](https://github.com/ravindraogg/Pokedex-WebApp)