PokéTrove

PokéTrove is a modern and responsive web application built using React, Tailwind CSS, and Vite. This app lets users browse, search, and explore Pokémon data from the PokéAPI with a smooth and engaging user experience.

Visit the live site here: https://ptrove.fyz.my.id

Features

• ⚡ Fast & modern UI powered by Vite + Tailwind CSS
• 🌙 Dark & light mode with persistence via localStorage
• 🔍 Real-time search and dynamic Pokémon filtering
• 📄 Pagination with smooth navigation
• 📱 Responsive view: Grid/List toggle for all screen sizes
• 🧠 Reusable components & hooks for cleaner structure
• ⬆️ Animated scroll-to-top button
• 🔒 State management via Context API

Technologies Used

• React
• Tailwind CSS
• Vite
• PokéAPI
• Lucide Icons
• PostCSS

Project Structure

poketrove/ 
├── public/             # Static assets (logo, loading gif, etc.) 
├── src/ 
│ ├── assets/           # Fonts and image assets 
│ │ └── fonts/ 
│ ├── components/       # Reusable UI components 
│ │ ├── common/         # Generic components (e.g., Container, ScrollToTopButton) 
│ │ ├── home/           # Home page components (Header, Grid, Pagination, Toggle) 
│ │ └── pokemon/        # Detail page & card components 
│ ├── context/          # Global state management (e.g., filters, theme) 
│ ├── hooks/            # Custom hooks (e.g., usePokemons) 
│ ├── pages/            # Page components (Home, Detail) 
│ ├── routes/           # App routing (React Router) 
│ ├── styles/           # Global Tailwind config & custom styles 
│ ├── theme/            # Theme provider (dark/light mode logic) 
│ └── utils/            # Utility functions (e.g., sort logic) 
├── index.html          # HTML template 
├── package.json        # Project dependencies and scripts 
├── tailwind.config.js  # Tailwind CSS configuration 
├── vite.config.js      # Vite build configuration

Getting Started

Prerequisites

• Node.js ≥ 18
• npm ≥ 9

Installation

git clone https://github.com/fikriandrrhm19/poketrove.git
cd poketrove
npm install

Start Development Server

npm run dev

Open http://localhost:5173 in your browser to see the app and explore locally.

Build for Production

npm run build

Screenshots

Changelog

See the full changelog in CHANGELOG.md

License

This project is licensed under the MIT License.

Credits

• Pokémon data provided by PokéAPI
• Fonts: DM Sans
• Icons: Lucide Icons

© 2025 Fikri Andra Irham All rights reserved.