Case study 12 / 18 · Websites & apps
Pokemon search app (v2)
An interactive Pokédex for searching Pokémon, filtering by type, and exploring statistics and detail views. Live PokéAPI data is presented through a custom component system with a 3D Pokéball.
Case study
A frontend-only Pokédex that pulls live data from PokéAPI. Reusable interface components, Pokédex-specific components, design tokens, audio and a Three.js renderer are kept as separate parts.
The problem
Turn a live data source into an interface for exploring: quick search, discovery by type, and readable comparisons of individual Pokémon.
What was built
- Search, type filters, stats and an interactive detail panel.
- Reusable controls plus feature-specific cards, type badges and stat bars.
- A 3D Pokéball rendered with Three.js, and an audio module.
Key decisions
- This version stays frontend-only, with no backend or sign-in.
- Design tokens and generic interface pieces are kept apart from Pokédex-specific components.
- Data comes live from PokéAPI rather than from a bundled dataset.
Where it stands
Built as a frontend app. It needs a network connection, since all Pokémon data is fetched live.
How it was built
Frontend
- React
- Vite
- Three.js — 3D Pokéballs that follow the pointer
- Lucide React — Icons
Integrations
- PokéAPI — Live Pokémon data