From f5ed2f7f313b749efb3515cec164261d426598b5 Mon Sep 17 00:00:00 2001
From: Tim Rijkse <trijkse@gmail.com>
Date: Thu, 29 Jan 2026 14:14:14 +0100
Subject: [PATCH] fix: update supabase lessons to make them a bit simpler

---
 Samenvattingen/Les07-Samenvatting.md | 198 +++++++++++++-------
 Samenvattingen/Les10-Samenvatting.md | 258 +++++++++++++++++----------
 Samenvattingen/Les14-Samenvatting.md | 246 +++++++++++++++----------
 Samenvattingen/Les16-Samenvatting.md | 236 +++++++++++++-----------
 readme.md                            | 101 ++++++-----
 5 files changed, 630 insertions(+), 409 deletions(-)

diff --git a/Samenvattingen/Les07-Samenvatting.md b/Samenvattingen/Les07-Samenvatting.md
index 327dd71..1bdc06f 100644
--- a/Samenvattingen/Les07-Samenvatting.md
+++ b/Samenvattingen/Les07-Samenvatting.md
@@ -1,4 +1,4 @@
-# Les 7: Backend Made Easy met Supabase + AI + Skills
+# Les 7: Backend Basics met Supabase
 
 > 📋 **Lesmateriaal nog niet uitgewerkt**
 >
@@ -14,112 +14,174 @@
 **Hoofdstuk 2: Intermediate** (Les 4-9)
 
 ## Beschrijving
-Gebruik AI om backend te bouwen zonder backend expert te zijn. Focus op Supabase + AI + Skills combinatie.
+Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit.
 
 ---
 
 ## Te Behandelen
 
-### Supabase Overview
+### Wat is Supabase?
 - Open-source Firebase alternative
+- Hosted Postgres database
+- Gratis tier voor development
+- Mooie UI om tabellen te beheren
 
-**Core Features:**
-- Postgres database
-- Authentication
-- Storage
-- Realtime
-- Edge Functions
-- Vector database
+### Supabase UI Tour
+- Dashboard overview
+- Table Editor: tabellen maken zonder SQL
+- Kolommen toevoegen (text, number, boolean, timestamp)
+- Data handmatig invoeren en bekijken
 
-### Waarom Supabase + AI Perfect Combo
-- AI helpt met complexe database dingen
+### Database Basics (zonder SQL kennis)
+- Tabellen = spreadsheets met regels
+- Kolommen = velden (naam, email, etc.)
+- Rijen = individuele records
+- Primary key: unieke identifier per rij
 
-### Skills voor Supabase
-- "supabase-postgres-best-practices" skill
+### Supabase Client in Next.js
 
-### Database Design met AI + Skills
-- Natuurlijke taal → genormaliseerd schema
+**Installatie:**
+```bash
+npm install @supabase/supabase-js
+```
 
-### Row Level Security (RLS)
-- RLS policies met AI + Skills
-- Waarom RLS belangrijk is
+**Setup:**
+```ts
+import { createClient } from '@supabase/supabase-js'
 
-### TypeScript Types
-- Supabase CLI auto-genereert types van database
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+)
+```
 
-### Supabase Client
-- Setup
-- Basis CRUD operaties
-- Realtime subscriptions intro
-- Supabase Storage intro
+### CRUD Operaties (met AI hulp)
 
-### Focus
-AI + Skills doen zwaar werk, jij leert concepten
+**Create:**
+```ts
+const { data, error } = await supabase
+  .from('todos')
+  .insert({ title: 'Nieuwe taak', completed: false })
+```
+
+**Read:**
+```ts
+const { data, error } = await supabase
+  .from('todos')
+  .select('*')
+```
+
+**Update:**
+```ts
+const { data, error } = await supabase
+  .from('todos')
+  .update({ completed: true })
+  .eq('id', 1)
+```
+
+**Delete:**
+```ts
+const { error } = await supabase
+  .from('todos')
+  .delete()
+  .eq('id', 1)
+```
+
+### Simpele Authentication
+- Supabase Auth UI component (plug & play)
+- Magic Link login (geen wachtwoord nodig)
+- Session checken met `supabase.auth.getUser()`
+
+### Environment Variables
+- `.env.local` voor secrets
+- `NEXT_PUBLIC_` prefix voor client-side
+- Nooit API keys committen naar Git
+
+### AI Helpt Met
+- Database schema suggesties
+- Query schrijven als je vastloopt
+- Error messages begrijpen
+- Code voorbeelden genereren
 
 ---
 
 ## Tools
-- OpenCode/WebStorm
-- Supabase
-- supabase-postgres-best-practices skill
+- Supabase (gratis tier)
 - Next.js
+- Cursor/OpenCode
 
 ---
 
 ## 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
+### Bouw een Todo App met Supabase
 
-### Deel 2: Bouw Todo App Backend (1u 50min)
+**Deel 1: Supabase Setup (20 min)**
+- Maak gratis Supabase account
+- Maak nieuw project
+- Kopieer URL en anon key naar `.env.local`
 
-**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."
+**Deel 2: Database via UI (20 min)**
+- Maak `todos` tabel via Table Editor
+- Kolommen: `id` (auto), `title` (text), `completed` (boolean), `created_at` (timestamp)
+- Voeg 3 test todos toe via UI
 
