← Back to portfolio

Case study

Pokémon Search App

Live API search with clear loading, results, and empty states — built to practice real frontend data handling.

ReactJavaScriptFullstack

60-second pitch

I built a search UI on top of a public API and focused on the parts recruiters notice: feedback while loading, useful empty states, and readable results.

About the project

During the Capace internship I needed a project that proved I could work with asynchronous data, not only static layouts. Users search Pokémon by name; the app fetches from an external API and renders cards with consistent spacing and hierarchy.

Outcome

Deployed demo on Netlify that I can walk through in under a minute: search → loading → results → no-results state.

What I focused on

  • Debounced-style search interaction against live API data
  • Explicit loading and empty-state messaging
  • Responsive result grid

What I learned

  • Structuring async UI states (loading, success, empty, error)
  • Keeping fetch logic separate from presentation components
  • Designing result cards for quick scanning

Tech stack

ReactJavaScriptREST APICSS

Project screenshots

Previews from the live deploy. If a preview fails to load, use the live link below.

Pokémon Search App — Desktop landing view
Desktop landing view
Pokémon Search App — Mobile view
Mobile view
Pokémon Search App — Project overview
Project overview