There are 1,025 Pokémon, each with its own entry, and PokéAPI isn't designed for requesting everything at once. The challenge was making it fast to move around without requesting more than needed.
Request only the region you're looking at
You pick a region, from Kanto to Paldea. The list of names is requested once and TanStack Query keeps it for an hour; the grid only shows the chosen region. Search filters that list in the browser, so results appear as you type.
The type filter works the same way: the first time it asks the API, and the answer is kept for 24 hours, because types don't change.
The entry is requested before the click
Each entry is a separate request, so I start fetching it when you hover over the card. When you click, it has usually arrived, and it stays cached for half an hour.
Small image first, large one after
The SpriteImg component shows the small sprite first and swaps it for the official artwork once it loads. If that doesn't exist it tries the HOME one, and if nothing loads it shows a placeholder. Whoever uses it just passes an id.
All in Spanish, without extra requests
PokéAPI returns many names only in English, so I added my own tables with about 600 moves and the abilities, plus a type table to work out weaknesses without another request.
Favourites without a server or login
Favourites live in localStorage and are saved when the browser is idle, with requestIdleCallback, so they don't slow the interface. Zustand handles search, type and region. I skipped login on purpose: for some favourites it only added maintenance.
What I learned: deciding what to request and when
The speed didn't come from any trick, but from requesting the list once, the entry before the click and the small image before the large one.