novi-lessons/Les15-Cursor-Vercel-Deploy/Les15-Lesopdracht.md

Les 15 — 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

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

Open in Cursor:

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:

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:

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:

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 Les15-Huiswerk.md of Les15-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