Pokédex — Pokémon Explorer
A Pokédex built with React 19, TanStack Query, and React Router — infinite scroll, debounced search, and persistent favorites over the PokéAPI.
- React 19
- TypeScript
- Vite
- TanStack Query
- React Router
- Tailwind CSS
- shadcn/ui
A Pokédex over the public PokéAPI, built to demonstrate real TanStack Query caching patterns: infinite pagination, 300ms debounced search, and favorites that persist across sessions. React 19 (with the React Compiler), React Router 7, and a Tailwind v4 + shadcn/ui interface.
// Problem
The PokéAPI is large and paginated, and naive fetching re-requests the same data every time you revisit a screen or repeat a search. I wanted a Pokédex that stays instant and snappy by leaning on a caching layer rather than re-fetching.
// Approach
Treat the server as the source of truth and let TanStack Query own the cache. Three screens — an infinite-scroll list, a details page, and a favorites page — share query keys so navigating between them hits warm cache instead of the network, with a debounced search so typing doesn't spam requests.
// Architecture
React 19 with the React Compiler, Vite, and React Router 7. TanStack Query v5 drives data: a 60s staleTime gives instant cache hits, useInfiniteQuery derives offsets from PokéAPI's next field, and search shares the ['pokemon', name] key with the details page so searching then opening a Pokémon is a free cache hit. A 300ms debounce hook gates search input; favorites toggle from any card and persist to localStorage via a context provider that keeps the whole app in sync. Styled with Tailwind v4 and shadcn/ui; React Query Devtools wired in for live cache inspection.
// Outcome
A fast, polished Pokédex where revisiting screens and re-searching recent terms is instant — a hands-on demonstration of practical TanStack Query caching, shared query keys, and infinite pagination over a public API.