https://github.com/moneydash/react-pokedex
Pokédex
https://github.com/moneydash/react-pokedex
Last synced: 8 months ago
JSON representation
Pokédex
- Host: GitHub
- URL: https://github.com/moneydash/react-pokedex
- Owner: Moneydash
- Created: 2025-09-23T21:33:45.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-09-23T21:52:25.000Z (9 months ago)
- Last Synced: 2025-09-23T23:29:55.075Z (9 months ago)
- Language: TypeScript
- Homepage: https://react-pokedex-sand-kappa.vercel.app
- Size: 53.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pokédex - React Challenge
A modern, feature-rich Pokédex application built with React, TypeScript, and Vite. This application allows users to explore and discover Pokémon with advanced filtering, sorting, and search capabilities.
## 🚀 Features
- **Pokémon Data Display**: Browse through 1,025+ Pokémon with detailed information
- **Advanced Search**: Search by Pokémon name or ID with debounced input
- **Type Filtering**: Filter Pokémon by their types (Fire, Water, Grass, etc.)
- **Sorting**: Sort by ID, name, height, weight, HP, attack, and defense stats
- **Favorites System**: Save your favorite Pokémon with persistent storage
- **Dark/Light Theme**: Toggle between light and dark themes
- **Responsive Design**: Mobile-friendly interface with Tailwind CSS
- **Data Caching**: Efficient data fetching with TanStack React Query
- **Pagination**: Navigate through large datasets with customizable page sizes
- **Error Handling**: Robust error handling with user-friendly notifications
## 🛠️ Tech Stack
- **Frontend Framework**: React 19.1.1
- **Language**: TypeScript 5.8.3
- **Build Tool**: Vite 7.1.7
- **Styling**: Tailwind CSS 4.1.13
- **State Management**: TanStack React Query 5.90.2
- **Icons**: Lucide React 0.544.0
- **Notifications**: Sonner 2.0.7
- **Theme**: next-themes 0.4.6
## 📦 Dependencies
### Core Dependencies
- `@tanstack/react-query`: Data fetching and caching
- `@tanstack/react-table`: Table functionality (available but not used in current implementation)
- `lucide-react`: Icon library
- `sonner`: Toast notifications
- `next-themes`: Theme management
- `tailwindcss`: Utility-first CSS framework
- `clsx` & `tailwind-merge`: CSS class utilities
### Development Dependencies
- `@vitejs/plugin-react-swc`: Fast Refresh with SWC
- `typescript`: Type checking
- `eslint`: Code linting
- `tw-animate-css`: Tailwind animations
## 🚀 Getting Started
### Prerequisites
- Node.js (version 18 or higher)
- npm or yarn package manager
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/Moneydash/react-pokedex.git
cd react-pokedex
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
```
3. **Start the development server**
```bash
npm run dev
# or
yarn dev
```
4. **Open your browser**
Navigate to `http://localhost:5173` to view the application
### Available Scripts
- `npm run dev` - Start development server with hot reload
- `npm run build` - Build the application for production
- `npm run preview` - Preview the production build locally
- `npm run lint` - Run ESLint to check for code issues
## 🏗️ Project Structure
```
src/
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (table, etc.)
│ ├── badge.tsx # Badge component for Pokémon types
│ ├── loader.tsx # Loading spinner component
│ ├── pagination.tsx # Pagination controls
│ ├── search.tsx # Search input component
│ ├── sort.tsx # Sorting icon component
│ ├── statbar.tsx # Stat bar component
│ ├── tableRow.tsx # Table row component
│ ├── themetoggle.tsx # Theme toggle component
│ └── typefilter.tsx # Type filter dropdown
├── hooks/ # Custom React hooks
│ └── useDebounce.ts # Debounce hook for search
├── types/ # TypeScript type definitions
│ └── interface.pokemon.ts
├── lib/ # Utility functions
│ └── utils.ts # CSS class utilities
├── App.tsx # Main application component
├── main.tsx # Application entry point
└── index.css # Global styles and theme variables
```
## 🎨 Theme System
The application supports both light and dark themes using CSS custom properties and Tailwind CSS. Theme switching is handled by the `ThemeToggle` component and persists across sessions.
### Theme Variables
- Background colors
- Text colors
- Border colors
- Card colors
- Accent colors
## 🔍 API Integration
The application fetches Pokémon data from the [PokéAPI](https://pokeapi.co/), a free RESTful API for Pokémon data.
### Data Flow
1. Initial fetch of Pokémon list (limited to 1,025 Pokémon)
2. Individual Pokémon details fetched for each entry
3. Data cached using TanStack React Query for 5 minutes
4. Error handling with user-friendly notifications
## 🎯 Key Features Implementation
### Search Functionality
- Debounced search input (500ms delay)
- Search by name or ID
- Real-time filtering
### Favorites System
- Click star icon to add/remove favorites
- Persistent storage using localStorage
- Filter to show only favorites
### Sorting
- Click column headers to sort
- Ascending/descending order
- Visual indicators for current sort
### Pagination
- Configurable items per page (10, 20, 50, 100)
- Page navigation controls
- Results count display
## 🚀 Performance Optimizations
- **React Query Caching**: Data is cached for 5 minutes to reduce API calls
- **Debounced Search**: Prevents excessive API calls during typing
- **Memoized Filtering**: Expensive filtering operations are memoized
- **Lazy Loading**: Components are loaded as needed
- **Optimized Images**: Pokémon sprites are optimized for web
## 🐛 Error Handling
- Network error handling with user notifications
- Graceful fallbacks for missing data
- Error boundaries for component errors
- Loading states for better UX
## 🔧 Development
### Code Quality
- TypeScript for type safety
- ESLint for code linting
- Prettier for code formatting
- React hooks for state management
### Best Practices
- Component composition
- Custom hooks for reusable logic
- Proper error boundaries
- Accessibility considerations
## 📱 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request
## 📄 License
This project is licensed under the MIT License.
## 🙏 Acknowledgments
- [PokéAPI](https://pokeapi.co/) for providing the Pokémon data
- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework
- [TanStack](https://tanstack.com/) for the excellent React Query library
- [Lucide](https://lucide.dev/) for the beautiful icon set