fix: update lessons

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

@@ -0,0 +1,186 @@
+# 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
+
+```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 `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