{"id":31790852,"url":"https://github.com/moneydash/react-pokedex","last_synced_at":"2025-10-10T16:30:18.901Z","repository":{"id":316317364,"uuid":"1062881942","full_name":"Moneydash/react-pokedex","owner":"Moneydash","description":"Pokédex","archived":false,"fork":false,"pushed_at":"2025-09-23T21:52:25.000Z","size":55,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-23T23:29:55.075Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-pokedex-sand-kappa.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Moneydash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-23T21:33:45.000Z","updated_at":"2025-09-23T21:52:29.000Z","dependencies_parsed_at":"2025-09-28T11:00:33.961Z","dependency_job_id":null,"html_url":"https://github.com/Moneydash/react-pokedex","commit_stats":null,"previous_names":["moneydash/react-pokedex"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Moneydash/react-pokedex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moneydash%2Freact-pokedex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moneydash%2Freact-pokedex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moneydash%2Freact-pokedex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moneydash%2Freact-pokedex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Moneydash","download_url":"https://codeload.github.com/Moneydash/react-pokedex/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Moneydash%2Freact-pokedex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004706,"owners_count":26083750,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-10T16:30:07.683Z","updated_at":"2025-10-10T16:30:18.892Z","avatar_url":"https://github.com/Moneydash.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pokédex - React Challenge\n\nA 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.\n\n## 🚀 Features\n\n- **Pokémon Data Display**: Browse through 1,025+ Pokémon with detailed information\n- **Advanced Search**: Search by Pokémon name or ID with debounced input\n- **Type Filtering**: Filter Pokémon by their types (Fire, Water, Grass, etc.)\n- **Sorting**: Sort by ID, name, height, weight, HP, attack, and defense stats\n- **Favorites System**: Save your favorite Pokémon with persistent storage\n- **Dark/Light Theme**: Toggle between light and dark themes\n- **Responsive Design**: Mobile-friendly interface with Tailwind CSS\n- **Data Caching**: Efficient data fetching with TanStack React Query\n- **Pagination**: Navigate through large datasets with customizable page sizes\n- **Error Handling**: Robust error handling with user-friendly notifications\n\n## 🛠️ Tech Stack\n\n- **Frontend Framework**: React 19.1.1\n- **Language**: TypeScript 5.8.3\n- **Build Tool**: Vite 7.1.7\n- **Styling**: Tailwind CSS 4.1.13\n- **State Management**: TanStack React Query 5.90.2\n- **Icons**: Lucide React 0.544.0\n- **Notifications**: Sonner 2.0.7\n- **Theme**: next-themes 0.4.6\n\n## 📦 Dependencies\n\n### Core Dependencies\n- `@tanstack/react-query`: Data fetching and caching\n- `@tanstack/react-table`: Table functionality (available but not used in current implementation)\n- `lucide-react`: Icon library\n- `sonner`: Toast notifications\n- `next-themes`: Theme management\n- `tailwindcss`: Utility-first CSS framework\n- `clsx` \u0026 `tailwind-merge`: CSS class utilities\n\n### Development Dependencies\n- `@vitejs/plugin-react-swc`: Fast Refresh with SWC\n- `typescript`: Type checking\n- `eslint`: Code linting\n- `tw-animate-css`: Tailwind animations\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (version 18 or higher)\n- npm or yarn package manager\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/Moneydash/react-pokedex.git\n   cd react-pokedex\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n4. **Open your browser**\n   Navigate to `http://localhost:5173` to view the application\n\n### Available Scripts\n\n- `npm run dev` - Start development server with hot reload\n- `npm run build` - Build the application for production\n- `npm run preview` - Preview the production build locally\n- `npm run lint` - Run ESLint to check for code issues\n\n## 🏗️ Project Structure\n\n```\nsrc/\n├── components/          # Reusable UI components\n│   ├── ui/             # Base UI components (table, etc.)\n│   ├── badge.tsx       # Badge component for Pokémon types\n│   ├── loader.tsx      # Loading spinner component\n│   ├── pagination.tsx  # Pagination controls\n│   ├── search.tsx      # Search input component\n│   ├── sort.tsx        # Sorting icon component\n│   ├── statbar.tsx     # Stat bar component\n│   ├── tableRow.tsx    # Table row component\n│   ├── themetoggle.tsx # Theme toggle component\n│   └── typefilter.tsx  # Type filter dropdown\n├── hooks/              # Custom React hooks\n│   └── useDebounce.ts  # Debounce hook for search\n├── types/              # TypeScript type definitions\n│   └── interface.pokemon.ts\n├── lib/                # Utility functions\n│   └── utils.ts        # CSS class utilities\n├── App.tsx             # Main application component\n├── main.tsx            # Application entry point\n└── index.css           # Global styles and theme variables\n```\n\n## 🎨 Theme System\n\nThe 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.\n\n### Theme Variables\n- Background colors\n- Text colors\n- Border colors\n- Card colors\n- Accent colors\n\n## 🔍 API Integration\n\nThe application fetches Pokémon data from the [PokéAPI](https://pokeapi.co/), a free RESTful API for Pokémon data.\n\n### Data Flow\n1. Initial fetch of Pokémon list (limited to 1,025 Pokémon)\n2. Individual Pokémon details fetched for each entry\n3. Data cached using TanStack React Query for 5 minutes\n4. Error handling with user-friendly notifications\n\n## 🎯 Key Features Implementation\n\n### Search Functionality\n- Debounced search input (500ms delay)\n- Search by name or ID\n- Real-time filtering\n\n### Favorites System\n- Click star icon to add/remove favorites\n- Persistent storage using localStorage\n- Filter to show only favorites\n\n### Sorting\n- Click column headers to sort\n- Ascending/descending order\n- Visual indicators for current sort\n\n### Pagination\n- Configurable items per page (10, 20, 50, 100)\n- Page navigation controls\n- Results count display\n\n## 🚀 Performance Optimizations\n\n- **React Query Caching**: Data is cached for 5 minutes to reduce API calls\n- **Debounced Search**: Prevents excessive API calls during typing\n- **Memoized Filtering**: Expensive filtering operations are memoized\n- **Lazy Loading**: Components are loaded as needed\n- **Optimized Images**: Pokémon sprites are optimized for web\n\n## 🐛 Error Handling\n\n- Network error handling with user notifications\n- Graceful fallbacks for missing data\n- Error boundaries for component errors\n- Loading states for better UX\n\n## 🔧 Development\n\n### Code Quality\n- TypeScript for type safety\n- ESLint for code linting\n- Prettier for code formatting\n- React hooks for state management\n\n### Best Practices\n- Component composition\n- Custom hooks for reusable logic\n- Proper error boundaries\n- Accessibility considerations\n\n## 📱 Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Run tests and linting\n5. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the MIT License.\n\n## 🙏 Acknowledgments\n\n- [PokéAPI](https://pokeapi.co/) for providing the Pokémon data\n- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework\n- [TanStack](https://tanstack.com/) for the excellent React Query library\n- [Lucide](https://lucide.dev/) for the beautiful icon set\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoneydash%2Freact-pokedex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoneydash%2Freact-pokedex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoneydash%2Freact-pokedex/lists"}