-**RLS Policies met AI + Skill (30 min):**
-- Prompt: "Maak RLS policies: users kunnen alleen hun eigen todos zien/bewerken."
+**Deel 3: Next.js Integratie (1 uur)**
+- Installeer `@supabase/supabase-js`
+- Maak Supabase client
+- Bouw simpele UI:
+  - Lijst van todos ophalen en tonen
+  - Form om nieuwe todo toe te voegen
+  - Checkbox om todo af te vinken
+  - Delete button
 
-**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
+**Deel 4: Auth toevoegen (20 min)**
+- Installeer `@supabase/auth-ui-react`
+- Voeg login pagina toe met Auth UI component
+- Check of user ingelogd is
+
+### Deliverable
+- Werkende Todo app met Supabase backend
+- Login functionaliteit
+- CRUD operaties werken
 
 ---
 
 ## Huiswerk (2 uur)
 
-### Extend Todo App
+### Extend de 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
+**Feature 1: Filtering (30 min)**
+- Filter op: Alle / Actief / Voltooid
+- Sorteer op datum
 
-**Deployment:**
-- Deploy naar Vercel met proper env vars
+**Feature 2: User-specifieke todos (30 min)**
+- Voeg `user_id` kolom toe aan todos tabel
+- Filter todos op ingelogde user
+- Elke user ziet alleen eigen todos
 
-### Reflectie (400 woorden)
+**Feature 3: Polish (30 min)**
+- Loading states
+- Error handling met toast messages
+- Empty state ("Geen todos gevonden")
 
-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?
+**Deploy (30 min)**
+- Deploy naar Vercel
+- Voeg environment variables toe in Vercel dashboard
+- Test of alles werkt in productie
+
+### Deliverable
+- Deployed Todo app op Vercel
+- Screenshot van werkende app
+- Link naar live versie
 
 ---
 
 ## 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
+- Een Supabase project opzetten
+- Tabellen maken via de Supabase UI (zonder SQL)
+- De Supabase client installeren en configureren
+- Basis CRUD operaties uitvoeren (create, read, update, delete)
+- Simpele authenticatie implementeren met Auth UI
+- Environment variables correct gebruiken
diff --git a/Samenvattingen/Les10-Samenvatting.md b/Samenvattingen/Les10-Samenvatting.md
index 59266bb..7ae6d36 100644
--- a/Samenvattingen/Les10-Samenvatting.md
+++ b/Samenvattingen/Les10-Samenvatting.md
@@ -1,4 +1,4 @@
-# Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
+# Les 10: Project Setup & Repository Structure
 
 > 📋 **Lesmateriaal nog niet uitgewerkt**
 >
@@ -11,144 +11,208 @@
 ---
 
 ## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)
 
 ## Beschrijving
-Leer dingen automatiseren met Supabase cron jobs die AI agents triggeren voor intelligente workflows.
+Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.
 
 ---
 
 ## Te Behandelen
 
-### Waarom Automatiseren?
-- Verminder manual werk
-- Consistente executie
-- Scale zonder effort
-- 24/7 beschikbaarheid
+### Waarom Project Structure Belangrijk Is
+- AI tools werken beter met duidelijke structuur
+- Makkelijker samenwerken
+- Sneller nieuwe features toevoegen
+- Professionele uitstraling
 
-### Types van Automation
-- Scheduled tasks (cron jobs)
-- Event-driven (webhooks)
-- AI-powered workflows
+### Ideale Folder Structuur
 
-### Supabase Edge Functions voor Automation
-- Deno runtime
-- TypeScript
-- Serverless at edge
+```
+project/
+├── .cursor/
+│   └── rules/                 # Cursor instructies
+│       ├── general.mdc        # Algemene project regels
+│       └── components.mdc     # Component-specifieke regels
+├── docs/
+│   ├── PROMPT-LOG.md          # Belangrijke AI prompts
+│   ├── AI-DECISIONS.md        # Architectuur beslissingen
+│   └── PROJECT-BRIEF.md       # Project beschrijving
+├── src/
+│   ├── app/                   # Next.js App Router
+│   ├── components/
+│   │   ├── ui/                # Basis UI components
+│   │   └── features/          # Feature-specifieke components
+│   ├── lib/                   # Utilities en helpers
+│   └── types/                 # TypeScript types
+├── .env.local                 # Environment variables
+├── .env.example               # Template voor env vars
+├── .gitignore
+└── README.md
+```
 
-### Scheduled Edge Functions (Cron Jobs)
-- Timing configuratie
-- Use cases
+### .cursorrules Files
 
-### Webhook Edge Functions
-- Getriggerd door database changes
+**Wat zijn .cursorrules?**
+- Markdown files met instructies voor Cursor
+- Project-specifieke regels en conventies
+- Worden automatisch meegenomen in context
 
-### AI Integratie in Edge Functions
-- Call OpenAI/Anthropic APIs
-- Process data met AI
+**Voorbeeld `general.mdc`:**
+```markdown
+# Project Rules
 
-### Supabase Cron Jobs
-- pg_cron extension
-- Schedule taken in Postgres
+## Tech Stack
+- Next.js 14 met App Router
+- TypeScript (strict mode)
+- Tailwind CSS voor styling
+- Supabase voor backend
 
-### Database Webhooks
-- Supabase Realtime broadcasts
-- INSERT/UPDATE/DELETE triggers
+## Code Conventies
+- Gebruik functionele components
+- Prefer named exports
+- Destructure props
+- Gebruik async/await (geen .then())
 
-### Edge Functions Chainen
-webhook → Edge Function → AI → actie
+## Styling
+- Tailwind classes, geen inline styles
+- Mobile-first approach
+- Gebruik design tokens waar mogelijk
+```
 
