Overview:

The Pokédex App is a beautifully designed and feature-packed web application that allows users to explore the expansive world of Pokémon. Built with a modern tech stack including Next.js, Tailwind CSS, and React Query, this app offers a smooth user experience and a visually engaging interface. Whether you’re a seasoned Pokémon trainer or just diving into the universe, this app serves as an extensive database for all Pokémon and items, making it an essential tool for any fan.

What sets this Pokédex apart is its rich set of features that enhance usability and accessibility. From instant searching capabilities to a favorites section that remembers your top Pokémon, the app is optimized for performance and user engagement. The attention to detail in design and functionality transforms what could have been a simple database into an enjoyable and interactive experience.

Features:

• Pokémon List: Displays all Pokémon in a responsive grid format, showcasing 48 Pokémon per page with easy navigation through next/previous controls.
• Instant Search: Quickly filter Pokémon by name with a 200 ms debounce, making it faster to find your favorites without delay.
• Items List: Similar design to the Pokémon list, allowing users to browse through all game items with a search bar to filter by name.
• Favorites Functionality: Easily toggle your favorite Pokémon by clicking the ★ icon, with all selections stored in localStorage for easy access.
• Animated Transitions: Enjoy smooth grid reflows with framer-motion animations that enhance the visual experience and keep the interface lively.
• Accessible UI: The app includes keyboard event handlers and high-contrast text to ensure it can be navigated by all users, enhancing accessibility.
• Offline-Friendly: Core Pokémon and item data is cached for offline access, allowing users to browse without a continuous internet connection.
• Optional Self-Hosted API: For those who prefer greater control, an optional .NET backend can be set up to replicate the PokeAPI schema, while still allowing access to the public API.