fix: update supabase lessons to make them a bit simpler

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