fix: add v2 lessons for next class

2026-02-11 13:58:41 +01:00
parent 984f2256dc
commit 35bbc50c06
16 changed files with 5013 additions and 0 deletions
--- a/v2/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
+++ b/v2/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
@@ -0,0 +1,213 @@
+# Les 2 - Lesopdracht: Website uitbreiden met OpenCode
+
+---
+
+## Doel
+
+Maak een nieuwe pagina in je v0 project met de OpenCode Desktop App. Je leert:
+- Werken met de OpenCode Desktop App
+- Plan mode en Build mode gebruiken
+- Wijzigingen deployen via git push
+
+---
+
+## Tijd
+
+**85 minuten** (09:50-10:15 + 10:30-11:30)
+
+☕ Pauze: 10:15-10:30
+
+---
+
+## Stap 1: Project Lokaal Draaien (15 min)
+
+### Clone je repository
+
+**Optie A - Terminal:**
+```bash
+git clone https://github.com/jouw-username/jouw-project.git
+cd jouw-project
+```
+
+**Optie B - GitHub Desktop:**
+1. File → Clone Repository
+2. Selecteer je v0 project
+3. Clone
+
+### Installeer dependencies
+```bash
+npm install
+```
+
+### Start development server
+```bash
+npm run dev
+```
+
+Open http://localhost:3000 - je ziet je website!
+
+**Checkpoint:** ✅ Website draait lokaal
+
+---
+
+## Stap 2: OpenCode Desktop App (10 min)
+
+### Open de Desktop App
+1. Start OpenCode Desktop App
+2. Open je projectfolder (File → Open Folder)
+3. Selecteer je v0 project
+
+### Selecteer gratis AI model
+1. Druk `Ctrl+X M` (eerst Ctrl+X, dan M)
+2. Kies "OpenCode Zen"
+3. Selecteer "Kimi K2.5 Free"
+
+### Start je project (in de ingebouwde terminal)
+```bash
+npm install
+npm run dev
+```
+
+**Checkpoint:** ✅ Desktop App draait + localhost:3000 werkt
+
+---
+
+## Stap 3: Uitbreiden met OpenCode (45 min)
+
+### Fase 1: Analyseer (Plan Mode)
+
+Check dat je in Plan mode zit (📋 icoon).
+
+```
+Analyseer dit project. Hoe werkt de routing?
+Hoe maak ik een nieuwe pagina in Next.js?
+```
+
+### Fase 2: Maak een nieuwe pagina (Build Mode)
+
+Druk `Tab` om naar Build mode (🔨) te gaan.
+
+**💡 BELANGRIJK: Eén prompt per taak!**
+
+Splits je werk op in kleine stappen. Niet alles in één prompt!
+
+**Opdracht: Maak een nieuwe pagina met componenten**
+
+#### Stap 1: Kies je pagina
+Kies één van deze opties:
+- **About** - Over ons pagina
+- **Services** - Diensten pagina
+- **Contact** - Contact pagina
+
+#### Stap 2: Maak de pagina structuur
+**Prompt 1:**
+```
+Maak een nieuwe pagina /about (of /services of /contact) met een basis layout.
+```
+
+#### Stap 3: Voeg componenten toe
+**Prompt 2:**
+```
+Voeg een hero sectie toe aan de /about pagina met titel en beschrijving.
+Gebruik Tailwind CSS voor styling.
+```
+
+**Prompt 3:**
+```
+Voeg een content sectie toe onder de hero (bijv. team cards, diensten lijst, of contact info).
+```
+
+#### Stap 4: Voeg navigatie toe
+**Prompt 4:**
+```
+@app/page.tsx
+Voeg een link toe naar de /about pagina.
+De link moet zichtbaar zijn in de hero of header.
+Gebruik Next.js Link component.
+```
+
+**Checkpoint:** ✅ Nieuwe pagina gemaakt + link op homepage
+
+---
+
+## Stap 4: Deploy naar Vercel (10 min)
+
+### Commit je wijzigingen
+
+**Terminal:**
+```bash
+git add .
+git commit -m "Add testimonials section"
+git push
+```
+
+**Of GitHub Desktop:**
+1. Zie changed files links
+2. Schrijf commit message
+3. Commit to main
+4. Push origin
+
+### Check Vercel
+1. Open je Vercel dashboard
+2. Zie "Building..." status
+3. Na ~1 min: bekijk je live site!
+
+**Checkpoint:** ✅ Wijzigingen live op Vercel
+
+---
+
+## Stap 5: Herhaal! (10 min)
+
+Doe minimaal nog één wijziging en push opnieuw.
+
+Het doel is dat je de volledige workflow meerdere keren doorloopt:
+1. Wijzig met OpenCode
+2. Test lokaal
+3. Commit & push
+4. Bekijk live
+
+---
+
+## Tips
+
+### @ Mentions gebruiken
+```
+@src/components/Hero.tsx
+Maak de heading groter en gebruik een gradient
+```
+
+### Plan mode voor vragen
+```
+📋 Hoe kan ik animaties toevoegen aan mijn cards?
+```
+
+### Build mode voor actie
+```
+🔨 Voeg fade-in animatie toe aan de feature cards
+```
+
+### Stuck?
+1. Wees specifieker in je prompt
+2. Verwijs naar het exacte bestand met @
+3. Bekijk de error in terminal
+4. Vraag een klasgenoot of de docent
+
+---
+
+## Inleveren
+
+Aan het einde van de les:
+- [ ] Website draait lokaal
+- [ ] Nieuwe pagina aangemaakt (bijv. /about)
+- [ ] Link op homepage naar nieuwe pagina
+- [ ] Minimaal 2x gepusht naar Vercel
+- [ ] Wijzigingen zijn live
+
+---
+
+## Bonus (als je klaar bent)
+
+- [ ] Voeg een tweede pagina toe
+- [ ] Maak een navbar component met links naar alle pagina's
+- [ ] Voeg dark mode toggle toe
+- [ ] Implementeer smooth scroll animaties
--- a/v2/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
+++ b/v2/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
@@ -0,0 +1,163 @@
+# Les 2 - Huiswerkopdracht
+
+**Deadline:** Voor les 3
+
+---
+
+## Opdracht 1: Nieuw Project vanaf Scratch (2 uur)
+
+In de les heb je een bestaand project uitgebreid. Nu ga je een **nieuw project** maken met OpenCode.
+
+### Stap 1: Maak een nieuw React project
+
+```bash
+npx create-next-app@latest mijn-nieuwe-project
+cd mijn-nieuwe-project
+npm run dev
+```
+
+Kies bij de prompts:
+- TypeScript: Yes
+- Tailwind CSS: Yes
+- App Router: Yes
+
+### Stap 2: Configureer OpenCode Desktop App
+
+1. Open de Desktop App
+2. Open je projectfolder
+3. Selecteer OpenCode Zen → Kimi K2.5 Free (gratis)
+
+### Stap 3: Bouw minimaal 3 componenten
+
+Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
+
+**⚠️ BELANGRIJK: Eén prompt per taak!**
+
+Maak niet één grote prompt voor alles. Verdeel je werk:
+- Prompt 1: "Maak een Header component met logo en navigatie"
+- Prompt 2: "Voeg een mobile hamburger menu toe aan de Header"
+- Prompt 3: "Maak een Hero section met headline en buttons"
+- etc.
+
+**Houd je prompts bij!** Je moet ze inleveren (zie Opdracht 2).
+
+**Verplichte componenten:**
+
+#### 1. Header/Navbar
+- Logo
+- Navigatie links
+- CTA button
+- Mobile hamburger menu (werkend!)
+
+#### 2. Hero Section
+- Headline
+- Subtitle
+- 1-2 buttons
+- Achtergrond (gradient of afbeelding)
+
+#### 3. Kies één:
+
+**Optie A: Feature Cards**
+- Minimaal 3 cards
+- Icon, titel, beschrijving per card
+- Responsive grid
+
+**Optie B: Testimonials**
+- Minimaal 2 testimonials
+- Quote, naam, foto placeholder
+- Mooie styling
+
+**Optie C: Pricing Table**
+- 3 pricing tiers
+- Features per tier
+- Highlight recommended
+
+### Stap 4: Push naar GitHub
+
+**Anders dan bij v0!** Bij v0 was Vercel automatisch gekoppeld. Nu moet je dit handmatig doen.
+
+#### 4a. Maak GitHub repository
+
+1. Ga naar github.com
+2. Klik "+" → "New repository"
+3. Naam: bijvoorbeeld `mijn-nieuwe-project`
+4. **Public** aanvinken
+5. Klik "Create repository"
+
+#### 4b. Push je code
+
+GitHub toont instructies. Voer uit in je projectmap:
+
+```bash
+git remote add origin https://github.com/JOUW-USERNAME/mijn-nieuwe-project.git
+git branch -M main
+git push -u origin main
+```
+
+**Of met GitHub Desktop:**
+1. File → Add Local Repository
+2. Selecteer je projectmap
+3. Publish repository
+
+---
+
+### Stap 5: Koppel aan Vercel
+
+1. Ga naar vercel.com (log in met GitHub)
+2. Klik "Add New..." → "Project"
+3. "Import Git Repository"
+4. Selecteer je nieuwe repo
+5. Framework: Next.js (automatisch gedetecteerd)
+6. Klik "Deploy"
+
+**Na ~1 minuut:** Je website is live!
+
+**Tip:** Elke volgende `git push` wordt automatisch gedeployed.
+
+---
+
+## Opdracht 2: Houd je Prompts Bij!
+
+**Belangrijk:** Houd tijdens het bouwen een lijst bij van alle prompts die je gebruikt.
+
+**Voorbeeld format:**
+```
+1. [Plan] "Analyseer dit project en beschrijf de folder structuur"
+2. [Build] "Maak een Header component met logo links en navigatie rechts"
+3. [Build] "Voeg een hamburger menu toe voor mobile"
+4. [Build] "Maak een Hero section met grote headline en gradient achtergrond"
+5. [Build] "Voeg twee buttons toe aan de Hero: primair en secundair"
+6. [Build] "Maak een Features sectie met 3 cards in een grid"
+...
+```
+
+**Waarom?**
+- In Les 3 gaan we iedereen langs
+- We bespreken hoeveel prompts je hebt gebruikt
+- En of je het werk goed hebt opgesplitst (één prompt per taak)
+
+**Dit hoef je niet in te leveren**, maar zorg dat je het kunt laten zien in de les!
+
+---
+
+## Inleveren via Teams (voor Les 3)
+
+Post in Teams:
+1. **Link naar Vercel** (je live website)
+2. **Link naar GitHub** (je repository)
+
+Dat is alles! In Les 3 gaan we kort iedereen langs:
+- Bekijken wat je hebt gemaakt
+- Bespreken hoeveel prompts je hebt gebruikt
+- Delen wat goed werkte en wat niet
+
+**💡 Tip:** Houd je prompt geschiedenis bij (zie Deel A hierboven) - we bespreken dit in de les!
+
+---
+
+## Hulp nodig?
+
+- Check de OpenCode documentatie: opencode.ai/docs
+- Bekijk de les slides nogmaals
+- Stel vragen in Teams
+- Stel vragen in Teams
--- a/v2/Les02-OpenCode/Les02-Docenttekst-Notes.md
+++ b/v2/Les02-OpenCode/Les02-Docenttekst-Notes.md
@@ -0,0 +1,235 @@
+# Les 2 - Keynote Notes
+
+**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min (10:15-10:30)
+
+---
+
+## BLOK 1: WELKOM & TERUGBLIK (10 min)
+
+---
+
+### Slide 1: Welkom
+- "Welkom terug bij les 2!"
+- "Vandaag: jullie projecten uitbreiden"
+
+---
+
+### Slide 2: Planning
+- 09:00-09:20: Intro OpenCode
+- 09:20-09:50: Setup + Demo's
+- 09:50-10:15: Hands-on start
+- 10:15-10:30: PAUZE
+- 10:30-11:30: Hands-on vervolg
+- 11:30-12:00: Resultaten + Afsluiting
+
+---
+
+### Slide 3: Terugblik Les 1
+- **Jullie hebben:** website op Vercel, code in GitHub
+- **Maar:** veel copy/paste, geen lokale dev
+- "Vandaag gaan we dat oplossen"
+
+---
+
+### Slide 4: Vandaag
+- Bestaande repos lokaal draaien
+- Uitbreiden met AI
+- Deployen via git push
+
+---
+
+## BLOK 2: INTRO OPENCODE (10 min)
+
+---
+
+### Slide 5: Wat is OpenCode?
+- Open source, 60.000+ stars
+- Terminal én **Desktop App** (met ingebouwde terminal!)
+- Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
+
+---
+
+### Slide 6: Installatie
+- **Terminal:** `npm i -g opencode-ai@latest`
+- **Desktop App:** opencode.ai/download
+- **Gratis AI Model:** `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
+- "Wij gebruiken vandaag de Desktop App"
+
+---
+
+### Slide 7: Build vs Plan Mode
+- **Plan (📋):** leest, analyseert, verandert NIETS
+- **Build (🔨):** schrijft code, maakt bestanden
+- Wisselen: `Tab`
+- **💡 Eén prompt per taak!**
+
+---
+
+### Slide 8: Shortcuts
+- `Ctrl+P` = command menu
+- `Tab` = wissel mode
+- `@` = zoek bestanden (context!)
+- `@explore` = codebase verkennen (read-only)
+
+---
+
+### Slide 9: @explore - Codebase Verkennen
+- **Read-only** subagent
+- Zoekt bestanden, vindt keywords
+- Maakt **geen wijzigingen**
+- Voorbeeld: `@explore how does routing work?`
+
+---
+
+### Slide 10: Deployment Workflow
+- Wijzig code → git add → commit → push
+- Vercel pakt automatisch op
+- Jullie repos zijn al gekoppeld!
+
+---
+
+### Slide 11: Optioneel - OpenAI API Key
+- **Wil je GPT-4?** platform.openai.com → API Keys
+- In OpenCode: `Ctrl+X M` → OpenAI → Plak key
+- **Let op:** betaald (~$0.01/prompt)
+- **Tip:** Start met Kimi K2.5 Free!
+
+---
+
+## BLOK 3: SETUP & DEMO (20 min)
+
+---
+
+### Slide 12: Live Demo Overzicht (blijft op scherm)
+
+**DEMO 1: Terminal (5 min)**
+- `opencode` → toon Ctrl+P, Tab, @, Ctrl+X M
+- "Krachtig, maar Desktop App is vriendelijker..."
+
+**DEMO 2: Desktop App Setup (5 min)**
+- Open App → Open Folder → v0 project
+- Ctrl+X M → OpenCode Zen → Kimi K2.5 Free
+- Terminal: `npm install && npm run dev`
+
+**DEMO 3: Plan Mode (5 min)**
+- 📋 "Analyseer dit project. Hoe werkt de routing?"
+- AI leest alleen, verandert niets
+
+**DEMO 4: Build Mode (5 min)**
+- Tab → 🔨
+- "Maak nieuwe pagina /about met hero"
+- Review → Accept → Refresh browser
+
+---
+
+## BLOK 4: GIT & VERCEL (10 min)
+
+---
+
+### Slide 13: Demo - Git Push & Vercel
+- **DEMO:**
+```bash
+git add .
+git commit -m "Add about page"
+git push
+```
+- Of: GitHub Desktop
+- → Open Vercel dashboard → "Building..." → Live!
+
+---
+
+### Slide 14: Preview Deployments
+- **Elke branch = eigen preview URL**
+- main → productie | feature/x → preview URL
+- Test zonder productie te breken
+- Deel preview link met team/klant
+- **DEMO:** nieuwe branch pushen → toon preview in Vercel
+
+---
+
+### Slide 15: Nieuw project naar Vercel
+- **Voor huiswerk!** v0 was automatisch gekoppeld
+- Vercel → Add New Project → Import Git Repository
+- Selecteer repo → Deploy
+
+---
+
+## BLOK 5: HANDS-ON (85 min + 15 min pauze)
+
+---
+
+### Slide 16: Opdracht (blijft op scherm)
+
+```
+STAP 1: PROJECT KLAARZETTEN
+  git clone → cd → npm install → npm run dev
+
+STAP 2: OPENCODE DESKTOP APP
+  Open App → Open Folder → Ctrl+X M → Zen → Kimi K2.5 Free
+
+STAP 3: BOUW MET OPENCODE
+  □ Nieuwe pagina (/about, /services, /contact)
+  □ Voeg 2 componenten toe
+  □ Voeg link op homepage
+  💡 Eén prompt per taak!
+
+STAP 4: DEPLOY
+  git add . → git commit → git push
+```
+
+**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30
+
+---
+
+### Hands-on deel 1 (09:55-10:15)
+- Help bij opstartproblemen
+- Draait npm run dev?
+- Kimi K2.5 Free geselecteerd?
+
+---
+
+### ☕ PAUZE (10:15-10:30)
+
+---
+
+### Hands-on deel 2 (10:30-11:30)
+**Checks:**
+- 10:45 - "Wie draait lokaal?"
+- 11:15 - "Wie heeft 2x gepusht?"
+
+---
+
+## BLOK 6: AFSLUITING (30 min)
+
+---
+
+### Slide 17: Resultaten
+- 2-3 studenten tonen werk
+- "Wat toegevoegd? Hoeveel keer gepusht?"
+
+---
+
+### Slide 18: Samenvatting
+- ✅ OpenCode Terminal + Desktop App
+- ✅ Gratis: Kimi K2.5 Free
+- ✅ Optioneel: OpenAI met API key
+- ✅ Plan vs Build mode
+- ✅ @explore voor codebase verkennen
+- ✅ Git push → auto deploy
+
+---
+
+### Slide 19: Huiswerk
+- **Nieuw project vanaf scratch**
+- create-next-app → 3 componenten
+- Push naar GitHub
+- **Vercel: Import Project** (zie slide 15!)
+- **Inleveren:** Vercel + GitHub link in Teams
+- **Les 3:** Iedereen langs, prompts bespreken
+
+---
+
+### Slide 20: Volgende les
+- OpenCode IDE Integratie
+- VSCode plugin
+- "Tot dan!"
--- a/v2/Les02-OpenCode/Les02-Docenttekst.md
+++ b/v2/Les02-OpenCode/Les02-Docenttekst.md
@@ -0,0 +1,406 @@
+# Docenttekst Les 2: OpenCode - AI Code Assistants
+
+> **Totale lesduur:** 3 uur (180 minuten)
+> **Spreektijd docent:** ~50 minuten
+> **Hands-on:** ~85 minuten
+> **Pauze:** 15 minuten (10:15-10:30)
+
+---
+
+## BLOK 1: WELKOM & TERUGBLIK (10 minuten)
+
+### Slide 1: Welkomstslide
+
+**[09:00 - 09:05]**
+
+"Welkom terug bij les 2! Vorige week hebben jullie allemaal een website gebouwd en online gezet. Vandaag gaan we een stap verder."
+
+---
+
+### Slide 2: Planning
+
+**[bij slide 1]**
+
+"De planning: tot 10 voor 10 doe ik uitleg en demo's. Dan gaan jullie aan de slag met jullie eigen projecten. Kwart over 10 hebben we een korte pauze, daarna werken jullie door tot half 12."
+
+---
+
+### Slide 3: Terugblik Les 1
+
+**[09:05 - 09:08]**
+
+"Jullie hebben nu: een werkende website op Vercel, code in GitHub, en ervaring met v0.dev."
+
+_[Wijs naar de problemen]_
+
+"Maar... veel copy/paste. Geen lokale development. Beperkte controle over je code. Vandaag gaan we dat oplossen."
+
+---
+
+### Slide 4: Vandaag - De volgende stap
+
+**[09:08 - 09:10]**
+
+"Vandaag werken we met jullie bestaande repos. We gaan ze lokaal draaien, uitbreiden met AI, en weer deployen naar Vercel. De volledige development workflow."
+
+---
+
+## BLOK 2: INTRODUCTIE OPENCODE (10 minuten)
+
+### Slide 5: Wat is OpenCode?
+
+**[09:10 - 09:12]**
+
+"OpenCode - open source met meer dan 60.000 GitHub stars. Het is een AI coding assistant die direct in je project werkt."
+
+"Er is een terminal versie én een Desktop App. Die Desktop App is super handig - vriendelijke interface en een ingebouwde terminal. Die gaan we vandaag gebruiken."
+
+"Het mooie: je kiest je eigen AI. Er zijn gratis modellen beschikbaar, dus je hebt geen API key nodig."
+
+---
+
+### Slide 6: Installatie
+
+**[09:12 - 09:14]**
+
+"Hoe installeer je het? Voor terminal: npm i -g opencode-ai@latest."
+
+"Maar wij gebruiken de Desktop App. Download van opencode.ai/download. Installeer het, en je bent klaar."
+
+"Het AI model stel je in met Ctrl+X M. Kies OpenCode Zen, dan Kimi K2.5 Free. Gratis!"
+
+---
+
+### Slide 7: Build vs Plan Mode
+
+**[09:14 - 09:15]**
+
+"Belangrijk concept: twee modes."
+
+"**Plan mode** - het klembord icoon. AI kan alleen lezen en analyseren. Perfect om je project te begrijpen."
+
+"**Build mode** - de hamer. AI kan code schrijven en bestanden aanmaken."
+
+"Wisselen doe je met Tab."
+
+_[Belangrijk punt - benadrukken!]_
+
+"En dit is cruciaal: **één prompt per taak**. Vraag niet 'maak een complete website met alles erop en eraan'. Splits het op: eerst de header, dan de hero, dan de volgende sectie. Zo houd je controle en kun je elk onderdeel goed reviewen."
+
+---
+
+### Slide 8: Shortcuts
+
+**[09:15 - 09:16]**
+
+"Vier shortcuts om te onthouden:"
+
+"Ctrl+P voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken - super handig voor context. @explore om je codebase te verkennen zonder wijzigingen."
+
+---
+
+### Slide 9: @explore - Codebase Verkennen
+
+**[09:16 - 09:17]**
+
+"@explore is een speciale feature. Het is een read-only subagent - hij leest alleen, verandert niets."
+
+"Super handig voor nieuwe codebases. Typ @explore en dan je vraag. Bijvoorbeeld: '@explore waar is de authentication code?' of '@explore hoe werkt de routing?'"
+
+"Het verschil met Plan mode: @explore zoekt actief door je hele project. Plan mode analyseert alleen wat je hem geeft."
+
+---
+
+### Slide 10: De Deployment Workflow
+
+**[09:17 - 09:18]**
+
+"Dit is de workflow die jullie vandaag gaan gebruiken:"
+
+"Wijzig code met OpenCode. Git add, commit, push. En dan... Vercel pakt het automatisch op. Jullie project is al gekoppeld aan GitHub, dus elke push wordt automatisch live."
+
+---
+
+### Slide 11: Optioneel - OpenAI API Key
+
+**[09:18 - 09:20]**
+
+"Even dit: als je GPT-4 wil gebruiken in plaats van de gratis modellen, kan dat ook."
+
+"Je maakt een account op platform.openai.com, gaat naar API Keys, maakt een key aan, en plakt die in OpenCode via Ctrl+X M."
+
+"Let op: OpenAI is betaald, ongeveer een cent per prompt. Voor nu beginnen we met Kimi K2.5 Free - dat is gratis en werkt prima!"
+
+---
+
+## BLOK 3: SETUP & DEMO (20 minuten)
+
+### Slide 12: Live Demo Overzicht
+
+**[09:20 - 09:40]**
+
+_[Deze slide blijft op het scherm terwijl je alle demo's geeft]_
+
+---
+
+#### DEMO 1: Terminal Versie (5 min)
+
+_[Open terminal - LIVE DEMO]_
+
+"Laat me eerst de terminal versie laten zien. Installatie: npm i -g opencode-ai@latest, dan opencode."
+
+_[Start opencode in terminal]_
+
+"Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:"
+
+- "Ctrl+P voor het command menu"
+- "Tab om te wisselen tussen Plan en Build mode"
+- "@ om bestanden te zoeken"
+- "Ctrl+X M om je AI model te kiezen"
+
+"Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..."
+
+---
+
+#### DEMO 2: Desktop App Setup (5 min)
+
+"...is er ook de Desktop App!"
+
+_[Open Desktop App]_
+
+"Zelfde features, maar veel vriendelijker. En kijk - een ingebouwde terminal! Dit gaan we vandaag gebruiken."
+
+_[Laat studenten Desktop App downloaden van opencode.ai/download]_
+
+"Ik open de Desktop App en selecteer mijn projectfolder - dat is mijn v0 repo."
+
+_[Open project folder]_
+
+"Nu het AI model: Ctrl+X M, kies OpenCode Zen, dan Kimi K2.5 Free."
+
+_[Laat studenten ook configureren - help waar nodig]_
+
+"In de ingebouwde terminal run ik npm install en npm run dev."
+
+_[Toon localhost:3000 in browser]_
+
+---
+
+#### DEMO 3: Plan Mode (5 min)
+
+_[LIVE DEMO in Desktop App]_
+
+"Ik zit in Plan mode - zie het klembord icoon."
+
+"Ik vraag: 'Analyseer dit project. Hoe werkt de routing? Hoe maak ik een nieuwe pagina?'"
+
+_[Wacht op response]_
+
+"Kijk - het leest alles, geeft een analyse, maar verandert niets. Perfect om eerst te begrijpen."
+
+---
+
+#### DEMO 4: Build Mode (5 min)
+
+_[LIVE DEMO in Desktop App]_
+
+"Tab om naar Build mode te gaan. Nu vraag ik:"
+
+"Maak een nieuwe pagina /about met een hero sectie en een team sectie. Voeg ook een link toe op de homepage naar /about."
+
+_[Wacht op generatie]_
+
+"Het maakt de pagina aan, de componenten, past de homepage aan. Kijk in de browser - refresh - daar is de link! En als ik klik... de nieuwe pagina!"
+
+---
+
+## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
+
+### Slide 13: Demo - Git Push & Vercel
+
+**[09:40 - 09:45]**
+
+_[LIVE DEMO in Desktop App terminal]_
+
+"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
+
+```bash
+git add .
+git commit -m "Add about page"
+git push
+```
+
+"Of als je GitHub Desktop prefereert: changed files links, commit message, commit, push."
+
+_[Open Vercel dashboard]_
+
+"Zie je? Building. Vercel heeft de push opgepikt. Na ongeveer een minuut... Live! De wijzigingen staan online."
+
+"Dit is de workflow: code lokaal, push, automatisch live."
+
+---
+
+### Slide 14: Preview Deployments
+
+**[09:45 - 09:47]**
+
+"En nu iets super handig: Preview Deployments."
+
+_[Toon Vercel dashboard]_
+
+"Elke branch die je pusht krijgt automatisch z'n eigen preview URL. Kijk:"
+
+"Je main branch gaat naar je productie URL. Maar als je een feature branch pusht - bijvoorbeeld feature/about - krijg je een aparte preview URL."
+
+_[LIVE DEMO - optioneel]_
+
+```bash
+git checkout -b feature/test-page
+# Maak kleine wijziging
+git add . && git commit -m "Test preview"
+git push -u origin feature/test-page
+```
+
+"En kijk in Vercel... daar is je preview deployment!"
+
+"Waarom is dit handig? Je kunt wijzigingen testen zonder je productie site te breken. En je kunt de preview link delen met je team of klant voor feedback."
+
+---
+
+### Slide 15: Nieuw project naar Vercel
+
+**[09:47 - 09:50]**
+
+"Dit werkt omdat jullie v0 project al aan Vercel gekoppeld is. Maar voor het huiswerk maken jullie een **nieuw** project. Dan moet je Vercel handmatig koppelen."
+
+_[Toon Vercel dashboard]_
+
+"Stappen: Add New Project, Import Git Repository, selecteer je repo, Deploy. Dat is het."
+
+"Dit hebben jullie nodig voor het huiswerk - een nieuw project vanaf scratch deployen."
+
+---
+
+## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
+
+### Slide 16: Aan de slag!
+
+**[09:50 - 09:55]** _(5 minuten uitleg)_
+
+"Jullie gaan nu een nieuwe pagina toevoegen aan jullie v0 website."
+
+"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Maak een nieuwe pagina met OpenCode - about, services, of contact. Voeg componenten toe en een link op de homepage. Stap 4: Push naar GitHub, bekijk live op Vercel."
+
+"Doel: minimaal 2 keer deployen. Je leert hoe routing werkt in Next.js én hoe je navigatie toevoegt."
+
+"Kwart over 10 hebben we een korte pauze van 15 minuten. Begin!"
+
+---
+
+### Hands-on Deel 1
+
+**[09:55 - 10:15]** _(20 minuten werken)_
+
+_[Loop actief rond, help bij opstartproblemen]_
+
+**Let op:**
+- Draait npm run dev?
+- Lukt git clone/pull?
+- Kimi K2.5 Free geselecteerd?
+
+---
+
+### ☕ PAUZE
+
+**[10:15 - 10:30]** _(15 minuten)_
+
+"Oké, pauze! Om half 11 gaan we verder."
+
+---
+
+### Hands-on Deel 2
+
+**[10:30 - 11:30]** _(60 minuten werken)_
+
+_[Loop actief rond]_
+
+**Let op:**
+- Zit student in juiste mode?
+- Gebruikt @ mentions?
+- Lukt git push?
+
+**Check [10:45]:**
+"Wie heeft de website lokaal draaien? Wie heeft al gepusht naar Vercel?"
+
+**Check [11:15]:**
+"Hoeveel mensen hebben al 2x gepusht? Wie zit vast?"
+
+---
+
+## BLOK 6: AFSLUITING (30 minuten)
+
+### Slide 17: Resultaten delen
+
+**[11:30 - 11:40]**
+
+"Stop met coderen. Wie wil laten zien wat ze hebben gebouwd?"
+
+_[2-3 studenten tonen hun werk]_
+
+"Wat heb je toegevoegd? Hoeveel keer gepusht? Wat ging goed, wat was lastig?"
+
+---
+
+### Slide 18: Samenvatting
+
+**[11:40 - 11:50]**
+
+"Wat hebben we gedaan vandaag?"
+
+- OpenCode: terminal versie én Desktop App
+- Gratis model: Kimi K2.5 Free
+- Optioneel: OpenAI met API key
+- Plan vs Build mode
+- @explore voor codebase verkennen
+- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live
+
+_[Ruimte voor vragen]_
+
+---
+
+### Slide 19: Huiswerk
+
+**[11:50 - 11:55]**
+
+"Thuis: een nieuw project vanaf scratch. Niet je v0 project uitbreiden, maar helemaal nieuw beginnen."
+
+"Stappen: create-next-app, bouw 3 componenten, push naar GitHub, en dan - belangrijk - Vercel Import Project. Zoals ik eerder liet zien."
+
+"Inleveren via Teams: gewoon je Vercel link en GitHub link. Volgende les gaan we iedereen even langs en bespreken we je prompts. Hoeveel prompts heb je gebruikt? Hoe heb je je werk opgesplitst? Dus houd je prompts bij!"
+
+---
+
+### Slide 20: Afsluiting
+
+**[11:55 - 12:00]**
+
+"Volgende week: OpenCode in je IDE. Dan gaan we de VSCode plugin gebruiken voor nog sneller werken."
+
+"Vragen? Anders tot volgende week!"
+
+---
+
+## Timing Overzicht
+
+| Blok | Tijd | Duur |
+|------|------|------|
+| 1. Welkom & Terugblik | 09:00-09:10 | 10 min |
+| 2. Intro OpenCode | 09:10-09:20 | 10 min |
+| 3. Setup & Demo | 09:20-09:40 | 20 min |
+| 4. Git & Vercel | 09:40-09:50 | 10 min |
+| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min |
+| ☕ PAUZE | 10:15-10:30 | 15 min |
+| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min |
+| 6. Afsluiting | 11:30-12:00 | 30 min |
+
+**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
--- a/v2/Les02-OpenCode/Les02-Lesplan.md
+++ b/v2/Les02-OpenCode/Les02-Lesplan.md
@@ -0,0 +1,179 @@
+# Lesplan Les 2: OpenCode - AI Code Assistants
+
+---
+
+## Lesgegevens
+
+| Item | Details |
+|------|---------|
+| **Les** | 2 van 18 |
+| **Onderwerp** | OpenCode - AI Code Assistants |
+| **Deel** | 1: AI Foundations (Les 1-4) |
+| **Duur** | 3 uur (180 minuten) |
+| **Spreektijd** | ~50 minuten |
+| **Hands-on** | ~85 minuten |
+| **Pauze** | 15 minuten (10:15-10:30) |
+
+---
+
+## Leerdoelen
+
+Na deze les kan de student:
+
+1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
+2. De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
+3. Werken met Plan mode en Build mode
+4. @explore gebruiken om een codebase te verkennen (read-only)
+5. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
+6. Wijzigingen maken met OpenCode en deployen via git push
+7. De @ file mention gebruiken voor context
+
+---
+
+## Voorbereiding docent
+
+### Technische setup
+- [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`)
+- [ ] OpenCode Desktop App geïnstalleerd (opencode.ai/download)
+- [ ] Demo project: een v0 repo gekloond en werkend
+- [ ] Git geconfigureerd
+
+### Student voorkennis (uit Les 1)
+- Hebben een werkende v0 website op Vercel
+- Hebben de code in een GitHub repository
+- Weten hoe GitHub Desktop werkt
+
+---
+
+## Lesverloop
+
+### Blok 1: Welkom & Terugblik (10 minuten)
+
+| Tijd | Activiteit | Slides |
+|------|------------|--------|
+| 09:00-09:05 | Welkom, planning | 1-2 |
+| 09:05-09:08 | Terugblik Les 1: v0 workflow + problemen | 3 |
+| 09:08-09:10 | Vandaag: OpenCode + verder bouwen | 4 |
+
+**Kernboodschap:** "Jullie hebben werkende websites. Vandaag gaan we die uitbreiden met AI direct in je editor."
+
+---
+
+### Blok 2: Introductie OpenCode (10 minuten)
+
+| Tijd | Activiteit | Slides |
+|------|------------|--------|
+| 09:10-09:12 | Wat is OpenCode? | 5 |
+| 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 |
+| 09:14-09:15 | Build vs Plan mode | 7 |
+| 09:15-09:17 | Shortcuts + @explore | 8-9 |
+| 09:17-09:19 | Vercel deployment workflow | 10 |
+| 09:19-09:20 | Optioneel: OpenAI API key | 11 |
+
+**Belangrijk:** We gebruiken Kimi K2.5 Free - gratis, geen API key nodig!
+
+---
+
+### Blok 3: Setup & Demo (20 minuten)
+
+| Tijd | Activiteit | Slides |
+|------|------------|--------|
+| 09:20-09:40 | **DEMO's:** Terminal, Desktop App, Plan mode, Build mode | 12 |
+
+**Slide 12 blijft op scherm tijdens alle demo's:**
+- DEMO 1: Terminal versie (5 min) - shortcuts tonen
+- DEMO 2: Desktop App setup (5 min) - project laden + Kimi K2.5 Free
+- DEMO 3: Plan mode (5 min) - project analyseren
+- DEMO 4: Build mode (5 min) - nieuwe pagina maken
+
+---
+
+### Blok 4: Git & Vercel Workflow (10 minuten)
+
+| Tijd | Activiteit | Slides |
+|------|------------|--------|
+| 09:40-09:45 | **DEMO:** Git push + Vercel auto-deploy | 13 |
+| 09:45-09:47 | **DEMO:** Preview Deployments (branches) | 14 |
+| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 15 |
+
+**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel. Branches krijgen preview URLs!"
+
+---
+
+### Blok 5: Hands-on Opdracht (85 minuten + 15 min pauze)
+
+| Tijd | Activiteit | Slides |
+|------|------------|--------|
+| 09:50-09:55 | Opdracht uitleggen | 16 |
+| 09:55-10:15 | Studenten werken (20 min) | - |
+| 10:15-10:30 | ☕ **PAUZE** | - |
+| 10:30-11:30 | Studenten werken (60 min) | - |
+
+**Opdracht:** Maak een nieuwe pagina in je v0 project
+
+1. Clone je v0 repo (of gebruik GitHub Desktop)
+2. Run lokaal met `npm install` + `npm run dev`
+3. Met OpenCode:
+   - Maak nieuwe pagina (/about, /services, of /contact)
+   - Voeg minimaal 2 componenten toe aan de pagina
+   - Voeg link op homepage toe naar de nieuwe pagina
+4. Push naar GitHub → bekijk live op Vercel
+
+**Tijdens het werken:**
+- Loop actief rond
+- Help bij git/npm problemen
+- Check: werkt lokale server?
+- Aanmoedigen: meerdere keren pushen en deployen
+
+**Tussentijdse check (10:45):**
+- "Wie heeft lokaal draaien?"
+- "Wie heeft een nieuwe pagina aangemaakt?"
+
+**Check (11:15):**
+- "Wie heeft de link op de homepage?"
+- "Wie heeft 2x gepusht?"
+
+---
+
+### Blok 6: Afsluiting (30 minuten)
+
+| Tijd | Activiteit | Slides |
+|------|------------|--------|
+| 11:30-11:40 | Resultaten delen (2-3 studenten) | 17 |
+| 11:40-11:50 | Samenvatting + Q&A | 18 |
+| 11:50-11:55 | Huiswerk uitleggen | 19 |
+| 11:55-12:00 | Afsluiting | 20 |
+
+---
+
+## Materialen
+
+- **Slide-Overzicht:** Les02-Slide-Overzicht.md
+- **Lesopdracht:** Les02-Bijlage-A-Lesopdracht.md
+- **Huiswerkopdracht:** Les02-Bijlage-B-Huiswerkopdracht.md
+
+---
+
+## Veelvoorkomende problemen
+
+| Probleem | Oplossing |
+|----------|-----------|
+| OpenCode installeert niet | Check Node.js ≥18 |
+| `npm install` faalt | Delete `node_modules`, probeer opnieuw |
+| `npm run dev` werkt niet | Check of je in de juiste map staat |
+| Git push rejected | `git pull` eerst, dan push |
+| Vercel deployt niet | Check GitHub repo permissions |
+| Kimi K2.5 traag | Normaal, gratis model is iets langzamer |
+
+---
+
+## Alternatieve AI providers
+
+| Provider | Kosten | Setup |
+|----------|--------|-------|
+| **Kimi K2.5 Free** | Gratis | Geen key nodig (via OpenCode Zen) |
+| **OpenAI (GPT-4)** | Betaald (~$0.01/prompt) | API key via platform.openai.com |
+| **Groq** | Gratis tier | API key via console.groq.com |
+| **Ollama** | Gratis (lokaal) | Installatie + model download |
+
+**Aanbeveling:** Start met Kimi K2.5 Free. OpenAI voor wie extra kwaliteit wil (kost geld).
--- a/v2/Les02-OpenCode/Les02-Slide-Overzicht.md
+++ b/v2/Les02-OpenCode/Les02-Slide-Overzicht.md
@@ -0,0 +1,418 @@
+# Les 2: OpenCode - AI Code Assistants (V2)
+
+> **Deel 1: AI Foundations** (Les 1-4)
+> **Totale slides:** 21
+> **Lesduur:** 3 uur (180 minuten)
+> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
+
+**V2 Verbeteringen:**
+- Voorbereiding check toegevoegd (slide 3)
+- "WACHT - nog niet installeren" waarschuwingen
+- Duidelijk onderscheid System Terminal vs OpenCode Terminal
+- Gratis model backup opties toegevoegd
+- Platform-specifieke instructies (Mac/Windows)
+
+**⚠️ VEREIST:** Studenten moeten [Les02-Voorbereiding.md](Les02-Voorbereiding.md) doorlopen VOOR deze les!
+
+---
+
+## Slide-structuur per blok
+
+| Blok | Onderwerp | Slides | Tijd |
+|------|-----------|--------|------|
+| 1 | Welkom & Terugblik + **Voorbereiding Check** | 1-5 | 12 min |
+| 2 | Introductie OpenCode | 6-12 | 10 min |
+| 3 | Setup & Demo | 13 | 20 min |
+| 4 | Git & Vercel Workflow | 14-16 | 10 min |
+| 5 | Hands-on Opdracht | 17 | 85 min |
+| - | **☕ PAUZE** | - | 15 min |
+| 6 | Afsluiting | 18-21 | 28 min |
+
+---
+
+## BLOK 1: WELKOM & TERUGBLIK (10 minuten)
+
+### Slide 1: Welkomstslide
+**Titel:** Les 2: OpenCode - AI Code Assistants
+
+---
+
+### Slide 2: Planning vandaag
+
+| Tijd | Onderwerp |
+|------|-----------|
+| 09:00-09:12 | Terugblik + **Voorbereiding Check** |
+| 09:12-09:22 | Intro OpenCode (KIJK ALLEEN, nog niet installeren!) |
+| 09:22-09:42 | Setup + Demo's (NU installeren) |
+| 09:42-09:52 | Git & Vercel Workflow |
+| 09:52-10:15 | Hands-on: Start |
+| 10:15-10:30 | ☕ **PAUZE** |
+| 10:30-11:30 | Hands-on: Vervolg |
+| 11:30-12:00 | Resultaten + Afsluiting |
+
+---
+
+### Slide 3: Voorbereiding Check ⚠️
+
+**Titel:** Heb je de voorbereiding gedaan?
+
+```
+┌─────────────────────────────────────────────────────┐
+│  CHECK JE SETUP - Voer uit in je EIGEN terminal:    │
+│  ─────────────────────────────────────────────────  │
+│  node -v          → Moet v20.x.x tonen              │
+│  git --version    → Moet 2.x.x tonen                │
+│  ssh -T git@github.com → "Hi [username]!"           │
+│  ─────────────────────────────────────────────────  │
+│  ✅ Alles werkt? Top!                               │
+│  ❌ Iets mist? Vraag de docent NU om hulp           │
+└─────────────────────────────────────────────────────┘
+```
+
+**⚠️ Niet voorbereid?** Dan kun je helaas niet volledig meedoen.
+
+---
+
+### Slide 4: Terugblik Les 1 - Wat hebben we?
+
+**Jullie hebben:**
+- ✅ Een werkende website op Vercel
+- ✅ Code in een GitHub repository
+- ✅ Ervaring met v0.dev
+
+**Maar:**
+- Veel copy/paste naar v0
+- Geen lokale development
+- Beperkte controle
+
+---
+
+### Slide 5: Vandaag - De volgende stap
+
+**OpenCode:** AI direct in je development workflow
+
+- ✅ Werk met je bestaande repository
+- ✅ Draai lokaal, zie wijzigingen direct
+- ✅ Push naar GitHub → automatisch live op Vercel
+
+---
+
+## BLOK 2: INTRODUCTIE OPENCODE (10 minuten)
+
+### Slide 6: Wat is OpenCode?
+
+**⚠️ KIJK ALLEEN - NOG NIET INSTALLEREN!**
+
+- 🌟 Open source (60.000+ GitHub stars)
+- 🔌 Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
+- 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!)
+- 🔒 Privacy-first
+
+**Vandaag:** Desktop App + gratis model (Kimi K2.5 Free)
+
+---
+
+### Slide 7: Installatie (WACHT - straks samen!)
+
+**⚠️ NOG NIET INSTALLEREN - Dit doen we straks SAMEN in de demo!**
+
+**Terminal versie:**
+```bash
+npm i -g opencode-ai@latest
+```
+
+**Desktop App:**
+- Download: **opencode.ai/download**
+- Installeer voor jouw OS (Mac/Windows)
+
+**Gratis AI Model:**
+- `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
+
+---
+
+### Slide 8: Build vs Plan Mode
+
+| Mode | Icoon | Wat het doet |
+|------|-------|--------------|
+| **Plan** | 📋 | Analyseert, verandert NIETS |
+| **Build** | 🔨 | Schrijft code, maakt bestanden |
+
+**Wisselen:** `Tab`
+
+**💡 Tip: Eén prompt per taak!**
+- ❌ "Maak een complete website met header, hero en footer"
+- ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"
+
+---
+
+### Slide 9: Keyboard Shortcuts
+
+| Shortcut | Actie |
+|----------|-------|
+| `Ctrl+P` | Command menu |
+| `Tab` | Wissel Build/Plan |
+| `@` | Zoek bestanden |
+| `@explore` | Codebase verkennen (read-only) |
+
+---
+
+### Slide 10: @explore - Codebase Verkennen
+
+**Wat is @explore?**
+- Een **read-only** subagent voor het verkennen van je codebase
+- Zoekt bestanden, vindt keywords, analyseert structuur
+- Maakt **geen wijzigingen** aan je code
+
+**Gebruik:**
+```
+@explore find all authentication code
+@explore how does the routing work?
+@explore where are the API endpoints?
+```
+
+**Wanneer gebruiken?**
+- Nieuwe codebase leren kennen
+- Code zoeken voordat je wijzigt
+- Project structuur begrijpen
+
+---
+
+### Slide 11: De Deployment Workflow
+
+```
+1. Wijzig code met OpenCode
+2. git add .
+3. git commit -m "Add about page"
+4. git push
+5. ✨ Vercel deployt automatisch!
+```
+
+Jullie Vercel project is al gekoppeld aan GitHub.
+
+---
+
+### Slide 12: Optioneel - OpenAI API Key
+
+**Wil je GPT-4 gebruiken?**
+
+1. Ga naar **platform.openai.com**
+2. Maak account aan (of log in)
+3. API Keys → Create new secret key
+4. Kopieer de key (begint met `sk-...`)
+5. In OpenCode: `Ctrl+X M` → OpenAI → Plak key
+
+**Let op:** OpenAI is betaald (~$0.01 per prompt)
+
+**Tip:** Start met Kimi K2.5 Free, upgrade later als je wilt!
+
+---
+
+## BLOK 3: SETUP & DEMO (20 minuten)
+
+### Slide 13: Live Demo Overzicht (blijft op scherm)
+
+**⚠️ BELANGRIJK: Twee soorten terminals!**
+
+```
+┌─────────────────────────────────────────────────────┐
+│  🖥️ SYSTEM TERMINAL (je eigen terminal)            │
+│  ─────────────────────────────────────────────────  │
+│  → Mac: Terminal app                                │
+│  → Windows: PowerShell / Git Bash                   │
+│  → Voor: git clone, npm install, opencode starten   │
+├─────────────────────────────────────────────────────┤
+│  🤖 OPENCODE TERMINAL (binnen OpenCode)             │
+│  ─────────────────────────────────────────────────  │
+│  → Verschijnt als je 'opencode' runt                │
+│  → Heeft AI chat + ingebouwde terminal              │
+│  → Voor: AI prompts, code generatie                 │
+│  → Type 'exit' om terug te gaan naar system terminal│
+└─────────────────────────────────────────────────────┘
+```
+
+**DEMO STAPPEN:**
+
+```
+┌─────────────────────────────────────────────────────┐
+│  DEMO 1: INSTALLATIE (5 min) - in SYSTEM terminal   │
+│  ─────────────────────────────────────────────────  │
+│  Mac:     npm i -g opencode-ai@latest               │
+│  Windows: npm i -g opencode-ai@latest               │
+│  (EACCESS error? → sudo npm i -g opencode-ai@latest)│
+├─────────────────────────────────────────────────────┤
+│  DEMO 2: DESKTOP APP SETUP (5 min)                  │
+│  ─────────────────────────────────────────────────  │
+│  1. Open Desktop App                                │
+│  2. File → Open Folder → v0 project                 │
+│  3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free        │
+│  ─────────────────────────────────────────────────  │
+│  💡 Tokens op? Probeer: MiniMax M2.1 Free           │
+│     of Big Pickle Free                              │
+├─────────────────────────────────────────────────────┤
+│  DEMO 3: PLAN MODE (5 min)                          │
+│  ─────────────────────────────────────────────────  │
+│  📋 "Analyseer dit project. Hoe werkt de routing?"  │
+│  → AI leest alleen, verandert niets                 │
+├─────────────────────────────────────────────────────┤
+│  DEMO 4: BUILD MODE (5 min)                         │
+│  ─────────────────────────────────────────────────  │
+│  Tab → 🔨                                           │
+│  "Maak nieuwe pagina /about met hero"               │
+│  → Review code → Accept → Refresh browser           │
+└─────────────────────────────────────────────────────┘
+```
+
+**Gratis Model Backup Opties:**
+| Model | Snelheid | Tokens |
+|-------|----------|--------|
+| Kimi K2.5 Free | ⭐⭐⭐ | Beperkt |
+| MiniMax M2.1 Free | ⭐⭐ | Beperkt |
+| Big Pickle Free | ⭐⭐ | Beperkt |
+
+---
+
+## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
+
+### Slide 14: Demo - Git Push & Vercel
+
+**Live demo (in Desktop App terminal):**
+```bash
+git add .
+git commit -m "Add about page"
+git push
+```
+
+**→ Open Vercel dashboard:**
+1. Zie: "Building..."
+2. Na ~1 minuut: live op je URL!
+
+---
+
+### Slide 15: Preview Deployments
+
+**Branches = Preview URLs**
+
+```
+main branch     → productie-site.vercel.app
+feature/about   → productie-site-git-feature-about.vercel.app
+```
+
+**Waarom handig?**
+- ✅ Test wijzigingen zonder productie te breken
+- ✅ Deel preview link met team/klant
+- ✅ Automatisch bij elke branch push
+
+**Demo:**
+```bash
+git checkout -b feature/test-page
+# Maak wijziging...
+git add . && git commit -m "Test preview"
+git push -u origin feature/test-page
+```
+→ Check Vercel: nieuwe preview deployment!
+
+---
+
+### Slide 16: Nieuw project naar Vercel (voor huiswerk)
+
+**Stappen voor een nieuw project:**
+
+1. Maak GitHub repository (github.com → New)
+2. Push je code naar GitHub
+3. Vercel: "Add New Project"
+4. "Import Git Repository"
+5. Selecteer je repo → Deploy
+
+**Dit heb je nodig voor het huiswerk!**
+
+---
+
+## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
+
+### Slide 17: Aan de slag! (blijft op scherm)
+
+```
+┌─────────────────────────────────────────────────────┐
+│  STAP 1: PROJECT KLAARZETTEN                        │
+│  ─────────────────────────────────────────────────  │
+│  git clone https://github.com/[user]/[repo].git     │
+│  cd [repo]                                          │
+│  npm install                                        │
+│  npm run dev                                        │
+│  → Open http://localhost:3000                       │
+├─────────────────────────────────────────────────────┤
+│  STAP 2: OPENCODE DESKTOP APP                       │
+│  ─────────────────────────────────────────────────  │
+│  1. Open Desktop App                                │
+│  2. File → Open Folder → je project                 │
+│  3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free        │
+├─────────────────────────────────────────────────────┤
+│  STAP 3: BOUW MET OPENCODE                          │
+│  ─────────────────────────────────────────────────  │
+│  □ Maak nieuwe pagina (/about, /services, /contact) │
+│  □ Voeg 2 componenten toe                           │
+│  □ Voeg link op homepage                            │
+│  💡 Eén prompt per taak!                            │
+├─────────────────────────────────────────────────────┤
+│  STAP 4: DEPLOY                                     │
+│  ─────────────────────────────────────────────────  │
+│  git add .                                          │
+│  git commit -m "Add about page"                     │
+│  git push                                           │
+│  → Check Vercel dashboard                           │
+└─────────────────────────────────────────────────────┘
+```
+
+**Doel:** Minimaal 2x deployen | ☕ **Pauze:** 10:15-10:30
+
+---
+
+## BLOK 6: AFSLUITING (30 minuten)
+
+### Slide 18: Resultaten delen
+
+- Wie wil laten zien?
+- Wat heb je toegevoegd?
+- Hoeveel keer gepusht?
+
+---
+
+### Slide 19: Samenvatting
+
+- ✅ OpenCode: open-source AI assistant
+- ✅ Gratis model: Kimi K2.5 Free
+- ✅ Optioneel: OpenAI met API key
+- ✅ Plan vs Build mode
+- ✅ @explore voor codebase verkennen
+- ✅ Git push → Vercel auto-deploy
+
+---
+
+### Slide 20: Huiswerk
+
+**Opdracht: Nieuw project vanaf scratch**
+
+1. `npx create-next-app@latest`
+2. Bouw 3 componenten met OpenCode
+3. Push naar GitHub
+4. Vercel: Import Project → Deploy
+
+**Inleveren via Teams:**
+- Link naar Vercel
+- Link naar GitHub
+
+**In Les 3:** We gaan iedereen langs en bespreken je prompts!
+
+**Stappen voor Vercel: zie slide 16!**
+
+---
+
+### Slide 21: Volgende les
+
+**Les 3:** OpenCode IDE Integratie
+
+- VSCode plugin
+- Inline code generatie
+- Advanced prompting
+
+Tot volgende week!
--- a/v2/Les02-OpenCode/Les02-Voorbereiding.md
+++ b/v2/Les02-OpenCode/Les02-Voorbereiding.md
@@ -0,0 +1,256 @@
+# Les 2: Voorbereiding (Verplicht!)
+
+**⚠️ BELANGRIJK:** Voltooi deze stappen VOOR Les 2 begint. Zonder deze setup kun je niet meedoen!
+
+**Geschatte tijd:** 20-30 minuten
+
+---
+
+## Checklist
+
+Aan het einde van deze voorbereiding heb je:
+- [ ] Node.js geïnstalleerd via NVM
+- [ ] Git geïnstalleerd
+- [ ] SSH key gegenereerd en toegevoegd aan GitHub
+- [ ] Terminal basics begrepen
+
+---
+
+## 1. Node.js installeren via NVM
+
+**Waarom NVM?** NVM (Node Version Manager) laat je makkelijk wisselen tussen Node versies. Veel projecten vereisen specifieke versies.
+
+### Mac / Linux
+
+Open Terminal en voer uit:
+
+```bash
+# 1. Installeer NVM
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+
+# 2. Sluit terminal en open opnieuw (of run dit):
+source ~/.zshrc   # voor zsh (standaard op Mac)
+# OF
+source ~/.bashrc  # voor bash
+
+# 3. Installeer Node 20 (LTS)
+nvm install 20
+
+# 4. Gebruik Node 20 als standaard
+nvm use 20
+nvm alias default 20
+
+# 5. Controleer installatie
+node -v   # Moet v20.x.x tonen
+npm -v    # Moet 10.x.x tonen
+```
+
+### Windows
+
+**Optie A: NVM voor Windows (aanbevolen)**
+
+1. Download installer: https://github.com/coreybutler/nvm-windows/releases
+2. Download `nvm-setup.exe`
+3. Installeer (volg wizard)
+4. Open **nieuwe** PowerShell of Command Prompt
+5. Voer uit:
+
+```powershell
+nvm install 20
+nvm use 20
+node -v   # Moet v20.x.x tonen
+```
+
+**Optie B: Direct Node.js installeren**
+
+1. Ga naar https://nodejs.org
+2. Download LTS versie (20.x)
+3. Installeer (volg wizard)
+4. Herstart terminal
+5. Controleer: `node -v`
+
+---
+
+## 2. Git installeren
+
+### Mac
+
+Git is vaak al geïnstalleerd. Check:
+
+```bash
+git --version
+```
+
+Als niet geïnstalleerd:
+```bash
+# Via Homebrew (aanbevolen)
+brew install git
+
+# Of download van https://git-scm.com/download/mac
+```
+
+### Windows
+
+1. Download van https://git-scm.com/download/windows
+2. Installeer (gebruik standaard opties)
+3. **Belangrijk:** Kies "Git Bash" als terminal optie
+4. Herstart terminal
+5. Controleer: `git --version`
+
+### Linux (Ubuntu/Debian)
+
+```bash
+sudo apt update
+sudo apt install git
+git --version
+```
+
+---
+
+## 3. SSH Key voor GitHub
+
+**Waarom SSH?** Met SSH hoef je niet steeds je wachtwoord in te voeren bij git push/pull.
+
+### Stap 1: Genereer SSH key
+
+**Mac / Linux / Git Bash (Windows):**
+
+```bash
+# Genereer key (vervang met je eigen email!)
+ssh-keygen -t ed25519 -C "jouw-email@example.com"
+
+# Druk Enter voor standaard locatie
+# Kies wachtwoord of laat leeg (Enter)
+```
+
+### Stap 2: Kopieer je public key
+
+**Mac:**
+```bash
+cat ~/.ssh/id_ed25519.pub | pbcopy
+```
+
+**Linux:**
+```bash
+cat ~/.ssh/id_ed25519.pub
+# Selecteer en kopieer handmatig
+```
+
+**Windows (Git Bash):**
+```bash
+cat ~/.ssh/id_ed25519.pub | clip
+```
+
+### Stap 3: Voeg toe aan GitHub
+
+1. Ga naar https://github.com/settings/keys
+2. Klik "New SSH key"
+3. Titel: "Mijn Laptop" (of iets herkenbaars)
+4. Plak je key
+5. Klik "Add SSH key"
+
+### Stap 4: Test de verbinding
+
+```bash
+ssh -T git@github.com
+```
+
+Je ziet: `Hi username! You've successfully authenticated...`
+
+**⚠️ Eerste keer:** Je krijgt een vraag over fingerprint. Type `yes`.
+
+---
+
+## 4. Terminal Basics
+
+Je hebt een terminal nodig om met OpenCode te werken. Hier de basics:
+
+### Wat is een terminal?
+
+- **Mac:** Terminal app (in Applications → Utilities)
+- **Windows:** PowerShell, Command Prompt, of **Git Bash** (aanbevolen)
+- **Linux:** Terminal
+
+### Basis commando's
+
+| Commando | Wat het doet | Voorbeeld |
+|----------|--------------|-----------|
+| `pwd` | Toon huidige map | `pwd` → `/Users/tim/projects` |
+| `ls` | Toon bestanden in map | `ls` → toont bestanden |
+| `cd` | Ga naar map | `cd projects` |
+| `cd ..` | Ga map omhoog | `cd ..` |
+| `mkdir` | Maak nieuwe map | `mkdir mijn-project` |
+
+### Oefening
+
+Open je terminal en probeer:
+
+```bash
+# 1. Waar ben ik?
+pwd
+
+# 2. Wat staat hier?
+ls
+
+# 3. Ga naar Documents (of andere map)
+cd Documents
+
+# 4. Waar ben ik nu?
+pwd
+
+# 5. Ga terug
+cd ..
+```
+
+---
+
+## 5. Controleer alles
+
+Voer deze commando's uit en controleer de output:
+
+```bash
+# Node.js versie (moet 20.x.x zijn)
+node -v
+
+# npm versie (moet 10.x.x zijn)
+npm -v
+
+# Git versie
+git --version
+
+# SSH verbinding met GitHub
+ssh -T git@github.com
+```
+
+**Alles werkt?** ✅ Je bent klaar voor Les 2!
+
+---
+
+## Troubleshooting
+
+### "command not found: nvm"
+- Sluit terminal en open opnieuw
+- Mac: voeg toe aan `~/.zshrc`: `export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"`
+
+### "Permission denied" bij npm install
+- Gebruik `sudo npm install -g ...` (Mac/Linux)
+- Of fix npm permissies: https://docs.npmjs.com/resolving-eacces-permissions-errors
+
+### "Permission denied (publickey)" bij GitHub
+- Je SSH key is niet goed toegevoegd
+- Controleer: `ls ~/.ssh/` - je moet `id_ed25519` en `id_ed25519.pub` zien
+- Voeg opnieuw toe aan GitHub
+
+### Windows: Git Bash vs PowerShell
+- **Git Bash:** Unix-achtige commando's (`ls`, `cat`, etc.)
+- **PowerShell:** Windows commando's
+- Tip: Gebruik Git Bash voor consistentie met Mac/Linux
+
+---
+
+## Hulp nodig?
+
+- Stuur bericht via Teams
+- Kom 15 minuten eerder naar Les 2 voor hulp
+
+**Tot Les 2!** 🚀