Back to Blog

Building Pokédex as a fast catalog exploration app

•Emmanouil Athanasopoulos•3 min read•500 words
React NativeAPIAnimationCatalog

The Motivation Behind the Project

Pokédex is a React Native exploration app built around browsing a large catalog without making the user fight the interface. The goal was to make the experience feel fluid, visual, and easy to return to when looking for a specific Pokémon or type.

Core Features and Design Goals

  • Infinite scroll: a catalog flow that keeps discovery moving without forcing the user through pages.
  • Shiny mode toggle: a simple switch that makes the browsing experience more playful.
  • Type and region filters: quick ways to narrow the catalog when the list gets large.
  • Evolution chains and animated stats: a detail view that gives the item more context than a plain card can.

Technical Implementation

  • Used React Query with infinite queries to implement paginated fetching from PokeAPI, loading Pokémon in batches while maintaining a seamless scroll experience with no visible loading gaps.
  • Applied dynamic type-based theming where every detail screen's color palette adapts to the Pokémon's primary type, using a mapping of 18 type colors applied to backgrounds, stat bars, and evolution chain connectors.
  • Built animated stat bars using React Native Reanimated shared value transitions, where each stat fills proportionally on mount with staggered timing to create a polished reveal effect.

Challenges I Faced Along the Way

The main challenge was performance with infinite scroll. PokeAPI returns minimal data per list request, so each Pokémon detail requires a separate API call. With 1,000+ Pokémon, this creates a waterfall of requests. I solved this with React Query's parallel prefetching — when a batch of list items loads, the app immediately fires detail queries for the next batch in the background, so data is ready before the user scrolls to it. The other challenge was the type-based theming system: 18 types means 18 colour palettes, and ensuring readable contrast across all combinations (especially dual-type Pokémon) required building a contrast checker that adjusts text colour based on the background luminance.

The Technology Stack

Built with Expo, React Native, and TypeScript. Uses React Query for paginated API fetching with aggressive caching, React Native Reanimated for stat and transition animations, and a custom type-color mapping system that drives the entire UI theme per entity.

What I Would Do Differently Next Time

I would have benefited from caching the full Pokémon dataset locally after the first session. The current approach refetches on every app launch, which wastes bandwidth. A better pattern would be an offline-first cache with background refresh — similar to what I later built for Vehiclo. I also underestimated how much time I would spend on the evolution chain visualisation; rendering branching evolution paths (like Eevee's 8 evolutions) required a custom layout algorithm that accounts for variable chain depths.

Final Reflections

It is a strong example of how a simple concept becomes much more useful once the catalog and detail flow are tuned carefully. The project also reinforced my belief that theming should be driven by data — letting the content determine the visual presentation creates a more cohesive and engaging experience.