{"id":28272653,"url":"https://github.com/hoangsonww/the-pokedex-database","last_synced_at":"2025-08-01T13:05:15.206Z","repository":{"id":292256108,"uuid":"980308289","full_name":"hoangsonww/The-Pokedex-Database","owner":"hoangsonww","description":"🐱 An interactive Pokédex app built with Next.js, Tailwind CSS, and React Query for blazing-fast performance and smooth UX. Includes live search, item explorer, and a favorites system powered by local storage.","archived":false,"fork":false,"pushed_at":"2025-05-26T16:41:45.000Z","size":18802,"stargazers_count":20,"open_issues_count":0,"forks_count":16,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-27T14:39:15.918Z","etag":null,"topics":["framer-motion","full-stack","next","nextjs","pokeapi","pokedex","pokemon","pokemon-api","react","shadcn","supabase","tailwindcss","ui","vercel","web","web-app","web-application","web-dev","web-development"],"latest_commit_sha":null,"homepage":"https://pokedex-db.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoangsonww.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-05-08T23:21:13.000Z","updated_at":"2025-05-26T05:24:25.000Z","dependencies_parsed_at":"2025-05-09T06:30:40.282Z","dependency_job_id":null,"html_url":"https://github.com/hoangsonww/The-Pokedex-Database","commit_stats":null,"previous_names":["hoangsonww/the-pokedex-database"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hoangsonww/The-Pokedex-Database","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FThe-Pokedex-Database","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FThe-Pokedex-Database/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FThe-Pokedex-Database/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FThe-Pokedex-Database/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/The-Pokedex-Database/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FThe-Pokedex-Database/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260442706,"owners_count":23009886,"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","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":["framer-motion","full-stack","next","nextjs","pokeapi","pokedex","pokemon","pokemon-api","react","shadcn","supabase","tailwindcss","ui","vercel","web","web-app","web-application","web-dev","web-development"],"created_at":"2025-05-21T00:16:08.017Z","updated_at":"2025-08-01T13:05:15.194Z","avatar_url":"https://github.com/hoangsonww.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pokédex App 🏆✨\n\n_A beautifully designed, feature-rich Pokédex built with Next.js (React), Tailwind CSS, React Query, and PokeAPI 🐱._\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/pokedex-app.png\" alt=\"Pokédex App\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Next.js-000000?style=for-the-badge\u0026logo=next.js\u0026logoColor=white\" alt=\"Next.js\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" alt=\"React\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" alt=\"TypeScript\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white\" alt=\"Tailwind CSS\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React_Query-FF4154?style=for-the-badge\u0026logo=react-query\u0026logoColor=white\" alt=\"React Query\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Framer_Motion-0055FF?style=for-the-badge\u0026logo=framer\u0026logoColor=white\" alt=\"Framer Motion\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Heroicons-0EA5E9?style=for-the-badge\u0026logo=heroicons\u0026logoColor=white\" alt=\"Heroicons\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PokeAPI-FFCB05?style=for-the-badge\u0026logo=pokeapi\u0026logoColor=white\" alt=\"PokeAPI\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E\" alt=\"JavaScript\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"HTML5\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"CSS3\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Node.js-339933?style=for-the-badge\u0026logo=nodedotjs\u0026logoColor=white\" alt=\"Node.js\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/C%23-239120?style=for-the-badge\u0026logo=c\u0026logoColor=white\" alt=\"C#\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/.NET-512BD4?style=for-the-badge\u0026logo=dotnet\u0026logoColor=white\" alt=\".NET\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white\" alt=\"Vercel\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white\" alt=\"React Router\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Redux-764ABC?style=for-the-badge\u0026logo=redux\u0026logoColor=white\" alt=\"Redux\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Docker-2496ED?style=for-the-badge\u0026logo=docker\u0026logoColor=white\" alt=\"Docker\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Shell-4EAA25?style=for-the-badge\u0026logo=gnu-bash\u0026logoColor=white\" alt=\"Shell\" /\u003e\n\u003c/p\u003e\n\n**Live Web App: [https://pokedex-db.vercel.app/](https://pokedex-db.vercel.app/). 🚀** \n\nFeel free to explore the app and its features! \n\n---\n\n## 🚀 Features\n\n- **Pokémon List**  \n  - Displays all Pokémon in a responsive grid (48 per page).  \n  - Client-side pagination with next/previous controls.  \n  - Instant search with 200 ms debounce to filter by name.  \n- **Items List**  \n  - Displays all game items in a similar paginated grid.  \n  - Search bar with debounce for item names.  \n- **Favorites**  \n  - Click the ★ icon on any Pokémon card to toggle favorite.  \n  - Favorites are persisted in `localStorage`.  \n  - Separate “Favorite Pokémon” section that supports search and pagination.  \n- **Animated Transitions**  \n  - `framer-motion` layout animations for smooth grid reflows.  \n- **Accessible UI**  \n  - Keyboard event handlers: Enter to submit, Backspace to delete, letter keys to type.  \n  - Heroicons search icon, focus rings, and high-contrast text.  \n- **Offline-Friendly**  \n  - Core data (all 100 000+ Pokémon \u0026 items) is fetched once and cached via React Query.  \n- **Optional Self-Hosted API**  \n  - Supports running a custom .NET (C#) backend replicating the PokeAPI schema  \n  - Completely optional — you can still use the public PokeAPI without any backend setup.\n\n---\n\n## 🧰 Tech Stack\n\n- **Next.js** (React + file-based routing)  \n- **TypeScript**, **React Query** (`@tanstack/react-query`)  \n- **Tailwind CSS** for utility-first styling  \n- **Framer Motion** for animations  \n- **Heroicons** for SVG icons  \n- **PokeAPI** (public REST API for Pokémon data)  \n- **.NET with C#** (optional backend replication of PokeAPI)\n\n---\n\n## 📦 Installation \u0026 Local Development\n\n1. **Clone the repo**  \n  ```bash\n  git clone git@github.com:hoangsonww/The-Pokedex-Database.git\n  # or use https\n  git clone https://github.com/hoangsonww/The-Pokedex-Database.git\n  # then navigate to the web directory\n  cd The-Pokedex-Database/web\n  ```\n\n2. **Install dependencies**\n\n  ```bash\n  npm install\n  # or\n  yarn install\n  ```\n3. **Run the development server**\n\n  ```bash\n  npm run dev\n  # or\n  yarn dev\n  ```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the app.\n\n---\n\n## ⚙️ Configuration\n\n*No environment variables are required.*\nAll data is fetched directly from the PokeAPI.\n\n---\n\n## 📑 API Reference\n\nThis app consumes the following PokeAPI endpoints:\n\n### Pokémon\n\n| Method | Endpoint                            | Description                            |\n| ------ | ----------------------------------- | -------------------------------------- |\n| GET    | `/pokemon?limit=48\u0026offset=\u003coffset\u003e` | Paginated list of Pokémon              |\n| GET    | `/pokemon?limit=100000\u0026offset=0`    | Full list (for search/favorites cache) |\n\n### Items\n\n| Method | Endpoint                         | Description                         |\n| ------ | -------------------------------- | ----------------------------------- |\n| GET    | `/item?limit=48\u0026offset=\u003coffset\u003e` | Paginated list of items             |\n| GET    | `/item?limit=100000\u0026offset=0`    | Full item list (for search caching) |\n\n*All responses conform to the PokeAPI schema: count, next, previous, results.*\n\n---\n\n## 📂 Folder Structure\n\n```\n/\n├── components/\n│   ├── PokemonCard.tsx\n│   ├── ItemCard.tsx\n│   └── Pagination.tsx\n├── data/\n│   └── models/          # TypeScript interfaces (Pokedex, ItemList)\n├── pages/\n│   └── index.tsx        # Home page (Pokémon, Items, Favorites)\n├── styles/\n│   └── globals.css      # Tailwind base styles\n├── public/              # Favicons, manifest, images\n├── README.md\n├── package.json\n├── tsconfig.json\n└── tailwind.config.js\n```\n\n---\n\n## 🖥️ Optional .NET Backend\n\nIn addition to using the public [PokeAPI](https://pokeapi.co/), this project also includes an **optional** backend built with **C#** and **.NET**. This backend replicates the functionality of PokeAPI, allowing you to self-host the Pokémon data if you prefer full control over the API.\n\n**Key Details:**\n\n- Implements a local Pokémon API with a schema similar to PokeAPI\n- Written in **C#** using **ASP.NET Core**\n- Docker support for easy containerized deployment\n- Optional: you can skip setting up this backend and continue using the public PokeAPI without any issues\n\n**When to use it?**  \n✅ If you want to host your own Pokémon API (e.g., for offline use or custom modifications)  \n✅ If you need full control over the data  \n✅ Otherwise, you can keep using the public PokeAPI — no extra setup required.\n\n**Getting Started**\n\nIf you wish to run the .NET backend:\n\n1. Navigate to the backend directory:\n\n   ```bash\n   cd The-Pokedex-Database/backend\n   ```\n\n2. Build and run the API:\n\n   ```bash\n   dotnet build\n   dotnet run\n   ```\n\n   or with Docker:\n\n   ```bash\n   docker build -t pokedex-backend .\n   docker run -p 5000:5000 pokedex-backend\n   ```\n\n3. The API will be available at `http://localhost:5000` by default.\n\nBe sure to update the frontend to point to your local server if you switch away from the public PokeAPI.\n\n---\n\n## 🤝 Contributing\n\nContributions welcome! Feel free to open issues or submit pull requests.\n\n1. Fork this repository\n2. Create a feature branch (`git checkout -b feature/YourFeature`)\n3. Commit your changes (`git commit -m \"feat: add your feature\"`)\n4. Push to your branch (`git push origin feature/YourFeature`)\n5. Open a Pull Request\n\n---\n\n## 📜 License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fthe-pokedex-database","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Fthe-pokedex-database","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Fthe-pokedex-database/lists"}