-### AI Automation Workflow Patterns
-- Nieuwe user → AI onboarding email
-- Content → AI moderatie → approve/reject
-- Dagelijks → data → AI summary → email
+### docs/ Folder
 
-### AI Agents in Automation
-- Monitoring agents
-- Data verrijking agents
+**PROMPT-LOG.md**
+- Log van belangrijke prompts die tot goede code leidden
+- Minimaal 10 prompts documenteren
+- Format: doel → prompt → resultaat
+
+**AI-DECISIONS.md**
+- Architectuur beslissingen gemaakt met AI hulp
+- Waarom bepaalde keuzes gemaakt
+- Trade-offs en alternatieven
+
+**PROJECT-BRIEF.md**
+- Wat doet het project?
+- Wie is de doelgroep?
+- Welke features zijn er?
+
+### Environment Variables
+
+**.env.example** (commit naar Git):
+```
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+OPENAI_API_KEY=your-openai-key
+```
+
+**.env.local** (NOOIT committen):
+```
+NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
+OPENAI_API_KEY=sk-...
+```
+
+### README.md Best Practices
+- Project titel en korte beschrijving
+- Screenshots of demo GIF
+- Installatie instructies
+- Environment variables uitleg
+- Beschikbare scripts (`npm run dev`, etc.)
+
+### Git Best Practices
+- Kleine, focused commits
+- Duidelijke commit messages
+- Feature branches
+- `.gitignore` correct ingesteld
 
 ---
 
 ## Tools
-- Supabase (Edge Functions, pg_cron)
-- Claude API / OpenAI API
-- Resend / SendGrid (email)
+- Cursor
+- Git & GitHub
+- Next.js
+- VS Code / WebStorm
 
 ---
 
 ## Lesopdracht (2 uur)
 
-Bouw 2 automation workflows: 1 scheduled + 1 event-driven met AI.
+### Richt je Eindproject Repository In
 
-### Deel 1: Scheduled - Daily Summary Email (1 uur)
+**Deel 1: Repository Setup (30 min)**
+- Maak nieuwe GitHub repository
+- Clone lokaal
+- Run `npx create-next-app@latest` met TypeScript + Tailwind
+- Push initial commit
 
-**Flow:**
-```
-Supabase cron (dagelijks 9:00)
-    → Edge Function
-    → Haal gisteren's data op
-    → Claude API voor intelligente samenvatting
-    → Email via Resend/SendGrid
-```
+**Deel 2: Folder Structuur (30 min)**
+- Maak `docs/` folder met:
+  - `PROJECT-BRIEF.md` (beschrijf je eindproject idee)
+  - `PROMPT-LOG.md` (lege template)
+  - `AI-DECISIONS.md` (lege template)
+- Maak `.cursor/rules/` folder met:
+  - `general.mdc` (project regels)
+- Reorganiseer `src/` folder
 
-- Implementatie
-- Test
-- Documentatie
+**Deel 3: Environment Setup (20 min)**
+- Maak `.env.example` met alle benodigde variabelen
+- Maak `.env.local` met echte waarden
+- Controleer `.gitignore` (env files moeten erin staan!)
 
-### Deel 2: Event-Driven - AI Content Moderation (1 uur)
+**Deel 4: README & Git (40 min)**
+- Schrijf complete README.md
+- Maak eerste feature branch
+- Commit alle changes met goede messages
+- Push en maak PR (voor jezelf)
 
-**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
+### Deliverable
+- GitHub repository met complete structuur
+- Alle docs files aanwezig
+- .cursorrules file geschreven
+- README compleet
 
 ---
 
 ## Huiswerk (2 uur)
 
-### Deel 1: Intelligente Notificaties (1 uur)
+### Verfijn je Project Setup
 
-**Cron 8:00:**
-- Haal due todos op
-- Per user: Claude genereert gepersonaliseerd motiverend bericht
-- Email met AI message + todo lijst
+**Deel 1: .cursorrules Uitbreiden (45 min)**
+- Voeg `components.mdc` toe met component conventies
+- Voeg `api.mdc` toe met API/Supabase regels
+- Test of Cursor de regels oppikt
 
-### Deel 2: AI Task Breakdown Agent (1 uur)
+**Deel 2: Documentatie (45 min)**
+- Vul `PROJECT-BRIEF.md` volledig in:
+  - Projectnaam en tagline
+  - Probleem dat je oplost
+  - Target audience
+  - Core features (3-5)
+  - Nice-to-have features
+  - Tech stack keuzes
+- Start `AI-DECISIONS.md` met eerste beslissing
 
-**Webhook op INSERT:**
-- Als todo lang/complex → automatisch Claude aanroepen
-- Suggestie 3-5 subtaken
-- Auto-create in database
+**Deel 3: Basis Components (30 min)**
+- Maak `src/components/ui/` met basic components:
+  - Button.tsx
+  - Card.tsx
+  - Input.tsx
+- Gebruik Cursor met je nieuwe .cursorrules
 
