# Les 13 — Lesopdracht
## Pokédex opzetten + eerste deploy naar Vercel

**Vak:** AI-Assisted Development
**Opleiding:** NOVI Hogeschool Utrecht
**Duur:** 30 min in-class
**Status:** Tijdens de les afronden — daarna huiswerk uitbreiden

---

## Doel

Aan het einde van deze opdracht heb je een **werkende Pokédex** op `pokedex-{jouwnaam}.vercel.app`, gebouwd met Cursor Composer, gepushed naar GitHub, en automatisch gedeployed via Vercel.

---

## Vereisten

- Node 20+, pnpm, git
- **Cursor** geïnstalleerd (cursor.com) — Pro account is fijn maar niet verplicht voor lesopdracht
- **GitHub** account
- **Vercel** account (signup met GitHub kan)

---

## Stap 1 — Nieuwe Next.js app

```bash
pnpm create next-app@latest pokedex \
  --typescript --tailwind --app --no-src-dir --import-alias "@/*"
cd pokedex
```

Open in Cursor:

```bash
cursor .
```

---

## Stap 2 — Eerste feature met Composer

Open Composer: `Cmd+I` (Mac) of `Ctrl+I` (Win/Linux).

**Prompt:**

> Bouw een Pokédex-startpagina op `app/page.tsx`. Haal de eerste 151 Pokémon van PokéAPI (`https://pokeapi.co/api/v2/pokemon?limit=151`) als Server Component. Toon ze in een grid van cards (Tailwind, ~4 per rij op desktop). Elke card heeft: naam (capitalized), pokeapi sprite (`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{id}.png`), en pokemon nummer. Make sure cards have hover effect. Gebruik `next/image` voor de sprites.

Accepteer de diffs. Run lokaal:

```bash
pnpm dev
```

Open http://localhost:3000 — Pokémon-grid zichtbaar.

> **Tip:** als sprites niet laden, voeg PokéAPI's domain toe aan `next.config.ts` (Composer kan dit voor je doen — vraag het hem).

---

## Stap 3 — Detail-pagina (optioneel als tijd)

**Composer prompt:**

> Voeg detail-pagina toe op `app/pokemon/[name]/page.tsx`. Toon: grote sprite, naam, types als chips (met type-kleur), stats (HP, attack, defense, etc) als progress bars, en height + weight. Link de cards op de homepage naar `/pokemon/{name}`.

Test in browser.

---

## Stap 4 — GitHub repo

Maak een nieuwe repo op GitHub:
- Naam: `pokedex`
- Public
- Geen README/license (we hebben al bestanden)

Lokaal:

```bash
git init
git add .
git commit -m "Initial Pokédex with Cursor Composer"
git branch -M main
git remote add origin https://github.com/JOUW-USER/pokedex.git
git push -u origin main
```

Check op GitHub: code is daar.

---

## Stap 5 — Vercel verbinden

1. Ga naar https://vercel.com — login met GitHub
2. **Add New → Project**
3. Kies je `pokedex` repo
4. Vercel detecteert Next.js — laat alle defaults staan
5. Klik **Deploy**

Wacht ~60-90 seconden. Vercel toont:

```
🎉 Your project has been deployed
https://pokedex-{jouwnaam}.vercel.app
```

Klik de URL. Werkt? Klaar.

---

## Stap 6 — Test een tweede deploy

Wijzig de titel van de homepage (kun je via Composer):

> Verander de h1 van "Pokédex" naar "Mijn Pokédex".

Push:

```bash
git add .
git commit -m "Custom title"
git push
```

Check Vercel dashboard — nieuwe deploy verschijnt direct. ~30s later: live.

---

## Eisen

- [ ] Repo `pokedex` op GitHub, public
- [ ] Minimaal 1 feature toegevoegd met Composer
- [ ] App werkt lokaal (`pnpm dev`)
- [ ] Vercel productie URL werkt
- [ ] Tweede push triggert automatische deploy
- [ ] Geen errors in Vercel build logs

---

## Tijdsindeling (30 min)

| Stap | Tijd |
|------|------|
| 1 — Next.js setup | 3 min |
| 2 — Composer eerste feature | 10 min |
| 3 — Detail-pagina (optioneel) | 5 min |
| 4 — GitHub repo + push | 5 min |
| 5 — Vercel deploy | 5 min |
| 6 — Tweede deploy test | 2 min |

---

## Veelvoorkomende problemen

| Symptoom | Oplossing |
|----------|-----------|
| `next/image` klaagt over PokéAPI domein | Voeg `images.remotePatterns` toe in `next.config.ts` (vraag Composer) |
| `pnpm: command not found` | Installeer: `npm install -g pnpm` |
| Vercel build error: TS-error | Composer: "fix de TypeScript build error" |
| Cursor Composer niet zichtbaar | Cmd+I — als niets gebeurt, herstart Cursor |
| Push naar GitHub: permission denied | Setup SSH key of gebruik HTTPS met PAT |
| Vercel deploy mislukt | Check build logs in dashboard — meestal env-var of dep-issue |

---

## Klaar? Verder met huiswerk

Het huiswerk bouwt voort op deze setup:

- Feature branch met **Background Agent**
- GitHub Actions CI workflow
- Branch protection op `main`
- `DEPLOY.md` met reflectie over Composer vs Background

Zie `Les13-Huiswerk.md` of `Les13-Huiswerk.pdf`.

---

## Tips

- **Lees Vercel build logs** als iets faalt — meestal staat de oplossing er letterlijk in
- **Push klein en vaak** — kleinere commits = makkelijker rollback
- **Composer is voor pair programming** — accepteer per file, niet blind alles
- **Sla `pokedex` url op** — die heb je nog nodig voor huiswerk