Project 3: The Vibe Pokedex

Build a “Vibe Pokedex” that fetches live data.

By the end of this guide, you will have a working React component that takes user input, fetches data from the PokeAPI, and displays it in a beautiful glassmorphism card.

Prerequisites:

Basic React knowledge (useState, useEffect)
No API Key required (Open API)

Overview

Static pages are boring. “Vibe Coding” means apps that feel alive. To do that, we need to talk to the outside world (APIs).

We will build a Pokedex Card:

Input: User types “Pikachu”.
Fetch: App calls pokeapi.co.
Render: App shows the sprite and stats.

1. The Blueprint (The Data Model)

Before writing the fetch, we define what we expect to get back. This is the “Docs as Source Code” philosophy.


// The Shape of a Pokemon
interface Pokemon {
  name: string;
  sprites: {
    front_default: string; // The image URL
  };
  types: {
    type: {
      name: string; // e.g., "electric"
    }
  }[];
}

2. The Implementation

Step 1: The Fetch Logic

We use two patterns here:

Index Fetch: Load the list of all Pokemon names when the app starts.
Detail Fetch: Get the specific data when the user selects one.


// 1. Get the Index (All Names)
useEffect(() => {
  fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
    .then(res => res.json())
    .then(data => setAllNames(data.results.map(p => p.name)));
}, []);
 
// 2. The Filter (Autocomplete)
const suggestions = allNames.filter(name => 
  name.startsWith(query.toLowerCase())
).slice(0, 5); // Just show top 5

Step 2: The View (Glassmorphism)

We will wrap the data in a nice card.

Design: Dark mode, rounded corners, subtle border.
Visuals: The front_default sprite is the star of the show.

Step 3: Handling Errors

What if they type “Agumon”?

The Trap: If fetch fails (404), it doesn’t always throw an error in JS. We must check res.ok.


if (!res.ok) {
  setError("Pokemon not found!");
  return;
}

3. Interactive Result

Try it yourself! Type a name like charizard or mew and hit Enter.

Why This Worked

Strict Typing: Even though this is JS, thinking about the Pokemon interface helped us know data.sprites.front_default existed.
State Management: We handled loading, error, and success states separately. This is the difference between a prototype and an app.
Visuals: We used CSS (Tailwind) to make the data look good. Raw JSON is ugly; Cards are “Vibe”.

Next Steps

Congratulations! You’ve built your first dynamic Vibe App.

Try making the card change color based on the Pokemon type.
Try adding a “Shiny” toggle button.