-**Test met complex todo**
-
-### Deliverables
-- 4 werkende automations
-- Documentatie
-- Reflectie (300 woorden):
-  - Kracht van automation?
-  - Wat nog meer automatiseren?
-  - Gebruik in echte projecten?
+### Deliverable
+- Uitgebreide .cursorrules (minimaal 2 files)
+- Volledig ingevulde PROJECT-BRIEF.md
+- Basis UI components gemaakt met Cursor
+- Screenshot van Cursor die je rules gebruikt
 
 ---
 
 ## 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
+- Een professionele project structuur opzetten
+- .cursorrules files schrijven voor project-specifieke AI instructies
+- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF)
+- Environment variables correct beheren
+- Git best practices toepassen
+- Een README schrijven die anderen kunnen volgen
diff --git a/Samenvattingen/Les14-Samenvatting.md b/Samenvattingen/Les14-Samenvatting.md
index e42ee84..6833589 100644
--- a/Samenvattingen/Les14-Samenvatting.md
+++ b/Samenvattingen/Les14-Samenvatting.md
@@ -1,4 +1,4 @@
-# Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
+# Les 14: Debugging & Code Review met AI
 
 > 📋 **Lesmateriaal nog niet uitgewerkt**
 >
@@ -11,145 +11,201 @@
 ---
 
 ## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)
 
 ## Beschrijving
-Geavanceerde Supabase features voor productie apps.
+Leer hoe je AI effectief inzet voor debugging en code review. Begrijp foutmeldingen, los problemen op, en verbeter je code kwaliteit.
 
 ---
 
 ## Te Behandelen
 
-### Realtime Subscriptions
-- Hoe Postgres broadcasts
-- Subscriben op table changes
-- Channel-based real-time (presence, broadcast)
-- Collaborative features
-- Reconnections handlen
+### Waarom AI voor Debugging?
+- AI begrijpt error messages vaak beter dan Google
+- Kan context van jouw code meenemen
+- Suggereert oplossingen specifiek voor jouw situatie
+- Leert je patterns herkennen
 
-### Supabase Storage
-- File uploads (images, PDFs)
-- Buckets organiseren
-- Image transformations (resize, format, quality)
-- Signed URLs
-- Storage RLS policies
+### Error Messages Begrijpen
 
-### Edge Functions Deep Dive
-- Deno runtime
-- TypeScript
-- At edge
-- Waarom gebruiken:
-  - Hide API keys
-  - Server-side logic
-  - Scheduled tasks
-  - Webhooks
+**Typische JavaScript/React errors:**
+- `TypeError: Cannot read properties of undefined`
+- `ReferenceError: x is not defined`
+- `SyntaxError: Unexpected token`
+- `Hydration error` (Next.js specifiek)
 
-### AI Integratie Patterns
-- Call OpenAI/Anthropic veilig
-- Streaming responses
+**Hoe AI vragen:**
+```
+Ik krijg deze error:
+[plak error message]
 
-### Praktische Patterns
-- Form processing
-- Emails
-- Data verrijking
+In deze code:
+[plak relevante code]
 
-### Authentication Advanced
-- Social logins (Google, GitHub, Discord)
-- Magic links
-- Email confirmatie
-- Password reset
-- Session management
+Wat gaat er mis en hoe los ik het op?
+```
 
-### Error Handling & Debugging
-- Supabase error messages
-- RLS debuggen
-- Logging
+### Debugging Workflow met AI
 
-### Cursor Composer
-- Voor complexe multi-feature development
+**Stap 1: Isoleer het probleem**
+- Waar treedt de error op?
+- Wat was de laatste wijziging?
+- Kan je het reproduceren?
+
+**Stap 2: Verzamel context**
+- Error message (volledig!)
+- Relevante code
+- Wat je verwacht vs wat er gebeurt
+
+**Stap 3: Vraag AI**
+- Wees specifiek
+- Geef context
+- Vraag om uitleg, niet alleen fix
+
+**Stap 4: Begrijp de oplossing**
+- Vraag door als je het niet snapt
+- Leer het pattern voor volgende keer
+
+### Console.log Debugging
+- Strategisch plaatsen
+- Variabele waarden checken
+- Flow van code volgen
+- AI kan helpen met waar te loggen
+
+### Browser DevTools Basics
+- Console tab: errors en logs
+- Network tab: API calls checken
+- Elements tab: HTML/CSS inspecteren
+- React DevTools: component state bekijken
+
+### Code Review met AI
+
+**Wat kan AI reviewen:**
+- Code kwaliteit en leesbaarheid
+- Potentiële bugs
+- Performance issues
+- Security problemen
+- Best practices
+
+**Goede review prompt:**
+```
+Review deze code op:
+1. Bugs of edge cases die ik mis
+2. Performance verbeteringen
+3. Leesbaarheid
+4. Best practices voor React/Next.js
+
+[plak code]
+```
+
+### Veelvoorkomende Issues die AI Vindt
+- Missing error handling
+- Memory leaks (useEffect cleanup)
+- Onnodig re-renders
+- Hardcoded values
+- Missing loading/error states
+- Accessibility issues
+
+### Refactoring met AI
+- "Hoe kan ik deze code simplificeren?"
+- "Extract dit naar een custom hook"
+- "Maak dit component meer herbruikbaar"
+
+### Wanneer NIET AI Vertrouwen
+- Als je de oplossing niet begrijpt
+- Bij security-gerelateerde code (dubbel check!)
+- Bij verouderde info (check versie docs)
 
 ---
 
 ## Tools
