fix: update supabase lessons to make them a bit simpler

2026-01-29 14:14:14 +01:00
parent e048abf724
commit f5ed2f7f31
5 changed files with 630 additions and 409 deletions
--- 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
--- 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
--- 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
--- 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