https://github.com/loneexpert/pokemon-explorer

Pokémon Explorer is a modern, responsive web app built with Next.js and Tailwind CSS. It lets users search, browse, and explore detailed stats, abilities, and moves of Pokémons using data from the PokeAPI.
https://github.com/loneexpert/pokemon-explorer

next nextjs react-router tailwind tailwindcss

Last synced: 2 months ago
JSON representation

Pokémon Explorer is a modern, responsive web app built with Next.js and Tailwind CSS. It lets users search, browse, and explore detailed stats, abilities, and moves of Pokémons using data from the PokeAPI.

• Host: GitHub
• URL: https://github.com/loneexpert/pokemon-explorer
• Owner: LoneExpert
• Created: 2025-07-09T08:00:09.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-07-09T08:53:45.000Z (12 months ago)
• Last Synced: 2025-07-09T09:28:47.650Z (12 months ago)
• Topics: next, nextjs, react-router, tailwind, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 1.6 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🧭 Pokémon Explorer

Welcome to **Pokémon Explorer** – a sleek, responsive web app built with **Next.js** and styled using **Tailwind CSS**. This project allows users to browse, search, and view detailed information about their favorite Pokémons using data from the **PokeAPI**.

---

## 🚀 Features

- 🔍 **Search & Explore:** Browse through a list of Pokémons and filter by name using a live search bar.

- 📄 **Detailed View:** Click any Pokémon card to view its image, abilities, types, base stats, and moves.

- 🌐 **Dynamic Routing:** Uses Next.js dynamic routes (`/pokemon/[id]`) to navigate to each Pokémon’s page.

- ⚡ **Performance Optimized:** Built with **Static Site Generation (SSG)** for lightning-fast performance.

- 💅 **Responsive UI:** Clean and modern UI that adapts beautifully to desktop and mobile devices.

---

## 🛠️ Tech Stack

- **Framework:** Next.js (App Router)

- **Styling:** Tailwind CSS

- **API:** [PokeAPI](https://pokeapi.co)

---

## 📁 Project Structure

├── public/

│   └── Screenshot_1.png         // Screenshot for README

│   └── Screenshot_2.png         // Screenshot for README

│   └── Screenshot_3.png         // Screenshot for README

│   └── pokemon.ico              // App icon

src/

├── app/

│   ├── page.jsx               // Homepage with search + Pokémon list

│   └── pokemon/

│       └── [id]/page.jsx      // Pokémon detail page

├── Components/

│   └── PokemonCard.jsx        // Reusable card component

---

## 📸 Screenshot

![Pokemon Explorer HomePage Screenshot](./public/Screenshot_1.png)

![Pokemon Explorer PokemonCard Screenshot](./public/Screenshot_2.png)

![Pokemon Explorer PokemonCard Detail Screenshot](./public/Screenshot_3.png)

---

## 🧑‍💻 Getting Started

### 📦 Clone & Install

```bash

git clone https://github.com/LoneExpert/pokemon-explorer.git

cd pokemon-explorer

npm install

npm run dev

```

## 👨‍🎓 Author

Made with 💙 by Aryan Shubbu