-- Supabase (Realtime, Storage, Edge Functions)
 - Cursor
-- OpenAI/Anthropic API
+- Browser DevTools
+- React DevTools
+- Console/Terminal
 
 ---
 
 ## Lesopdracht (2 uur)
 
-### Level Up Todo App met 3 Advanced Features (met Cursor)
+### Debugging Challenge
 
-### Feature 1: Realtime Collaboration (40 min)
+Je krijgt een project met opzettelijke bugs. Los ze op met AI hulp.
 
-Real-time updates wanneer user A/B changes:
-- Subscribe
-- Update UI
-- Show "live" indicator
-- Handle reconnection
+**Deel 1: Setup (10 min)**
+- Clone het buggy project (wordt gedeeld)
+- Run `npm install` en `npm run dev`
+- Zie alle errors!
 
-**Test met multiple windows**
+**Deel 2: Bug Hunting (1 uur 20 min)**
 
-### Feature 2: File Attachments met Storage (40 min)
+Los de volgende bugs op (met AI hulp):
 
-Attach files (images/PDFs):
-- Upload button
-- Thumbnail voor images (transformations)
-- Download voor PDFs
-- Delete optie
-- Proper RLS
+| Bug | Symptoom |
+|-----|----------|
+| 1 | App crashed bij opstarten |
+| 2 | Data wordt niet geladen |
+| 3 | Form submit werkt niet |
+| 4 | Styling is broken op mobile |
+| 5 | Infinite loop bij useEffect |
+| 6 | Button click doet niets |
 
-### Feature 3: AI-Powered Task Suggestions met Edge Function (40 min)
+**Per bug:**
+- Identificeer de error message
+- Vraag AI om hulp met context
+- Implementeer de fix
+- Documenteer wat je geleerd hebt
 
-"Suggest Subtasks" button:
-- Edge Function
-- OpenAI/Anthropic API (hide key)
-- AI returns 3-5 subtasks
-- Auto-create in database
-- Stream results
+**Deel 3: Documentatie (30 min)**
+- Voeg toe aan je `PROMPT-LOG.md`:
+  - De prompts die je gebruikte
+  - Wat werkte wel/niet
 
-**Use Cursor Composer voor alle 3 features orchestreren**
+### Deliverable
+- Alle 6 bugs gefixed
+- PROMPT-LOG.md bijgewerkt
+- Korte notities per bug: wat was het probleem, hoe opgelost
 
 ---
 
 ## Huiswerk (2 uur)
 
-### Bouw Production-Ready Supabase Starter Template
+### Code Review Je Eigen Project
 
-**Use Cursor Composer + Skills**
+**Deel 1: Self-Review met AI (1 uur)**
+- Kies 3 belangrijke files uit je eindproject
+- Laat AI ze reviewen met een goede prompt
+- Documenteer bevindingen in `AI-DECISIONS.md`
 
-### Include:
+**Per file noteer:**
+- Welke issues AI vond
+- Welke je hebt gefixed
+- Welke je bewust negeert (en waarom)
 
-| 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 |
+**Deel 2: Refactoring (45 min)**
+- Kies 1 component dat te complex is
+- Vraag AI om refactoring suggesties
+- Implementeer de verbeteringen
+- Vergelijk before/after
 
-### Structureer als GitHub Template
-
-**Test:**
-- Clone
-- Rename
-- Deploy naar Vercel
-- Aim: <10 min
+**Deel 3: Debugging Checklist (15 min)**
+- Maak persoonlijke debugging checklist
+- Wat check je eerst bij errors?
+- Welke prompts werken goed voor jou?
 
 ### Deliverable
-- Template repo
-- Setup video
-- Reflectie
+- AI-DECISIONS.md met review bevindingen
+- 1 gerefactored component
+- Persoonlijke debugging checklist
 
 ---
 
 ## 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
+- Error messages lezen en begrijpen
+- Effectieve debugging prompts schrijven voor AI
+- Browser DevTools gebruiken voor debugging
+- Code laten reviewen door AI
+- Feedback van AI kritisch evalueren
+- Refactoring uitvoeren met AI suggesties
+- Documenteren wat geleerd is van debugging sessies
diff --git a/Samenvattingen/Les16-Samenvatting.md b/Samenvattingen/Les16-Samenvatting.md
index d4ec1a0..6cb55ec 100644
--- a/Samenvattingen/Les16-Samenvatting.md
+++ b/Samenvattingen/Les16-Samenvatting.md
@@ -1,4 +1,4 @@
-# Les 16: Building AI-Powered Features & Workflow Automation
+# Les 16: Vercel AI SDK - AI Features in je App
 
 > 📋 **Lesmateriaal nog niet uitgewerkt**
 >
@@ -11,153 +11,183 @@
 ---
 
 ## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)
 
 ## Beschrijving
-Integreer AI mogelijkheden in apps.
+Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert.
 
 ---
 
 ## Te Behandelen
 
-### AI APIs Overzicht
-- OpenAI API
-- Anthropic API
-- Pricing
-- Rate limits
+### Waarom Vercel AI SDK?
+- Abstractie over raw API calls
+- Built-in streaming support
+- React hooks voor eenvoudige integratie
+- Provider-agnostic (OpenAI, Anthropic, etc.)
+- Edge-ready
 
