fix: add lesson files

Samenvattingen/Les01-Samenvatting.md

@@ -0,0 +1,177 @@
+# Les 1: Introductie tot AI en Large Language Models
+
+## Hoofdstuk
+**Hoofdstuk 1: Fundamentals** (Les 1-3)
+
+## Beschrijving
+Kennismaking met AI, LLMs, ChatGPT en de basis van prompt engineering. Praktische workflow van schets op papier naar werkende website met v0.dev.
+
+---
+
+## Te Behandelen
+
+### Wat is AI?
+- Het AI-landschap: ChatGPT, Claude, Grok, Gemini
+- Gratis vs betaalde modellen (features, context windows, rate limits)
+- Wanneer welk model gebruiken
+- Large Language Models (LLMs) en next-token prediction
+- Hallucinaties en verificatie
+
+### ChatGPT in de Praktijk
+- Interface rondleiding
+- Model kiezen (GPT-4o, GPT-4o with canvas, GPT-4)
+- Tijdelijke chat (privacy)
+- Afbeeldingen analyseren (image-to-text) ← Cruciaal voor workflow!
+- Bestanden uploaden (PDF, documenten)
+- Custom Instructions
+- Het geheugen van ChatGPT
+
+### Prompt Engineering Basics
+- Wat is een prompt?
+- Slechte vs goede prompts
+- Prompt framework: Rol, Context, Taak, Format
+- **Tech stack specificeren** (React, Tailwind CSS)
+- **Kleuren en look & feel** (hex codes, stijl beschrijvingen)
+- Praktische tips
+
+### De Slimme Workflow: Schets → Website
+1. **TEKEN** je idee op papier
+2. Maak een **FOTO** van je tekening
+3. Upload naar **CHATGPT** + beschrijf je wensen (tech stack, kleuren, stijl)
+4. ChatGPT maakt een gedetailleerde **PROMPT**
+5. Plak die prompt in **V0.DEV** → Website!
+6. **DEPLOY** naar Vercel
+
+### v0.dev Demo
+- Wat is v0.dev (Vercel's AI UI generator)
+- Van schets naar code
+- Itereren met follow-up prompts
+- Deployment naar Vercel via GitHub
+
+---
+
+## Tools
+- ChatGPT (chat.openai.com)
+- Claude (claude.ai) - optioneel
+- v0.dev
+- Vercel
+- GitHub
+
+---
+
+## Lesopdracht (2 uur)
+
+### De Workflow Doorlopen
+
+**Stap 1: Tekenen (10 min)**
+- Teken een hero section op papier
+- Simpele blokken en lijnen zijn genoeg
+- Geef layout aan: headline, tekst, button, afbeelding placeholder
+
+**Stap 2: Foto maken (2 min)**
+- Maak duidelijke foto met telefoon
+
+**Stap 3: ChatGPT - Schets + Beschrijving (15 min)**
+
+Upload foto en beschrijf:
+```
+Dit is een schets voor een hero section van mijn website.
+
+Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
+
+Tech stack: React met Tailwind CSS
+Kleuren: [bijv. Primary #2563EB]
+Stijl: [bijv. Modern, minimalistisch]
+Doel: [bijv. SaaS landingspagina]
+```
+
+**Stap 4: Prompt kopiëren (1 min)**
+- Kopieer de gegenereerde Engelse prompt
+
+**Stap 5: v0.dev genereren (15 min)**
+- Plak prompt in v0.dev
+- Itereer indien nodig
+- Let op: ~7 gratis generaties per dag
+
+**Stap 6: Deploy naar Vercel (10 min)**
+- Add Integration → GitHub koppelen
+- v0 maakt automatisch repository
+- Deploy → Live URL!
+
+### Op te Leveren
+- Foto van papieren schets
+- Screenshot ChatGPT conversatie
+- Screenshot v0.dev resultaat
+- Vercel URL
+
+---
+
+## Huiswerk (2 uur)
+
+### Deel 1: Reflectie (500 woorden)
+Schrijf over je eerste ervaring met AI tools:
+- Wat heb ik geleerd?
+- Mijn ervaring met de workflow
+- Kritische kanttekeningen
+- Vooruitblik
+
+### Deel 2: AI Use Cases (5 stuks)
+Bedenk 5 concrete use cases voor AI in development:
+- De situatie
+- De AI-toepassing
+- Het verwachte resultaat
+- Mogelijke valkuilen
+
+### Deel 3: Tweede Schets → Website
+Doorloop de workflow opnieuw met een ANDER component:
+- Features section
+- Pricing table
+- Testimonials sectie
+- Contact formulier
+- Footer
+- Of eigen keuze
+
+**Specificeer weer:**
+- Tech stack (React + Tailwind)
+- Kleuren
+- Stijl/Look & Feel
+- Doel
+
+**Inleveren:** Via Teams chat
+
+---
+
+## Timing Overzicht
+
+| Blok | Onderwerp | Duur |
+|------|-----------|------|
+| 1 | Welkom & Introductie | 13 min |
+| 2 | Wat is AI? | 20 min |
+| 3 | AI Landscape | 12 min |
+| 4 | ChatGPT in de Praktijk | 25 min |
+| 5 | Prompt Engineering | 15 min |
+| 6 | Live Demo v0.dev | 27 min |
+| 7 | Hands-on Opdracht | 53 min |
+| 8 | Afsluiting | 15 min |
+
+**Totaal: 180 minuten (3 uur)**
+
+---
+
+## Benodigdheden
+- Laptop met internetverbinding
+- **Papier en pen** ← Belangrijk!
+- ChatGPT account (gratis)
+- GitHub account
+- Projectiescherm (docent)
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Uitleggen hoe LLMs werken (next-token prediction)
+- Het AI-landschap beschrijven (ChatGPT, Claude, Gemini, Grok)
+- ChatGPT praktisch gebruiken (interface, afbeeldingen, documenten)
+- Effectieve prompts schrijven met tech stack, kleuren en stijl
+- De schets-naar-website workflow toepassen
+- Een component genereren in v0.dev en deployen naar Vercel

Samenvattingen/Les02-Samenvatting.md

@@ -0,0 +1,92 @@
+# Les 2: AI Code Assistants en OpenCode Desktop App
+
+## Hoofdstuk
+**Hoofdstuk 1: Fundamentals** (Les 1-3)
+
+## Beschrijving
+Introductie tot standalone AI coding tools. OpenCode als eerste hands-on ervaring met AI-geïntegreerde development.
+
+---
+
+## Te Behandelen
+
+### Theorie
+- Verschil tussen chat-interfaces en geïntegreerde development tools
+- OpenCode als standalone desktop applicatie (geen IDE nodig)
+- Installatie en configuratie met gratis modellen (Ollama lokaal of Groq API)
+- Interface verkenning: code editor, chat sidebar, terminal, file browser
+- Best practices voor code generation prompts
+- Iteratief werken met AI
+- Wanneer welk model gebruiken (snelheid vs kwaliteit)
+
+### Praktijk
+- OpenCode installeren en configureren
+- Gratis modellen testen (Ollama lokaal OF Groq API)
+- Interface verkennen
+- Component bouwen met AI assistance
+
+---
+
+## Tools
+- OpenCode (standalone)
+- Ollama/Groq API
+- Vercel
+
+---
+
+## Lesopdracht (2 uur)
+
+**Deel 1: Setup (45 min)**
+- Installeer OpenCode desktop app
+- Koppel een gratis model: Ollama lokaal OF Groq API
+- Test beide opties en kies wat voor jou werkt
+
+**Deel 2: Interface Verkenning**
+- Probeer code completion
+- Test chat functionaliteit
+- Terminal commands
+- File operations
+
+**Deel 3: Component Bouwen (1u 15min)**
+- Bouw een complete responsive navbar component
+- Mobile hamburger menu
+- Alleen met AI assistance via OpenCode
+
+**Documentatie:**
+- Aantal prompts gebruikt
+- Iteraties nodig
+- Wat werkte goed/niet
+- Hoeveel tijd bespaard vs handmatig coderen
+
+---
+
+## Huiswerk (2 uur)
+
+**Component Library Bouwen:**
+Bouw een volledige landing page component library met OpenCode:
+- Hero section
+- Features section (3 cards met icons)
+- Testimonial card
+- CTA section met button
+- Footer
+
+**Vereisten:**
+- Alles responsive met Tailwind CSS
+- Test op mobile en desktop
+
+**Blog Post (300 woorden):**
+Schrijf over je ervaring:
+- Wat ging goed/fout
+- Limitations van gratis modellen vs betaalde
+- Hoe voelt AI-assisted coding met OpenCode standalone app
+- Zou je dit blijven gebruiken?
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- OpenCode installeren en configureren
+- Gratis AI modellen gebruiken (Ollama/Groq)
+- De OpenCode interface effectief gebruiken
+- Components bouwen met AI assistance
+- Het verschil begrijpen tussen chat-interfaces en geïntegreerde tools

Samenvattingen/Les03-Samenvatting.md

@@ -0,0 +1,112 @@
+# Les 3: AI Ethics, Privacy & Security + WebStorm Integration
+
+## Hoofdstuk
+**Hoofdstuk 1: Fundamentals** (Les 1-3)
+
+## Beschrijving
+Cruciale kennis over veilig en ethisch werken met AI, gecombineerd met professionele IDE workflow.
+
+---
+
+## Te Behandelen
+
+### Deel 1: Ethics, Privacy & Security (1 uur)
+
+**Privacy Risico's - Wat NOOIT te delen:**
+- API keys
+- Client data
+- Credentials
+- Persoonlijke informatie
+
+**Overige Onderwerpen:**
+- Data ownership bij AI services
+- Bias in AI models
+- Security vulnerabilities (SQL injection, XSS, prompt injection)
+- GDPR/AVG compliance basics
+- Professional responsibility als developer
+- Wanneer gebruik je AI wel/niet?
+
+### Deel 2: WebStorm Integration (1 uur)
+
+**WebStorm Setup:**
+- WebStorm installatie (gratis via school licentie)
+- OpenCode plugin voor WebStorm installeren en configureren
+
+**Voordelen IDE vs Standalone:**
+- Project context
+- Git integration
+- Debugging
+- Refactoring tools
+
+**Live Demo:**
+- Zelfde taak in OpenCode standalone vs WebStorm
+
+---
+
+## Tools
+- WebStorm (school licentie)
+- OpenCode plugin
+- Git
+
+---
+
+## Lesopdracht (2 uur)
+
+### Deel 1: Security Workshop (1 uur)
+
+**Groepswerk (30 min):**
+- Docent toont 3 AI-generated code snippets met security/privacy issues
+- Studenten identificeren problemen in groepjes
+
+**Individueel (30 min):**
+- Laat AI code genereren voor een login form
+- Review op security
+- Fix problemen
+- Maak persoonlijke "AI Safety Checklist" voor toekomstig gebruik
+
+### Deel 2: WebStorm Setup (1 uur)
+
+**Setup:**
+- Installeer WebStorm met school licentie
+- Installeer OpenCode plugin
+- Configureer met je model
+
+**Vergelijking:**
+- Rebuild een component uit Les 2 in WebStorm
+- Ervaar het verschil
+
+**Documentatie:**
+- Voordelen van IDE vs standalone
+- Welke workflow prefereer je?
+
+---
+
+## Huiswerk (2 uur)
+
+**Bouw Secure Feature:**
+Kies één van:
+- Contact form met server-side validatie
+- User authentication flow met JWT
+
+**Process:**
+1. Laat AI initial code genereren
+2. Review met je Safety Checklist
+3. Identificeer en fix alle security/privacy issues
+
+**Uitgebreide README:**
+- Wat AI genereerde
+- Welke issues je vond (security, privacy, GDPR)
+- Hoe je ze fixt
+- Lessons learned
+- Waarom WebStorm workflow beter/slechter is dan standalone OpenCode
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Privacy risico's bij AI-gebruik identificeren
+- Security vulnerabilities in AI-gegenereerde code herkennen
+- GDPR/AVG compliance basics begrijpen
+- WebStorm met OpenCode plugin configureren
+- Het verschil tussen standalone en IDE-geïntegreerde workflow beoordelen
+- Een persoonlijke AI Safety Checklist toepassen

Samenvattingen/Les04-Samenvatting.md

@@ -0,0 +1,118 @@
+# Les 4: Effectief Prompting, Iteratief Werken & Skills
+
+## Hoofdstuk
+**Hoofdstuk 2: Intermediate** (Les 4-9)
+
+## Beschrijving
+Geavanceerde prompt engineering technieken en introductie tot Skills.sh voor herbruikbare AI best practices.
+
+---
+
+## Te Behandelen
+
+### Geavanceerde Prompt Engineering
+- Zero-shot vs few-shot prompting
+- Chain-of-thought reasoning
+- Role prompting
+- Constraint-based prompting
+
+### Skills.sh Introductie
+- Wat zijn Skills (herbruikbare best-practices packages)
+- Hoe Skills werken (procedurele kennis voor AI agents)
+- Skills installeren via CLI (`npx skills add <skill-name>`)
+- Skills gebruiken in OpenCode/WebStorm
+- Hoe Skills de kwaliteit verhogen zonder extra prompting
+
+### Iteratief Werken
+- Start simpel → voeg complexiteit toe
+- Context effectief gebruiken
+
+---
+
+## Tools
+- OpenCode/WebStorm
+- Skills.sh
+- vercel-react-best-practices skill
+
+---
+
+## Lesopdracht (2 uur)
+
+### Deel 1: Skills Setup (30 min)
+
+**Installatie:**
+- Installeer Skills CLI
+- Add "vercel-react-best-practices" skill
+
+**Vergelijking:**
+- Bouw component ZONDER skill active
+- Bouw zelfde component WITH skill active
+- Zie het verschil in code quality
+
+**Documenteer concrete verschillen:**
+- Types
+- Error handling
+- Accessibility
+- Performance patterns
+
+### Deel 2: Iterative Build Challenge met Skills (1u 30min)
+
+**Bouw data filtering systeem voor productlijst in 4 iteraties (~25 min elk):**
+
+| Iteratie | Focus |
+|----------|-------|
+| 1 | Basis filter dropdown (category) |
+| 2 | Meer filters (price range slider, brand checkboxes, rating stars) met Skills guidance |
+| 3 | UX polish (clear all filters button, active filter chips, mobile responsive, loading states) |
+| 4 | URL state management & advanced features (sorting, search) |
+
+**Documenteer per iteratie:**
+- Hoe hielpen Skills?
+- Welke best practices werden automatisch toegepast?
+
+---
+
+## Huiswerk (2 uur)
+
+### Deel 1: Prompt Library (1 uur)
+
+Maak persoonlijke "prompt library" met 8 herbruikbare, geoptimaliseerde prompts voor:
+1. Component creation
+2. Bug fixing
+3. Refactoring
+4. Testing
+5. API integration
+6. Form validation
+7. Responsive layout
+8. Performance optimization
+
+**Vereisten:**
+- Test elk met ChatGPT EN Claude
+- Verfijn tot consistent goede output
+- Format: Markdown document met prompt templates
+
+### Deel 2: Skills Exploration (1 uur)
+
+**Installeer 3 relevante Skills:**
+1. "web-design-guidelines"
+2. "frontend-design"
+3. "supabase-postgres-best-practices" OF andere relevante skill
+
+**Per skill:**
+- Bouw klein component/feature met de skill active
+- Documenteer wat de skill doet
+- Concrete voorbeelden van hoe ze AI output beïnvloeden
+
+**Bonus:** Bekijk "skill-creator" skill
+
+**Delen:** Als GitHub gist
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Geavanceerde prompt technieken toepassen (zero-shot, few-shot, chain-of-thought)
+- Skills installeren en gebruiken
+- Het verschil zien tussen output met en zonder Skills
+- Iteratief werken (simpel → complex)
+- Een persoonlijke prompt library opbouwen

Samenvattingen/Les05-Samenvatting.md

@@ -0,0 +1,115 @@
+# Les 5: AI voor Content en Asset Generation
+
+## Hoofdstuk
+**Hoofdstuk 2: Intermediate** (Les 4-9)
+
+## Beschrijving
+AI-gegenereerde visuals en assets voor professionele webprojecten.
+
+---
+
+## Te Behandelen
+
+### Image Generation Tools Vergelijking
+- DALL-E 3 (via ChatGPT Plus)
+- Leonardo.ai
+- Ideogram
+- Midjourney alternatives
+
+### Prompt Engineering voor Images
+- Style descriptors
+- Mood en colors
+- Composition
+- Aspect ratios
+- Negative prompts
+
+### Asset Generation Workflow voor Web
+- Hero images
+- Icons
+- Illustrations
+- Backgrounds
+
+### Image Optimization voor Web
+- Compression
+- Formats (WebP, AVIF, etc.)
+- Responsive images
+
+### Copyright & Licenties
+- Copyright overwegingen bij AI-generated content
+- Wat mag wel/niet
+
+### Integratie in Next.js
+- Next.js Image component optimalisatie
+- Best practices
+
+---
+
+## Tools
+- DALL-E 3 (ChatGPT Plus)
+- Leonardo.ai
+- Ideogram
+- Next.js Image component
+
+---
+
+## Lesopdracht (2 uur)
+
+### Complete Visual Identity Challenge
+
+**Kies thema voor fictieve SaaS landing page:**
+- Project management
+- Fitness app
+- Educational platform
+- Of eigen keuze
+
+**Genereer complete asset set:**
+
+| Asset | Specificaties |
+|-------|---------------|
+| Hero image | 16:9 landscape |
+| Feature icons | 6 stuks, consistent style, SVG-ready |
+| Custom illustraties | 2 stuks voor sections |
+| Background pattern | Seamless texture |
+| Favicon | Multiple sizes |
+
+**Vereisten:**
+- Alle assets visueel consistent (coherent color palette, matching style, professional look)
+- Geoptimaliseerd voor web (<200KB per image, correct formats)
+- Geïntegreerd in Next.js landing page met Tailwind CSS
+- Proper Image component usage
+
+---
+
+## Huiswerk (2 uur)
+
+### Portfolio Project Visual Refresh
+
+**Opdracht:**
+- Kies een bestaand project uit eerdere lessen (of bouw nieuw landing page project)
+- Vervang ALLE placeholder images met professioneel AI-gegenereerde assets
+- Doel: cohesieve visual identity die eruitziet als professional design work
+
+**Case Study Blog Post (400 woorden):**
+
+Schrijf over:
+- Prompts die werkten
+- Iteratie proces
+- Challenges encountered
+- AI vs stock photos/Unsplash comparison
+- Time saved estimate
+- Quality assessment
+- Zou je dit in productie gebruiken?
+- Tips voor anderen
+
+**Include:** Before/after screenshots
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Verschillende image generation tools vergelijken
+- Effectieve prompts schrijven voor image generatie
+- Consistente visual assets genereren voor webprojecten
+- Images optimaliseren voor web performance
+- Copyright overwegingen bij AI-generated content begrijpen
+- Assets integreren in Next.js met proper optimization

Samenvattingen/Les06-Samenvatting.md

@@ -0,0 +1,133 @@
+# Les 6: MCP (Model Context Protocol) & Component Libraries
+
+## Hoofdstuk
+**Hoofdstuk 2: Intermediate** (Les 4-9)
+
+## Beschrijving
+Revolutionaire manier om AI te verbinden met data sources via MCP, gecombineerd met systematisch component library bouwen.
+
+---
+
+## Te Behandelen
+
+### MCP (Model Context Protocol)
+
+**Wat is MCP?**
+- Anthropic's protocol om LLMs veilig te verbinden met externe tools en data
+
+**Waarom MCP belangrijk is:**
+- Gestructureerde data access
+- Security
+- Reusability
+
+**MCP Servers:**
+- Filesystem
+- Databases (Supabase/PostgreSQL)
+- APIs (GitHub, Slack, Google Drive)
+- Web search
+
+**MCP Installatie en Configuratie:**
+- Claude Desktop configuratie
+
+### Component Libraries & Design Systems
+
+**Shadcn/ui:**
+- Systematisch bouwen met Shadcn/ui
+- Design tokens en consistency
+
+**Component Patterns:**
+- Component composition patterns
+- Building data-driven components die MCP data consumeren
+- Accessibility in component libraries
+- Documentation patterns
+
+---
+
+## Tools
+- Claude Desktop
+- MCP servers
+- Shadcn/ui
+- OpenCode/WebStorm
+- Supabase
+
+---
+
+## Lesopdracht (2 uur)
+
+### Deel 1: MCP Setup (45 min)
+
+**Installatie:**
+- Installeer Claude Desktop app
+- Configureer MCP servers:
+  - Filesystem server (access local files)
+  - Supabase MCP server (connect to database)
+
+**Test MCP:**
+- Vraag Claude om data uit je Supabase database te tonen
+- Of files uit je project te analyseren
+- Zie hoe Claude real-time data kan ophalen en gebruiken
+
+### Deel 2: Component Library met MCP Data (1u 15min)
+
+**Bouw Shadcn-based component library met AI in OpenCode/WebStorm:**
+
+| Component | Features |
+|-----------|----------|
+| DataTable | Sortable, filterable, pagination |
+| Card | Variant system |
+| Form components | Input, Select, Textarea met validation states |
+| Button | Size variants, loading states, icon support |
+
+**MCP Integration:**
+- Bouw Dashboard component die via MCP data uit Supabase haalt
+- Toon data in je components
+- Test: wijzig data in database, zie updates via MCP
+
+---
+
+## Huiswerk (2 uur)
+
+### Deel 1: Extend Component Library (1 uur)
+
+**Voeg 5 extra components toe:**
+1. Modal/Dialog
+2. Toast notifications
+3. Dropdown Menu
+4. Tabs
+5. Accordion
+
+**Alle components moeten hebben:**
+- TypeScript
+- Accessibility (ARIA)
+- Dark mode support
+- Responsive
+
+**Gebruik AI + Skills voor consistent design**
+
+### Deel 2: MCP Deep Dive (1 uur)
+
+**Experimenteer met extra MCP servers:**
+- Install GitHub MCP server (access repos/issues)
+- Of Google Drive MCP server
+- Of custom MCP server voor een API
+
+**Bouw feature die MCP data combineert:**
+- Bijv. dashboard dat GitHub issues + Supabase data toont
+
+**Documenteer:**
+- Wat kun je allemaal met MCP?
+- Wat zijn limitations?
+- Hoe verschilt dit van normale API calls?
+
+**Deel als GitHub repo met MCP setup instructions**
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- MCP begrijpen en configureren in Claude Desktop
+- MCP servers koppelen (filesystem, Supabase, APIs)
+- Een systematische component library bouwen met Shadcn/ui
+- Data-driven components bouwen die MCP data consumeren
+- Accessibility implementeren in component libraries
+- Het verschil tussen MCP en normale API calls uitleggen

Samenvattingen/Les07-Samenvatting.md

@@ -0,0 +1,115 @@
+# Les 7: Backend Made Easy met Supabase + AI + Skills
+
+## Hoofdstuk
+**Hoofdstuk 2: Intermediate** (Les 4-9)
+
+## Beschrijving
+Gebruik AI om backend te bouwen zonder backend expert te zijn. Focus op Supabase + AI + Skills combinatie.
+
+---
+
+## Te Behandelen
+
+### Supabase Overview
+- Open-source Firebase alternative
+
+**Core Features:**
+- Postgres database
+- Authentication
+- Storage
+- Realtime
+- Edge Functions
+- Vector database
+
+### Waarom Supabase + AI Perfect Combo
+- AI helpt met complexe database dingen
+
+### Skills voor Supabase
+- "supabase-postgres-best-practices" skill
+
+### Database Design met AI + Skills
+- Natuurlijke taal → genormaliseerd schema
+
+### Row Level Security (RLS)
+- RLS policies met AI + Skills
+- Waarom RLS belangrijk is
+
+### TypeScript Types
+- Supabase CLI auto-genereert types van database
+
+### Supabase Client
+- Setup
+- Basis CRUD operaties
+- Realtime subscriptions intro
+- Supabase Storage intro
+
+### Focus
+AI + Skills doen zwaar werk, jij leert concepten
+
+---
+
+## Tools
+- OpenCode/WebStorm
+- Supabase
+- supabase-postgres-best-practices skill
+- Next.js
+
+---
+
+## Lesopdracht (2 uur)
+
+### Deel 1: Supabase Skills Setup (10 min)
+- Installeer "supabase-postgres-best-practices" skill in OpenCode/WebStorm
+- Maak gratis Supabase project
+- Bewaar credentials
+
+### Deel 2: Bouw Todo App Backend (1u 50min)
+
+**Database Schema met AI + Skill (30 min):**
+- Prompt: "Ontwerp database schema voor todo app met users, todos (title, description, due_date, priority, completed), categories, proper relationships."
+
+**RLS Policies met AI + Skill (30 min):**
+- Prompt: "Maak RLS policies: users kunnen alleen hun eigen todos zien/bewerken."
+
+**Next.js Integratie (50 min):**
+- Setup Supabase client
+- Bouw UI:
+  - Create todo
+  - List todos
+  - Complete/delete
+  - Filter by category
+- Implementeer CRUD met error handling
+- Test of RLS werkt
+
+---
+
+## Huiswerk (2 uur)
+
+### Extend Todo App
+
+**Nieuwe Features:**
+1. **Categories systeem** - create/assign/filter, colors
+2. **User profile pagina** - avatar upload naar Storage, display name
+3. **Stats dashboard** - completed vs incomplete charts, trends
+
+**Deployment:**
+- Deploy naar Vercel met proper env vars
+
+### Reflectie (400 woorden)
+
+Schrijf over:
+- Verschil in security/quality met vs zonder Supabase skill?
+- Nieuwe patterns geleerd?
+- Queries die je fout zou schrijven zonder AI?
+- Zou je backend bouwen zonder AI hulp?
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Supabase project opzetten en configureren
+- Database schema's ontwerpen met AI + Skills
+- Row Level Security (RLS) policies implementeren
+- TypeScript types genereren van database
+- CRUD operaties implementeren met Supabase client
+- De supabase-postgres-best-practices skill effectief gebruiken

Samenvattingen/Les08-Samenvatting.md

@@ -0,0 +1,145 @@
+# Les 8: Claude Code - Agentic Coding Mode
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Kennismaking met Claude Code - autonome AI coding agent die zelfstandig multi-file changes kan plannen en uitvoeren.
+
+---
+
+## Te Behandelen
+
+### Wat is Claude Code?
+- Agentic coding mode
+- AI neemt initiatief
+- Plant multi-step changes
+- Bewerkt multiple files autonoom
+
+### Verschil met Chat-Based Coding
+- Jij beschrijft WAT
+- Claude Code figured out HOE en doet het
+
+### Claude Desktop Modes
+- Chat
+- Projects
+- Cowork
+- Code
+
+### Wanneer Claude Code Gebruiken
+- Nieuwe features
+- Grote refactoring
+- Complexe bugs
+- Test generation
+
+### Hoe Claude Code Werkt
+1. High-level instructie
+2. Claude analyseert
+3. Maakt plan
+4. Bewerkt files
+5. Runt tests
+6. Itereert
+
+### Skills in Claude Code
+- Automatisch toegepast
+
+### Best Practices
+- Geef duidelijke high-level doelen
+- Laat autonoom werken
+- Review changes zorgvuldig
+
+### Vergelijking
+| Tool | Aanpak |
+|------|--------|
+| OpenCode/WebStorm | Step-by-step guidance |
+| Claude Code | Autonome agent |
+
+---
+
+## Tools
+- Claude Desktop (Code mode)
+- Skills.sh
+- Supabase
+- Next.js
+
+---
+
+## Lesopdracht (2 uur)
+
+### Deel 1: Claude Code Verkenning (30 min)
+
+**Setup:**
+- Open Claude Desktop
+- Navigeer naar Code mode
+- Installeer relevante Skills eerst
+
+**Complexe Taak:**
+> "Bouw multi-step form wizard: 3 stappen (personal info, company details, preferences), progress indicator, validatie per step, data in useState, animations tussen steps, TypeScript, Shadcn components."
+
+- Laat Claude Code autonoom werken
+- Kijk hoe het plant en uitvoert
+- Vergelijk: hoe anders is dit dan manual prompting in OpenCode?
+
+### Deel 2: Autonome Feature Development (1u 30min)
+
+**Bouw User Dashboard met Stats:**
+
+Requirements:
+- Haal user data uit Supabase
+- Toon profile info
+- 4 stat cards
+- Activity feed
+- Charts met recharts
+- Alles responsive
+- Loading states
+- Error handling
+
+**Process:**
+- Geef high-level beschrijving
+- Relevante context files (@mentions)
+- Laat autonoom werken
+
+**Track:**
+- Hoeveel iteraties?
+- Manual fixes nodig?
+- Vergelijk tijd vs handmatig bouwen
+
+---
+
+## Huiswerk (2 uur)
+
+### Deel 1: Complexe Refactoring (1 uur)
+
+**Neem Todo app uit Les 7, gebruik Claude Code voor grote refactoring:**
+
+> "Extract alle Supabase queries naar aparte queries.ts file met proper error handling en TypeScript types. Update alle components om nieuwe query functions te gebruiken."
+
+- Laat autonoom handlen
+- Verifieer dat alles werkt
+- Documenteer: hoe goed handelde Claude Code het?
+
+### Deel 2: Comparison Essay (1 uur)
+
+**Schrijf vergelijkings essay (500 woorden):**
+
+OpenCode/WebStorm (step-by-step) vs Claude Code (autonome agent)
+
+**Vergelijk op:**
+- Autonomie niveau
+- Snelheid
+- Accuratesse
+- Wanneer welke gebruiken
+
+**Include:** Concrete voorbeelden
+
+**Final verdict:** Tool voorkeur going forward?
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Claude Code (agentic mode) activeren en gebruiken
+- Het verschil uitleggen tussen chat-based en agentic coding
+- High-level instructies geven voor autonome development
+- Multi-file changes laten plannen en uitvoeren door Claude Code
+- De juiste tool kiezen (OpenCode vs Claude Code) per situatie

Samenvattingen/Les09-Samenvatting.md

@@ -0,0 +1,137 @@
+# Les 9: AI Agents - Custom GPTs & Claude Projects
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Deep dive in AI agents - autonome systemen die kunnen plannen, tools gebruiken, en taken uitvoeren.
+
+---
+
+## Te Behandelen
+
+### Wat zijn AI Agents?
+- Verschil tussen chatbot vs agent
+
+### Agent Capabilities
+- Tool use
+- Memory
+- Planning
+- Learning
+- Proactief gedrag
+
+### Agent Frameworks Landschap
+- Custom GPTs
+- Claude Projects
+- LangChain
+- AutoGPT
+- CrewAI
+
+### Custom GPTs Deep Dive
+- Instructions
+- Conversation starters
+- Knowledge base upload
+- Capabilities
+
+### Use Cases voor Developers
+- Code review agent
+- Testing agent
+- Documentation generator
+
+### Claude Projects Deep Dive
+- Custom instructions
+- Project knowledge
+- Example conversations
+- Advanced features (artifacts, long context, tool use)
+
+### Projects Combineren met MCP
+- Access tot externe data
+
+### Real-World Developer Agents Bouwen
+
+---
+
+## Tools
+- Custom GPTs (OpenAI)
+- Claude Projects (Anthropic)
+- MCP
+
+---
+
+## Lesopdracht (2 uur)
+
+### Deel 1: Build Code Review Agent (1 uur)
+
+**Groepswerk (20 min):**
+In groepjes van 2-3:
+- Definieer comprehensive code review checklist:
+  - TypeScript
+  - React patterns
+  - Accessibility
+  - Security
+  - Performance
+  - Code organization
+
+**Maak Agent (30 min):**
+- Maak Custom GPT OF Claude Project met checklist als instructions
+- Upload sample "goede" code als knowledge base (10 min)
+
+### Deel 2: Build Documentation Agent (1 uur)
+
+**Individueel:**
+
+Maak agent die comprehensive documentatie genereert.
+
+**Instructions:**
+> "Je bent documentatie expert. Gegeven component code, genereer:
+> 1. Component overview
+> 2. Props documentatie
+> 3. Usage voorbeelden
+> 4. Accessibility notes
+> 5. Veel voorkomende valkuilen"
+
+- Upload component library uit Les 6 als knowledge base
+- Test agent met component
+
+---
+
+## Huiswerk (2 uur)
+
+### Deel 1: Test Agents in Workflow (1 uur)
+
+**Bouw nieuwe Todo app feature:**
+- Bijv. "Collaboration - invite users om todos te delen"
+
+**Gebruik beide agents:**
+- Code Review agent om code te reviewen
+- Documentation agent om te documenteren
+
+**Track:**
+- Hoe helpful?
+- Vingen ze echte issues?
+- Zou je dagelijks gebruiken?
+
+### Deel 2: Personal Dev Assistant (1 uur)
+
+**Maak comprehensive "Personal Dev Assistant" agent afgestemd op JOUW workflow.**
+
+**Include:**
+- Jouw coding standards
+- Preferred patterns
+- Tech stack specifics
+- Veel voorkomende taken
+- Troubleshooting kennis
+
+- Test extensively
+- Deel agent config als gist
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Het verschil uitleggen tussen chatbots en AI agents
+- Custom GPTs bouwen met instructions en knowledge base
+- Claude Projects opzetten met custom instructions
+- Specialized developer agents bouwen (code review, documentation)
+- Agents combineren met MCP voor externe data access
+- Een personal dev assistant agent maken

Samenvattingen/Les10-Samenvatting.md

@@ -0,0 +1,144 @@
+# Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Leer dingen automatiseren met Supabase cron jobs die AI agents triggeren voor intelligente workflows.
+
+---
+
+## Te Behandelen
+
+### Waarom Automatiseren?
+- Verminder manual werk
+- Consistente executie
+- Scale zonder effort
+- 24/7 beschikbaarheid
+
+### Types van Automation
+- Scheduled tasks (cron jobs)
+- Event-driven (webhooks)
+- AI-powered workflows
+
+### Supabase Edge Functions voor Automation
+- Deno runtime
+- TypeScript
+- Serverless at edge
+
+### Scheduled Edge Functions (Cron Jobs)
+- Timing configuratie
+- Use cases
+
+### Webhook Edge Functions
+- Getriggerd door database changes
+
+### AI Integratie in Edge Functions
+- Call OpenAI/Anthropic APIs
+- Process data met AI
+
+### Supabase Cron Jobs
+- pg_cron extension
+- Schedule taken in Postgres
+
+### Database Webhooks
+- Supabase Realtime broadcasts
+- INSERT/UPDATE/DELETE triggers
+
+### Edge Functions Chainen
+webhook → Edge Function → AI → actie
+
+### AI Automation Workflow Patterns
+- Nieuwe user → AI onboarding email
+- Content → AI moderatie → approve/reject
+- Dagelijks → data → AI summary → email
+
+### AI Agents in Automation
+- Monitoring agents
+- Data verrijking agents
+
+---
+
+## Tools
+- Supabase (Edge Functions, pg_cron)
+- Claude API / OpenAI API
+- Resend / SendGrid (email)
+
+---
+
+## Lesopdracht (2 uur)
+
+Bouw 2 automation workflows: 1 scheduled + 1 event-driven met AI.
+
+### Deel 1: Scheduled - Daily Summary Email (1 uur)
+
+**Flow:**
+```
+Supabase cron (dagelijks 9:00)
+    → Edge Function
+    → Haal gisteren's data op
+    → Claude API voor intelligente samenvatting
+    → Email via Resend/SendGrid
+```
+
+- Implementatie
+- Test
+- Documentatie
+
+### Deel 2: Event-Driven - AI Content Moderation (1 uur)
+
+**Trigger:** Webhook bij nieuwe todo
+
+**Flow:**
+```
+INSERT
+    → Webhook
+    → Edge Function
+    → Claude API moderatie check
+    → Flag if problematisch
+    → Enrich if clean (tags, effort estimate, subtask suggestions)
+    → Save to database
+```
+
+- Implementatie
+- Test
+- Documentatie
+
+---
+
+## Huiswerk (2 uur)
+
+### Deel 1: Intelligente Notificaties (1 uur)
+
+**Cron 8:00:**
+- Haal due todos op
+- Per user: Claude genereert gepersonaliseerd motiverend bericht
+- Email met AI message + todo lijst
+
+### Deel 2: AI Task Breakdown Agent (1 uur)
+
+**Webhook op INSERT:**
+- Als todo lang/complex → automatisch Claude aanroepen
+- Suggestie 3-5 subtaken
+- Auto-create in database
+
+**Test met complex todo**
+
+### Deliverables
+- 4 werkende automations
+- Documentatie
+- Reflectie (300 woorden):
+  - Kracht van automation?
+  - Wat nog meer automatiseren?
+  - Gebruik in echte projecten?
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Supabase Edge Functions schrijven en deployen
+- Cron jobs configureren met pg_cron
+- Webhooks triggeren op database changes
+- AI APIs integreren in Edge Functions
+- Scheduled en event-driven workflows bouwen
+- Praktische AI automation patterns implementeren

Samenvattingen/Les11-Samenvatting.md

@@ -0,0 +1,163 @@
+# Les 11: Introduction to Cursor - De Professionele AI Editor
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Kennismaking met Cursor als premium AI code editor - best of both worlds tussen IDE en AI power.
+
+---
+
+## Te Behandelen
+
+### Waarom Cursor na OpenCode/WebStorm + Claude Code?
+- Purpose-built for AI
+- Bliksem snel
+- Superieure tab completion
+- CMD+K inline editing
+- Composer mode
+- @ mentions systeem
+
+### Skills Compatibiliteit
+- Al je Skills werken ook in Cursor
+
+### Installatie
+- Download
+- GitHub integration
+- 2-week Pro trial
+
+### Core Features
+
+| Feature | Beschrijving |
+|---------|-------------|
+| Tab completion | AI-powered autocomplete |
+| CMD+K | Inline editing |
+| Chat | Conversatie met context |
+| @ mentions | Reference files, folders, docs |
+| Composer mode | Multi-file generation |
+
+### Skills Migratie
+- Skills van OpenCode werken meteen in Cursor
+
+### Cost Discussie
+- Free tier vs Pro ($20/maand)
+
+### Wanneer Wat Gebruiken?
+
+| Tool | Gebruik voor |
+|------|--------------|
+| OpenCode/WebStorm | Leren |
+| Claude Code | Grote autonome taken |
+| Cursor | Dagelijkse development |
+
+---
+
+## Tools
+- Cursor
+- GitHub
+- Skills.sh
+- Supabase
+
+---
+
+## Lesopdracht (2 uur)
+
+### Deel 1: Setup & Skills Migration (30 min)
+
+**Installatie:**
+- Install Cursor
+- Connect GitHub
+- Activate Pro trial
+
+**Verificatie:**
+- Verifieer Skills werken (`npx skills list`)
+- Test prompt met skill
+
+**Eerste Indrukken:**
+- Bouw component
+- Test tab completion
+- Test CMD+K
+- Test Chat met @ mentions
+- Documenteer verschillen vs OpenCode
+
+### Deel 2: Feature Comparison (45 min)
+
+**Rebuild filtering system uit Les 4 in Cursor:**
+- Time het
+
+**Gebruik alle features:**
+- Extensive tab completion
+- CMD+K
+- Chat
+- @ mentions
+- Try Composer
+
+**Vergelijk:**
+- Tijd
+- Code quality
+- Experience
+
+### Deel 3: Composer Mode (45 min)
+
+**Test Composer mode - Bouw analytics dashboard:**
+- Sidebar nav
+- Top navbar
+- 4 stat cards
+- Line chart
+- Activity feed
+
+**Process:**
+- Geef high-level beschrijving
+- Laat autonoom werken
+- Feedback in Composer chat
+
+**Vergelijk:** Cursor Composer vs Claude Code
+
+---
+
+## Huiswerk (2 uur)
+
+### Bouw Complete Mini-App met Cursor
+
+**Kies 1 van 4:**
+1. Weather App
+2. Expense Tracker
+3. Recipe Finder
+4. Habit Tracker
+
+**Requirements:**
+- Full CRUD met Supabase
+- Responsive
+- TypeScript strict
+- Shadcn
+- Deployed naar Vercel
+
+**Challenge:** Maximaliseer Cursor + Skills
+
+### Track Metrics
+- Tab completion usage
+- CMD+K count
+- Composer usage
+- Skills active
+- AI vs manual ratio
+
+### Deliverables
+- Deployed app
+- GitHub repo
+- Comprehensive reflectie (600 woorden):
+  - Is Cursor worth switching?
+  - Cursor vs Claude Code?
+  - Free vs Pro?
+  - Skills performance?
+  - Final verdict?
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Cursor installeren en configureren
+- Skills migreren naar Cursor
+- Core features gebruiken (Tab, CMD+K, Chat, @ mentions, Composer)
+- Het verschil beoordelen tussen Cursor en andere AI tools
+- Composer mode gebruiken voor multi-file generatie
+- Een weloverwogen keuze maken over welke tool wanneer te gebruiken

Samenvattingen/Les12-Samenvatting.md

@@ -0,0 +1,143 @@
+# Les 12: Advanced Context Management & AI-Vriendelijke Code
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Masterclass in context management voor maximale AI effectiveness.
+
+---
+
+## Te Behandelen
+
+### Context Windows Begrijpen
+- Tokens (~4 chars = 1 token)
+- Context sizes:
+  - GPT-4: 128K tokens
+  - Claude: 200K tokens
+
+### Waarom Context Belangrijk
+- Meer context = beter begrip
+- Maar ook: langzamer + duurder
+
+### Context Strategieën
+- Alleen relevante files
+- Start breed → narrow down
+- Sequential context
+- Prunen
+
+### Project Documentatie voor AI
+
+| Document | Doel |
+|----------|------|
+| README | Project overview |
+| ARCHITECTURE | System design |
+| COMPONENTS | Component library docs |
+
+### Hoe AI Docs Leest
+- Structuur matters
+- Voorbeelden helpen
+
+### AI-Vriendelijke Code Organisatie
+- Semantische naming
+- Kleine focused files
+- Proper separation
+- Comprehensive comments (WHY niet WHAT)
+
+### Context Pruning
+- Wanneer fresh chat
+- .cursorignore
+- Vorige context samenvatten
+
+### Knowledge Persistence
+- Claude Projects voor long-term memory
+
+### Tool Vergelijking
+Context handling in:
+- Cursor
+- OpenCode
+- Claude Code
+
+---
+
+## Tools
+- Cursor
+- Claude Desktop
+- .cursorignore
+
+---
+
+## Lesopdracht (2 uur)
+
+### Context Optimization Challenge
+
+**Setup:** Docent biedt messy codebase (10-15 files, onduidelijk, missing docs)
+
+### Phase 1: Assessment (30 min)
+- Test Cursor begrip met 4 vragen
+- Score X/10
+
+### Phase 2: Documentation (45 min)
+Maak comprehensive docs met AI:
+- README
+- ARCHITECTURE.md
+- COMPONENTS.md
+
+### Phase 3: Organization (45 min)
+Refactor voor clarity:
+- Rename files/functions
+- Split files <300 lines
+- Add comments
+- Organize folders
+- Improve imports
+
+### Phase 4: Re-test (30 min)
+- Zelfde 4 vragen
+- Score verbetering
+- Analyseer wat hielp
+
+---
+
+## Huiswerk (2 uur)
+
+### Maak Context Management Playbook
+
+### Deel 1: Playbook (1 uur)
+
+Schrijf gids over:
+- Pre-project checklist
+- Folder structure templates
+- File naming conventions
+- Prompting templates
+- Wanneer welke tool
+- Context management tijdens development
+- AI begrip meten
+- Red flags
+- Pro tips
+- Troubleshooting
+
+### Deel 2: Templates (30 min)
+
+Maak 3 templates:
+1. README.md
+2. ARCHITECTURE.md
+3. COMPONENT_TEMPLATE.md
+
+### Deel 3: Test (30 min)
+- Start vers Next.js project
+- Pas playbook toe
+- Test of Cursor meteen begrijpt
+- Itereer
+
+**Deel als GitHub repo**
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Context windows en token limits begrijpen
+- Effectieve context strategieën toepassen
+- Project documentatie schrijven die AI helpt
+- AI-vriendelijke code structuur implementeren
+- Context pruning toepassen (.cursorignore, fresh chats)
+- Code organisatie verbeteren voor betere AI interactie

Samenvattingen/Les13-Samenvatting.md

@@ -0,0 +1,164 @@
+# Les 13: Mastering Cursor met Claude Opus & Advanced Skills
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Geavanceerde technieken met Cursor en high-end models.
+
+---
+
+## Te Behandelen
+
+### Model Deep Dive
+
+**Waarom Claude Opus voor Complex:**
+- Superieure reasoning
+- 200K context
+- Beste multi-file orchestration
+
+**Wanneer Welk Model? (Complexity Matrix)**
+
+| Complexiteit | Model |
+|--------------|-------|
+| Simpel | Haiku |
+| Gemiddeld | Sonnet |
+| Complex | Opus |
+
+### Composer Mode Mastery
+- Multi-file generatie
+- Agent-like planning
+- Autonome iteratie
+
+### Wanneer Composer vs Chat
+- Composer: nieuwe features
+- Chat: begrip/vragen
+
+### @ Mentions Deep Dive
+
+**Alle Types:**
+- @Files
+- @Folders
+- @Code
+- @Docs
+- @Web
+
+**Advanced patterns**
+
+### Codebase Indexing
+- Hoe Cursor indexeert
+- Optimaliseren
+
+### .cursorrules Files
+- Project-specifieke instructies die persistent zijn
+- Powerful patterns
+- Hoe effectieve rules schrijven
+
+### Skills + Composer
+- Hoe Skills Composer krachtiger maken
+
+### Cost Management
+- Token usage monitoren
+- Free tier strategies
+- Wanneer Pro worth it
+
+---
+
+## Tools
+- Cursor
+- Claude Opus/Sonnet/Haiku
+- Skills.sh
+- .cursorrules
+
+---
+
+## Lesopdracht (2 uur)
+
+### Complexe Feature met Cursor Composer + Claude + Skills
+
+**Bouw Multi-Step Form Wizard:**
+
+| Stap | Features |
+|------|----------|
+| 1 | Personal info met avatar |
+| 2 | Company info met autocomplete |
+| 3 | Preferences (dynamic based on previous) |
+| 4 | Review & confirm met edit |
+
+**Extra Requirements:**
+- Progress indicator met validation visualization
+- Per-step validation
+- localStorage persistence
+- Success animation met confetti
+- Error handling throughout
+- TypeScript strict
+- Shadcn components
+- Mobile responsive
+
+### Process
+1. Install/verify Skills
+2. Use Composer met Opus/Sonnet - comprehensive prompt
+3. Let orchestrate
+4. CMD+K voor refinements
+5. Chat met @ mentions voor vragen
+
+### Track
+- Welk model wanneer
+- Composer iterations
+- Skills impact
+- @ mentions patterns
+- Cost estimate
+
+### Deliverable
+- Working wizard
+- Analyse document
+
+---
+
+## Huiswerk (2 uur)
+
+### Maak Perfect .cursorrules File
+
+### Deel 1: Research (30 min)
+- Bestudeer 3-5 .cursorrules voorbeelden online
+- Analyseer wat effectief maakt
+
+### Deel 2: Write Comprehensive (1 uur)
+
+Maak definitieve .cursorrules voor JOUW stack.
+
+**Include:**
+- Project context
+- Code style
+- TypeScript conventions
+- React/Next.js patterns
+- Styling guidelines
+- Error handling
+- Accessibility
+- Testing
+- Security
+- Common pitfalls
+- Skills reference
+
+### Deel 3: Test & Iterate (30 min)
+- Nieuw project met .cursorrules
+- Use Composer
+- Verifieer Cursor volgt rules
+- Itereer
+
+### Deliverable
+- .cursorrules file
+- Uitleg document
+- Test results
+- Deel als gist
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Het juiste Claude model kiezen per complexiteit
+- Composer mode effectief gebruiken voor complexe features
+- @ mentions strategisch inzetten
+- .cursorrules files schrijven voor consistent gedrag
+- Skills combineren met Composer voor betere output
+- Token usage monitoren en kosten beheren

Samenvattingen/Les14-Samenvatting.md

@@ -0,0 +1,145 @@
+# Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Geavanceerde Supabase features voor productie apps.
+
+---
+
+## Te Behandelen
+
+### Realtime Subscriptions
+- Hoe Postgres broadcasts
+- Subscriben op table changes
+- Channel-based real-time (presence, broadcast)
+- Collaborative features
+- Reconnections handlen
+
+### Supabase Storage
+- File uploads (images, PDFs)
+- Buckets organiseren
+- Image transformations (resize, format, quality)
+- Signed URLs
+- Storage RLS policies
+
+### Edge Functions Deep Dive
+- Deno runtime
+- TypeScript
+- At edge
+- Waarom gebruiken:
+  - Hide API keys
+  - Server-side logic
+  - Scheduled tasks
+  - Webhooks
+
+### AI Integratie Patterns
+- Call OpenAI/Anthropic veilig
+- Streaming responses
+
+### Praktische Patterns
+- Form processing
+- Emails
+- Data verrijking
+
+### Authentication Advanced
+- Social logins (Google, GitHub, Discord)
+- Magic links
+- Email confirmatie
+- Password reset
+- Session management
+
+### Error Handling & Debugging
+- Supabase error messages
+- RLS debuggen
+- Logging
+
+### Cursor Composer
+- Voor complexe multi-feature development
+
+---
+
+## Tools
+- Supabase (Realtime, Storage, Edge Functions)
+- Cursor
+- OpenAI/Anthropic API
+
+---
+
+## Lesopdracht (2 uur)
+
+### Level Up Todo App met 3 Advanced Features (met Cursor)
+
+### Feature 1: Realtime Collaboration (40 min)
+
+Real-time updates wanneer user A/B changes:
+- Subscribe
+- Update UI
+- Show "live" indicator
+- Handle reconnection
+
+**Test met multiple windows**
+
+### Feature 2: File Attachments met Storage (40 min)
+
+Attach files (images/PDFs):
+- Upload button
+- Thumbnail voor images (transformations)
+- Download voor PDFs
+- Delete optie
+- Proper RLS
+
+### Feature 3: AI-Powered Task Suggestions met Edge Function (40 min)
+
+"Suggest Subtasks" button:
+- Edge Function
+- OpenAI/Anthropic API (hide key)
+- AI returns 3-5 subtasks
+- Auto-create in database
+- Stream results
+
+**Use Cursor Composer voor alle 3 features orchestreren**
+
+---
+
+## Huiswerk (2 uur)
+
+### Bouw Production-Ready Supabase Starter Template
+
+**Use Cursor Composer + Skills**
+
+### Include:
+
+| Feature | Details |
+|---------|---------|
+| Complete Auth | Email + Google, protected routes HOC, profile met avatar |
+| Database Examples | Schema met relationships, RLS gedocumenteerd, types auto-generated |
+| Realtime Demo | Chat of live updates |
+| Storage Demo | Upload met preview, optimization |
+| Edge Function | Met AI, error handling, rate limiting |
+| Documentation | Setup, env vars, extend, patterns, troubleshooting |
+
+### Structureer als GitHub Template
+
+**Test:**
+- Clone
+- Rename
+- Deploy naar Vercel
+- Aim: <10 min
+
+### Deliverable
+- Template repo
+- Setup video
+- Reflectie
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Realtime subscriptions implementeren voor collaborative features
+- Supabase Storage gebruiken met transformations en RLS
+- Edge Functions schrijven met AI integratie
+- Advanced authentication implementeren (social, magic links)
+- Errors debuggen in Supabase (RLS, queries)
+- Een production-ready Supabase starter template bouwen

Samenvattingen/Les15-Samenvatting.md

@@ -0,0 +1,148 @@
+# Les 15: AI-Driven Testing & Quality Assurance
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+AI voor testen en code kwaliteit.
+
+---
+
+## Te Behandelen
+
+### Waarom Testen Belangrijk
+- Vang bugs vroeg
+- Vertrouwen in refactoring
+- Documentatie van gedrag
+
+### Types van Tests
+
+| Type | Scope |
+|------|-------|
+| Unit | Individuele functies |
+| Component | React components |
+| Integration | Meerdere units samen |
+| E2E | Volledige user flows |
+
+### AI voor Test Generation
+- Beschrijf wat te testen
+- AI schrijft comprehensive suites
+- Dekt edge cases
+
+### Testing Tools
+
+| Tool | Gebruik |
+|------|---------|
+| Vitest | Snelle moderne test runner |
+| React Testing Library | User perspectief |
+| MSW | API mocking |
+| Playwright | E2E testing |
+
+### Testing Supabase
+- Mocken database calls
+- RLS testen
+- Edge Functions testen
+
+### Code Review met AI
+- Geautomatiseerde reviews
+- Issues vinden (security, performance, accessibility)
+- Fixes suggereren
+
+### Debugging met AI
+- Plak error
+- AI legt uit en suggereert fix
+
+### Code Kwaliteit Metrics
+- Coverage >70%
+- Mutation testing
+- Complexity analyse
+
+### Cursor's AI voor Automated Test Generation
+
+### Integration met Workflow
+- Tests on git push
+- CI/CD
+
+---
+
+## Tools
+- Cursor
+- Vitest
+- React Testing Library
+- MSW
+- Playwright
+
+---
+
+## Lesopdracht (2 uur)
+
+### Voeg Comprehensive Tests Toe met Cursor + AI
+
+### Setup (30 min)
+- Install dependencies (Vitest, RTL)
+- Configureer Vitest
+- Maak test utils
+- Verifieer met smoke test
+
+### Schrijf Tests met Cursor (1 uur)
+
+| Type | Aantal | Tijd |
+|------|--------|------|
+| Unit Tests | 3-4 utility functies | 20 min |
+| Component Tests | 3-4 components | 30 min |
+| Integration Tests | 1-2 flows | 10 min |
+
+### Run & Fix (30 min)
+- Run `npm test`
+- AI helpt failures fixen
+- Bereik >70% coverage
+
+### Track
+- Test schrijf snelheid met AI?
+
+---
+
+## Huiswerk (2 uur)
+
+### Implementeer AI Code Review Workflow
+
+### Deel 1: Maak Agent (1 uur)
+
+Custom GPT/Claude Project voor code review.
+
+**Instructions moeten checken op:**
+- TypeScript safety
+- Error handling
+- Accessibility
+- Performance
+- Security
+- Best practices
+
+**Upload "goede" code als knowledge base**
+
+### Deel 2: Review 3 Components (1 uur)
+- Review 3 components
+- Documenteer ALLE issues
+- Categoriseer severity
+- Fix in Cursor
+- Re-review
+
+### Deel 3: Enhance Template
+- Add testing setup aan Starter Template
+- Add Code Review agent
+
+### Deliverable
+- Agent (link)
+- Review rapport (issues/fixes/before-after)
+- Reflectie over AI-assisted QA
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Verschillende test types begrijpen en implementeren
+- AI gebruiken om tests te genereren
+- Testing tools configureren (Vitest, RTL, MSW, Playwright)
+- Code review agents bouwen
+- AI gebruiken voor debugging
+- Code kwaliteit meten met coverage en metrics

Samenvattingen/Les16-Samenvatting.md

@@ -0,0 +1,153 @@
+# Les 16: Building AI-Powered Features & Workflow Automation
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Integreer AI mogelijkheden in apps.
+
+---
+
+## Te Behandelen
+
+### AI APIs Overzicht
+- OpenAI API
+- Anthropic API
+- Pricing
+- Rate limits
+
+### Veel Voorkomende AI Features
+- Tekst generatie
+- Samenvatting
+- Chatbots
+- Semantische zoeken
+- Aanbevelingen
+- Sentiment analyse
+- Vertaling
+
+### API Integratie Patterns
+- Streaming responses
+- Error handling
+- Caching
+- Prompt optimalisatie
+
+### API Keys Verbergen
+
+⚠️ **NOOIT in frontend!**
+
+**Gebruik Supabase Edge Functions:**
+- Server-side
+- Keys in env vars
+- Verify requests (auth)
+- Rate limiting
+
+### Streaming UI
+- Toon AI responses real-time
+- Vercel AI SDK of manual
+
+### Cost Management
+- Tokens tellen
+- Cache queries
+- Goedkopere modellen
+- Monitor spend
+
+### Workflow Automation
+- n8n/Pipedream intro
+
+### Praktische Automations
+- Form → AI → Supabase
+- Cron → data → AI → email
+- GitHub webhook → AI → Slack
+
+### Integration Patterns met Supabase
+
+### Cursor voor Snelle API Integratie
+
+---
+
+## Tools
+- Supabase Edge Functions
+- OpenAI/Anthropic API
+- n8n/Pipedream
+- Cursor
+
+---
+
+## Lesopdracht (2 uur)
+
+Bouw 2 features: 1 AI-powered app feature + 1 workflow automation
+
+### Deel 1: AI Feature (1 uur)
+
+**Kies 1 met Cursor:**
+
+| Optie | Beschrijving |
+|-------|-------------|
+| A | AI Blog Post Generator |
+| B | Smart Summarizer |
+| C | AI Writing Assistant |
+| D | Intelligent Search |
+
+**Implementeer via Supabase Edge Function**
+
+### Deel 2: Workflow Automation (1 uur)
+
+**Kies n8n OF Pipedream**
+
+**Bouw 1:**
+
+| Optie | Flow |
+|-------|------|
+| A | Smart Form Processor |
+| B | Daily AI Summary |
+
+**Test end-to-end**
+
+### Deliverable
+- Beide features deployed + working + gedocumenteerd
+
+---
+
+## Huiswerk (2 uur)
+
+### Polish & Extend AI Feature
+
+### Deel 1: UX (30 min)
+- Streaming
+- Copy button met toast
+- History (Supabase)
+- Loading skeletons
+- Empty states
+- Keyboard shortcuts
+
+### Deel 2: Monitoring & Safety (30 min)
+- Request logging
+- Usage dashboard
+- Rate limiting
+- Content filtering
+- Timeout handling
+
+### Deel 3: Documentation (30 min)
+- API docs
+- User guide
+- Add to Starter Template
+
+### Deel 4: Build 2 Automations voor Eindopdracht (30 min)
+- 2 n8n/Pipedream automations die echt helpen
+
+### Deliverable
+- Production AI feature
+- Automations
+- Docs
+- Reflectie (300 woorden)
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- AI APIs integreren (OpenAI, Anthropic)
+- API keys veilig verbergen via Edge Functions
+- Streaming UI implementeren
+- Kosten beheren en monitoren
+- Workflow automation tools gebruiken (n8n/Pipedream)
+- Praktische AI-powered features bouwen

Samenvattingen/Les17-Samenvatting.md

@@ -0,0 +1,188 @@
+# Les 17: Advanced Deployment & Production (Vercel)
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Production-ready deployment.
+
+---
+
+## Te Behandelen
+
+### Vercel Deployment Deep Dive
+
+**Hoe werkt Vercel:**
+- Edge network
+- Serverless
+- Automatic builds
+
+**Git Integratie:**
+- Push main → deploy
+- Branches → preview URLs
+- Preview deployments
+- Instant rollbacks
+- Environments
+
+### Environment Variables
+- Verschillende vars per environment
+- Secrets handlen
+- Accessing (process.env, NEXT_PUBLIC_)
+- Best practices
+
+### Custom Domains
+- Domein toevoegen
+- DNS config
+- HTTPS automatic
+- Multiple domains
+
+### Performance Optimization
+
+| Categorie | Technieken |
+|-----------|------------|
+| Images | Next.js Image, lazy loading, responsive, WebP/AVIF |
+| Fonts | next/font, font-display, reducing files |
+| Code | Dynamic imports, lazy loading, route-based splitting |
+| General | Bundle analyse, caching strategies, connection pooling |
+
+### Vercel Analytics
+
+**Web Vitals:**
+- CLS (Cumulative Layout Shift)
+- FID (First Input Delay)
+- LCP (Largest Contentful Paint)
+- FCP (First Contentful Paint)
+- TTFB (Time to First Byte)
+
+**Features:**
+- Real user monitoring
+- Speed insights
+- Audience insights
+
+### Error Tracking
+- Edge Function logs
+- Error boundaries
+- Logging services (Sentry, LogRocket)
+
+### CI/CD
+- GitHub Actions
+- Automated testing
+- Type checking
+- Linting
+- E2E on previews
+
+### Supabase Production
+- Connection pooling
+- Backups
+- Monitoring
+- Rate limiting
+
+### Security Checklist
+- Env vars secure
+- No secrets exposed
+- HTTPS
+- CSP headers
+- Rate limiting
+- Validation
+- Dependency updates
+
+---
+
+## Tools
+- Vercel
+- GitHub Actions
+- Sentry/LogRocket
+- Lighthouse
+- Cursor
+
+---
+
+## Lesopdracht (2 uur)
+
+### Production-Ready Deployment van Beste Project
+
+**(Todo app aanbevolen)**
+
+### Phase 1: Pre-Deployment Checklist (30 min)
+
+Verify:
+- Env vars
+- Error boundaries
+- Loading states
+- 404 page
+- SEO basics
+- Favicon
+- TypeScript errors
+
+### Phase 2: Performance Optimization (45 min)
+
+- Run Lighthouse (aim 90+)
+- Fix met Cursor:
+  - Optimize images
+  - Reduce bundle
+  - Optimize fonts
+  - Improve Core Web Vitals
+- Re-run
+- Document
+
+### Phase 3: Deploy & Monitor (45 min)
+
+- Deploy naar Vercel
+- Custom domain (optional)
+- Enable Analytics
+- Setup error monitoring
+- Maak monitoring dashboard
+- Test grondig
+
+### Deliverable
+- Production URL
+- Lighthouse screenshot
+- Dashboard access
+
+---
+
+## Huiswerk (2 uur)
+
+### Maak Production Deployment Playbook
+
+### Deel 1: Comprehensive Checklist (1 uur)
+
+Schrijf checklists voor:
+- Pre-Deployment
+- Environment Setup
+- Performance Requirements
+- Monitoring Setup
+- Post-Deployment
+- Rollback Plan
+
+### Deel 2: GitHub Actions (optional, 30 min)
+- Setup automated checks op PRs
+
+### Deel 3: Monitoring Dashboard (30 min)
+
+Bouw admin dashboard met:
+- Deployment status
+- Errors
+- Performance metrics
+- Database usage
+- API usage
+- Custom metrics
+- Auto-refresh 5min
+
+### Deliverable
+- Playbook
+- GitHub Actions
+- Dashboard
+- Reflectie (200 woorden)
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Vercel deployment configureren met Git integration
+- Environment variables veilig beheren
+- Custom domains configureren
+- Performance optimaliseren voor Web Vitals
+- Analytics en monitoring opzetten
+- CI/CD implementeren met GitHub Actions
+- Security best practices toepassen voor productie

Samenvattingen/Les18-Samenvatting.md

@@ -0,0 +1,195 @@
+# Les 18: Eindopdracht Intro, Planning & Advanced Topics
+
+## Hoofdstuk
+**Hoofdstuk 3: Advanced** (Les 8-18)
+
+## Beschrijving
+Voorbereiden op eindproject - culminatie van alles geleerd.
+
+---
+
+## Te Behandelen
+
+### Eindopdracht Walkthrough
+- 10 project opties
+- Complexiteit niveaus
+- Vereiste features
+
+### Requirements Deep Dive
+- Verplichte onderdelen
+- Bonus punten
+- Grading rubric
+
+### Timeline & Realistic Planning
+- 2 weken
+- Dagelijkse milestones
+
+### Hoe Juiste Project Kiezen
+
+Overweeg:
+- Interesse
+- Skills
+- Ambitie
+- Uniciteit
+
+### Project Planning met Cursor
+AI als planning partner:
+- Break down user stories
+- Schat complexiteit
+- Prioriteer MVP
+- Maak timeline
+- Identificeer risico's
+
+### Database Schema Design Workshop
+
+**Interactieve sessie:**
+- Studenten stellen voor
+- Klas bekritiseert
+- AI suggereert
+- Leer van elkaar
+
+**Veel Voorkomende Patterns:**
+- User management
+- Content ownership
+- Many-to-many
+- Soft deletes
+- Timestamps
+
+**Gebruik Supabase skill voor schema generatie**
+
+**RLS Policy Patterns**
+
+### Geavanceerde Architecture Patterns
+- Feature-based folders
+- API route organisatie
+- State management strategieën
+- Component patterns
+
+### Code Organisatie
+- Project structuur die schaalt
+- Documentatie die belangrijk is
+- Git workflow
+
+### Accessibility Deep Dive
+
+**WCAG Compliance:**
+- A (minimum)
+- AA (doel) ✓
+- AAA (excellent)
+
+**Focus areas:**
+- Keyboard navigatie
+- Screen readers
+- Color contrast
+- Forms accessibility
+
+### Final Polish Workshop
+- Code quality review met Cursor
+- Bug hunting
+- UI/UX polish
+- Performance check
+- Documentatie completeren
+- Presentatie skills
+
+---
+
+## Tools
+- Cursor
+- Supabase
+- Skills.sh
+- Planning tools
+
+---
+
+## Lesopdracht (2 uur)
+
+### Plan Je Eindopdracht
+
+### Phase 1: Project Selectie (30 min)
+- Review alle 10 opties
+- Kies ÉÉN
+- Documenteer redenering
+
+### Phase 2: Gedetailleerde Planning met AI (1 uur)
+
+**Gebruik Cursor + Claude Projects/Custom GPT**
+
+| Stap | Output |
+|------|--------|
+| Feature Breakdown | User stories lijst |
+| Database Schema Design | Schema met AI + Supabase skill |
+| Architecture Planning | Folder structuur, patterns |
+| Timeline | Dagelijkse milestones |
+
+### Phase 3: Project Setup (30 min)
+
+- GitHub repo aanmaken
+- Initialiseer Next.js
+- Install dependencies
+- Setup .cursorrules
+- README met plan
+- Supabase project (tables + RLS)
+- Install Skills
+- Deploy initiële versie
+- Commit
+
+### Deliverable
+- Project Proposal Document
+- Initiële repo setup compleet
+
+---
+
+## Huiswerk (2 uur)
+
+### Start Bouwen Core Features
+
+### Week 1 Doelen
+- Auth compleet
+- Database schema
+- Core feature #1
+- Basis layout + navigatie
+
+### Deze Week's Taken
+1. Supabase Auth setup
+2. Database implementatie
+3. Basis layout
+4. Eerste core feature
+
+### Requirements
+- Gebruik Cursor + Composer + Skills extensief
+- Commit frequent
+- Test elke feature
+- Documenteer blockers
+
+### Deliverable
+- Progress update (250 woorden)
+- GitHub repo
+- Deployed preview URL
+
+---
+
+## 10 Eindopdracht Opties (Referentie)
+
+1. Task Management App
+2. Personal Finance Tracker
+3. Recipe Collection App
+4. Fitness Tracker
+5. Event Planning Platform
+6. Learning Management System
+7. Portfolio Builder
+8. Job Application Tracker
+9. Travel Planner
+10. Habit Tracker
+
+*(Details per optie in aparte eindopdracht document)*
+
+---
+
+## Leerdoelen
+Na deze les kan de student:
+- Een geschikt eindproject kiezen
+- Gedetailleerd plannen met AI assistance
+- Database schema's ontwerpen met best practices
+- Geavanceerde architecture patterns toepassen
+- Accessibility requirements implementeren (WCAG AA)
+- Een project opzetten met alle geleerde tools en technieken