fix: debug challenge

readme.md

@@ -19,26 +19,28 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
 
 ## Overzicht
 
+> **Let op:** Curriculum v2 - geherstructureerd na feedback les 1-2. Cursor vervangt OpenCode als primaire AI tool. Meer tijd voor Next.js en Supabase.
+
 | Les | Onderwerp | Deel | Status |
 |-----|-----------|------|--------|
-| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt |
-| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Uitgewerkt |
-| 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | 📋 Samenvatting |
+| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Gegeven |
+| 02 | [AI Code Assistants (OpenCode → Cursor)](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Gegeven |
+| 03 | [Cursor Setup & Basics](Samenvattingen/Les03-Samenvatting.md) | 1 | 🔨 In ontwikkeling |
 | 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
 | 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
-| 06 | [Next.js Fundamentals 1: SSR & Routing](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
-| 07 | [Next.js Fundamentals 2: API Routes & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
-| 08 | [Database Principles](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
-| 09 | [Supabase Basics](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
-| 10 | [Full-Stack Mini Project](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
-| 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
-| 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
-| 13 | [Prompt Engineering & Custom GPTs](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting |
-| 14 | [Project Setup & Repository Structure](Samenvattingen/Les14-Samenvatting.md) | 4 | 📋 Samenvatting |
-| 15 | [MCP & Context Management](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
-| 16 | [Mastering Cursor](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
-| 17 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
-| 18 | [Deployment & Production](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |
+| 06 | [Next.js 1: Pages, Routing & Layouts](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
+| 07 | [Next.js 2: Server Components & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
+| 08 | [Next.js 3: API Routes & Server Actions](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
+| 09 | [Database Principles & Supabase Setup](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
+| 10 | [Supabase: Auth & CRUD](Samenvattingen/Les10-Samenvatting.md) | 2 | 📋 Samenvatting |
+| 11 | [Full-Stack Mini Project](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
+| 12 | [Styling: Tailwind CSS & shadcn/ui](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
+| 13 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
+| 14 | [Project Setup & AI Config (.cursorrules, claude.md)](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
+| 15 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
+| 16 | [AI Chat Interface & Streaming](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
+| 17 | [Eindproject Werkdag](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
+| 18 | [Deployment, Presentaties & Evaluatie](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |
 
 ---
 
@@ -46,12 +48,12 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
 
 | Deel | Lessen | Tools | Kosten |
 |------|--------|-------|--------|
-| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode Desktop App, WebStorm | Gratis (WebStorm via school) |
-| Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis |
-| Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar |
-| Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar |
+| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
+| Deel 2: Technical Foundations | 5-10 | TypeScript, Next.js, Supabase | Gratis |
+| Deel 3: Full-Stack Development | 11-14 | Next.js, Supabase, Tailwind, **shadcn/ui**, Cursor | Gratis |
+| Deel 4: Advanced AI & Deployment | 15-18 | Cursor, Vercel AI SDK, Vercel | Gratis (Cursor Student Plan) |
 
-**Eindopdracht:** Cursor (free tier voldoende)
+**Eindopdracht:** Cursor (Student Plan - gratis Pro voor 1 jaar)
 
 ---
 
@@ -59,7 +61,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
 
 **4 lessen · 7 EC**
 
-Kennismaking met AI, LLMs en de basis van AI-assisted development.
+Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.
 
 ---
 
@@ -98,30 +100,30 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
 
 ---
 
-### Les 2: AI Code Assistants en OpenCode
+### Les 2: AI Code Assistants (OpenCode → Cursor)
 
-**Tools:** OpenCode Desktop App, OpenCode Zen (gratis AI), Git, Vercel
+**Tools:** OpenCode Desktop App, Cursor (Preview), Git, Vercel
 
 **Docent vertelt:**
-- Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars
-- Terminal versie (korte demo) vs Desktop App (wat we gebruiken)
-- OpenCode Zen: gratis AI modellen, geen API key nodig
-- Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode)
-- Build vs Plan mode: wanneer welke gebruiken
+- Recap: OpenCode workflow uit Les 1 huiswerk
+- Introduceer Cursor: professionele AI editor
+- Cursor vs OpenCode: krachten en zwakten
+- Installatie en configuratie
+- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline edit), `Ctrl+L` (chat)
 - De deployment workflow: git push → Vercel auto-deploy
 
 **Studenten doen:**
-- Korte terugblik op Les 1 (v0 workflow)
-- OpenCode Desktop App installeren en OpenCode Zen configureren
-- Bestaand v0 project openen en lokaal draaien (in ingebouwde terminal)
-- Met OpenCode een nieuwe pagina maken + link op homepage
+- OpenCode Desktop App gebruiken voor continue integratie
+- Cursor installeren en eerste keer verkennen
+- Bestaand v0 project openen in Cursor
+- Met Cursor een nieuwe pagina maken + link op homepage
 - Deployen via git push → Vercel
 
 **Lesopdracht:** Maak een nieuwe pagina in je v0 project. Clone je repo, draai lokaal, maak een pagina (/about, /services, of /contact) met componenten, voeg link op homepage toe, deploy minimaal 2x naar Vercel.
 
 **Huiswerk:**
 - Maak nieuw project vanaf scratch met `create-next-app`
-- Bouw 3 componenten met OpenCode (navbar, hero, + keuze)
+- Bouw 3 componenten met Cursor (navbar, hero, + keuze)
 - Push naar GitHub, koppel aan Vercel
 - Schrijf reflectie (300 woorden)
 
@@ -137,27 +139,29 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
 
 ---
 
-### Les 3: AI Ethics, Privacy & Security + WebStorm Integration
+### Les 3: Cursor Setup & Basics
 
-**Tools:** WebStorm (school licentie), OpenCode plugin, Git
+**Tools:** Cursor, Git, GitHub
 
 **Docent vertelt:**
-- Privacy risico's: wat NOOIT te delen met AI (API keys, credentials, client data)
-- Data ownership bij AI services - waar gaat je code naartoe?
-- Security vulnerabilities in AI-generated code (SQL injection, XSS)
-- GDPR/AVG compliance basics
-- WebStorm als professionele IDE
+- Cursor overview: tab completion, inline edits, chat, composer
+- Free tier vs Student Plan vs Pro
+- Installatie en first-time setup
+- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline), `Ctrl+L` (chat), `Ctrl+Shift+L` (composer)
+- AI model keuze: wanneer Haiku vs Sonnet?
+- Privacy & security: hoe Cursor data behandelt
+- `.cursorrules` introduceer: custom instructions voor je project
 
 **Studenten doen:**
-- **Groepsdiscussie:** Bespreek klassikaal de blog posts uit Les 2 - wat waren de ervaringen met AI-assisted coding?
-- Security workshop: identificeer problemen in AI-generated code
-- Maak persoonlijke "AI Safety Checklist"
-- WebStorm installeren met school licentie
-- OpenCode plugin configureren in WebStorm
+- **Groepsdiscussie:** Bespreek klassikaal ervaringen van vorige les - wat vond je van Cursor vs OpenCode?
+- Cursor installeren en Student Plan activeren
+- Een van je Les 2 projecten openen in Cursor
+- Tab completion, Ctrl+K, en Ctrl+L uitproberen
+- Begint `.cursorrules` bestand voor je project
 
-**Lesopdracht:** Security audit van AI-generated code (vind 5 problemen), setup WebStorm met OpenCode plugin, maak je eerste project in WebStorm.
+**Lesopdracht:** Open je Les 2 project in Cursor, voeg 3 nieuwe features toe (elk met ander shortcut: Tab, Ctrl+K, Chat), test telkens of het werkt, noteer: welke shortcut voelt het nuttigst?
 
-**Huiswerk:** Bouw secure feature (contact form of auth flow), review met je Safety Checklist, schrijf uitgebreide README met gevonden issues en fixes.
+**Huiswerk:** Experimenteer met Cursor Composer (Ctrl+Shift+L) op een bestaande component, schrijf reflectie (300 woorden) vergelijk je Cursor/OpenCode ervaringen, maak start-`.cursorrules` voor je eindproject.
 
 [→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
 
@@ -191,7 +195,7 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
 
 # Deel 2: Technical Foundations
 
-**5 lessen · 8 EC**
+**6 lessen · 10 EC**
 
 Stevige technische basis: TypeScript, Next.js, databases en Supabase.
 
@@ -228,7 +232,7 @@ Stevige technische basis: TypeScript, Next.js, databases en Supabase.
 
 ---
 
-### Les 6: Next.js Fundamentals 1 - SSR & Routing
+### Les 6: Next.js 1: Pages, Routing & Layouts
 
 **Tools:** Next.js 14, OpenCode/WebStorm, Vercel
 
@@ -262,137 +266,167 @@ Stevige technische basis: TypeScript, Next.js, databases en Supabase.
 
 ---
 
-### Les 7: Next.js Fundamentals 2 - API Routes & Data Fetching
+### Les 7: Next.js 2: Server Components & Data Fetching
 
-**Tools:** Next.js 14, React Query (TanStack Query), OpenCode
+**Tools:** Next.js 14, React Query (TanStack Query), Cursor
 
 **Docent vertelt:**
 - Server Components vs Client Components
 - 'use client' directive: wanneer en waarom
 - Data fetching in Server Components (async/await)
-- API Routes: Route Handlers in App Router
-- GET, POST, PUT, DELETE requests
 - React Query: waarom, installatie, basics
 - useQuery en useMutation hooks
-- Caching en revalidation basics
+- Caching en revalidation strategies
 
 **Studenten doen:**
 - Server Component met data fetching maken
-- API route schrijven
-- Client Component met React Query
-- CRUD operations via API routes
+- Client Component met React Query maken
+- useQuery en useMutation implementeren
+- Caching strategieën testen
 
 **Lesopdracht:**
-1. Maak `/api/products` route met GET en POST
-2. Bouw Server Component die products fetcht
-3. Installeer React Query, maak QueryClientProvider
-4. Bouw Client Component met useQuery
-5. Implementeer useMutation voor product toevoegen
+1. Maak Server Component met async data fetching
+2. Bouw Client Component met React Query
+3. Implementeer useQuery voor producten
+4. Voeg useMutation toe voor user interactions
+5. Test caching behavior
 
-**Huiswerk:** Voeg PUT en DELETE toe aan API, implementeer optimistic updates met React Query, bouw complete CRUD interface.
+**Huiswerk:** Experimenteer met revalidation strategies, voeg error boundaries toe, bouw loading states voor betere UX.
 
 [→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
 
 ---
 
-### Les 8: Database Principles
+### Les 8: Next.js 3: API Routes & Server Actions
 
-**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase (ter voorbereiding)
+**Tools:** Next.js 14, Cursor, Supabase
 
 **Docent vertelt:**
-- Wat is een relationele database?
-- Tabellen, rijen (records), kolommen (fields)
-- Primary Keys: unieke identificatie
-- Foreign Keys: relaties tussen tabellen
-- Relatie types: one-to-one, one-to-many, many-to-many
-- Normalisatie basics: waarom data niet dupliceren
-- Data types: text, integer, boolean, timestamp, uuid
-- NULL values en defaults
-- Indexen: waarom en wanneer
+- API Routes: Route Handlers in App Router
+- HTTP methods: GET, POST, PUT, DELETE
+- Server Actions: form actions en mutations
+- Request/response handling
+- Error handling in API routes
+- Middleware basics (authentication)
 
 **Studenten doen:**
-- Database schema tekenen voor simpel project
-- Relaties identificeren en documenteren
-- Normalisatie oefening: slechte structuur verbeteren
-- Primary en Foreign Keys bepalen
+- API routes schrijven voor CRUD operaties
+- Server Actions implementeren voor forms
+- Request validation toevoegen
+- Error handling testen
+- Authentication middleware bouwen
 
 **Lesopdracht:**
-1. Teken database schema voor "Blog met Comments" (users, posts, comments)
-2. Identificeer alle relaties en key types
-3. Normaliseer een "slechte" database structuur (gegeven)
-4. Schrijf data types en constraints op
-5. Bereid voor: welke tabellen heeft jouw eindproject nodig?
+1. Maak `/api/items` routes (GET, POST, PUT, DELETE)
+2. Bouw Server Actions voor form submissions
+3. Voeg request validation toe met Zod
+4. Implementeer error handling
+5. Test all CRUD operations
 
-**Huiswerk:** Maak volledig database schema voor je eindproject, documenteer alle relaties, bereid Supabase account aan voor volgende les.
+**Huiswerk:** Voeg authentication middleware toe, implementeer optimistic UI updates, schrijf API route tests.
 
 [→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)
 
 ---
 
-### Les 9: Supabase Basics
+### Les 9: Database Principles & Supabase Setup
 
-**Tools:** Supabase, Next.js, OpenCode
+**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase, Cursor
 
 **Docent vertelt:**
+- Wat is een relationele database? Tabellen, rijen, kolommen
+- Primary Keys, Foreign Keys en relaties
+- Relatie types: one-to-one, one-to-many, many-to-many
+- Normalisatie basics
 - Wat is Supabase? (database + auth in één)
-- Supabase project aanmaken (live demo)
+- Supabase project setup
 - Table Editor: tabellen maken zonder SQL
-- Je database schema van vorige les implementeren
-- Environment variables: wat, waarom, hoe
-- Supabase client setup
-- CRUD operaties uitgelegd
-- Auth UI component (plug & play login)
+- Environment variables configuratie
 
 **Studenten doen:**
-- **Groepsdiscussie:** Bespreek database schemas - wie heeft welke structuur gekozen en waarom?
+- Database schema tekenen voor eigen project
 - Supabase account en project aanmaken
-- Tabellen maken via UI (gebaseerd op Les 8 schema)
+- Tabellen maken via UI (op basis van eigen schema)
 - `.env.local` configureren
-- Supabase client maken
-- Data ophalen en tonen
-- Auth toevoegen
+- Supabase client instellen
 
 **Lesopdracht:**
-1. Maak Supabase project
-2. Maak je tabellen via Table Editor (uit Les 8)
-3. Configureer `.env.local`
-4. Bouw Todo app: lijst tonen, toevoegen, afvinken, verwijderen
-5. Voeg login toe met Auth UI
+1. Teken database schema voor jouw eindproject
+2. Maak Supabase project
+3. Implementeer je tabellen in Table Editor
+4. Configureer `.env.local`
+5. Test connectie met Supabase client
 
-**Huiswerk:** Extend Todo app (filtering, user-specifieke todos), deploy naar Vercel met env vars, test in productie.
+**Huiswerk:** Refine je database schema, voeg meer relaties toe, dokumenteer decisions, bereid Les 10 vor.
 
 [→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
 
 ---
 
-# Deel 3: Integration & AI Tooling
+### Les 10: Supabase: Auth & CRUD
 
-**3 lessen · 5 EC**
+**Tools:** Supabase, Next.js, Cursor, React Query
 
-Integratie van alle geleerde technieken en introductie van professionele AI tools.
+**Docent vertelt:**
+- Supabase Authentication: email/password, OAuth basics
+- User sessions en JWT tokens
+- Row Level Security (RLS) policies
+- CRUD operaties in Supabase
+- Realtime subscriptions introduceer
+- Error handling en validation
+- Best practices: secrets, security
+
+**Studenten doen:**
+- **Groepsdiscussie:** Database schemas van vorige les - aanpassingen nodig?
+- Auth setup met email/password
+- User sessions implementeren
+- RLS policies schrijven
+- CRUD app bouwen (Todo, Notes, Bookmarks)
+- Realtime features testen
+
+**Lesopdracht:**
+1. Setup Supabase Auth (email/password)
+2. Maak login/signup forms
+3. Implementeer user sessions
+4. Schrijf RLS policies voor je tabellen
+5. Bouw complete CRUD app met auth
+
+**Huiswerk:** Add OAuth provider (Google/GitHub), implementeer logout en password reset, deploy naar Vercel met env secrets.
+
+[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
 
 ---
 
-### Les 10: Full-Stack Mini Project
+# Deel 3: Full-Stack Development
 
-**Tools:** VS Code, Supabase, Browser DevTools
+**4 lessen · 7 EC**
+
+Integratie van alle geleerde technieken, styling en voorbereiding op eindproject.
+
+---
+
+### Les 11: Full-Stack Mini Project
+
+**Tools:** Cursor, Supabase, Browser DevTools
 
 **Docent vertelt:**
-- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase
+- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase, Auth
 - Vandaag combineren we alles in een werkende mini-app
 - Geen nieuwe concepten - alleen integratie en toepassing
+- Probleemoplossing in real time
 
 **Studenten doen:**
-- **Groepsdiscussie:** Bespreek Supabase ervaringen uit Les 9 - welke uitdagingen bij auth en RLS?
-- Bookmark manager bouwen: login, bookmarks toevoegen/bekijken/verwijderen
-- Alle geleerde technieken combineren
-- Zelfstandig integratieproblemen oplossen
+- **Groepsdiscussie:** Bespreek auth & CRUD ervaringen uit Les 10
+- Mini-project kiezen: Bookmarks, Todo's, Notes, of Recipe Collection
+- Met Cursor alle onderdelen kombinieren: auth, database, API, UI
+- Zelfstandig problemen oplossen
+- Polish en afronden
 
-**Lesopdracht:** Bouw een Personal Bookmarks app met login, CRUD operaties, en RLS. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min delete, 150 min polish.
+**Lesopdracht:** Bouw een volledige mini-app met: login, CRUD operaties, RLS security. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min testing, 150 min polish.
 
-**Huiswerk:** Reflectie schrijven (200 woorden): wat ging goed, waar liep je vast. Maak lijst van 3 verbeterpunten voor je code.
+**Huiswerk:** Verbeterpunten toevoegen, reflectie schrijven (200 woorden), repo opruimen, voorbereiden op styling.
 
-[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
+[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
 
 ---
 
@@ -428,235 +462,258 @@ Integratie van alle geleerde technieken en introductie van professionele AI tool
 
 ---
 
-### Les 12: Introduction to Cursor
+### Les 12: Styling: Tailwind CSS & shadcn/ui
 
-**Tools:** Cursor
+**Tools:** Tailwind CSS, shadcn/ui, Cursor
 
 **Docent vertelt:**
-- Waarom Cursor? De professionele AI editor
-- Free tier vs Pro: wat krijg je?
-- Core features: Tab completion, CMD+K, Chat, Composer
-- Cursor vs OpenCode: wanneer welke?
-- Live demo van Cursor workflow
+- Waarom Tailwind? Utility-first CSS approach
+- Tailwind setup in Next.js (meestal al aanwezig)
+- Basis utilities: flexbox, grid, spacing, colors
+- Tailwind components: buttons, cards, forms
+- Wat is shadcn/ui? High-quality component library
+- shadcn/ui installatie en configuratie
+- Theme customization
+- Dark mode setup
 
 **Studenten doen:**
-- Cursor installeren
-- Bestaand project openen in Cursor
-- Tab completion ervaren
-- CMD+K voor inline edits
-- Chat voor vragen over code
-- Composer voor multi-file changes
+- Tailwind basix oefenen op bestaande components
+- shadcn/ui components installeren en gebruiken
+- Custom Tailwind themes making
+- Bestaande mini-project restylen met Tailwind + shadcn
+- Dark mode implementeren
 
 **Lesopdracht:**
-1. Installeer Cursor (free tier)
-2. Open je Todo app in Cursor
-3. Voeg nieuwe feature toe met alleen Cursor (bijv. due dates)
-4. Gebruik elke feature minstens 3x: Tab, CMD+K, Chat, Composer
-5. Noteer: wat werkt goed, wat is wennen?
+1. Refactor je mini-project UI met Tailwind classes
+2. Installeer 5 shadcn/ui components (Button, Card, Input, etc.)
+3. Cre je eigen color theme in Tailwind
+4. Implementeer dark mode toggle
+5. Polish: zorg dat het er professioneel uitziet
 
-**Huiswerk:** Bouw complete mini-feature met Cursor, vergelijk ervaring met OpenCode, schrijf reflectie (400 woorden).
+**Huiswerk:** Refactor alle components, add animations met Tailwind, explore shadcn variations, dokumenteer styling decisions.
 
 [→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
 
 ---
 
-### Les 13: Prompt Engineering & Custom GPTs
+### Les 13: Hands-on: Van Idee naar Prototype
 
-**Tools:** ChatGPT (Custom GPTs), Claude (Projects)
+**Tools:** Cursor, ChatGPT (voor planning)
 
 **Docent vertelt:**
-- Advanced prompt engineering: structured output, constraints, iterative refinement
-- Custom GPTs: hoe maak je ze, wanneer gebruiken
-- Claude Projects: custom instructions + project knowledge
-- Vergelijking: Custom GPT vs Claude Project
-- Prompt template library opbouwen
+- Hoe ga je van vaag idee naar concrete features?
+- Feature breakdown methode
+- Component thinking: UI opdelen in herbruikbare stukken
+- MVP (Minimum Viable Product) denken
+- User stories schrijven
+- Efficiënt met Cursor samenwerken voor iteratie
 
 **Studenten doen:**
-- **Groepsdiscussie:** Bespreek Cursor reflecties - hoe verschilt het van OpenCode?
-- Custom GPT maken voor code review
-- Claude Project opzetten voor eigen project
-- Beide testen en vergelijken
-- Persoonlijke prompt library starten
+- **Groepsdiscussie:** Reflectie op styling - waar ben je tevreden mee?
+- Kiezen van eindproject idee (of voorgestelde opties)
+- Met AI feature breakdown maken
+- Component structuur ontwerpen
+- Start codebase met folder structure
+- Eerste components bouwen
 
-**Lesopdracht:**
-1. Maak Custom GPT "Code Reviewer" met specifieke checklist
-2. Maak Claude Project voor je project met context
-3. Test beide met dezelfde code
-4. Documenteer: welke is beter waarvoor?
+**Voorbeeld projecten:**
+- E-commerce product filter & search
+- Recipe planner met shoppinglist
+- Expense tracker met analytics
+- Blog platform met comments
 
-**Huiswerk:** Optimaliseer je AI assistants, maak persoonlijke prompt library, schrijf reflectie over Custom GPTs vs Claude Projects.
+**Lesopdracht:** Kies eindproject idee, maak feature breakdown met AI, ontwerp component tree, zet up codebase, bouw eerste 2-3 components.
+
+**Huiswerk:** Bouw meer components, integreer eerste data, documenteer architecture decisions, voorbereiding Les 14.
 
 [→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
 
 ---
 
-# Deel 4: Advanced AI Features
+# Deel 4: Advanced AI & Deployment
 
-**6 lessen · 10 EC**
+**4 lessen · 6 EC**
 
-Professionele workflows, advanced Cursor, AI features bouwen en deployment.
+AI-powered features, streaming, finale afronding en deployment.
 
 ---
 
-### Les 14: Project Setup & Repository Structure
+### Les 14: Project Setup & AI Config (.cursorrules, claude.md)
 
 **Tools:** Cursor, Git, GitHub
 
 **Docent vertelt:**
-- Waarom goede project structuur cruciaal is voor AI
-- De ideale folder structuur voor Next.js + Cursor
-- .cursorrules files: wat zijn ze, hoe schrijf je ze
-- docs/ folder: PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF
-- Environment variables: lokaal vs productie
-- README best practices
+- Waarom goede project structuur cruciaal is voor AI samenwerking
+- De ideale folder structuur voor Next.js + AI tools
+- `.cursorrules` files: syntax, best practices, examples
+- `claude.md`: project documentation voor Claude
+- `docs/` folder: AI-DECISIONS.md, ARCHITECTURE.md
+- Environment variables: lokaal vs productie setup
+- `.gitignore` en `.cursorignore` voor AI tools
+- README en documentatie best practices
 
 **Studenten doen:**
-- Eindproject repository aanmaken
-- Folder structuur opzetten
-- .cursorrules files schrijven
-- docs/ templates invullen
-- Eerste commit en push
+- Eindproject repository aanmaken/opschonen
+- Folder structuur optimaliseren
+- Uitgebreide `.cursorrules` schrijven
+- Project documentatie in claude.md
+- docs/ folder vullen
+- Eerste commits pushen
 
 **Lesopdracht:**
-1. `npx create-next-app` voor je eindproject
-2. Maak folder structuur aan (zie template)
-3. Schrijf `general.mdc` met jouw project regels
-4. Vul PROJECT-BRIEF.md volledig in
-5. Push naar GitHub
+1. Review folder structuur van je huidige project
+2. Schrijf comprehensive `.cursorrules` (50+ lines)
+3. Maak `claude.md` met project overview
+4. Vul `docs/AI-DECISIONS.md` in
+5. Push naar GitHub met cleane git history
 
-**Huiswerk:** Voeg extra .cursorrules files toe, start PROMPT-LOG.md, maak eerste components met Cursor.
-
-> 💡 **Eindopdracht:** Dit is een goed moment om te starten met deelopdracht 1. Je kunt de setup die je vandaag maakt direct gebruiken voor je eindproject.
+**Huiswerk:** Polish documentatie, add architecture diagrams, test .cursorrules in Cursor, prepare voor Deel 4.
 
 [→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
 
 ---
 
-### Les 15: MCP & Context Management
+### Les 15: Vercel AI SDK, Tool Calling & Agents
 
-**Tools:** Cursor, Claude Desktop, MCP servers
+**Tools:** Vercel AI SDK, Zod, Externe APIs, Cursor
 
 **Docent vertelt:**
-- Wat is MCP (Model Context Protocol)?
-- MCP servers: filesystem, GitHub, databases
-- Claude Desktop + MCP configureren
-- Context windows: wat zijn tokens, waarom limiet?
-- Context strategieën: relevante files, pruning
-- .cursorignore voor grote projecten
+- Vercel AI SDK basics: useChat, streaming
+- Tool Calling: AI laat externe APIs aanroepen
+- Agents: AI voert autonome multi-step taken uit
+- Zod voor schema validation
+- System prompts schrijven
+- Error handling en best practices
+- Gratis APIs voor projecten
 
 **Studenten doen:**
-- MCP servers configureren in Claude Desktop
-- Filesystem MCP testen
-- GitHub MCP verkennen
-- Context optimalisatie oefenen
-- .cursorignore opzetten
+- AI SDK + Zod installeren
+- Chat interface bouwen met streaming
+- Tools definiëren voor externe API
+- Tool calling implementeren
+- Simple agent bouwen
 
 **Lesopdracht:**
-1. Configureer Claude Desktop met filesystem MCP
-2. Test: laat Claude je project analyseren
-3. Configureer GitHub MCP
-4. Maak .cursorignore voor je project
-5. Experimenteer: wat gebeurt er met grote vs kleine context?
+1. Installeer Vercel AI SDK en Zod
+2. Bouw chat interface met streaming
+3. Definieer minimaal 2 tools
+4. Implementeer tool calling
+5. Test met externe API
 
-**Huiswerk:** Voeg extra MCP server toe (naar keuze), optimaliseer je project voor AI context, documenteer in AI-DECISIONS.md.
+**Huiswerk:** Add more tools, implementeer agents met `maxSteps`, documenteer in AI-DECISIONS.md, integreer in eindproject.
 
 [→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
 
 ---
 
-### Les 16: Mastering Cursor
+### Les 16: AI Chat Interface & Streaming
 
-**Tools:** Cursor, Claude models
+**Tools:** Vercel AI SDK, Cursor, Browser APIs
 
 **Docent vertelt:**
-- Model keuze: wanneer Haiku vs Sonnet vs Opus?
-- Composer Mode diepgaand: multi-file generatie
-- @ mentions: @Files, @Folders, @Code, @Docs, @Web
-- Codebase indexing optimaliseren
-- .cursorrules advanced: meerdere files, condities
-- Cost management: tokens monitoren
+- Streaming responses: hoe werkt het?
+- useChat hook: state management
+- Chat UI patterns: message history, loading states
+- Markdown rendering in chat
+- Error states en edge cases
+- User input handling en sanitization
+- Performance optimalisatie
 
 **Studenten doen:**
-- Verschillende models testen op zelfde taak
-- Complexe feature bouwen met Composer
-- @ mentions effectief gebruiken
-- .cursorrules uitbreiden en testen
+- Chat UI bouwen met useChat
+- Streaming responses implementeren
+- Message history managen
+- Error handling toevoegen
+- Styling met Tailwind
+- In eindproject integreren
 
-**Lesopdracht:** Bouw complexe Multi-Step Form Wizard met Cursor Composer (4 stappen, progress indicator, validation, localStorage persistence).
+**Lesopdracht:**
+1. Bouw chat interface met Vercel AI SDK
+2. Implementeer streaming responses
+3. Maak message history persistent (localStorage of DB)
+4. Voeg error handling toe
+5. Style met Tailwind + shadcn/ui
 
-**Huiswerk:** Research .cursorrules voorbeelden online, schrijf uitgebreide .cursorrules voor jouw eindproject, test en itereer.
-
-> 💡 **Eindopdracht check-in:** Hoe gaat je eindproject? Loop je ergens tegenaan? Dit is een goed moment om vragen te stellen en feedback te krijgen.
+**Huiswerk:** Add chat features (clear history, export, favorites), deploy naar Vercel, gather user feedback.
 
 [→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
 
 ---
 
-### Les 17: Vercel AI SDK, Tool Calling & Agents
+### Les 17: Eindproject Werkdag
 
-**Tools:** Vercel AI SDK, Zod, Externe APIs (TheCocktailDB, TheMealDB, etc.)
+**Tools:** Cursor, Vercel, Supabase, alle vorige tools
 
 **Docent vertelt:**
-- Vercel AI SDK basics: useChat, streaming
-- **Tool Calling:** AI laat externe APIs aanroepen
-- **Agents:** AI voert autonome multi-step taken uit met `maxSteps`
-- Gratis APIs voor projecten (TheCocktailDB, TheMealDB, Open Trivia DB)
-- Best practices voor tool design en system prompts
+- Q&A session: wat loop je tegen aan?
+- Cursor tips & tricks review
+- Debugging strategies
+- Performance optimization basics
+- Deployment troubleshooting
+- Final checklist review
 
 **Studenten doen:**
-- AI SDK + Zod installeren
-- Tools definiëren voor externe API
-- Tool calling implementeren
-- Agent bouwen met `maxSteps`
-- Error handling toevoegen
+- **Volle dag werken aan eindproject**
+- Docent beschikbaar voor individuele hulp
+- Features afmaken
+- Testing en bug fixes
+- Voorbereiding voor presentatie
+- Code review voorbereiden
 
 **Lesopdracht:**
-1. Kies een gratis API (cocktails, recepten, of quiz)
-2. Implementeer minimaal 3 tools
-3. Bouw een agent met `maxSteps: 5`
-4. Test: "Plan een menu voor..." of vergelijkbare complexe taak
+1. Alle features afmaken van je eindproject
+2. Testing: user flows doorlopen
+3. Bug fixes en edge cases
+4. Code cleanup en refactoring
+5. Deploy naar Vercel
 
-**Huiswerk:** Bouw agent voor eindproject met externe API, minimaal 3 tools, documenteer design in AI-DECISIONS.md.
-
-> 💡 **Eindopdracht:** Heb je al nagedacht over je AI feature? Bespreek je idee met de docent en klasgenoten.
+**Huiswerk:** Laatste fixes, presentatie voorbereiden, documentatie finaliseren, demo video opnemen (optioneel).
 
 [→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
 
 ---
 
-### Les 18: Deployment & Production
+### Les 18: Deployment, Presentaties & Evaluatie
 
 **Tools:** Vercel, GitHub, Supabase
 
-**Eindopdracht kickoff (15 min):**
-- Eindopdracht requirements doornemen
-- Beoordelingscriteria uitleggen
-- Timeline en deadlines
-- Vragen beantwoorden
+**Deployment Setup (30 min):**
+- Vercel deployment flow
+- Environment variables setup
+- Supabase productie configuration
+- Custom domains (optioneel)
+- Performance optimization (Lighthouse)
+- Security checklist
+
+**Presentaties & Evaluatie (90 min):**
+- Iedereen presenteert eindproject (5 min per student)
+- Live demo
+- Vragen van docent en klasgenoten
+- Feedback ontvangen
+- Course evaluatie
 
 **Docent vertelt:**
-- Vercel deployment flow
-- Environment variables in Vercel
-- Supabase productie setup
-- Custom domains
-- Performance basics (Lighthouse)
-- Security checklist voor productie
+- Best practices deployment
+- Performance monitoring
+- Error tracking en logging
+- Continuous deployment setup
+- Next steps: career paths, advanced topics
 
 **Studenten doen:**
-- Eindproject deployen naar Vercel
-- Env vars configureren
-- Supabase redirect URLs instellen
-- Lighthouse audit runnen
+- Final deployment naar Vercel
+- Performance audit (Lighthouse)
 - Security checklist doorlopen
+- Presentatie geven (5 min)
+- Course feedback geven
 
 **Lesopdracht:**
-1. Deploy eindproject naar Vercel
-2. Configureer alle env vars
-3. Test volledige app in productie
-4. Run Lighthouse, fix issues tot score >80
-5. Doorloop security checklist
+1. Deploy eindproject productie
+2. Configure environment variables
+3. Run Lighthouse audit (score >80)
+4. Complete security checklist
+5. Present your project
 
-**Huiswerk:** Custom domain toevoegen (optioneel), performance optimaliseren, documentatie updaten met productie URL, werk aan eindopdracht.
+**Huiswerk:** N.A. - Course afgerond!
 
 [→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)