-### Veel Voorkomende AI Features
+### Installatie & Setup
+```bash
+npm install ai openai
+# of voor Anthropic:
+npm install ai @anthropic-ai/sdk
+```
+
+### Core Hooks
+
+#### `useChat` - Voor Conversaties
+```tsx
+import { useChat } from 'ai/react';
+
+export function ChatComponent() {
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
+
+  return (
+    <div>
+      {messages.map(m => (
+        <div key={m.id}>{m.role}: {m.content}</div>
+      ))}
+      <form onSubmit={handleSubmit}>
+        <input value={input} onChange={handleInputChange} />
+        <button type="submit" disabled={isLoading}>Send</button>
+      </form>
+    </div>
+  );
+}
+```
+
+#### `useCompletion` - Voor Single Completions
 - Tekst generatie
-- Samenvatting
-- Chatbots
-- Semantische zoeken
-- Aanbevelingen
-- Sentiment analyse
-- Vertaling
+- Samenvattingen
+- One-shot responses
 
-### API Integratie Patterns
-- Streaming responses
-- Error handling
-- Caching
-- Prompt optimalisatie
+### API Routes Setup
 
-### API Keys Verbergen
+```ts
+// app/api/chat/route.ts
+import { openai } from '@ai-sdk/openai';
+import { streamText } from 'ai';
 
-⚠️ **NOOIT in frontend!**
+export async function POST(req: Request) {
+  const { messages } = await req.json();
 
-**Gebruik Supabase Edge Functions:**
-- Server-side
-- Keys in env vars
-- Verify requests (auth)
+  const result = streamText({
+    model: openai('gpt-4o'),
+    messages,
+  });
+
+  return result.toDataStreamResponse();
+}
+```
+
+### Streaming Responses
+- Waarom streaming: betere UX, snellere perceived performance
+- Hoe het werkt: Server-Sent Events (SSE)
+- Token-by-token rendering
+- Loading states tijdens streaming
+
+### Integratie met Supabase
+- Chat history opslaan in database
+- User-specific conversations
+- Message threading
+
+### Error Handling
+- Network errors
 - Rate limiting
-
-### Streaming UI
-- Toon AI responses real-time
-- Vercel AI SDK of manual
+- Token limits
+- Graceful degradation
 
 ### 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
+- Token counting
+- Model selection (gpt-4o-mini vs gpt-4o)
+- Caching strategies
+- Usage monitoring
 
 ---
 
 ## Tools
-- Supabase Edge Functions
-- OpenAI/Anthropic API
-- n8n/Pipedream
+- Vercel AI SDK (`ai` package)
+- Next.js API Routes
+- OpenAI API / Anthropic API
 - Cursor
+- Supabase (voor chat history)
 
 ---
 
 ## Lesopdracht (2 uur)
 
-Bouw 2 features: 1 AI-powered app feature + 1 workflow automation
+### Bouw een AI Chat Component
 
-### Deel 1: AI Feature (1 uur)
+**Stap 1: Setup (20 min)**
+- Installeer `ai` en `openai` packages
+- Configureer environment variables
+- Maak API route `/api/chat`
 
-**Kies 1 met Cursor:**
+**Stap 2: Basic Chat (40 min)**
+- Implementeer `useChat` hook
+- Bouw chat UI met Tailwind
+- Test streaming responses
 
-| Optie | Beschrijving |
-|-------|-------------|
-| A | AI Blog Post Generator |
-| B | Smart Summarizer |
-| C | AI Writing Assistant |
-| D | Intelligent Search |
+**Stap 3: Supabase Integratie (40 min)**
+- Maak `conversations` en `messages` tabellen
+- Sla berichten op na elke response
+- Laad conversation history bij page load
 
-**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**
+**Stap 4: Polish (20 min)**
+- Loading indicators
+- Error states
+- Scroll to bottom
+- Clear conversation button
 
 ### Deliverable
-- Beide features deployed + working + gedocumenteerd
+- Werkende AI chat met streaming
+- Conversation history in Supabase
+- Clean UI met goede UX
 
 ---
 
 ## Huiswerk (2 uur)
 
-### Polish & Extend AI Feature
+### Bouw AI Feature voor Eindproject
 
-### Deel 1: UX (30 min)
-- Streaming
-- Copy button met toast
-- History (Supabase)
-- Loading skeletons
-- Empty states
-- Keyboard shortcuts
+Kies 1 passend bij je eindproject:
 
-### Deel 2: Monitoring & Safety (30 min)
-- Request logging
-- Usage dashboard
-- Rate limiting
-- Content filtering
-- Timeout handling
+| Eindproject | AI Feature |
+|-------------|------------|
+| AI Recipe Generator | Chat: "Wat kan ik maken met kip en rijst?" |
+| Smart Budget Buddy | Chat: "Analyseer mijn uitgaven deze maand" |
+| Travel Planner AI | Chat: "Plan een weekend Barcelona" |
 
-### Deel 3: Documentation (30 min)
-- API docs
-- User guide
-- Add to Starter Template
+### Deel 1: Implementatie (1 uur)
+- Pas `useChat` aan voor jouw use case
+- Custom system prompt voor context
+- Relevante data uit Supabase meegeven als context
 
