diff --git a/Eindopdracht-AI-Developer.md b/Eindopdracht-AI-Developer.md
new file mode 100644
index 0000000..84353ff
--- /dev/null
+++ b/Eindopdracht-AI-Developer.md
@@ -0,0 +1,413 @@
+# Eindopdracht
+
+## Leerlijn AI-Driven Development (30 EC)
+
+**Versie 1.0**
+
+---
+
+## Inhoudsopgave
+
+1. [Eindopdracht AI-Driven Development](#eindopdracht-ai-driven-development)
+2. [Deelopdrachten](#deelopdrachten)
+3. [Quickscan](#quickscan)
+4. [Structuur](#structuur)
+5. [Beoordelingscriteria](#beoordelingscriteria)
+
+---
+
+# Eindopdracht AI-Driven Development
+
+## Integrale eindopdracht
+
+De leerlijn AI-Driven Development leert je om als developer effectief samen te werken met AI tools. Je leert niet alleen apps bouwen MET AI, maar ook AI features bouwen IN je apps.
+
+Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen:
+
+1. **Fundamentals of AI-Driven Development**
+ Je kunt AI tools (ChatGPT, Claude, OpenCode) effectief inzetten voor code generatie en begrijpt de basisprincipes van Large Language Models.
+
+2. **Prompt Engineering & Iteratief Werken**
+ Je kunt effectieve prompts schrijven, iteratief werken met AI, en Skills gebruiken voor consistente output.
+
+3. **Backend Development met Supabase**
+ Je kunt een database opzetten, CRUD operaties uitvoeren, en authenticatie implementeren met Supabase.
+
+4. **AI-Assisted Development met Cursor**
+ Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, context management, en Composer mode.
+
+5. **AI Features Bouwen met Vercel AI SDK**
+ Je kunt AI-powered features implementeren in je applicatie met de Vercel AI SDK (chat interfaces, streaming responses).
+
+6. **Testing, Debugging & Deployment**
+ Je kunt code debuggen met AI hulp, tests schrijven, en een applicatie deployen naar productie.
+
+---
+
+## Algemene opdrachtbeschrijving
+
+In het bedrijfsleven worden steeds vaker AI-tools ingezet om sneller en efficiënter software te ontwikkelen. Als moderne developer wordt van je verwacht dat je deze tools beheerst en weet hoe je AI-features integreert in applicaties.
+
+Voor deze eindopdracht bouw je een **volledige webapplicatie met AI-integratie**. Je bent vrij in de keuze van het type applicatie, zolang je maar aantoont dat je de geleerde tools en technieken beheerst.
+
+**Wat je gaat doen:**
+
+- Een professionele repository opzetten met juiste structuur en documentatie
+- .cursorrules files schrijven die Cursor instrueren voor jouw project
+- Een Next.js applicatie bouwen met Tailwind CSS
+- Data opslaan en ophalen via Supabase (database + authenticatie)
+- Een AI-powered feature implementeren met de Vercel AI SDK
+- Je applicatie deployen naar Vercel
+- Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md
+
+**Voorbeeldprojecten:**
+
+| Project | Beschrijving | AI Feature |
+|---------|--------------|------------|
+| **AI Recipe Generator** | App waar je ingrediënten invoert en recepten krijgt | Chat: "Wat kan ik maken met kip, rijst en paprika?" |
+| **Smart Budget Buddy** | Persoonlijke finance tracker met inzichten | Chat: "Analyseer mijn uitgaven en geef tips" |
+| **Travel Planner AI** | Reis planning app met AI assistent | Chat: "Plan een weekend Barcelona voor 2 personen" |
+
+Je mag ook een eigen projectidee bedenken, mits het voldoet aan alle technische eisen.
+
+Door deze opdracht uit te voeren toon je aan dat je zelfstandig een moderne webapplicatie kunt bouwen met AI-assisted development, en dat je AI-features kunt integreren die echte waarde toevoegen voor gebruikers.
+
+Om de leerlijn AI-Driven Development met succes af te ronden is een voldoende nodig voor de integrale eindopdracht; met de deelopdrachten kunnen geen losse cursussen worden afgerond.
+
+---
+
+## Op te leveren producten
+
+- **GitHub Repository** met volledige broncode en documentatie
+- **Deployed applicatie** op Vercel (werkende URL)
+- **Technisch verantwoordingsdocument** (PDF, 1500-2000 woorden)
+- **Slide deck** voor presentatie (10-15 slides)
+- **Demo** van de werkende applicatie (live of video, max 5 minuten)
+
+---
+
+# Deelopdrachten
+
+## Deelopdracht 1: Project Setup & Repository Inrichting
+
+Een goed gestructureerd project is essentieel voor effectief werken met AI tools. In deze deelopdracht richt je je repository professioneel in, zodat Cursor en andere AI tools optimaal kunnen functioneren.
+
+**Wat je doet:**
+
+Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je maakt documentatie files aan die je gedurende het project gaat vullen.
+
+**Vereisten:**
+
+- GitHub repository met duidelijke naam en beschrijving
+- Next.js project met TypeScript en Tailwind CSS
+- Folder structuur volgens best practices:
+ ```
+ project/
+ ├── .cursor/rules/
+ │ ├── general.mdc
+ │ └── [andere rules files]
+ ├── docs/
+ │ ├── PROJECT-BRIEF.md
+ │ ├── PROMPT-LOG.md
+ │ └── AI-DECISIONS.md
+ ├── src/
+ │ ├── app/
+ │ ├── components/
+ │ └── lib/
+ ├── .env.example
+ └── README.md
+ ```
+- Minimaal 2 .cursorrules files met project-specifieke instructies
+- Volledig ingevulde PROJECT-BRIEF.md met:
+ - Projectnaam en beschrijving
+ - Doelgroep
+ - Core features (3-5)
+ - Tech stack keuzes
+- Complete README.md met installatie-instructies
+- .env.example met alle benodigde environment variables
+
+**Op te leveren:**
+- GitHub repository URL
+- Screenshot van folder structuur
+- Inhoud van je belangrijkste .cursorrules file
+
+---
+
+## Deelopdracht 2: Database & Authenticatie met Supabase
+
+Elke serieuze applicatie heeft data opslag en gebruikersbeheer nodig. Je gaat Supabase gebruiken om dit te realiseren, met hulp van AI voor de implementatie.
+
+**Wat je doet:**
+
+Je maakt een Supabase project aan en ontwerpt je database schema via de Table Editor (geen SQL kennis nodig). Je implementeert CRUD operaties in je Next.js app en voegt authenticatie toe zodat gebruikers kunnen inloggen.
+
+**Vereisten:**
+
+- Supabase project aangemaakt en gekoppeld
+- Minimaal 2 tabellen die relevant zijn voor je applicatie
+- Werkende CRUD operaties (Create, Read, Update, Delete)
+- Authenticatie geïmplementeerd:
+ - Login/registratie pagina
+ - Protected routes (alleen voor ingelogde gebruikers)
+ - User-specifieke data (elke user ziet alleen eigen data)
+- Environment variables correct geconfigureerd
+- Foutafhandeling bij database operaties
+
+**Op te leveren:**
+- Screenshot van je Supabase tabellen
+- Beschrijving van je database schema in AI-DECISIONS.md
+- Werkende login flow (gedemonstreerd in eindpresentatie)
+
+---
+
+## Deelopdracht 3: AI Feature met Vercel AI SDK
+
+Het onderscheidende element van jouw applicatie is de AI-integratie. Je gaat een chat-interface of AI-powered feature bouwen die echte waarde toevoegt voor de gebruiker.
+
+**Wat je doet:**
+
+Je installeert de Vercel AI SDK en bouwt een feature waarbij gebruikers kunnen communiceren met AI. Dit kan een chatbot zijn, een content generator, of een andere AI-powered functionaliteit die past bij jouw applicatie.
+
+**Vereisten:**
+
+- Vercel AI SDK (`ai` package) geïnstalleerd en geconfigureerd
+- API route voor AI communicatie (`/api/chat` of vergelijkbaar)
+- Frontend met `useChat` of `useCompletion` hook
+- Streaming responses (tekst verschijnt woord voor woord)
+- Relevante system prompt die past bij jouw applicatie
+- Context uit je Supabase database meegeven aan AI (bijv. user preferences, historische data)
+- Goede UX:
+ - Loading indicator tijdens AI response
+ - Error handling bij API fouten
+ - Mogelijkheid om conversation te clearen
+- Conversation history opslaan in Supabase (optioneel maar aangeraden)
+
+**Op te leveren:**
+- Beschrijving van je AI feature in AI-DECISIONS.md
+- System prompt die je gebruikt (met uitleg waarom)
+- Minimaal 5 prompts in PROMPT-LOG.md die leidden tot je AI implementatie
+
+---
+
+## Deelopdracht 4: Testing, Deployment & Presentatie
+
+Een applicatie is pas af als hij getest, gedeployed, en gedocumenteerd is. Je rondt je project af en bereidt een presentatie voor.
+
+**Wat je doet:**
+
+Je test je applicatie grondig (handmatig en/of geautomatiseerd), deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces.
+
+**Vereisten:**
+
+**Testing & Quality:**
+- Applicatie handmatig getest op belangrijkste flows
+- Minimaal 1 bug gevonden en opgelost met AI hulp (gedocumenteerd in PROMPT-LOG.md)
+- Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md)
+- Geen console errors in productie
+
+**Deployment:**
+- Applicatie gedeployed op Vercel
+- Environment variables correct geconfigureerd in Vercel
+- Applicatie werkt volledig op productie URL
+- Custom domain (optioneel)
+
+**Documentatie:**
+- PROMPT-LOG.md bevat minimaal 10 significante prompts
+- AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
+- README.md is up-to-date en compleet
+
+**Presentatie (slide deck + demo):**
+- Introductie: wat doet je app, voor wie?
+- Demo: live walkthrough van belangrijkste features
+- AI integratie: toon je AI feature in actie
+- Technische keuzes: waarom deze aanpak?
+- Reflectie: wat ging goed, wat was lastig, wat heb je geleerd?
+- Conclusie: wat zou je anders doen?
+
+**Op te leveren:**
+- Productie URL (Vercel)
+- Technisch verantwoordingsdocument (PDF)
+- Slide deck (PDF of PPTX)
+- Demo (live tijdens presentatie of video)
+
+---
+
+# Quickscan
+
+Hieronder vind je de randvoorwaarden waaraan de eindopdracht moet voldoen. De beoordelaar kan op basis van deze eisen de eindopdracht teruggeven en zal deze niet verder nakijken tot aan de eisen is voldaan.
+
+## Algemene eisen
+
+- [ ] Naam van de student, inleverdatum en leerlijntitel zijn opgenomen op de titelpagina van het verantwoordingsdocument
+- [ ] Het technisch verantwoordingsdocument is digitaal ingeleverd als PDF
+- [ ] De slide deck is digitaal ingeleverd als PDF of PPTX
+- [ ] De GitHub repository URL is bijgevoegd
+- [ ] De Vercel productie URL is bijgevoegd en werkt
+- [ ] Alle deelopdrachten zijn uitgewerkt en de gevraagde deelproducten zijn aanwezig
+- [ ] Het verantwoordingsdocument is goed leesbaar zonder storende grammatica- en spellingsfouten
+- [ ] De omvang van het verantwoordingsdocument beslaat 1500-2000 woorden (exclusief inhoudsopgave en bijlagen)
+- [ ] De presentatie duurt maximaal 15 minuten (inclusief demo)
+- [ ] Pagina's in het verantwoordingsdocument zijn genummerd
+
+## Inhoudelijke eisen
+
+- [ ] De GitHub repository bevat een complete folder structuur zoals beschreven
+- [ ] Er zijn minimaal 2 .cursorrules files aanwezig met zinvolle instructies
+- [ ] docs/PROJECT-BRIEF.md is volledig ingevuld
+- [ ] docs/PROMPT-LOG.md bevat minimaal 10 gedocumenteerde prompts
+- [ ] docs/AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
+- [ ] README.md bevat installatie-instructies die werken
+- [ ] De applicatie gebruikt Next.js met TypeScript en Tailwind CSS
+- [ ] De applicatie is gekoppeld aan Supabase met minimaal 2 tabellen
+- [ ] CRUD operaties zijn geïmplementeerd en werken
+- [ ] Authenticatie is geïmplementeerd (login/registratie)
+- [ ] De Vercel AI SDK is geïmplementeerd met werkende AI feature
+- [ ] Streaming responses zijn geïmplementeerd
+- [ ] De applicatie is gedeployed op Vercel en werkt volledig
+
+## AI-gebruik
+
+- [ ] Het gebruik van AI is toegestaan en verwacht bij deze eindopdracht
+- [ ] Alle significante AI prompts zijn gedocumenteerd in PROMPT-LOG.md
+- [ ] Architectuurbeslissingen gemaakt met AI hulp zijn gedocumenteerd in AI-DECISIONS.md
+- [ ] Je bent te allen tijde verantwoordelijk voor de kwaliteit van de opgeleverde code
+- [ ] Je kunt tijdens de presentatie uitleggen hoe je code werkt
+
+---
+
+# Structuur
+
+## Technisch Verantwoordingsdocument
+
+Voor het technisch verantwoordingsdocument wordt de volgende structuur aanbevolen:
+
+### Titelpagina
+- Naam student
+- Inleverdatum
+- Projectnaam
+- GitHub URL
+- Vercel URL
+
+### Samenvatting
+Een korte samenvatting (max 150 woorden) van wat je hebt gebouwd en de belangrijkste resultaten.
+
+### Inhoudsopgave
+Overzichtelijke inhoudsopgave met paginanummers.
+
+### 1. Introductie
+- Wat is het probleem dat je oplost?
+- Wie is je doelgroep?
+- Wat zijn de belangrijkste features?
+
+### 2. Technische Implementatie
+- Gekozen tech stack en waarom
+- Database design (met diagram of beschrijving)
+- AI feature: hoe werkt het, welke system prompt, waarom deze aanpak
+- Belangrijkste technische uitdagingen en oplossingen
+
+### 3. AI-Assisted Development Proces
+- Hoe heb je AI tools ingezet tijdens development?
+- Welke tools werkten goed, welke minder?
+- Voorbeelden van effectieve prompts (verwijs naar PROMPT-LOG.md)
+- Belangrijkste beslissingen gemaakt met AI hulp (verwijs naar AI-DECISIONS.md)
+
+### 4. Reflectie
+- Wat ging goed?
+- Wat was uitdagend?
+- Wat heb je geleerd over AI-assisted development?
+- Wat zou je anders doen bij een volgend project?
+
+### 5. Conclusie
+Korte conclusie met de belangrijkste takeaways.
+
+### Bijlagen
+- Link naar GitHub repository
+- Link naar Vercel deployment
+- Eventuele screenshots of diagrammen
+
+---
+
+## Repository Structuur
+
+Je repository moet de volgende structuur hebben:
+
+```
+project-naam/
+├── .cursor/
+│ └── rules/
+│ ├── general.mdc # Algemene project regels
+│ ├── components.mdc # Component conventies (optioneel)
+│ └── api.mdc # API/Supabase regels (optioneel)
+├── docs/
+│ ├── PROJECT-BRIEF.md # Project beschrijving
+│ ├── PROMPT-LOG.md # Gedocumenteerde prompts
+│ └── AI-DECISIONS.md # Architectuur beslissingen
+├── src/
+│ ├── app/ # Next.js App Router
+│ │ ├── api/
+│ │ │ └── chat/
+│ │ │ └── route.ts # AI API route
+│ │ ├── login/
+│ │ │ └── page.tsx
+│ │ ├── layout.tsx
+│ │ └── page.tsx
+│ ├── components/
+│ │ ├── ui/ # Basis UI components
+│ │ └── features/ # Feature-specifieke components
+│ ├── lib/
+│ │ ├── supabase.ts # Supabase client
+│ │ └── utils.ts
+│ └── types/
+│ └── index.ts
+├── .env.example # Template voor env vars
+├── .env.local # Lokale env vars (NIET committen)
+├── .gitignore
+├── next.config.js
+├── package.json
+├── README.md
+├── tailwind.config.js
+└── tsconfig.json
+```
+
+---
+
+# Beoordelingscriteria
+
+De eindopdracht wordt beoordeeld op basis van de volgende criteria. Per criterium kent de beoordelaar een cijfer van 1-10 toe.
+
+| Deelopdracht | Criterium | Weging |
+|--------------|-----------|--------|
+| **1. Project Setup** | *Leeruitkomst: Repository inrichting & AI configuratie* | **15%** |
+| 1.1 | Repository structuur is professioneel en compleet | 5% |
+| 1.2 | .cursorrules files zijn zinvol en project-specifiek | 5% |
+| 1.3 | Documentatie (README, PROJECT-BRIEF) is compleet | 5% |
+| **2. Database & Auth** | *Leeruitkomst: Backend development met Supabase* | **25%** |
+| 2.1 | Database schema is logisch en past bij de applicatie | 10% |
+| 2.2 | CRUD operaties werken correct | 10% |
+| 2.3 | Authenticatie is correct geïmplementeerd | 5% |
+| **3. AI Feature** | *Leeruitkomst: AI features bouwen met Vercel AI SDK* | **30%** |
+| 3.1 | AI feature voegt waarde toe voor de gebruiker | 10% |
+| 3.2 | Technische implementatie is correct (streaming, error handling) | 10% |
+| 3.3 | System prompt en context zijn doordacht | 10% |
+| **4. Testing & Deployment** | *Leeruitkomst: Testing, debugging & deployment* | **15%** |
+| 4.1 | Applicatie werkt volledig in productie | 10% |
+| 4.2 | Code kwaliteit en foutafhandeling | 5% |
+| **5. Proces & Documentatie** | *Leeruitkomst: AI-assisted development proces* | **15%** |
+| 5.1 | PROMPT-LOG.md toont effectief prompt gebruik | 5% |
+| 5.2 | AI-DECISIONS.md toont doordachte keuzes | 5% |
+| 5.3 | Presentatie en verantwoordingsdocument | 5% |
+| **Totaal** | | **100%** |
+
+---
+
+## Cijferbepaling
+
+| Cijfer | Betekenis |
+|--------|-----------|
+| 9-10 | Uitstekend: overtreft alle verwachtingen, creatief en professioneel |
+| 7-8 | Goed: voldoet ruim aan alle eisen, weinig verbeterpunten |
+| 6 | Voldoende: voldoet aan de basiseisen |
+| 5 | Onvoldoende: voldoet niet aan alle basiseisen, maar dichtbij |
+| 1-4 | Onvoldoende: significante onderdelen ontbreken of werken niet |
+
+Een voldoende (≥5.5) is vereist om de leerlijn af te ronden.
diff --git a/Samenvattingen/Les05-Samenvatting.md b/Samenvattingen/Les05-Samenvatting.md
index 015ada1..430ca81 100644
--- a/Samenvattingen/Les05-Samenvatting.md
+++ b/Samenvattingen/Les05-Samenvatting.md
@@ -1,12 +1,4 @@
-# Les 5: AI voor Content en Asset Generation
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les05-Slide-Overzicht.md
-> - Les05-Lesplan.md
-> - Les05-Bijlage-A-Lesopdracht.md
-> - Les05-Bijlage-B-Huiswerkopdracht.md
+# Les 5: AI Tool Selection & Workflows
---
@@ -14,112 +6,302 @@
**Hoofdstuk 2: Intermediate** (Les 4-9)
## Beschrijving
-AI-gegenereerde visuals en assets voor professionele webprojecten.
+Leer de sterke en zwakke punten van elke AI tool kennen. Ontwikkel een framework om de juiste tool te kiezen voor de juiste taak en bouw je eigen workflow.
---
## Te Behandelen
-### Image Generation Tools Vergelijking
-- DALL-E 3 (via ChatGPT Plus)
-- Leonardo.ai
-- Ideogram
-- Midjourney alternatives
+### Waarom Tool Selection Belangrijk Is
-### Prompt Engineering voor Images
-- Style descriptors
-- Mood en colors
-- Composition
-- Aspect ratios
-- Negative prompts
+Je kent nu meerdere AI tools:
+- ChatGPT (brainstormen, planning, uitleg)
+- Claude (lange context, nuance, analyse)
+- v0.dev (UI prototyping)
+- OpenCode (code schrijven met project context)
-### Asset Generation Workflow voor Web
-- Hero images
-- Icons
-- Illustrations
-- Backgrounds
+**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.
-### Image Optimization voor Web
-- Compression
-- Formats (WebP, AVIF, etc.)
-- Responsive images
+---
-### Copyright & Licenties
-- Copyright overwegingen bij AI-generated content
-- Wat mag wel/niet
+### Tool Vergelijking
-### Integratie in Next.js
-- Next.js Image component optimalisatie
-- Best practices
+| Tool | Sterk in | Minder sterk in | Kosten |
+|------|----------|-----------------|--------|
+| **ChatGPT** | Brainstormen, uitleg, planning, algemene kennis | Grote codebases, lange context | Gratis / Pro €20/maand |
+| **Claude** | Lange documenten, nuance, analyse, veiligheid | Soms te voorzichtig, geen images genereren | Gratis / Pro $20/maand |
+| **v0.dev** | UI components, snel prototypen, Tailwind | Complexe logica, backend | Gratis tier |
+| **OpenCode** | Code schrijven, project context, terminal | Geen web access, geen images | Gratis |
+
+---
+
+### Tool Selection Framework
+
+**Stap 1: Identificeer de taak**
+- Wat wil je bereiken?
+- Hoe complex is het?
+- Hoeveel context is nodig?
+
+**Stap 2: Kies de juiste tool**
+
+```
+Als je wilt... Gebruik...
+─────────────────────────────────────────────────
+Brainstormen over een idee → ChatGPT
+Een lange codebase analyseren → Claude
+Snel een UI component maken → v0.dev
+Code schrijven met project context → OpenCode
+Een complex document begrijpen → Claude
+Uitleg krijgen over een concept → ChatGPT
+React component met styling → v0.dev
+Feature implementeren in project → OpenCode
+```
+
+---
+
+### Workflow Patterns
+
+**Pattern 1: Planning → Prototyping → Implementation**
+```
+1. ChatGPT: Brainstorm features, maak planning
+2. v0.dev: Genereer UI prototypes
+3. OpenCode: Implementeer met project context
+```
+
+**Pattern 2: Research → Design → Build**
+```
+1. ChatGPT/Claude: Research beste aanpak
+2. v0.dev: Design components
+3. OpenCode: Bouw en integreer
+```
+
+**Pattern 3: Quick Iteration**
+```
+1. v0.dev: Snel component genereren
+2. OpenCode: Aanpassen en integreren
+3. Repeat
+```
+
+---
+
+### Praktijk: Dezelfde Taak, Drie Tools
+
+**Opdracht:** Bouw een Contact Form component
+
+**Met ChatGPT:**
+```
+Prompt: Ik wil een contact form maken met React en Tailwind.
+Velden: naam, email, bericht. Validatie nodig.
+Geef me de code en leg uit hoe het werkt.
+```
+→ Krijg: Uitleg + code, maar zonder project context
+
+**Met v0.dev:**
+```
+Prompt: Modern contact form with name, email, message fields.
+Tailwind styling, validation, responsive design.
+```
+→ Krijg: Visueel prototype, direct te gebruiken
+
+**Met OpenCode:**
+```
+Prompt: Maak een ContactForm component in src/components/
+met naam, email en bericht velden. Gebruik onze bestaande
+Input en Button components. Voeg Zod validatie toe.
+```
+→ Krijg: Geïntegreerde code die past in je project
+
+---
+
+### Wanneer Combineer Je Tools?
+
+**Scenario 1: Nieuwe feature bouwen**
+1. ChatGPT: "Hoe zou je een dark mode toggle implementeren in React?"
+2. v0.dev: "Dark mode toggle component with smooth transition"
+3. OpenCode: "Integreer deze toggle in onze navbar, sla preference op in localStorage"
+
+**Scenario 2: Bug oplossen**
+1. OpenCode: Vraag om bug te identificeren
+2. Claude: Als de foutmelding complex is, vraag om uitleg
+3. OpenCode: Implementeer de fix
+
+**Scenario 3: Nieuwe technologie leren**
+1. ChatGPT: "Leg uit hoe React Server Components werken"
+2. v0.dev: "Example of React Server Component with data fetching"
+3. OpenCode: "Help me dit toe te passen in mijn Next.js project"
+
+---
+
+### Anti-Patterns (Wat Niet Te Doen)
+
+**❌ Verkeerde tool voor de taak:**
+- ChatGPT vragen om een hele app te bouwen → te weinig context
+- v0.dev vragen om complexe backend logica → niet zijn sterke punt
+- OpenCode vragen om design inspiratie → kan geen images maken
+
+**❌ Heen en weer kopiëren zonder begrip:**
+- Kopieer niet blind code van ChatGPT naar je project
+- Begrijp eerst WAT de code doet
+
+**❌ Dezelfde prompt in elke tool:**
+- Pas je prompt aan per tool
+- v0.dev wil visuele beschrijvingen
+- OpenCode wil project-specifieke context
+
+---
+
+### Je Eigen Workflow Documenteren
+
+Maak een `docs/WORKFLOW.md` in je project:
+
+```markdown
+# Mijn AI Workflow
+
+## Planning Fase
+- Tool: ChatGPT
+- Wat: Feature breakdown, technische beslissingen
+- Template prompt: "Ik wil [feature]. Wat zijn de stappen?"
+
+## UI Design Fase
+- Tool: v0.dev
+- Wat: Component prototypes
+- Template prompt: "Modern [component] with [requirements]"
+
+## Implementation Fase
+- Tool: OpenCode
+- Wat: Code schrijven en integreren
+- Template prompt: "Maak [component] in [locatie] met [requirements]"
+
+## Debugging
+- Tool: OpenCode (eerst), Claude (als het complex is)
+- Wat: Errors oplossen
+- Template prompt: "Ik krijg deze error: [error]. Dit is mijn code: [code]"
+```
---
## Tools
-- DALL-E 3 (ChatGPT Plus)
-- Leonardo.ai
-- Ideogram
-- Next.js Image component
+- ChatGPT
+- Claude
+- v0.dev
+- OpenCode/WebStorm
---
## Lesopdracht (2 uur)
-### Complete Visual Identity Challenge
+### Tool Comparison Challenge
-**Kies thema voor fictieve SaaS landing page:**
-- Project management
-- Fitness app
-- Educational platform
-- Of eigen keuze
+**Deel 1: Dezelfde Taak, Drie Tools (1 uur)**
-**Genereer complete asset set:**
+Bouw een "Contact Form" component met alle drie de tools:
-| 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 |
+1. **ChatGPT (20 min)**
+ - Vraag om code + uitleg
+ - Noteer: hoe lang duurde het, kwaliteit output, wat miste?
-**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
+2. **v0.dev (20 min)**
+ - Genereer visueel prototype
+ - Noteer: hoe snel, hoe mooi, hoe aanpasbaar?
+
+3. **OpenCode (20 min)**
+ - Integreer in bestaand project
+ - Noteer: hoe goed past het, hoeveel aanpassing nodig?
+
+**Deel 2: Analyse (30 min)**
+
+Vul dit schema in:
+
+| Aspect | ChatGPT | v0.dev | OpenCode |
+|--------|---------|--------|----------|
+| Tijd tot werkend component | | | |
+| Kwaliteit code | | | |
+| Visueel design | | | |
+| Past in project | | | |
+| Hoeveel aanpassing nodig | | | |
+| Totaalscore (1-10) | | | |
+
+**Deel 3: Workflow Documentatie (30 min)**
+
+- Maak `docs/WORKFLOW.md` in je project
+- Documenteer je ideale workflow per taaktype
+- Inclusief template prompts voor elke tool
+
+### Deliverable
+- Screenshot van alle 3 contact forms
+- Ingevuld vergelijkingsschema
+- `docs/WORKFLOW.md` bestand
---
## Huiswerk (2 uur)
-### Portfolio Project Visual Refresh
+### Bouw Je Tool Selection Cheat Sheet
-**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
+**Deel 1: Cheat Sheet Maken (1 uur)**
-**Case Study Blog Post (400 woorden):**
+Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):
-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
+```markdown
+# Mijn AI Tool Cheat Sheet
-**Include:** Before/after screenshots
+## Wanneer gebruik ik wat?
+
+### ChatGPT
+- ✅ Gebruik voor: [jouw ervaring]
+- ❌ Niet voor: [jouw ervaring]
+- 💡 Beste prompt tip: [jouw tip]
+
+### Claude
+- ✅ Gebruik voor: [jouw ervaring]
+- ❌ Niet voor: [jouw ervaring]
+- 💡 Beste prompt tip: [jouw tip]
+
+### v0.dev
+- ✅ Gebruik voor: [jouw ervaring]
+- ❌ Niet voor: [jouw ervaring]
+- 💡 Beste prompt tip: [jouw tip]
+
+### OpenCode
+- ✅ Gebruik voor: [jouw ervaring]
+- ❌ Niet voor: [jouw ervaring]
+- 💡 Beste prompt tip: [jouw tip]
+
+## Mijn Favoriete Combinaties
+1. [Workflow 1]
+2. [Workflow 2]
+```
+
+**Deel 2: Testen op Nieuwe Taken (45 min)**
+
+Test je cheat sheet op 2 nieuwe taken:
+1. Bouw een "Testimonial Card" component
+2. Voeg een "Dark Mode Toggle" toe
+
+Per taak:
+- Kies tools op basis van je cheat sheet
+- Voer uit en noteer resultaat
+- Update cheat sheet indien nodig
+
+**Deel 3: Reflectie (15 min)**
+
+Schrijf korte reflectie (400 woorden):
+- Welke tool is jouw favoriet en waarom?
+- Wanneer combineer je tools?
+- Wat ga je anders doen na deze les?
+
+### Deliverable
+- Tool Selection Cheat Sheet (1 pagina)
+- 2 gebouwde components (Testimonial Card, Dark Mode Toggle)
+- Reflectie (400 woorden)
---
## 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
+- De sterke en zwakke punten van elke AI tool benoemen
+- De juiste tool kiezen voor een specifieke taak
+- Meerdere tools combineren in een effectieve workflow
+- Een persoonlijke workflow documenteren
+- Template prompts schrijven per tool
+- Kritisch evalueren welke tool wanneer het beste werkt
diff --git a/Samenvattingen/Les06-Samenvatting.md b/Samenvattingen/Les06-Samenvatting.md
index 5050d1e..281b639 100644
--- a/Samenvattingen/Les06-Samenvatting.md
+++ b/Samenvattingen/Les06-Samenvatting.md
@@ -1,12 +1,4 @@
-# Les 6: MCP (Model Context Protocol) & Component Libraries
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les06-Slide-Overzicht.md
-> - Les06-Lesplan.md
-> - Les06-Bijlage-A-Lesopdracht.md
-> - Les06-Bijlage-B-Huiswerkopdracht.md
+# Les 6: Hands-on: Van Idee naar Prototype
---
@@ -14,130 +6,283 @@
**Hoofdstuk 2: Intermediate** (Les 4-9)
## Beschrijving
-Revolutionaire manier om AI te verbinden met data sources via MCP, gecombineerd met systematisch component library bouwen.
+Pas alles wat je hebt geleerd toe in een hands-on sessie. Ga van een vaag idee naar een werkend prototype met behulp van je AI workflow.
---
## Te Behandelen
-### MCP (Model Context Protocol)
+### Van Idee naar Feature Breakdown
-**Wat is MCP?**
-- Anthropic's protocol om LLMs veilig te verbinden met externe tools en data
+**Het probleem:** Je hebt een idee, maar waar begin je?
-**Waarom MCP belangrijk is:**
-- Gestructureerde data access
-- Security
-- Reusability
+**Stap 1: Beschrijf je idee in 1-2 zinnen**
+```
+"Ik wil een app waar je kunt bijhouden welke planten water nodig hebben."
+```
-**MCP Servers:**
-- Filesystem
-- Databases (Supabase/PostgreSQL)
-- APIs (GitHub, Slack, Google Drive)
-- Web search
+**Stap 2: Vraag AI om feature breakdown**
+```
+Prompt: Ik wil een plant watering tracker app bouwen.
+Wat zijn de minimale features voor een werkend prototype?
+Denk aan: wat moet een gebruiker kunnen doen?
+```
-**MCP Installatie en Configuratie:**
-- Claude Desktop configuratie
+**Stap 3: Prioriteer (MVP denken)**
+- Wat is essentieel? → In prototype
+- Wat is nice-to-have? → Later
-### Component Libraries & Design Systems
+---
-**Shadcn/ui:**
-- Systematisch bouwen met Shadcn/ui
-- Design tokens en consistency
+### Component Thinking
-**Component Patterns:**
-- Component composition patterns
-- Building data-driven components die MCP data consumeren
-- Accessibility in component libraries
-- Documentation patterns
+**Vraag jezelf af:**
+- Welke "blokken" zie ik op het scherm?
+- Welke blokken worden herhaald?
+- Welke blokken komen op meerdere pagina's?
+
+**Voorbeeld: Plant Tracker**
+```
+Herhaalde componenten:
+- PlantCard (naam, foto, laatste water datum)
+- WaterButton (markeer als water gegeven)
+
+Pagina componenten:
+- PlantList (toont alle PlantCards)
+- AddPlantForm (nieuw plant toevoegen)
+```
+
+---
+
+### MVP (Minimum Viable Product) Denken
+
+**Wat is MVP?**
+De simpelste versie van je app die nog steeds waarde levert.
+
+**❌ Niet MVP:**
+- Alle features tegelijk
+- Perfect design
+- Edge cases afhandelen
+- Login systeem
+
+**✅ Wel MVP:**
+- Core functionaliteit werkt
+- Basis styling
+- Happy path werkt
+- Hardcoded data is oké
+
+---
+
+### De Prototype Workflow
+
+```
+1. IDEE (1-2 zinnen)
+ ↓
+2. FEATURES (AI breakdown)
+ ↓
+3. PRIORITEER (wat is MVP?)
+ ↓
+4. COMPONENTS (welke blokken?)
+ ↓
+5. BOUWEN (tool per stap)
+ ↓
+6. ITEREREN (feedback → aanpassen)
+```
+
+---
+
+### Voorbeeld: Weer Widget Prototype
+
+**Stap 1: Idee**
+"Simpele weer widget met 3-daagse forecast"
+
+**Stap 2: AI Feature Breakdown**
+```
+Vraag aan ChatGPT:
+"Wat zijn de minimale features voor een weer widget met 3-daagse forecast?"
+
+Antwoord:
+- Huidige temperatuur tonen
+- Weer icoon (zon, regen, etc.)
+- 3-daagse forecast (dag + temp + icoon)
+- Locatie tonen
+```
+
+**Stap 3: MVP Selectie**
+- ✅ Huidige temperatuur
+- ✅ Weer icoon
+- ✅ 3 dagen forecast
+- ❌ Locatie selectie (later)
+- ❌ Animated icons (later)
+
+**Stap 4: Components**
+```
+WeatherWidget/
+├── CurrentWeather (temp + icoon)
+├── ForecastDay (dag + temp + icoon)
+└── ForecastList (3x ForecastDay)
+```
+
+**Stap 5: Bouwen**
+1. v0.dev: "Weather widget with current temp and 3 day forecast, minimal design"
+2. OpenCode: "Integreer dit in mijn project, maak components in src/components/weather/"
+
+**Stap 6: Itereren**
+- Wat werkt niet?
+- Wat kan beter?
+- Vraag AI om verbeteringen
+
+---
+
+### Mini-Project Ideeën
+
+Kies een van deze voor je lesopdracht:
+
+| Project | Core Feature | Complexiteit |
+|---------|-------------|--------------|
+| **Weer Widget** | 3-daagse forecast | ⭐ |
+| **Quiz App** | 3 vragen + score | ⭐ |
+| **Recipe Card** | Ingrediënten toggle | ⭐ |
+| **Pomodoro Timer** | Start/stop + countdown | ⭐⭐ |
+| **Expense Tracker** | Lijst + totaal | ⭐⭐ |
+
+---
+
+### Documenteer Je Proces
+
+Maak aantekeningen tijdens het bouwen:
+
+```markdown
+# Mijn Prototype: [naam]
+
+## Idee
+[1-2 zinnen]
+
+## Feature Breakdown
+1. [feature 1]
+2. [feature 2]
+3. [feature 3]
+
+## MVP Selectie
+- ✅ [wat wel]
+- ❌ [wat niet (nog)]
+
+## Components
+- [Component 1]
+- [Component 2]
+
+## Prompts die Werkten
+```
+[prompt]
+```
+→ [wat leverde het op]
+
+## Wat Ging Fout
+- [probleem 1] → [hoe opgelost]
+
+## Lessons Learned
+- [les 1]
+- [les 2]
+```
---
## Tools
-- Claude Desktop
-- MCP servers
-- Shadcn/ui
-- OpenCode/WebStorm
-- Supabase
+- ChatGPT (voor planning)
+- v0.dev (voor prototypes)
+- OpenCode/WebStorm (voor implementation)
---
## Lesopdracht (2 uur)
-### Deel 1: MCP Setup (45 min)
+### Bouw Je Mini-Prototype
-**Installatie:**
-- Installeer Claude Desktop app
-- Configureer MCP servers:
- - Filesystem server (access local files)
- - Supabase MCP server (connect to database)
+**Deel 1: Planning (30 min)**
-**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
+1. Kies een project uit de lijst (of bedenk eigen simpel idee)
+2. Schrijf je idee in 1-2 zinnen
+3. Vraag ChatGPT om feature breakdown
+4. Selecteer MVP features (max 3)
+5. Schets de components op papier
-### Deel 2: Component Library met MCP Data (1u 15min)
+**Deel 2: Bouwen (1 uur)**
-**Bouw Shadcn-based component library met AI in OpenCode/WebStorm:**
+1. Genereer UI in v0.dev
+2. Open project in OpenCode
+3. Integreer en pas aan
+4. Zorg dat het werkt (happy path)
-| Component | Features |
-|-----------|----------|
-| DataTable | Sortable, filterable, pagination |
-| Card | Variant system |
-| Form components | Input, Select, Textarea met validation states |
-| Button | Size variants, loading states, icon support |
+**Focus op WORKFLOW, niet perfectie!**
-**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
+**Deel 3: Documentatie (30 min)**
+
+Maak `docs/PROTOTYPE-LOG.md`:
+- Je idee
+- Feature breakdown
+- MVP keuzes
+- Prompts die werkten
+- Wat ging fout en hoe opgelost
+- Lessons learned
+
+### Deliverable
+- Werkend prototype (kan simpel zijn)
+- `docs/PROTOTYPE-LOG.md` met je proces
+- Screenshot van werkend prototype
---
## Huiswerk (2 uur)
-### Deel 1: Extend Component Library (1 uur)
+### Verbeter en Reflecteer
-**Voeg 5 extra components toe:**
-1. Modal/Dialog
-2. Toast notifications
-3. Dropdown Menu
-4. Tabs
-5. Accordion
+**Deel 1: Prototype Verbeteren (1 uur)**
-**Alle components moeten hebben:**
-- TypeScript
-- Accessibility (ARIA)
-- Dark mode support
-- Responsive
+1. Fix eventuele bugs
+2. Voeg 1 extra feature toe
+3. Verbeter styling
+4. Handle 1 edge case
-**Gebruik AI + Skills voor consistent design**
+**Deel 2: Peer Review (30 min)**
-### Deel 2: MCP Deep Dive (1 uur)
+- Deel je prototype met een klasgenoot
+- Krijg feedback
+- Geef feedback op hun prototype
-**Experimenteer met extra MCP servers:**
-- Install GitHub MCP server (access repos/issues)
-- Of Google Drive MCP server
-- Of custom MCP server voor een API
+**Deel 3: Reflectie (30 min)**
-**Bouw feature die MCP data combineert:**
-- Bijv. dashboard dat GitHub issues + Supabase data toont
+Schrijf "Lessons Learned" document (300 woorden):
+- Wat ging goed in je workflow?
+- Waar liep je vast?
+- Welke tool was het meest nuttig?
+- Wat doe je volgende keer anders?
+- Hoe voelde het om met AI te bouwen vs alleen?
-**Documenteer:**
-- Wat kun je allemaal met MCP?
-- Wat zijn limitations?
-- Hoe verschilt dit van normale API calls?
+### Deliverable
+- Verbeterd prototype
+- Peer review feedback (gegeven en ontvangen)
+- Lessons Learned document (300 woorden)
-**Deel als GitHub repo met MCP setup instructions**
+---
+
+## Voorbereiding Les 7
+
+In Les 7 gaan we echt bouwen met Next.js. Zorg dat je klaar bent:
+- Node.js geïnstalleerd (versie 18+)
+- Git geconfigureerd
+- GitHub account aangemaakt
+- OpenCode/WebStorm werkt
+
+Test: run `node --version` in je terminal. Je zou v18 of hoger moeten zien.
---
## 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
+- Van een vaag idee naar concrete features gaan
+- AI gebruiken voor feature breakdown
+- MVP denken toepassen (essentieel vs nice-to-have)
+- Een app opdelen in components
+- De complete workflow doorlopen (idee → prototype)
+- Het bouwproces documenteren
+- Reflecteren op wat werkt en wat niet
diff --git a/Samenvattingen/Les07-Samenvatting.md b/Samenvattingen/Les07-Samenvatting.md
index 1bdc06f..4408038 100644
--- a/Samenvattingen/Les07-Samenvatting.md
+++ b/Samenvattingen/Les07-Samenvatting.md
@@ -14,100 +14,255 @@
**Hoofdstuk 2: Intermediate** (Les 4-9)
## Beschrijving
-Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit.
+Zet je eerste "echte" Next.js project op en koppel het aan Supabase voor database en authenticatie. Je leert de complete flow van lokaal ontwikkelen tot productie deployment.
---
## Te Behandelen
-### Wat is Supabase?
-- Open-source Firebase alternative
-- Hosted Postgres database
-- Gratis tier voor development
-- Mooie UI om tabellen te beheren
+### Stap 1: Next.js Project Aanmaken
-### Supabase UI Tour
-- Dashboard overview
-- Table Editor: tabellen maken zonder SQL
-- Kolommen toevoegen (text, number, boolean, timestamp)
-- Data handmatig invoeren en bekijken
+Dit is de eerste keer dat je een volledig Next.js project opzet.
-### Database Basics (zonder SQL kennis)
-- Tabellen = spreadsheets met regels
-- Kolommen = velden (naam, email, etc.)
-- Rijen = individuele records
-- Primary key: unieke identifier per rij
+```bash
+# Maak nieuw project
+npx create-next-app@latest todo-app
-### Supabase Client in Next.js
+# Beantwoord de vragen:
+# ✔ Would you like to use TypeScript? → Yes
+# ✔ Would you like to use ESLint? → Yes
+# ✔ Would you like to use Tailwind CSS? → Yes
+# ✔ Would you like to use `src/` directory? → Yes
+# ✔ Would you like to use App Router? → Yes
+# ✔ Would you like to customize the default import alias? → No
+
+# Ga naar project folder
+cd todo-app
+
+# Open in je editor
+code . # of: cursor .
+```
+
+### Stap 2: Project Structuur Begrijpen
+
+```
+todo-app/
+├── src/
+│ └── app/
+│ ├── layout.tsx # Root layout (header, footer)
+│ ├── page.tsx # Homepage (/)
+│ └── globals.css # Global styles + Tailwind
+├── public/ # Static files (images, etc.)
+├── .env.local # Environment variables (maak zelf aan)
+├── next.config.js # Next.js configuratie
+├── tailwind.config.ts # Tailwind configuratie
+├── package.json # Dependencies
+└── tsconfig.json # TypeScript configuratie
+```
+
+### Stap 3: Lokaal Draaien
+
+```bash
+# Start development server
+npm run dev
+
+# Open browser: http://localhost:3000
+```
+
+### Stap 4: Supabase Project Aanmaken
+
+**Op supabase.com:**
+
+1. Ga naar [supabase.com](https://supabase.com) en maak account (gratis)
+2. Klik "New Project"
+3. Kies een naam (bijv. `todo-app`)
+4. Kies een database wachtwoord (bewaar deze!)
+5. Kies region: `West EU (Frankfurt)` (dichtst bij NL)
+6. Wacht ~2 minuten tot project klaar is
+
+**Credentials ophalen:**
+
+1. Ga naar Settings → API
+2. Kopieer:
+ - `Project URL` → dit wordt `NEXT_PUBLIC_SUPABASE_URL`
+ - `anon public` key → dit wordt `NEXT_PUBLIC_SUPABASE_ANON_KEY`
+
+### Stap 5: Environment Variables (Lokaal)
+
+Maak `.env.local` in je project root:
+
+```bash
+# .env.local (NOOIT committen naar Git!)
+NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
+```
+
+Maak ook `.env.example` (deze WEL committen):
+
+```bash
+# .env.example (template voor anderen)
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+```
+
+**Check .gitignore:**
+```
+# .gitignore moet bevatten:
+.env*.local
+```
+
+### Stap 6: Supabase SDK Installeren
-**Installatie:**
```bash
npm install @supabase/supabase-js
```
-**Setup:**
-```ts
+### Stap 7: Supabase Client Maken
+
+Maak `src/lib/supabase.ts`:
+
+```typescript
import { createClient } from '@supabase/supabase-js'
-const supabase = createClient(
- process.env.NEXT_PUBLIC_SUPABASE_URL!,
- process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
-)
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)
```
-### CRUD Operaties (met AI hulp)
+### Stap 8: Database Tabel Maken (via UI)
-**Create:**
-```ts
+**In Supabase Dashboard:**
+
+1. Ga naar Table Editor
+2. Klik "New Table"
+3. Naam: `todos`
+4. Kolommen:
+ | Name | Type | Default | Primary |
+ |------|------|---------|---------|
+ | id | int8 | - | ✓ (auto) |
+ | title | text | - | |
+ | completed | bool | false | |
+ | created_at | timestamptz | now() | |
+ | user_id | uuid | auth.uid() | |
+
+5. Klik "Save"
+
+### Stap 9: CRUD Operaties
+
+```typescript
+// CREATE - nieuwe todo toevoegen
const { data, error } = await supabase
.from('todos')
- .insert({ title: 'Nieuwe taak', completed: false })
-```
+ .insert({ title: 'Nieuwe taak' })
-**Read:**
-```ts
+// READ - todos ophalen
const { data, error } = await supabase
.from('todos')
.select('*')
-```
+ .order('created_at', { ascending: false })
-**Update:**
-```ts
+// UPDATE - todo afvinken
const { data, error } = await supabase
.from('todos')
.update({ completed: true })
- .eq('id', 1)
-```
+ .eq('id', todoId)
-**Delete:**
-```ts
+// DELETE - todo verwijderen
const { error } = await supabase
.from('todos')
.delete()
- .eq('id', 1)
+ .eq('id', todoId)
```
-### Simpele Authentication
-- Supabase Auth UI component (plug & play)
-- Magic Link login (geen wachtwoord nodig)
-- Session checken met `supabase.auth.getUser()`
+### Stap 10: Authenticatie Setup
-### Environment Variables
-- `.env.local` voor secrets
-- `NEXT_PUBLIC_` prefix voor client-side
-- Nooit API keys committen naar Git
+```bash
+npm install @supabase/auth-ui-react @supabase/auth-ui-shared
+```
-### AI Helpt Met
-- Database schema suggesties
-- Query schrijven als je vastloopt
-- Error messages begrijpen
-- Code voorbeelden genereren
+**Login component:**
+```tsx
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
+import { supabase } from '@/lib/supabase'
+
+export function LoginForm() {
+ return (
+
+ )
+}
+```
+
+**Session checken:**
+```typescript
+const { data: { user } } = await supabase.auth.getUser()
+
+if (user) {
+ // User is ingelogd
+} else {
+ // Redirect naar login
+}
+```
+
+---
+
+## Deployment naar Vercel (Productie)
+
+### Stap 1: GitHub Repository
+
+```bash
+# In je project folder
+git init
+git add .
+git commit -m "Initial commit"
+
+# Maak repo op GitHub, dan:
+git remote add origin https://github.com/jouw-username/todo-app.git
+git push -u origin main
+```
+
+### Stap 2: Vercel Deployment
+
+1. Ga naar [vercel.com](https://vercel.com)
+2. "Add New Project"
+3. Import je GitHub repository
+4. **BELANGRIJK:** Voeg Environment Variables toe:
+ - `NEXT_PUBLIC_SUPABASE_URL` → je Supabase URL
+ - `NEXT_PUBLIC_SUPABASE_ANON_KEY` → je anon key
+5. Klik "Deploy"
+
+### Stap 3: Supabase URL Toestaan
+
+In Supabase Dashboard:
+1. Ga naar Authentication → URL Configuration
+2. Voeg je Vercel URL toe aan "Redirect URLs":
+ - `https://jouw-app.vercel.app/**`
+
+---
+
+## Overzicht: Lokaal vs Productie
+
+| Aspect | Lokaal | Productie |
+|--------|--------|-----------|
+| URL | `localhost:3000` | `jouw-app.vercel.app` |
+| Env vars | `.env.local` | Vercel Dashboard |
+| Database | Supabase (zelfde) | Supabase (zelfde) |
+| Command | `npm run dev` | Automatisch via Vercel |
+
+**Let op:** Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor een echt project zou je aparte databases hebben, maar voor deze cursus is dat niet nodig.
---
## Tools
-- Supabase (gratis tier)
- Next.js
+- Supabase (gratis tier)
+- Vercel (gratis tier)
- Cursor/OpenCode
---
@@ -116,72 +271,79 @@ const { error } = await supabase
### Bouw een Todo App met Supabase
-**Deel 1: Supabase Setup (20 min)**
-- Maak gratis Supabase account
-- Maak nieuw project
-- Kopieer URL en anon key naar `.env.local`
-
-**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
-
-**Deel 3: Next.js Integratie (1 uur)**
+**Deel 1: Project Setup (30 min)**
+- Run `npx create-next-app@latest todo-app` met juiste opties
+- Maak Supabase account en project aan
+- Configureer `.env.local` met credentials
- 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
+- Maak `src/lib/supabase.ts`
+- Test: `npm run dev` werkt zonder errors
-**Deel 4: Auth toevoegen (20 min)**
-- Installeer `@supabase/auth-ui-react`
-- Voeg login pagina toe met Auth UI component
-- Check of user ingelogd is
+**Deel 2: Database (20 min)**
+- Maak `todos` tabel via Supabase Table Editor
+- Voeg 3 test todos toe via de UI
+- Test: data is zichtbaar in Table Editor
+
+**Deel 3: CRUD Interface (50 min)**
+- Bouw UI om todos te tonen (lijst)
+- Voeg form toe om nieuwe todo te maken
+- Voeg checkbox toe om todo af te vinken
+- Voeg delete button toe
+- Test: alle CRUD operaties werken
+
+**Deel 4: Authenticatie (20 min)**
+- Installeer auth packages
+- Maak login pagina met Auth UI
+- Toon alleen todos voor ingelogde user
+- Test: login met magic link werkt
### Deliverable
-- Werkende Todo app met Supabase backend
-- Login functionaliteit
-- CRUD operaties werken
+- Werkende Todo app lokaal
+- GitHub repository met code
+- Screenshot van werkende app
---
## Huiswerk (2 uur)
-### Extend de Todo App
+### Deploy naar Productie + Uitbreiden
-**Feature 1: Filtering (30 min)**
-- Filter op: Alle / Actief / Voltooid
-- Sorteer op datum
-
-**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
-
-**Feature 3: Polish (30 min)**
-- Loading states
-- Error handling met toast messages
-- Empty state ("Geen todos gevonden")
-
-**Deploy (30 min)**
+**Deel 1: Deployment (30 min)**
+- Push code naar GitHub
- Deploy naar Vercel
-- Voeg environment variables toe in Vercel dashboard
-- Test of alles werkt in productie
+- Configureer environment variables in Vercel
+- Voeg Vercel URL toe aan Supabase Redirect URLs
+- Test: app werkt op productie URL
+
+**Deel 2: Features Uitbreiden (1 uur)**
+- Filter buttons: Alle / Actief / Voltooid
+- Sorteer op datum (nieuwste eerst)
+- Toon alleen todos van ingelogde user (filter op `user_id`)
+- Loading state tijdens data ophalen
+- Error state bij problemen
+- Empty state: "Geen todos gevonden"
+
+**Deel 3: Polish (30 min)**
+- Styling verbeteren met Tailwind
+- Responsive design (mobile friendly)
+- Kleine animaties (fade in/out)
### Deliverable
-- Deployed Todo app op Vercel
-- Screenshot van werkende app
-- Link naar live versie
+- Deployed app op Vercel (werkende URL)
+- Alle features werken in productie
+- Screenshot van productie app
---
## Leerdoelen
Na deze les kan de student:
-- Een Supabase project opzetten
-- Tabellen maken via de Supabase UI (zonder SQL)
+- Een Next.js project opzetten met `npx create-next-app`
+- De project structuur begrijpen en navigeren
+- Een Supabase project aanmaken en configureren
+- Environment variables correct beheren (lokaal en productie)
- De Supabase client installeren en configureren
-- Basis CRUD operaties uitvoeren (create, read, update, delete)
-- Simpele authenticatie implementeren met Auth UI
-- Environment variables correct gebruiken
+- Tabellen maken via de Supabase UI
+- CRUD operaties uitvoeren met de Supabase SDK
+- Authenticatie implementeren met Auth UI
+- Deployen naar Vercel met environment variables
+- Het verschil tussen lokale en productie omgeving begrijpen
diff --git a/Samenvattingen/Les08-Samenvatting.md b/Samenvattingen/Les08-Samenvatting.md
index fc37422..191d8ad 100644
--- a/Samenvattingen/Les08-Samenvatting.md
+++ b/Samenvattingen/Les08-Samenvatting.md
@@ -1,155 +1,320 @@
-# Les 8: Claude Code - Agentic Coding Mode
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les08-Slide-Overzicht.md
-> - Les08-Lesplan.md
-> - Les08-Bijlage-A-Lesopdracht.md
-> - Les08-Bijlage-B-Huiswerkopdracht.md
+# Les 8: Supabase Basics
---
## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 2: Intermediate** (Les 4-9)
## Beschrijving
-Kennismaking met Claude Code - autonome AI coding agent die zelfstandig multi-file changes kan plannen en uitvoeren.
+Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Je bouwt je eerste full-stack app met data die persistent is.
---
## Te Behandelen
-### Wat is Claude Code?
-- Agentic coding mode
-- AI neemt initiatief
-- Plant multi-step changes
-- Bewerkt multiple files autonoom
+### Wat is Supabase?
-### Verschil met Chat-Based Coding
-- Jij beschrijft WAT
-- Claude Code figured out HOE en doet het
+**Supabase = Database + Auth in één**
+- PostgreSQL database (gratis tier: 500MB)
+- Ingebouwde authenticatie
+- Real-time subscriptions
+- File storage
+- Auto-generated API
-### Claude Desktop Modes
-- Chat
-- Projects
-- Cowork
-- Code
+**Waarom Supabase voor beginners:**
+- Geen eigen server nodig
+- Visuele Table Editor (geen SQL kennis nodig)
+- Simpele JavaScript SDK
+- Gratis tier is ruim voldoende
-### 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
+### Supabase Project Aanmaken
-### Skills in Claude Code
-- Automatisch toegepast
+**Stap 1:** Ga naar [supabase.com](https://supabase.com) en maak account
-### Best Practices
-- Geef duidelijke high-level doelen
-- Laat autonoom werken
-- Review changes zorgvuldig
+**Stap 2:** Klik "New Project"
+- Naam: `todo-app`
+- Database Password: (bewaar deze!)
+- Region: `West EU (Frankfurt)` (dichtst bij NL)
-### Vergelijking
-| Tool | Aanpak |
-|------|--------|
-| OpenCode/WebStorm | Step-by-step guidance |
-| Claude Code | Autonome agent |
+**Stap 3:** Wacht ~2 minuten tot project klaar is
+
+**Stap 4:** Ga naar Settings → API en kopieer:
+- `Project URL`
+- `anon public` key
+
+---
+
+### Tabel Maken via Table Editor
+
+**In Supabase Dashboard:**
+
+1. Ga naar "Table Editor"
+2. Klik "New Table"
+3. Naam: `todos`
+4. Kolommen:
+
+| Name | Type | Default | Primary |
+|------|------|---------|---------|
+| id | int8 | - | ✓ (auto) |
+| title | text | - | |
+| completed | bool | false | |
+| created_at | timestamptz | now() | |
+
+5. Klik "Save"
+
+**Test:** Voeg een paar rijen toe via de UI om te zien dat het werkt.
+
+---
+
+### Environment Variables
+
+**Wat zijn environment variables?**
+- Configuratie die NIET in je code hoort
+- API keys, database URLs, secrets
+- Verschillend per omgeving (lokaal vs productie)
+
+**Maak `.env.local` in je project root:**
+```bash
+# .env.local - NOOIT committen naar Git!
+NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
+```
+
+**Maak ook `.env.example` (WEL committen):**
+```bash
+# .env.example - template voor anderen
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+```
+
+**Check `.gitignore` bevat:**
+```
+.env*.local
+```
+
+---
+
+### Supabase SDK Installeren
+
+```bash
+npm install @supabase/supabase-js
+```
+
+**Maak `src/lib/supabase.ts`:**
+```typescript
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)
+```
+
+---
+
+### CRUD Operaties
+
+**C - Create (toevoegen):**
+```typescript
+const { data, error } = await supabase
+ .from('todos')
+ .insert({ title: 'Nieuwe taak' })
+```
+
+**R - Read (ophalen):**
+```typescript
+const { data, error } = await supabase
+ .from('todos')
+ .select('*')
+ .order('created_at', { ascending: false })
+```
+
+**U - Update (wijzigen):**
+```typescript
+const { data, error } = await supabase
+ .from('todos')
+ .update({ completed: true })
+ .eq('id', todoId)
+```
+
+**D - Delete (verwijderen):**
+```typescript
+const { error } = await supabase
+ .from('todos')
+ .delete()
+ .eq('id', todoId)
+```
+
+---
+
+### Authenticatie met Auth UI
+
+**Installeer auth packages:**
+```bash
+npm install @supabase/auth-ui-react @supabase/auth-ui-shared
+```
+
+**Login component:**
+```tsx
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
+import { supabase } from '@/lib/supabase'
+
+export function LoginForm() {
+ return (
+
+ )
+}
+```
+
+**Huidige user checken:**
+```typescript
+const { data: { user } } = await supabase.auth.getUser()
+
+if (user) {
+ // User is ingelogd
+ console.log('Logged in as:', user.email)
+} else {
+ // Redirect naar login
+}
+```
+
+---
+
+### Deployment naar Vercel
+
+**Stap 1: Push naar GitHub**
+```bash
+git add .
+git commit -m "Add Supabase integration"
+git push
+```
+
+**Stap 2: Deploy op Vercel**
+1. Ga naar [vercel.com](https://vercel.com)
+2. "Add New Project"
+3. Import je GitHub repo
+4. **BELANGRIJK:** Voeg Environment Variables toe!
+ - `NEXT_PUBLIC_SUPABASE_URL`
+ - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
+5. Klik "Deploy"
+
+**Stap 3: Supabase Redirect URLs**
+1. Ga naar Supabase → Authentication → URL Configuration
+2. Voeg toe bij "Redirect URLs":
+ - `https://jouw-app.vercel.app/**`
+
+---
+
+### Lokaal vs Productie
+
+| Aspect | Lokaal | Productie |
+|--------|--------|-----------|
+| URL | `localhost:3000` | `jouw-app.vercel.app` |
+| Env vars | `.env.local` | Vercel Dashboard |
+| Database | Supabase (zelfde) | Supabase (zelfde) |
+| Command | `npm run dev` | Automatisch via Vercel |
+
+**Let op:** Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor echte projecten zou je aparte databases hebben.
---
## Tools
-- Claude Desktop (Code mode)
-- Skills.sh
- Supabase
- Next.js
+- OpenCode/WebStorm
+- Vercel
+- Git
---
## Lesopdracht (2 uur)
-### Deel 1: Claude Code Verkenning (30 min)
+### Bouw een Todo App met Supabase
-**Setup:**
-- Open Claude Desktop
-- Navigeer naar Code mode
-- Installeer relevante Skills eerst
+**Deel 1: Supabase Setup (30 min)**
-**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."
+1. Maak Supabase account en project
+2. Maak `todos` tabel via Table Editor
+3. Kopieer credentials
+4. Installeer `@supabase/supabase-js`
+5. Maak `src/lib/supabase.ts`
+6. Configureer `.env.local`
-- Laat Claude Code autonoom werken
-- Kijk hoe het plant en uitvoert
-- Vergelijk: hoe anders is dit dan manual prompting in OpenCode?
+Test: `npm run dev` werkt zonder errors
-### Deel 2: Autonome Feature Development (1u 30min)
+**Deel 2: CRUD Interface (1 uur)**
-**Bouw User Dashboard met Stats:**
+Bouw UI voor todos:
+1. Lijst van todos tonen
+2. Form om nieuwe todo toe te voegen
+3. Checkbox om todo af te vinken
+4. Delete button per todo
-Requirements:
-- Haal user data uit Supabase
-- Toon profile info
-- 4 stat cards
-- Activity feed
-- Charts met recharts
-- Alles responsive
-- Loading states
-- Error handling
+Gebruik AI hulp voor de components!
-**Process:**
-- Geef high-level beschrijving
-- Relevante context files (@mentions)
-- Laat autonoom werken
+**Deel 3: Authenticatie (30 min)**
-**Track:**
-- Hoeveel iteraties?
-- Manual fixes nodig?
-- Vergelijk tijd vs handmatig bouwen
+1. Installeer auth packages
+2. Maak login pagina met Auth UI
+3. Toon alleen app voor ingelogde users
+4. Test: login met magic link
+
+### Deliverable
+- Werkende Todo app lokaal
+- GitHub repository met code
+- Screenshot van werkende app
---
## Huiswerk (2 uur)
-### Deel 1: Complexe Refactoring (1 uur)
+### Deploy naar Productie + Uitbreiden
-**Neem Todo app uit Les 7, gebruik Claude Code voor grote refactoring:**
+**Deel 1: Deployment (30 min)**
-> "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."
+1. Push naar GitHub
+2. Deploy naar Vercel
+3. Configureer env vars in Vercel
+4. Voeg Vercel URL toe aan Supabase Redirect URLs
+5. Test: app werkt op productie URL!
-- Laat autonoom handlen
-- Verifieer dat alles werkt
-- Documenteer: hoe goed handelde Claude Code het?
+**Deel 2: Features Uitbreiden (1 uur)**
-### Deel 2: Comparison Essay (1 uur)
+Voeg toe:
+1. Filter buttons: Alle / Actief / Voltooid
+2. Sorteer op datum (nieuwste eerst)
+3. Loading state tijdens data ophalen
+4. Error state bij problemen
+5. Empty state: "Geen todos gevonden"
-**Schrijf vergelijkings essay (500 woorden):**
+**Deel 3: Polish (30 min)**
-OpenCode/WebStorm (step-by-step) vs Claude Code (autonome agent)
+1. Styling verbeteren met Tailwind
+2. Responsive design (mobile friendly)
+3. Kleine animaties (fade in/out)
-**Vergelijk op:**
-- Autonomie niveau
-- Snelheid
-- Accuratesse
-- Wanneer welke gebruiken
-
-**Include:** Concrete voorbeelden
-
-**Final verdict:** Tool voorkeur going forward?
+### Deliverable
+- Deployed app op Vercel (werkende URL!)
+- Alle features werken in productie
+- Screenshot van productie app
---
## 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
+- Een Supabase project aanmaken en configureren
+- Tabellen maken via de Table Editor (zonder SQL)
+- Environment variables correct beheren
+- De Supabase client installeren en configureren
+- CRUD operaties uitvoeren met de Supabase SDK
+- Authenticatie implementeren met Auth UI
+- Deployen naar Vercel met environment variables
+- Het verschil tussen lokale en productie omgeving begrijpen
diff --git a/Samenvattingen/Les09-Samenvatting.md b/Samenvattingen/Les09-Samenvatting.md
index e11c192..0711cf4 100644
--- a/Samenvattingen/Les09-Samenvatting.md
+++ b/Samenvattingen/Les09-Samenvatting.md
@@ -1,139 +1,294 @@
# Les 9: AI Agents - Custom GPTs & Claude Projects
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les09-Slide-Overzicht.md
-> - Les09-Lesplan.md
-> - Les09-Bijlage-A-Lesopdracht.md
-> - Les09-Bijlage-B-Huiswerkopdracht.md
-
---
## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 2: Intermediate** (Les 4-9)
## Beschrijving
-Deep dive in AI agents - autonome systemen die kunnen plannen, tools gebruiken, en taken uitvoeren.
+Leer werken met AI Agents: gepersonaliseerde AI assistenten die je kunt trainen op jouw specifieke taken en werkwijze.
---
## Te Behandelen
### Wat zijn AI Agents?
-- Verschil tussen chatbot vs agent
-### Agent Capabilities
-- Tool use
-- Memory
-- Planning
-- Learning
-- Proactief gedrag
+**Chatbot vs Agent:**
-### Agent Frameworks Landschap
-- Custom GPTs
-- Claude Projects
-- LangChain
-- AutoGPT
-- CrewAI
+| Chatbot | Agent |
+|---------|-------|
+| Reageert op vragen | Neemt initiatief |
+| Geen geheugen | Onthoudt context |
+| Algemene kennis | Specifieke expertise |
+| Eenmalige interactie | Langere samenwerkingen |
-### Custom GPTs Deep Dive
-- Instructions
-- Conversation starters
-- Knowledge base upload
-- Capabilities
+**Agent = AI met:**
+- Custom instructies (hoe moet hij zich gedragen)
+- Eigen kennis (documenten, voorbeelden)
+- Specifieke taken (waar is hij goed in)
-### 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)
+### Custom GPTs (ChatGPT)
-### Projects Combineren met MCP
-- Access tot externe data
+**Wat is een Custom GPT?**
+Een gepersonaliseerde versie van ChatGPT voor specifieke taken.
-### Real-World Developer Agents Bouwen
+**Onderdelen:**
+1. **Instructions:** Hoe moet de GPT zich gedragen?
+2. **Conversation starters:** Voorbeeld prompts
+3. **Knowledge:** Upload documenten als context
+4. **Capabilities:** Web browsing, code interpreter, DALL-E
+
+**Voorbeeld: Code Reviewer GPT**
+
+*Instructions:*
+```
+Je bent een strenge code reviewer voor React/TypeScript projecten.
+
+Bij elke code review check je:
+1. TypeScript types correct?
+2. React best practices gevolgd?
+3. Geen hardcoded values?
+4. Error handling aanwezig?
+5. Accessibility (ARIA labels)?
+
+Geef feedback in dit format:
+- ✅ Goed: [wat is goed]
+- ⚠️ Verbeter: [wat kan beter]
+- ❌ Fix: [wat moet gefixed worden]
+
+Wees streng maar constructief.
+```
+
+---
+
+### Claude Projects
+
+**Wat is een Claude Project?**
+Een Claude-omgeving met custom context voor een specifiek project.
+
+**Onderdelen:**
+1. **Project Knowledge:** Upload relevante documenten
+2. **Custom Instructions:** Hoe moet Claude zich gedragen
+3. **Conversation History:** Context blijft bewaard
+
+**Voordelen:**
+- Langere context dan ChatGPT
+- Betere nuance in antwoorden
+- Artifacts voor code en documenten
+
+**Voorbeeld: Project voor je Todo App**
+
+*Custom Instructions:*
+```
+Dit is mijn Todo app project.
+
+Tech stack:
+- Next.js 14 met App Router
+- TypeScript
+- Tailwind CSS
+- Supabase voor database en auth
+
+Code conventies:
+- Functional components
+- Named exports
+- Async/await (geen .then)
+
+Als je code schrijft, volg altijd deze conventies.
+```
+
+*Project Knowledge:*
+- Upload je belangrijkste component files
+- Upload je Supabase schema
+
+---
+
+### Wanneer Welke Gebruiken?
+
+| Situatie | Tool |
+|----------|------|
+| Snelle code review | Custom GPT |
+| Werken aan specifiek project | Claude Project |
+| Documentatie genereren | Custom GPT |
+| Lange context nodig | Claude Project |
+| Wil delen met anderen | Custom GPT |
+| Privé project context | Claude Project |
+
+---
+
+### Custom GPT Maken
+
+**Stap 1:** Ga naar chat.openai.com → "Explore GPTs" → "Create"
+
+**Stap 2:** Vul in:
+- Naam: "React Code Reviewer"
+- Beschrijving: "Reviews React/TypeScript code"
+- Instructions: (zie voorbeeld hierboven)
+
+**Stap 3:** Test met echte code
+
+**Stap 4:** Itereer op instructions
+- Wat mist hij?
+- Wat doet hij verkeerd?
+- Pas aan en test opnieuw
+
+---
+
+### Claude Project Maken
+
+**Stap 1:** Ga naar claude.ai → "Projects" → "Create project"
+
+**Stap 2:** Geef project een naam
+
+**Stap 3:** Upload Project Knowledge
+- Drag & drop je belangrijkste files
+- Of kopieer/plak code snippets
+
+**Stap 4:** Schrijf Custom Instructions
+- Beschrijf je tech stack
+- Beschrijf je conventies
+- Beschrijf wat je wilt dat Claude doet
+
+**Stap 5:** Start chatten binnen het project
+
+---
+
+### Agent Instructions Schrijven
+
+**Goede instructions bevatten:**
+
+1. **Rol:** Wie is de agent?
+```
+Je bent een senior React developer die code reviewt.
+```
+
+2. **Context:** Wat is de situatie?
+```
+Je reviewt code voor een startup met strakke deadlines.
+Focus op kritieke issues, niet op style preferences.
+```
+
+3. **Gedrag:** Hoe moet hij reageren?
+```
+Wees direct maar vriendelijk.
+Geef altijd een voorbeeld van de betere oplossing.
+```
+
+4. **Format:** Hoe moet output eruitzien?
+```
+Gebruik markdown formatting.
+Groepeer feedback per categorie.
+```
+
+5. **Beperkingen:** Wat moet hij NIET doen?
+```
+Herschrijf niet de hele codebase.
+Focus op de gevraagde code, niet op andere files.
+```
+
+---
+
+### Praktische Agent Ideeën
+
+| Agent | Doel |
+|-------|------|
+| **Code Reviewer** | Check code op bugs en best practices |
+| **Doc Generator** | Genereer documentatie voor components |
+| **Bug Debugger** | Help bij error messages uitleggen |
+| **Refactor Helper** | Suggesties voor code verbetering |
+| **Test Writer** | Genereer unit tests |
+| **Rubber Duck** | Denk hardop mee over problemen |
---
## Tools
-- Custom GPTs (OpenAI)
-- Claude Projects (Anthropic)
-- MCP
+- ChatGPT (Custom GPTs)
+- Claude Desktop (Projects)
---
## Lesopdracht (2 uur)
-### Deel 1: Build Code Review Agent (1 uur)
+### Bouw Je Eerste AI Agents
-**Groepswerk (20 min):**
-In groepjes van 2-3:
-- Definieer comprehensive code review checklist:
- - TypeScript
- - React patterns
- - Accessibility
- - Security
- - Performance
- - Code organization
+**Deel 1: Custom GPT - Code Reviewer (45 min)**
-**Maak Agent (30 min):**
-- Maak Custom GPT OF Claude Project met checklist als instructions
-- Upload sample "goede" code als knowledge base (10 min)
+1. Ga naar ChatGPT → Create GPT
+2. Maak "Code Reviewer" met deze checklist:
+ - TypeScript types
+ - React best practices
+ - Error handling
+ - Accessibility
+ - Performance
+3. Upload sample "goede" code als knowledge
+4. Test met code uit je Todo app
+5. Itereer op de instructions
-### Deel 2: Build Documentation Agent (1 uur)
+**Deel 2: Claude Project - Todo App Context (45 min)**
-**Individueel:**
+1. Maak nieuw Claude Project
+2. Upload je Todo app files als knowledge
+3. Schrijf custom instructions met je tech stack
+4. Test: vraag Claude om een nieuwe feature te bouwen
+5. Vergelijk: kent hij je project context?
-Maak agent die comprehensive documentatie genereert.
+**Deel 3: Vergelijking (30 min)**
-**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"
+Test dezelfde vraag in beide:
+```
+Review deze code en geef verbeter suggesties:
+[plak je TodoList component]
+```
-- Upload component library uit Les 6 als knowledge base
-- Test agent met component
+Documenteer:
+- Welke geeft betere feedback?
+- Welke voelt meer "op maat"?
+- Wanneer zou je welke gebruiken?
+
+### Deliverable
+- Werkende Custom GPT (link delen)
+- Claude Project met project context
+- Vergelijkings notities
---
## Huiswerk (2 uur)
-### Deel 1: Test Agents in Workflow (1 uur)
+### Personal Dev Assistant
-**Bouw nieuwe Todo app feature:**
-- Bijv. "Collaboration - invite users om todos te delen"
+**Deel 1: Bouw Je Personal Assistant (1 uur)**
-**Gebruik beide agents:**
-- Code Review agent om code te reviewen
-- Documentation agent om te documenteren
+Maak een Custom GPT of Claude Project die:
+- Jouw coding standards kent
+- Jouw tech stack begrijpt
+- Jouw workflow ondersteunt
-**Track:**
-- Hoe helpful?
-- Vingen ze echte issues?
-- Zou je dagelijks gebruiken?
+**Include in instructions:**
+- Jouw voorkeuren (tabs vs spaces, etc.)
+- Jouw tech stack details
+- Typische taken die je doet
+- Hoe je feedback wilt krijgen
-### Deel 2: Personal Dev Assistant (1 uur)
+**Deel 2: Test in Echt Werk (45 min)**
-**Maak comprehensive "Personal Dev Assistant" agent afgestemd op JOUW workflow.**
+Gebruik je assistant voor echte taken:
+1. Code review van een component
+2. Help bij een bug
+3. Genereer documentatie
-**Include:**
-- Jouw coding standards
-- Preferred patterns
-- Tech stack specifics
-- Veel voorkomende taken
-- Troubleshooting kennis
+**Deel 3: Reflectie (15 min)**
-- Test extensively
-- Deel agent config als gist
+Schrijf korte reflectie (300 woorden):
+- Hoe helpful was je agent?
+- Wat zou je verbeteren?
+- Ga je dit blijven gebruiken?
+
+### Deliverable
+- Personal Dev Assistant (GPT link of Claude Project screenshot)
+- 3 voorbeelden van gebruik
+- Reflectie (300 woorden)
---
@@ -141,7 +296,7 @@ Maak agent die comprehensive documentatie genereert.
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
+- Claude Projects opzetten met custom instructions en context
+- Effectieve agent instructions schrijven
+- De juiste tool kiezen (Custom GPT vs Claude Project)
+- Een personal dev assistant maken voor eigen workflow
diff --git a/Samenvattingen/Les10-Samenvatting.md b/Samenvattingen/Les10-Samenvatting.md
index 7ae6d36..f5f9b73 100644
--- a/Samenvattingen/Les10-Samenvatting.md
+++ b/Samenvattingen/Les10-Samenvatting.md
@@ -1,12 +1,4 @@
-# Les 10: Project Setup & Repository Structure
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les10-Slide-Overzicht.md
-> - Les10-Lesplan.md
-> - Les10-Bijlage-A-Lesopdracht.md
-> - Les10-Bijlage-B-Huiswerkopdracht.md
+# Les 10: Introduction to Cursor
---
@@ -14,205 +6,273 @@
**Hoofdstuk 3: Advanced** (Les 10-18)
## Beschrijving
-Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.
+Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.
---
## Te Behandelen
-### Waarom Project Structure Belangrijk Is
-- AI tools werken beter met duidelijke structuur
-- Makkelijker samenwerken
-- Sneller nieuwe features toevoegen
-- Professionele uitstraling
+### Waarom Cursor?
-### Ideale Folder Structuur
+**Tot nu toe gebruikten we:**
+- OpenCode (gratis, goed voor leren)
+- Claude Desktop (voor agents en projects)
-```
-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
+**Cursor is de volgende stap:**
+- Purpose-built voor AI-assisted coding
+- Professionele editor (gebaseerd op VS Code)
+- Superieure AI integratie
+- Free tier beschikbaar (voldoende voor de cursus)
+
+---
+
+### Free vs Pro
+
+| Aspect | Free Tier | Pro ($20/maand) |
+|--------|-----------|-----------------|
+| Tab completion | ✅ | ✅ |
+| CMD+K edits | Beperkt | Onbeperkt |
+| Chat | Beperkt | Onbeperkt |
+| Composer | Beperkt | Onbeperkt |
+| Models | GPT-4, Claude | Alle modellen |
+
+**Voor deze cursus:** Free tier is voldoende!
+
+---
+
+### Installatie
+
+1. Ga naar [cursor.sh](https://cursor.sh)
+2. Download voor jouw OS
+3. Installeer
+4. Open Cursor
+5. Sign in met GitHub
+
+**Eerste keer:**
+- Cursor vraagt om settings te importeren van VS Code (optioneel)
+- Accept default keybindings
+
+---
+
+### Core Features
+
+#### 1. Tab Completion
+AI-powered autocomplete die hele blokken code voorspelt.
+
+**Hoe het werkt:**
+- Begin met typen
+- Cursor suggereert code in grijs
+- Druk Tab om te accepteren
+- Druk Escape om te negeren
+
+**Tip:** Schrijf een comment over wat je wilt, en Tab completion vult de code in.
+
+```typescript
+// Function that calculates the total price with tax
+// [Tab completion vult de functie in]
```
-### .cursorrules Files
+#### 2. CMD+K (Inline Editing)
+Selecteer code en vraag AI om het aan te passen.
-**Wat zijn .cursorrules?**
-- Markdown files met instructies voor Cursor
-- Project-specifieke regels en conventies
-- Worden automatisch meegenomen in context
+**Hoe het werkt:**
+1. Selecteer code (of zet cursor op een regel)
+2. Druk CMD+K (Mac) of Ctrl+K (Windows)
+3. Typ je instructie
+4. Enter om te genereren
+5. Accept of Reject de wijziging
-**Voorbeeld `general.mdc`:**
-```markdown
-# Project Rules
+**Voorbeelden:**
+- "Add error handling"
+- "Convert to TypeScript"
+- "Make this responsive"
+- "Add loading state"
-## Tech Stack
-- Next.js 14 met App Router
-- TypeScript (strict mode)
-- Tailwind CSS voor styling
-- Supabase voor backend
+#### 3. Chat (Sidebar)
+Converseer met AI over je code.
-## Code Conventies
-- Gebruik functionele components
-- Prefer named exports
-- Destructure props
-- Gebruik async/await (geen .then())
+**Hoe het werkt:**
+1. CMD+Shift+L opent Chat
+2. Stel je vraag
+3. AI heeft context van je open file
-## Styling
-- Tailwind classes, geen inline styles
-- Mobile-first approach
-- Gebruik design tokens waar mogelijk
+**Voorbeelden:**
+- "Explain what this function does"
+- "How can I optimize this?"
+- "What's wrong with this code?"
+
+#### 4. @ Mentions
+Refereer naar files, folders, of documentatie.
+
+**Syntax:**
+- `@filename.tsx` - specifieke file
+- `@folder/` - hele folder
+- `@Docs` - officiële docs zoeken
+- `@Web` - web zoeken
+
+**Voorbeeld:**
+```
+@components/Button.tsx - How can I add a loading prop to this?
```
-### docs/ Folder
+#### 5. Composer Mode
+Multi-file generatie in één keer.
-**PROMPT-LOG.md**
-- Log van belangrijke prompts die tot goede code leidden
-- Minimaal 10 prompts documenteren
-- Format: doel → prompt → resultaat
+**Hoe het werkt:**
+1. CMD+I opent Composer
+2. Beschrijf wat je wilt bouwen
+3. AI genereert meerdere files tegelijk
+4. Review en accept changes
-**AI-DECISIONS.md**
-- Architectuur beslissingen gemaakt met AI hulp
-- Waarom bepaalde keuzes gemaakt
-- Trade-offs en alternatieven
+**Wanneer gebruiken:**
+- Nieuwe features met meerdere components
+- Refactoring over meerdere files
+- Boilerplate code genereren
-**PROJECT-BRIEF.md**
-- Wat doet het project?
-- Wie is de doelgroep?
-- Welke features zijn er?
+---
-### Environment Variables
+### Workflow Vergelijking
-**.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
-```
+| Taak | OpenCode | Cursor |
+|------|----------|--------|
+| Snelle fix | Chat | CMD+K |
+| Nieuwe component | Chat | Tab completion + CMD+K |
+| Multi-file feature | Meerdere chats | Composer |
+| Code uitleg | Chat | Chat + @ mentions |
+| Refactoring | Chat | CMD+K of Composer |
-**.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.)
+### Tips voor Beginners
-### Git Best Practices
-- Kleine, focused commits
-- Duidelijke commit messages
-- Feature branches
-- `.gitignore` correct ingesteld
+1. **Start met Tab completion**
+ - Gewoon typen en kijken wat er gebeurt
+ - Comments zijn je vriend
+
+2. **CMD+K voor snelle edits**
+ - Selecteer precies wat je wilt aanpassen
+ - Wees specifiek in je instructie
+
+3. **Chat voor vragen**
+ - Als je iets niet begrijpt
+ - Als je opties wilt vergelijken
+
+4. **@ mentions voor context**
+ - AI weet niet automatisch over andere files
+ - Voeg relevante files toe met @
+
+---
+
+### Keyboard Shortcuts Cheat Sheet
+
+| Actie | Mac | Windows |
+|-------|-----|---------|
+| Tab completion accept | Tab | Tab |
+| Inline edit | CMD+K | Ctrl+K |
+| Open Chat | CMD+Shift+L | Ctrl+Shift+L |
+| Open Composer | CMD+I | Ctrl+I |
+| Accept suggestion | CMD+Y | Ctrl+Y |
+| Reject suggestion | CMD+N | Ctrl+N |
---
## Tools
- Cursor
-- Git & GitHub
-- Next.js
-- VS Code / WebStorm
+- GitHub
---
## Lesopdracht (2 uur)
-### Richt je Eindproject Repository In
+### Cursor Verkennen
-**Deel 1: Repository Setup (30 min)**
-- Maak nieuwe GitHub repository
-- Clone lokaal
-- Run `npx create-next-app@latest` met TypeScript + Tailwind
-- Push initial commit
+**Deel 1: Setup (20 min)**
-**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
+1. Download en installeer Cursor
+2. Sign in met GitHub
+3. Open je Todo app project
+4. Verken de interface
-**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: Tab Completion (30 min)**
-**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)
+Maak nieuwe file `src/components/LoadingSpinner.tsx`:
+1. Typ comment: `// Loading spinner component with size prop`
+2. Laat Tab completion de rest doen
+3. Itereer met meer comments
+4. Noteer: hoe goed is de completion?
+
+**Deel 3: CMD+K Oefenen (30 min)**
+
+Open je TodoList component:
+1. Selecteer de list rendering code
+2. CMD+K → "Add loading state with skeleton"
+3. Selecteer een button
+4. CMD+K → "Add disabled state while loading"
+5. Selecteer een function
+6. CMD+K → "Add try-catch with error toast"
+
+Noteer wat werkt en wat niet.
+
+**Deel 4: Chat + @ Mentions (20 min)**
+
+1. Open Chat (CMD+Shift+L)
+2. Vraag: "@TodoList.tsx What could I improve in this component?"
+3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
+4. Probeer @Docs voor Next.js documentatie
+
+**Deel 5: Composer Proberen (20 min)**
+
+1. Open Composer (CMD+I)
+2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
+3. Review de gegenereerde files
+4. Accept of reject
### Deliverable
-- GitHub repository met complete structuur
-- Alle docs files aanwezig
-- .cursorrules file geschreven
-- README compleet
+- Screenshot van werkende Tab completion
+- 3 voorbeelden van CMD+K edits
+- Notities: wat werkt wel/niet goed
---
## Huiswerk (2 uur)
-### Verfijn je Project Setup
+### Bouw Feature met Cursor
-**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 1: Feature Bouwen (1.5 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
+Voeg "Due Dates" toe aan je Todo app:
+1. Elk todo kan een due date hebben
+2. Toon due date in de lijst
+3. Sorteer op due date
+4. Markeer overdue items in rood
-**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
+**Gebruik ALLE Cursor features:**
+- Tab completion voor nieuwe code
+- CMD+K voor aanpassingen
+- Chat voor vragen
+- Composer voor multi-file changes
+
+**Deel 2: Reflectie (30 min)**
+
+Schrijf vergelijking (400 woorden):
+- Cursor vs OpenCode: wat is beter?
+- Welke feature gebruik je het meest?
+- Is free tier voldoende?
+- Ga je overstappen?
### Deliverable
-- Uitgebreide .cursorrules (minimaal 2 files)
-- Volledig ingevulde PROJECT-BRIEF.md
-- Basis UI components gemaakt met Cursor
-- Screenshot van Cursor die je rules gebruikt
+- Werkende Due Dates feature
+- GitHub commit met de changes
+- Reflectie (400 woorden)
---
## Leerdoelen
Na deze les kan de student:
-- 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
+- Cursor installeren en configureren
+- Tab completion effectief gebruiken
+- CMD+K gebruiken voor inline edits
+- Chat gebruiken met @ mentions voor context
+- Composer mode gebruiken voor multi-file generatie
+- Het verschil beoordelen tussen Cursor en OpenCode
+- De juiste Cursor feature kiezen per taak
diff --git a/Samenvattingen/Les11-Samenvatting.md b/Samenvattingen/Les11-Samenvatting.md
index 2db3837..d8fe73f 100644
--- a/Samenvattingen/Les11-Samenvatting.md
+++ b/Samenvattingen/Les11-Samenvatting.md
@@ -1,173 +1,448 @@
-# Les 11: Introduction to Cursor - De Professionele AI Editor
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les11-Slide-Overzicht.md
-> - Les11-Lesplan.md
-> - Les11-Bijlage-A-Lesopdracht.md
-> - Les11-Bijlage-B-Huiswerkopdracht.md
+# Les 11: Project Setup & Repository Structure
---
## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)
## Beschrijving
-Kennismaking met Cursor als premium AI code editor - best of both worlds tussen IDE en AI power.
+Zet je eindproject professioneel op met de juiste structuur, documentatie, en AI-configuratie. Je past alles toe wat je hebt geleerd en maakt je project klaar voor Cursor.
---
## 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
+### Waarom Goede Structuur Belangrijk Is
-### Skills Compatibiliteit
-- Al je Skills werken ook in Cursor
+**Voor AI:**
+- AI begrijpt beter wat je project doet
+- Betere code suggestions
+- Minder hallucinaties
-### Installatie
-- Download
-- GitHub integration
-- 2-week Pro trial
+**Voor jezelf:**
+- Makkelijker navigeren
+- Sneller features bouwen
+- Betere samenwerking
-### 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 |
+### Eindproject Aanmaken
-### Skills Migratie
-- Skills van OpenCode werken meteen in Cursor
+```bash
+# Kies een goede naam voor je project
+npx create-next-app@latest ai-recipe-generator
+# of: smart-budget-buddy
+# of: travel-planner-ai
+# of: jouw-eigen-idee
-### Cost Discussie
-- Free tier vs Pro ($20/maand)
+# Beantwoord de vragen:
+# ✔ Would you like to use TypeScript? → Yes
+# ✔ Would you like to use ESLint? → Yes
+# ✔ Would you like to use Tailwind CSS? → Yes
+# ✔ Would you like to use `src/` directory? → Yes
+# ✔ Would you like to use App Router? → Yes
+# ✔ Would you like to customize the default import alias? → No
-### Wanneer Wat Gebruiken?
+cd ai-recipe-generator
+```
-| Tool | Gebruik voor |
-|------|--------------|
-| OpenCode/WebStorm | Leren |
-| Claude Code | Grote autonome taken |
-| Cursor | Dagelijkse development |
+---
+
+### De Ideale Folder Structuur
+
+```
+ai-recipe-generator/
+├── .cursor/
+│ └── rules/
+│ └── general.mdc # Cursor instructies
+├── docs/
+│ ├── PROJECT-BRIEF.md # Project beschrijving
+│ ├── PROMPT-LOG.md # AI prompts logboek
+│ └── AI-DECISIONS.md # Architectuur beslissingen
+├── src/
+│ ├── app/
+│ │ ├── api/ # API routes (voor AI)
+│ │ ├── layout.tsx
+│ │ └── page.tsx
+│ ├── components/
+│ │ ├── ui/ # Herbruikbare UI components
+│ │ └── features/ # Feature-specifieke components
+│ ├── lib/
+│ │ └── supabase.ts # Supabase client
+│ └── types/
+│ └── index.ts # TypeScript types
+├── .env.example # Template voor env vars
+├── .env.local # Echte env vars (niet committen!)
+├── .gitignore
+└── README.md
+```
+
+**Maak de folders aan:**
+```bash
+mkdir -p .cursor/rules
+mkdir -p docs
+mkdir -p src/components/ui
+mkdir -p src/components/features
+mkdir -p src/lib
+mkdir -p src/types
+```
+
+---
+
+### .cursorrules Files
+
+**.cursor/rules/general.mdc:**
+```markdown
+# Project: AI Recipe Generator
+
+## Tech Stack
+- Next.js 14 met App Router
+- TypeScript (strict mode)
+- Tailwind CSS voor styling
+- Supabase voor database en auth
+- Vercel AI SDK voor chat features
+
+## Code Conventies
+- Gebruik functionele React components
+- Gebruik named exports (geen default exports)
+- Destructure props in function signature
+- Gebruik async/await (geen .then() chains)
+- Schrijf TypeScript types voor alle props en data
+
+## File Naming
+- Components: PascalCase (Button.tsx, RecipeCard.tsx)
+- Utilities: camelCase (formatDate.ts, fetchRecipes.ts)
+- Types: PascalCase met 'Type' suffix (RecipeType.ts)
+
+## Styling
+- Alleen Tailwind classes, geen inline styles
+- Mobile-first approach
+- Gebruik consistent spacing (4, 8, 16, 24, 32)
+
+## Supabase
+- Client in src/lib/supabase.ts
+- Gebruik typed queries waar mogelijk
+- Handle errors expliciet
+
+## AI Features
+- API routes in src/app/api/
+- Gebruik Vercel AI SDK useChat hook
+- Stream responses voor betere UX
+```
+
+---
+
+### docs/ Folder
+
+#### docs/PROJECT-BRIEF.md
+```markdown
+# Project Brief: AI Recipe Generator
+
+## Projectnaam
+AI Recipe Generator
+
+## Tagline
+"Ontdek recepten op basis van wat je in huis hebt"
+
+## Probleem
+Mensen hebben vaak ingrediënten in huis maar weten niet wat ze
+ermee kunnen maken. Ze verspillen voedsel of bestellen onnodig.
+
+## Oplossing
+Een app waar je ingrediënten invoert en AI receptsuggesties genereert.
+Je kunt chatten met de AI voor variaties en tips.
+
+## Doelgroep
+- Studenten met beperkt budget
+- Thuiskoks die inspiratie zoeken
+- Mensen die voedselverspilling willen verminderen
+
+## Core Features
+1. Ingrediënten invoeren
+2. AI genereert recepten op basis van ingrediënten
+3. Chat interface voor follow-up vragen
+4. Recepten opslaan als favoriet
+5. Login om favorieten te bewaren
+
+## Nice-to-have Features
+- Dieetwensen (vegetarisch, glutenvrij, etc.)
+- Boodschappenlijst genereren
+- Recept delen
+
+## Tech Stack
+- Frontend: Next.js, TypeScript, Tailwind CSS
+- Backend: Supabase (database, auth)
+- AI: Vercel AI SDK met OpenAI
+- Deployment: Vercel
+```
+
+#### docs/PROMPT-LOG.md
+```markdown
+# Prompt Log
+
+Dit document bevat de belangrijkste prompts die ik heb gebruikt.
+
+## Template per prompt:
+
+### [Datum] - [Onderwerp]
+**Doel:** Wat wilde ik bereiken?
+**Prompt:**
+\`\`\`
+De exacte prompt die ik gebruikte
+\`\`\`
+**Resultaat:** Wat was het resultaat? Werkte het?
+**Geleerd:** Wat heb ik hiervan geleerd?
+
+---
+
+## Prompts
+
+### [Datum] - Project Setup
+**Doel:** Basis project structuur opzetten
+**Prompt:**
+\`\`\`
+[Nog in te vullen tijdens development]
+\`\`\`
+**Resultaat:**
+**Geleerd:**
+
+---
+
+(Voeg minimaal 10 prompts toe tijdens je project)
+```
+
+#### docs/AI-DECISIONS.md
+```markdown
+# AI Decisions Log
+
+Dit document bevat architectuur- en designbeslissingen gemaakt met AI hulp.
+
+## Template per beslissing:
+
+### [Datum] - [Beslissing titel]
+**Context:** Wat was de situatie?
+**Vraag aan AI:** Wat heb ik gevraagd?
+**Opties:** Welke opties werden voorgesteld?
+**Keuze:** Wat heb ik gekozen en waarom?
+**Trade-offs:** Wat zijn de voor- en nadelen?
+
+---
+
+## Beslissingen
+
+### [Datum] - Database Schema
+**Context:** Ik moet bepalen hoe ik recepten opsla.
+**Vraag aan AI:** "Wat is een goede database structuur voor een recept app?"
+**Opties:**
+1. Één tabel met JSON voor ingrediënten
+2. Genormaliseerde tabellen (recipes, ingredients, recipe_ingredients)
+**Keuze:** Optie 1 - één tabel met JSON
+**Trade-offs:**
+- Pro: Simpeler, sneller te implementeren
+- Con: Minder flexibel voor complexe queries
+
+---
+
+(Voeg minimaal 5 beslissingen toe tijdens je project)
+```
+
+---
+
+### Environment Variables
+
+**.env.example (WEL committen):**
+```bash
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+
+# OpenAI (voor Vercel AI SDK)
+OPENAI_API_KEY=your-openai-key
+```
+
+**.env.local (NIET committen):**
+```bash
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
+
+# OpenAI
+OPENAI_API_KEY=sk-xxxxx
+```
+
+---
+
+### README.md Best Practices
+
+```markdown
+# AI Recipe Generator
+
+Ontdek recepten op basis van wat je in huis hebt.
+
+## Features
+- Voer ingrediënten in die je hebt
+- AI genereert receptsuggesties
+- Chat voor follow-up vragen
+- Sla favoriete recepten op
+
+## Tech Stack
+- Next.js 14 (App Router)
+- TypeScript
+- Tailwind CSS
+- Supabase
+- Vercel AI SDK
+
+## Getting Started
+
+### Prerequisites
+- Node.js 18+
+- npm of yarn
+- Supabase account
+- OpenAI API key
+
+### Installation
+
+1. Clone de repository:
+\`\`\`bash
+git clone https://github.com/jouw-username/ai-recipe-generator.git
+cd ai-recipe-generator
+\`\`\`
+
+2. Installeer dependencies:
+\`\`\`bash
+npm install
+\`\`\`
+
+3. Kopieer environment variables:
+\`\`\`bash
+cp .env.example .env.local
+\`\`\`
+
+4. Vul je credentials in `.env.local`
+
+5. Start development server:
+\`\`\`bash
+npm run dev
+\`\`\`
+
+6. Open [http://localhost:3000](http://localhost:3000)
+
+## Scripts
+- `npm run dev` - Start development server
+- `npm run build` - Build voor productie
+- `npm run lint` - Run ESLint
+
+## Deployment
+Deze app is gedeployed op Vercel: [link naar productie]
+
+## Author
+[Jouw naam]
+```
+
+---
+
+### GitHub Repository Aanmaken
+
+```bash
+# Initialiseer Git (als dat nog niet is gebeurd)
+git init
+
+# Maak eerste commit
+git add .
+git commit -m "Initial Next.js setup with project structure"
+
+# Maak repository op GitHub.com, dan:
+git remote add origin https://github.com/jouw-username/ai-recipe-generator.git
+git branch -M main
+git push -u origin main
+```
---
## Tools
+- Next.js
- Cursor
-- GitHub
-- Skills.sh
+- Git & GitHub
- Supabase
---
## Lesopdracht (2 uur)
-### Deel 1: Setup & Skills Migration (30 min)
+### Richt je Eindproject Repository In
-**Installatie:**
-- Install Cursor
-- Connect GitHub
-- Activate Pro trial
+**Deel 1: Project Aanmaken (20 min)**
+- Kies je eindproject (Recipe Generator / Budget Buddy / Travel Planner / eigen idee)
+- Run `npx create-next-app@latest [project-naam]`
+- Open in Cursor
-**Verificatie:**
-- Verifieer Skills werken (`npx skills list`)
-- Test prompt met skill
+**Deel 2: Folder Structuur (20 min)**
+- Maak alle folders aan volgens de structuur
+- Maak alle bestanden aan
+- Test: folder structuur is compleet
-**Eerste Indrukken:**
-- Bouw component
-- Test tab completion
-- Test CMD+K
-- Test Chat met @ mentions
-- Documenteer verschillen vs OpenCode
+**Deel 3: .cursorrules (30 min)**
+- Schrijf `general.mdc` met jouw project details
+- Pas de tech stack, conventies, en styling regels aan
+- Test: open een file en vraag Cursor iets - volgt hij je regels?
-### Deel 2: Feature Comparison (45 min)
+**Deel 4: Documentatie (30 min)**
+- Vul PROJECT-BRIEF.md volledig in
+- Maak templates klaar in PROMPT-LOG.md en AI-DECISIONS.md
+- Schrijf complete README.md
-**Rebuild filtering system uit Les 4 in Cursor:**
-- Time het
+**Deel 5: Git (20 min)**
+- Initialiseer Git
+- Maak GitHub repository
+- Push alles
-**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
+### Deliverable
+- GitHub repository URL
+- Volledig ingevulde PROJECT-BRIEF.md
+- Werkende .cursorrules file
+- Screenshot van Cursor die je regels volgt
---
## Huiswerk (2 uur)
-### Bouw Complete Mini-App met Cursor
+### Verfijn Setup & Start Bouwen
-**Kies 1 van 4:**
-1. Weather App
-2. Expense Tracker
-3. Recipe Finder
-4. Habit Tracker
+**Deel 1: Extra .cursorrules (30 min)**
+- Maak `components.mdc` met component conventies
+- Maak `api.mdc` met API route conventies
+- Test beide in Cursor
-**Requirements:**
-- Full CRUD met Supabase
-- Responsive
-- TypeScript strict
-- Shadcn
-- Deployed naar Vercel
+**Deel 2: Basis Components (1 uur)**
+Maak 3-5 basis UI components in `src/components/ui/`:
+- Button.tsx
+- Card.tsx
+- Input.tsx
+- (optioneel: Modal.tsx, Toast.tsx)
-**Challenge:** Maximaliseer Cursor + Skills
+Gebruik Cursor met je .cursorrules!
+Log effectieve prompts in PROMPT-LOG.md
-### Track Metrics
-- Tab completion usage
-- CMD+K count
-- Composer usage
-- Skills active
-- AI vs manual ratio
+**Deel 3: Supabase Setup (30 min)**
+- Maak nieuw Supabase project voor eindopdracht
+- Configureer `.env.local` en `.env.example`
+- Bespreek met AI welke tabellen je nodig hebt
+- Maak eerste tabel aan
+- Documenteer in AI-DECISIONS.md
-### Deliverables
-- Deployed app
-- GitHub repo
-- Comprehensive reflectie (600 woorden):
- - Is Cursor worth switching?
- - Cursor vs Claude Code?
- - Free vs Pro?
- - Skills performance?
- - Final verdict?
+### Deliverable
+- Minimaal 2 .cursorrules files
+- Minimaal 3 UI components
+- Supabase project gekoppeld
+- Eerste entries in PROMPT-LOG.md en AI-DECISIONS.md
---
## 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
+- Een professionele project structuur opzetten
+- .cursorrules files schrijven die Cursor instrueren
+- Documentatie files aanmaken (PROJECT-BRIEF, PROMPT-LOG, AI-DECISIONS)
+- Environment variables correct beheren
+- Een GitHub repository aanmaken en pushen
+- De basis leggen voor AI-assisted development met goede context
diff --git a/Samenvattingen/Les12-Samenvatting.md b/Samenvattingen/Les12-Samenvatting.md
index 66dda9a..1c92ac6 100644
--- a/Samenvattingen/Les12-Samenvatting.md
+++ b/Samenvattingen/Les12-Samenvatting.md
@@ -1,153 +1,363 @@
-# Les 12: Advanced Context Management & AI-Vriendelijke Code
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les12-Slide-Overzicht.md
-> - Les12-Lesplan.md
-> - Les12-Bijlage-A-Lesopdracht.md
-> - Les12-Bijlage-B-Huiswerkopdracht.md
+# Les 12: MCP & Context Management
---
## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)
## Beschrijving
-Masterclass in context management voor maximale AI effectiveness.
+Leer over MCP (Model Context Protocol) en hoe je context effectief beheert voor betere AI-assisted development.
---
## Te Behandelen
-### Context Windows Begrijpen
-- Tokens (~4 chars = 1 token)
-- Context sizes:
- - GPT-4: 128K tokens
- - Claude: 200K tokens
+### Wat is MCP?
-### Waarom Context Belangrijk
-- Meer context = beter begrip
-- Maar ook: langzamer + duurder
+**MCP = Model Context Protocol**
+
+Een protocol van Anthropic waarmee AI tools veilig kunnen verbinden met externe data bronnen.
+
+**Zonder MCP:**
+- Je kopieert handmatig data naar Claude
+- Context gaat verloren tussen sessies
+- Geen toegang tot live data
+
+**Met MCP:**
+- Claude kan direct je files lezen
+- Toegang tot databases, APIs, GitHub
+- Real-time data in je conversations
+
+---
+
+### MCP Servers
+
+MCP werkt met "servers" - kleine programma's die specifieke data bronnen ontsluiten.
+
+**Populaire MCP Servers:**
+
+| Server | Wat het doet |
+|--------|--------------|
+| **filesystem** | Lees/schrijf lokale files |
+| **github** | Toegang tot repos, issues, PRs |
+| **postgres** | Direct database queries |
+| **slack** | Berichten en channels |
+| **brave-search** | Web zoeken |
+
+---
+
+### Claude Desktop + MCP Configureren
+
+**Stap 1:** Open Claude Desktop settings
+
+**Stap 2:** Ga naar "Developer" → "Edit Config"
+
+**Stap 3:** Voeg MCP servers toe in `claude_desktop_config.json`:
+
+```json
+{
+ "mcpServers": {
+ "filesystem": {
+ "command": "npx",
+ "args": [
+ "-y",
+ "@modelcontextprotocol/server-filesystem",
+ "/Users/jouw-username/projects/ai-recipe-generator"
+ ]
+ }
+ }
+}
+```
+
+**Stap 4:** Herstart Claude Desktop
+
+**Stap 5:** Je ziet nu een 🔧 icoon in Claude - dit toont actieve MCP servers
+
+---
+
+### Filesystem MCP Testen
+
+Met filesystem MCP kan Claude:
+- Je project files lezen
+- File structuur bekijken
+- Code analyseren
+
+**Test prompt:**
+```
+Analyseer mijn project structuur en geef me een overzicht
+van de belangrijkste files en hun functies.
+```
+
+Claude kan nu direct je files lezen zonder dat je ze kopieert!
+
+---
+
+### GitHub MCP
+
+```json
+{
+ "mcpServers": {
+ "github": {
+ "command": "npx",
+ "args": ["-y", "@modelcontextprotocol/server-github"],
+ "env": {
+ "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxx"
+ }
+ }
+ }
+}
+```
+
+**Wat kun je doen:**
+- "Toon mijn open issues"
+- "Maak een nieuwe branch"
+- "Wat zijn de recente commits?"
+
+---
+
+## Context Management
+
+### Wat is Context?
+
+**Context = alle informatie die AI heeft tijdens een conversatie**
+
+- Je vraag
+- Eerdere berichten
+- Geüploade files
+- MCP data
+
+**Beperking:** AI heeft een "context window" - maximale hoeveelheid tokens.
+
+| Model | Context Window |
+|-------|----------------|
+| GPT-4 | ~128K tokens |
+| Claude 3.5 | ~200K tokens |
+| Claude 3 Opus | ~200K tokens |
+
+**1 token ≈ 4 karakters** (of ~¾ woord)
+
+---
+
+### Waarom Context Belangrijk Is
+
+**Meer context = beter begrip**
+
+Met context over je project kan AI:
+- Consistente code genereren
+- Bestaande patterns volgen
+- Juiste imports gebruiken
+
+**Te veel context = problemen**
+- Langzamere responses
+- Hogere kosten
+- AI raakt "afgeleid"
+
+---
### Context Strategieën
-- Alleen relevante files
-- Start breed → narrow down
-- Sequential context
-- Prunen
-### Project Documentatie voor AI
+**1. Start Breed, Narrow Down**
+```
+Begin: "Bekijk mijn hele project structuur"
+Dan: "Focus op de components folder"
+Dan: "Specifiek TodoList.tsx"
+```
-| Document | Doel |
-|----------|------|
-| README | Project overview |
-| ARCHITECTURE | System design |
-| COMPONENTS | Component library docs |
+**2. Alleen Relevante Files**
+- Niet je hele codebase delen
+- Focus op files die relevant zijn voor de taak
-### Hoe AI Docs Leest
-- Structuur matters
-- Voorbeelden helpen
+**3. @ Mentions in Cursor**
+```
+@components/Button.tsx @lib/utils.ts
+Hoe kan ik een loading state toevoegen aan de Button?
+```
-### AI-Vriendelijke Code Organisatie
-- Semantische naming
-- Kleine focused files
-- Proper separation
-- Comprehensive comments (WHY niet WHAT)
+**4. Fresh Start bij Nieuwe Taken**
+- Nieuwe chat voor nieuwe onderwerpen
+- Voorkomt context pollution
-### Context Pruning
-- Wanneer fresh chat
-- .cursorignore
-- Vorige context samenvatten
+---
-### Knowledge Persistence
-- Claude Projects voor long-term memory
+### .cursorignore
-### Tool Vergelijking
-Context handling in:
-- Cursor
-- OpenCode
-- Claude Code
+Net als .gitignore, maar voor Cursor's AI indexing.
+
+**Maak `.cursorignore` in je project root:**
+```
+# Dependencies
+node_modules/
+
+# Build outputs
+.next/
+dist/
+build/
+
+# Large files
+*.log
+*.lock
+
+# Sensitive
+.env.local
+```
+
+**Waarom:**
+- Snellere indexing
+- Geen irrelevante suggestions
+- Betere focus op je code
+
+---
+
+### Context Optimalisatie Checklist
+
+✅ **Goede project documentatie**
+- README met overview
+- Duidelijke folder structuur
+- Comments in complexe code
+
+✅ **Semantische naming**
+- `fetchUserData()` niet `getData()`
+- `UserProfileCard.tsx` niet `Card1.tsx`
+
+✅ **Kleine, focused files**
+- Max ~300 regels per file
+- Eén verantwoordelijkheid per file
+
+✅ **Proper imports**
+- Absolute imports (`@/components/...`)
+- Georganiseerde imports
+
+---
+
+### Context in Cursor vs Claude Desktop
+
+| Aspect | Cursor | Claude Desktop + MCP |
+|--------|--------|---------------------|
+| Automatische context | Open files | MCP servers |
+| File access | @ mentions | Filesystem MCP |
+| Project begrip | .cursorrules | Project Knowledge |
+| Beste voor | Coding | Research, planning |
+
+**Combineer ze:**
+- Claude Desktop + MCP voor planning en grote analyses
+- Cursor voor daadwerkelijk coderen
---
## Tools
-- Cursor
- Claude Desktop
+- MCP servers
+- Cursor
- .cursorignore
---
## Lesopdracht (2 uur)
-### Context Optimization Challenge
+### MCP Setup & Context Optimalisatie
-**Setup:** Docent biedt messy codebase (10-15 files, onduidelijk, missing docs)
+**Deel 1: Claude Desktop MCP Setup (45 min)**
-### Phase 1: Assessment (30 min)
-- Test Cursor begrip met 4 vragen
-- Score X/10
+1. Open Claude Desktop settings
+2. Configureer filesystem MCP voor je eindproject folder
+3. Herstart Claude Desktop
+4. Verifieer: vraag Claude om je project te analyseren
-### Phase 2: Documentation (45 min)
-Maak comprehensive docs met AI:
-- README
-- ARCHITECTURE.md
-- COMPONENTS.md
+Test prompts:
+- "Wat is de structuur van mijn project?"
+- "Welke dependencies gebruik ik?"
+- "Analyseer mijn TodoList component"
-### Phase 3: Organization (45 min)
-Refactor voor clarity:
-- Rename files/functions
-- Split files <300 lines
-- Add comments
-- Organize folders
-- Improve imports
+**Deel 2: GitHub MCP (optioneel) (30 min)**
-### Phase 4: Re-test (30 min)
-- Zelfde 4 vragen
-- Score verbetering
-- Analyseer wat hielp
+1. Maak GitHub Personal Access Token
+2. Configureer GitHub MCP
+3. Test met je eindproject repo
+
+Test prompts:
+- "Toon mijn recente commits"
+- "Wat zijn mijn open issues?"
+
+**Deel 3: Context Optimalisatie (45 min)**
+
+1. Maak `.cursorignore` voor je project
+2. Voeg node_modules, .next, etc. toe
+3. Herindexeer project in Cursor
+
+4. Test context kwaliteit:
+ - Vraag Cursor iets over je project
+ - Zijn de antwoorden accuraat?
+ - Gebruikt hij de juiste patterns?
+
+5. Verbeter indien nodig:
+ - Voeg comments toe aan complexe code
+ - Verbeter naming
+ - Split grote files
+
+### Deliverable
+- Werkende MCP configuratie (screenshot)
+- .cursorignore file
+- Notities over context kwaliteit
---
## Huiswerk (2 uur)
-### Maak Context Management Playbook
+### Context Deep Dive
-### Deel 1: Playbook (1 uur)
+**Deel 1: MCP Experimenteren (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
+Kies en configureer nog een MCP server:
+- brave-search (voor web zoeken)
+- sqlite (voor lokale databases)
+- Of een andere uit de [MCP registry](https://github.com/modelcontextprotocol/servers)
-### Deel 2: Templates (30 min)
+Test uitgebreid:
+- Wat kun je ermee?
+- Wanneer is het nuttig?
+- Wat zijn beperkingen?
-Maak 3 templates:
-1. README.md
-2. ARCHITECTURE.md
-3. COMPONENT_TEMPLATE.md
+**Deel 2: Context Playbook (1 uur)**
-### Deel 3: Test (30 min)
-- Start vers Next.js project
-- Pas playbook toe
-- Test of Cursor meteen begrijpt
-- Itereer
+Schrijf een persoonlijk "Context Management Playbook" (1 pagina):
-**Deel als GitHub repo**
+```markdown
+# Mijn Context Management Playbook
+
+## Wanneer gebruik ik wat?
+
+### Claude Desktop + MCP
+- [situaties]
+
+### Cursor met @ mentions
+- [situaties]
+
+## Mijn .cursorignore template
+- [wat ignore ik altijd]
+
+## Context strategieën
+- [wat werkt voor mij]
+
+## Red flags
+- [wanneer is context slecht]
+
+## Optimalisatie tips
+- [mijn beste tips]
+```
+
+### Deliverable
+- Extra MCP server geconfigureerd
+- Context Management Playbook (1 pagina)
+- Documentatie in AI-DECISIONS.md over je context keuzes
---
## Leerdoelen
Na deze les kan de student:
+- MCP begrijpen en uitleggen
+- MCP servers configureren in Claude Desktop
+- Filesystem en GitHub MCP gebruiken
- 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
+- .cursorignore effectief gebruiken
+- Context strategieën toepassen
+- De juiste tool kiezen voor context management
diff --git a/Samenvattingen/Les13-Samenvatting.md b/Samenvattingen/Les13-Samenvatting.md
index 207a5cc..4369f65 100644
--- a/Samenvattingen/Les13-Samenvatting.md
+++ b/Samenvattingen/Les13-Samenvatting.md
@@ -1,174 +1,284 @@
-# Les 13: Mastering Cursor met Claude Opus & Advanced Skills
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les13-Slide-Overzicht.md
-> - Les13-Lesplan.md
-> - Les13-Bijlage-A-Lesopdracht.md
-> - Les13-Bijlage-B-Huiswerkopdracht.md
+# Les 13: Mastering Cursor
---
## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)
## Beschrijving
-Geavanceerde technieken met Cursor en high-end models.
+Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.
---
## Te Behandelen
-### Model Deep Dive
+### Model Keuze
-**Waarom Claude Opus voor Complex:**
-- Superieure reasoning
-- 200K context
-- Beste multi-file orchestration
+**Wanneer welk model?**
-**Wanneer Welk Model? (Complexity Matrix)**
+| Model | Gebruik voor | Kosten |
+|-------|-------------|--------|
+| **Haiku** | Simpele taken, autocomplete | Goedkoop |
+| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
+| **Opus** | Complexe architectuur, multi-file | Duur |
-| Complexiteit | Model |
-|--------------|-------|
-| Simpel | Haiku |
-| Gemiddeld | Sonnet |
-| Complex | Opus |
+**Vuistregels:**
+- Tab completion: Haiku (automatisch)
+- CMD+K: Sonnet (default)
+- Composer: Sonnet of Opus
+- Complexe debugging: Opus
-### Composer Mode Mastery
-- Multi-file generatie
-- Agent-like planning
-- Autonome iteratie
+---
-### Wanneer Composer vs Chat
-- Composer: nieuwe features
-- Chat: begrip/vragen
+### Composer Mode Diepgaand
-### @ Mentions Deep Dive
+**Wat is Composer?**
+Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
-**Alle Types:**
-- @Files
-- @Folders
-- @Code
-- @Docs
-- @Web
+**Wanneer Composer gebruiken:**
+- Nieuwe feature met meerdere components
+- Refactoring over meerdere files
+- Boilerplate generatie
+- Complexe wijzigingen
-**Advanced patterns**
+**Composer Workflow:**
+1. CMD+I opent Composer
+2. Beschrijf je doel duidelijk
+3. Voeg context toe met @ mentions
+4. Laat Cursor plannen
+5. Review het plan
+6. Accept of reject per file
+7. Itereer met feedback
+
+**Voorbeeld prompt:**
+```
+Create a user profile page with:
+- @components/ui/ style components
+- Profile header with avatar
+- Edit form with validation
+- Save to @lib/supabase.ts
+- Loading and error states
+```
+
+---
+
+### @ Mentions Systeem
+
+**Alle types:**
+
+| Mention | Wat het doet | Voorbeeld |
+|---------|--------------|-----------|
+| `@file.tsx` | Specifieke file | `@Button.tsx` |
+| `@folder/` | Hele folder | `@components/` |
+| `@codebase` | Zoek in codebase | `@codebase auth logic` |
+| `@Docs` | Officiële docs | `@Docs Next.js routing` |
+| `@Web` | Web zoeken | `@Web Supabase auth setup` |
+
+**Best practices:**
+- Wees specifiek met file mentions
+- Gebruik folder mentions voor context
+- @Docs voor up-to-date informatie
+- Combineer mentions voor betere context
+
+---
+
+### .cursorrules Advanced
+
+**Meerdere rules files:**
+
+```
+.cursor/
+└── rules/
+ ├── general.mdc # Project-brede regels
+ ├── components.mdc # Component conventies
+ ├── api.mdc # API route regels
+ └── testing.mdc # Test conventies
+```
+
+**Effectieve rules schrijven:**
+
+```markdown
+# Component Rules
+
+## Structure
+Alle components moeten volgen:
+1. Props interface bovenaan
+2. Component function
+3. Named export onderaan
+
+## Example
+\`\`\`tsx
+interface ButtonProps {
+ label: string
+ onClick: () => void
+ variant?: 'primary' | 'secondary'
+}
+
+export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
+ return (
+
+ )
+}
+\`\`\`
+
+## DON'Ts
+- Geen default exports
+- Geen inline styles
+- Geen any types
+```
+
+---
### Codebase Indexing
-- Hoe Cursor indexeert
-- Optimaliseren
-### .cursorrules Files
-- Project-specifieke instructies die persistent zijn
-- Powerful patterns
-- Hoe effectieve rules schrijven
+**Hoe Cursor indexeert:**
+- Scant alle files in je project
+- Bouwt semantic understanding
+- Gebruikt voor autocomplete en context
-### Skills + Composer
-- Hoe Skills Composer krachtiger maken
+**Optimaliseren:**
+1. Goede `.cursorignore` (node_modules, .next, etc.)
+2. Semantische naming
+3. Duidelijke file structuur
+4. Comments waar nodig
+
+**Re-indexeren:**
+CMD+Shift+P → "Reindex"
+
+---
### Cost Management
-- Token usage monitoren
-- Free tier strategies
-- Wanneer Pro worth it
+
+**Token gebruik monitoren:**
+- Cursor toont token count in chat
+- Check monthly usage in settings
+
+**Bespaartips:**
+1. Gebruik Haiku voor simpele taken
+2. Beperk context (niet hele codebase)
+3. Wees specifiek in prompts
+4. Fresh chat voor nieuwe onderwerpen
+
+**Free tier strategie:**
+- Focus op Tab completion (onbeperkt)
+- Gebruik CMD+K spaarzaam
+- Composer alleen voor grote taken
---
## Tools
- Cursor
-- Claude Opus/Sonnet/Haiku
-- Skills.sh
+- Claude models (Haiku/Sonnet/Opus)
- .cursorrules
---
## Lesopdracht (2 uur)
-### Complexe Feature met Cursor Composer + Claude + Skills
+### Multi-Step Form Wizard
-**Bouw Multi-Step Form Wizard:**
+**Bouw met Composer:**
| Stap | Features |
|------|----------|
-| 1 | Personal info met avatar |
-| 2 | Company info met autocomplete |
-| 3 | Preferences (dynamic based on previous) |
-| 4 | Review & confirm met edit |
+| 1 | Personal info (naam, email) |
+| 2 | Preferences (theme, notifications) |
+| 3 | Review & confirm |
+| 4 | Success animation |
-**Extra Requirements:**
-- Progress indicator met validation visualization
-- Per-step validation
+**Requirements:**
+- Progress indicator
+- Per-stap validatie
- localStorage persistence
-- Success animation met confetti
-- Error handling throughout
- TypeScript strict
-- Shadcn components
+- Tailwind styling
- 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
+**Process:**
-### Track
-- Welk model wanneer
-- Composer iterations
-- Skills impact
-- @ mentions patterns
-- Cost estimate
+**Deel 1: Composer Setup (30 min)**
+1. Open Composer (CMD+I)
+2. Schrijf comprehensive prompt
+3. Include @ mentions naar relevante files
+4. Kies Sonnet of Opus
+
+**Deel 2: Generatie & Review (45 min)**
+1. Laat Composer genereren
+2. Review elke file
+3. Accept wat goed is
+4. Reject wat niet past
+
+**Deel 3: Refinement (45 min)**
+1. Gebruik CMD+K voor kleine fixes
+2. Chat voor vragen
+3. Itereer tot het werkt
### Deliverable
-- Working wizard
-- Analyse document
+- Werkende form wizard
+- Notities: welk model wanneer, hoeveel iteraties
---
## Huiswerk (2 uur)
-### Maak Perfect .cursorrules File
+### Perfecte .cursorrules
-### Deel 1: Research (30 min)
-- Bestudeer 3-5 .cursorrules voorbeelden online
-- Analyseer wat effectief maakt
+**Deel 1: Research (30 min)**
+- Zoek 3-5 .cursorrules voorbeelden online
+- Analyseer wat ze effectief maakt
-### Deel 2: Write Comprehensive (1 uur)
+**Deel 2: Write Comprehensive Rules (1 uur)**
-Maak definitieve .cursorrules voor JOUW stack.
+Maak complete .cursorrules voor je eindproject:
-**Include:**
-- Project context
-- Code style
-- TypeScript conventions
-- React/Next.js patterns
-- Styling guidelines
-- Error handling
-- Accessibility
-- Testing
-- Security
-- Common pitfalls
-- Skills reference
+```markdown
+# [Project Naam]
-### Deel 3: Test & Iterate (30 min)
-- Nieuw project met .cursorrules
-- Use Composer
-- Verifieer Cursor volgt rules
-- Itereer
+## Tech Stack
+[Jouw stack]
+
+## Code Conventions
+[Jouw conventies]
+
+## File Naming
+[Jouw regels]
+
+## Component Structure
+[Jouw patterns]
+
+## Styling
+[Tailwind regels]
+
+## API Routes
+[Route conventies]
+
+## Error Handling
+[Error patterns]
+
+## DON'Ts
+[Wat te vermijden]
+```
+
+**Deel 3: Test (30 min)**
+1. Start nieuw component
+2. Vraag Cursor om het te bouwen
+3. Check: volgt Cursor je regels?
+4. Itereer indien nodig
### Deliverable
-- .cursorrules file
-- Uitleg document
-- Test results
-- Deel als gist
+- Complete .cursorrules file
+- Screenshot van Cursor die regels volgt
+- Korte analyse: wat werkt goed, wat niet
---
## 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
+- Het juiste Claude model kiezen per taak
+- Composer Mode effectief gebruiken voor multi-file features
+- @ mentions strategisch inzetten voor context
+- Geavanceerde .cursorrules files schrijven
+- Codebase indexing optimaliseren
+- Token gebruik monitoren en kosten beheren
diff --git a/Samenvattingen/Les15-Samenvatting.md b/Samenvattingen/Les15-Samenvatting.md
index 784a82e..ffbc246 100644
--- a/Samenvattingen/Les15-Samenvatting.md
+++ b/Samenvattingen/Les15-Samenvatting.md
@@ -1,158 +1,329 @@
-# Les 15: AI-Driven Testing & Quality Assurance
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les15-Slide-Overzicht.md
-> - Les15-Lesplan.md
-> - Les15-Bijlage-A-Lesopdracht.md
-> - Les15-Bijlage-B-Huiswerkopdracht.md
+# Les 15: Vercel AI SDK - AI Features in je App
---
## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)
## Beschrijving
-AI voor testen en code kwaliteit.
+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
-### Waarom Testen Belangrijk
-- Vang bugs vroeg
-- Vertrouwen in refactoring
-- Documentatie van gedrag
+### Waarom Vercel AI SDK?
-### Types van Tests
+**Het probleem:** Direct API calls naar OpenAI/Anthropic zijn complex:
+- Streaming handmatig implementeren
+- Error handling
+- State management
-| Type | Scope |
-|------|-------|
-| Unit | Individuele functies |
-| Component | React components |
-| Integration | Meerdere units samen |
-| E2E | Volledige user flows |
+**De oplossing:** Vercel AI SDK
+- Simpele React hooks
+- Built-in streaming
+- Provider-agnostic (OpenAI, Anthropic, etc.)
+- Edge-ready
-### AI voor Test Generation
-- Beschrijf wat te testen
-- AI schrijft comprehensive suites
-- Dekt edge cases
+---
-### Testing Tools
+### Installatie & Setup
-| Tool | Gebruik |
-|------|---------|
-| Vitest | Snelle moderne test runner |
-| React Testing Library | User perspectief |
-| MSW | API mocking |
-| Playwright | E2E testing |
+```bash
+npm install ai @ai-sdk/openai
+# of voor Anthropic:
+npm install ai @ai-sdk/anthropic
+```
-### Testing Supabase
-- Mocken database calls
-- RLS testen
-- Edge Functions testen
+**Environment variable:**
+```bash
+# .env.local
+OPENAI_API_KEY=sk-xxxxx
+```
-### Code Review met AI
-- Geautomatiseerde reviews
-- Issues vinden (security, performance, accessibility)
-- Fixes suggereren
+---
-### Debugging met AI
-- Plak error
-- AI legt uit en suggereert fix
+### Core Hooks
-### Code Kwaliteit Metrics
-- Coverage >70%
-- Mutation testing
-- Complexity analyse
+#### useChat - Voor Conversaties
-### Cursor's AI voor Automated Test Generation
+```tsx
+'use client'
+import { useChat } from 'ai/react'
-### Integration met Workflow
-- Tests on git push
-- CI/CD
+export function ChatComponent() {
+ const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat()
+
+ return (
+
+
+ {messages.map(m => (
+
+
+ {m.content}
+
+
+ ))}
+
+
+
+
+ )
+}
+```
+
+#### useCompletion - Voor Single Completions
+
+```tsx
+import { useCompletion } from 'ai/react'
+
+export function SummaryComponent() {
+ const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion()
+
+ return (
+
+
+ {completion &&
{completion}
}
+
+ )
+}
+```
+
+---
+
+### API Routes
+
+**app/api/chat/route.ts:**
+```typescript
+import { openai } from '@ai-sdk/openai'
+import { streamText } from 'ai'
+
+export async function POST(req: Request) {
+ const { messages } = await req.json()
+
+ const result = streamText({
+ model: openai('gpt-4o-mini'),
+ system: 'You are a helpful cooking assistant. Suggest recipes based on ingredients.',
+ messages,
+ })
+
+ return result.toDataStreamResponse()
+}
+```
+
+**Met custom system prompt:**
+```typescript
+const result = streamText({
+ model: openai('gpt-4o-mini'),
+ system: `You are a recipe assistant for the AI Recipe Generator app.
+
+ When the user provides ingredients:
+ 1. Suggest 2-3 recipes they could make
+ 2. List required additional ingredients (if any)
+ 3. Provide brief cooking instructions
+
+ Be concise and practical.`,
+ messages,
+})
+```
+
+---
+
+### Streaming Responses
+
+**Waarom streaming?**
+- Betere UX (user ziet direct resultaat)
+- Snellere perceived performance
+- Geen wachten op complete response
+
+**Hoe het werkt:**
+1. Server stuurt tokens één voor één
+2. Client rendert elke token direct
+3. User ziet "typing" effect
+
+**Loading indicator:**
+```tsx
+{isLoading && (
+