-### Deel 4: Build 2 Automations voor Eindopdracht (30 min)
-- 2 n8n/Pipedream automations die echt helpen
+### Deel 2: UX Polish (30 min)
+- Streaming met typing indicator
+- Suggested prompts / quick actions
+- Copy response button
+- Regenerate button
+
+### Deel 3: Documentatie (30 min)
+- Documenteer je AI feature in `docs/AI-FEATURE.md`
+- Beschrijf system prompt keuzes
+- Leg integratie met Supabase uit
 
 ### Deliverable
-- Production AI feature
-- Automations
-- Docs
-- Reflectie (300 woorden)
+- AI feature geïntegreerd in eindproject
+- Documentatie
+- Deployed preview
 
 ---
 
 ## 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
+- Vercel AI SDK installeren en configureren
+- `useChat` en `useCompletion` hooks gebruiken
+- Streaming responses implementeren
+- API routes opzetten voor AI providers
+- Chat history opslaan in Supabase
+- Error handling en loading states implementeren
+- Kosten bewust omgaan met AI APIs
diff --git a/readme.md b/readme.md
index c1e4a8f..793aa6d 100644
--- a/readme.md
+++ b/readme.md
@@ -16,14 +16,14 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
 | 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 2 | 📋 Samenvatting |
 | 05 | [AI voor Content en Asset Generation](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
 | 06 | [MCP & Component Libraries](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
-| 07 | [Backend Made Easy met Supabase + AI](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
+| 07 | [Backend Basics met Supabase](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
 | 08 | [Claude Code - Agentic Coding Mode](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
 | 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
-| 10 | [Supabase Automation - Cron Jobs & Webhooks](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
+| 10 | [Project Setup & Repository Structure](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
 | 11 | [Introduction to Cursor](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
 | 12 | [Advanced Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
 | 13 | [Mastering Cursor met Claude Opus](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
-| 14 | [Supabase Advanced - Realtime & Edge Functions](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
+| 14 | [Debugging & Code Review met AI](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
 | 15 | [AI-Driven Testing & Quality Assurance](Samenvattingen/Les15-Samenvatting.md) | 3 | 📋 Samenvatting |
 | 16 | [Building AI-Powered Features](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
 | 17 | [Advanced Deployment & Production](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
@@ -102,7 +102,7 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
 
 **6 lessen · 10 EC**
 
-Verdieping in prompt engineering, backend development met Supabase, en introductie tot AI agents en MCP.
+Verdieping in prompt engineering, Supabase basics, en introductie tot AI agents en MCP.
 
 ---
 
@@ -148,7 +148,7 @@ Verdieping in prompt engineering, backend development met Supabase, en introduct
 
 ---
 
-## 2.2 Backend & Database
+## 2.2 MCP & Supabase
 
 ### Les 6: MCP & Component Libraries
 
@@ -170,21 +170,22 @@ Verdieping in prompt engineering, backend development met Supabase, en introduct
 
 ---
 
-### Les 7: Backend Made Easy met Supabase + AI + Skills
+### Les 7: Backend Basics met Supabase
 
-**Tools:** OpenCode/WebStorm, Supabase, supabase-postgres-best-practices skill, Next.js
+**Tools:** Supabase, Next.js, Cursor/OpenCode
 
 **Theorie/Uitleg:**
-- Supabase overview: Postgres, Auth, Storage, Realtime, Edge Functions
-- Waarom Supabase + AI perfect combo
-- Database design met AI + Skills
-- Row Level Security (RLS) policies
-- TypeScript types auto-genereren
-- Supabase client setup en CRUD operaties
+- Wat is Supabase: open-source Firebase alternative
+- Supabase UI Tour: Table Editor, tabellen maken zonder SQL
+- Database basics: tabellen, kolommen, rijen (geen SQL kennis nodig)
+- Supabase client setup in Next.js
+- CRUD operaties: create, read, update, delete
+- Simpele authenticatie met Auth UI component
+- Environment variables correct gebruiken
 
-**Lesopdracht:** Bouw Todo App backend: database schema met AI, RLS policies, Next.js integratie met CRUD.
+**Lesopdracht:** Bouw Todo App met Supabase: maak tabel via UI, setup client, bouw CRUD interface, voeg login toe met Auth UI.
 
-**Huiswerk:** Extend Todo app met categories, user profile (avatar upload), stats dashboard. Deploy naar Vercel.
+**Huiswerk:** Extend Todo app met filtering, user-specifieke todos, loading/error states. Deploy naar Vercel.
 
 [→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
 
@@ -242,21 +243,22 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
 
 ## 3.1 Advanced AI Tools
 
-### Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
+### Les 10: Project Setup & Repository Structure
 
-**Tools:** Supabase (Edge Functions, pg_cron), Claude/OpenAI API, Resend/SendGrid
+**Tools:** Cursor, Git & GitHub, Next.js
 
 **Theorie/Uitleg:**
-- Types van automation: scheduled tasks, event-driven, AI-powered
-- Supabase Edge Functions (Deno, TypeScript, serverless)
-- Scheduled Edge Functions (cron jobs)
-- Webhook Edge Functions
-- AI integratie in Edge Functions
-- AI Automation workflow patterns
+- Waarom goede project structuur belangrijk is voor AI tools
+- Ideale folder structuur voor Next.js projecten
+- .cursorrules files: project-specifieke instructies voor Cursor
+- docs/ folder: PROMPT-LOG.md, AI-DECISIONS.md, PROJECT-BRIEF.md
+- Environment variables beheren (.env.local vs .env.example)
+- README.md best practices
+- Git best practices: commits, branches, .gitignore
 
-**Lesopdracht:** Bouw 2 automations: Daily Summary Email (cron → AI samenvatting → email), AI Content Moderation (webhook bij nieuwe todo → AI check → enrich/flag).
+**Lesopdracht:** Richt je eindproject repository in: GitHub repo, folder structuur, .cursorrules, docs/ files, environment setup, complete README.
 
-**Huiswerk:** Bouw intelligente notificaties (gepersonaliseerd AI bericht), AI Task Breakdown Agent (complex todo → auto subtaken). 4 werkende automations + reflectie.
+**Huiswerk:** Verfijn setup: uitgebreide .cursorrules (meerdere files), volledig ingevulde PROJECT-BRIEF.md, basis UI components bouwen met Cursor.
 
 [→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
 
@@ -321,22 +323,25 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
 
 ---
 
-## 3.2 Testing & Advanced Supabase
+## 3.2 Debugging & Testing
 
-### Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
+### Les 14: Debugging & Code Review met AI
 
-**Tools:** Supabase (Realtime, Storage, Edge Functions), Cursor, OpenAI/Anthropic API
+**Tools:** Cursor, Browser DevTools, React DevTools
 
 **Theorie/Uitleg:**
-- Realtime Subscriptions: table changes, channels, presence
-- Supabase Storage: uploads, buckets, transformations, signed URLs
-- Edge Functions Deep Dive: Deno runtime, AI integratie
-- Advanced Authentication: social logins, magic links
-- Error handling & debugging
+- Waarom AI effectief is voor debugging
+- Error messages begrijpen (TypeError, ReferenceError, Hydration errors)
+- Debugging workflow met AI: isoleer → verzamel context → vraag AI → begrijp
+- Console.log debugging strategieën
+- Browser DevTools basics (Console, Network, Elements)
+- Code review met AI: kwaliteit, bugs, performance, security
+- Refactoring met AI hulp
+- Wanneer AI niet te vertrouwen
 
-**Lesopdracht:** Level up Todo app met 3 features: Realtime Collaboration, File Attachments met Storage, AI-Powered Task Suggestions via Edge Function.
+**Lesopdracht:** Debugging Challenge: los 6 opzettelijke bugs op in een project met AI hulp, documenteer wat je leert in PROMPT-LOG.md.
 
-**Huiswerk:** Bouw Production-Ready Supabase Starter Template met complete auth, database examples, realtime demo, storage demo, Edge Function, documentatie.
+**Huiswerk:** Code review je eigen eindproject met AI (3 files), refactor 1 complex component, maak persoonlijke debugging checklist.
 
 [→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
 
@@ -364,21 +369,24 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
 
 ## 3.3 AI Features & Deployment
 
-### Les 16: Building AI-Powered Features & Workflow Automation
+### Les 16: Vercel AI SDK - AI Features in je App
 
-**Tools:** Supabase Edge Functions, OpenAI/Anthropic API, n8n/Pipedream, Cursor
+**Tools:** Vercel AI SDK, Next.js API Routes, OpenAI/Anthropic API, Cursor
 
 **Theorie/Uitleg:**
-- AI APIs overzicht: OpenAI, Anthropic, pricing, rate limits
-- Veel voorkomende AI features: tekst generatie, samenvatting, chatbots
-- API integratie patterns: streaming, error handling, caching
-- API keys verbergen via Edge Functions
-- Streaming UI implementeren
-- Workflow automation met n8n/Pipedream
+- Vercel AI SDK introductie: waarom een SDK vs raw API calls
+- Installatie en configuratie (`ai` package)
+- Core hooks: `useChat` voor conversaties, `useCompletion` voor single completions
+- Streaming responses: hoe het werkt, waarom het UX verbetert
+- API Routes opzetten voor AI (OpenAI/Anthropic providers)
+- Chat UI bouwen met `useChat` hook (messages, input, handleSubmit)
+- Conversation history opslaan in Supabase
+- Error handling en loading states
+- Rate limiting en cost management
 
-**Lesopdracht:** Bouw 1 AI-powered feature (Blog Generator/Summarizer/Writing Assistant) + 1 workflow automation (Smart Form Processor/Daily AI Summary).
+**Lesopdracht:** Bouw een AI Chat component met Vercel AI SDK: setup API route, implementeer `useChat` hook, style met Tailwind, sla chat history op in Supabase.
 
-**Huiswerk:** Polish AI feature (streaming, history, rate limiting), bouw 2 automations voor eindopdracht, documentatie.
+**Huiswerk:** Extend naar volledige AI feature voor je eindproject (Recipe Generator / Budget Advisor / Travel Planner), voeg streaming UI toe, implementeer conversation history, documenteer je implementatie.
 
 [→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
 
@@ -431,8 +439,9 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
 ## Tech Stack
 
 - **Frontend:** React, Next.js, Tailwind CSS
-- **Backend:** Supabase (Postgres, Auth, Storage, Realtime, Edge Functions)
+- **Backend:** Supabase (Postgres database, Auth)
 - **AI Tools:** ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
+- **AI SDK:** Vercel AI SDK (`ai` package) voor AI features in apps
 - **Testing:** Vitest, React Testing Library, Playwright
 - **Deployment:** Vercel, GitHub Actions