# AI Development Curriculum - NOVI Hogeschool

Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered developer.

**Totaal: 30 EC** verdeeld over 4 delen.

---

## Versies

| Versie | Status | Beschrijving |
|--------|--------|--------------|
| **v1** | Gegeven | Originele lessen (Les01, Les02 mappen) |
| **[v2](v2/)** | In ontwikkeling | Verbeterde lessen op basis van feedback |

**Feedback & Reflectie:** [v1-feedback.md](v1-feedback.md) - Bevindingen na het geven van les 1 en 2

---

## Overzicht

> **Let op:** Curriculum v2 - geherstructureerd na feedback les 1-2. Cursor vervangt OpenCode als primaire AI tool. Meer tijd voor Next.js en Supabase.

| Les | Onderwerp | Deel | Status |
|-----|-----------|------|--------|
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Gegeven |
| 02 | [AI Code Assistants (OpenCode → Cursor)](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Gegeven |
| 03 | [Cursor Setup & Basics](Samenvattingen/Les03-Samenvatting.md) | 1 | 🔨 In ontwikkeling |
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
| 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
| 06 | [Next.js 1: Pages, Routing & Layouts](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
| 07 | [Next.js 2: Server Components & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
| 08 | [Next.js 3: API Routes & Server Actions](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
| 09 | [Database Principles & Supabase Setup](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
| 10 | [Supabase: Auth & CRUD](Samenvattingen/Les10-Samenvatting.md) | 2 | 📋 Samenvatting |
| 11 | [Full-Stack Mini Project](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
| 12 | [Styling: Tailwind CSS & shadcn/ui](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
| 13 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
| 14 | [Project Setup & AI Config (.cursorrules, claude.md)](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
| 15 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
| 16 | [AI Chat Interface & Streaming](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
| 17 | [Eindproject Werkdag](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
| 18 | [Deployment, Presentaties & Evaluatie](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |

---

## Tool Progressie

| Deel | Lessen | Tools | Kosten |
|------|--------|-------|--------|
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
| Deel 2: Technical Foundations | 5-10 | TypeScript, Next.js, Supabase | Gratis |
| Deel 3: Full-Stack Development | 11-14 | Next.js, Supabase, Tailwind, **shadcn/ui**, Cursor | Gratis |
| Deel 4: Advanced AI & Deployment | 15-18 | Cursor, Vercel AI SDK, Vercel | Gratis (Cursor Student Plan) |

**Eindopdracht:** Cursor (Student Plan - gratis Pro voor 1 jaar)

---

# Deel 1: AI Foundations

**4 lessen · 7 EC**

Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.

---

### Les 1: Introductie tot AI en Large Language Models

**Tools:** ChatGPT, v0.dev, Vercel, GitHub

**Docent vertelt:**
- Het AI-landschap anno nu (ChatGPT, Claude, Grok, Gemini)
- Wat zijn Large Language Models? Next-token prediction uitgelegd
- Hallucinaties: waarom AI soms dingen verzint
- **AI Modellen & Kosten:** Gratis opties (ChatGPT Free, Claude Free, Groq, Ollama) vs Betaald ($20/maand) vs Premium (Claude Opus)
- **Privacy:** Ollama voor lokaal draaien (data verlaat je computer niet)
- **ChatGPT Projects:** Werkruimtes met eigen instructies en geheugen
- Prompt engineering basics: rol, context, taak, format
- De schets-naar-website workflow

**Studenten doen:**
- ChatGPT account aanmaken en verkennen
- Custom Instructions instellen + Project aanmaken voor v0.dev
- Complete workflow: schets op papier → foto → ChatGPT Project → v0.dev → deploy naar Vercel

**Lesopdracht:** Doorloop de complete workflow: teken een hero section op papier, maak foto, genereer prompt met ChatGPT, bouw in v0.dev, deploy naar Vercel.

**Huiswerk:** Reflectie schrijven (500 woorden), 5 AI use cases bedenken voor eigen projecten, tweede component bouwen via de workflow.

**Lesmateriaal:**
- [Slide-Overzicht](Les01-Introductie-AI/Les01-Slide-Overzicht.md)
- [Lesplan](Les01-Introductie-AI/Les01-Lesplan.md)
- [Docenttekst](Les01-Introductie-AI/Les01-Docenttekst.md)
- [Keynote Notes](Les01-Introductie-AI/Les01-Docenttekst-Notes.md)
- [Lesopdracht](Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md)
- [Huiswerkopdracht](Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md)

[→ Ga naar Les 1 Samenvatting](Samenvattingen/Les01-Samenvatting.md)

---

### Les 2: AI Code Assistants (OpenCode → Cursor)

**Tools:** OpenCode Desktop App, Cursor (Preview), Git, Vercel

**Docent vertelt:**
- Recap: OpenCode workflow uit Les 1 huiswerk
- Introduceer Cursor: professionele AI editor
- Cursor vs OpenCode: krachten en zwakten
- Installatie en configuratie
- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline edit), `Ctrl+L` (chat)
- De deployment workflow: git push → Vercel auto-deploy

**Studenten doen:**
- OpenCode Desktop App gebruiken voor continue integratie
- Cursor installeren en eerste keer verkennen
- Bestaand v0 project openen in Cursor
- Met Cursor een nieuwe pagina maken + link op homepage
- Deployen via git push → Vercel

**Lesopdracht:** Maak een nieuwe pagina in je v0 project. Clone je repo, draai lokaal, maak een pagina (/about, /services, of /contact) met componenten, voeg link op homepage toe, deploy minimaal 2x naar Vercel.

**Huiswerk:**
- Maak nieuw project vanaf scratch met `create-next-app`
- Bouw 3 componenten met Cursor (navbar, hero, + keuze)
- Push naar GitHub, koppel aan Vercel
- Schrijf reflectie (300 woorden)

**Lesmateriaal:**
- [Slide-Overzicht](Les02-OpenCode/Les02-Slide-Overzicht.md)
- [Lesplan](Les02-OpenCode/Les02-Lesplan.md)
- [Docenttekst](Les02-OpenCode/Les02-Docenttekst.md)
- [Keynote Notes](Les02-OpenCode/Les02-Docenttekst-Notes.md)
- [Lesopdracht](Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md)
- [Huiswerkopdracht](Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md)

[→ Ga naar Les 2 Samenvatting](Samenvattingen/Les02-Samenvatting.md)

---

### Les 3: Cursor Setup & Basics

**Tools:** Cursor, Git, GitHub

**Docent vertelt:**
- Cursor overview: tab completion, inline edits, chat, composer
- Free tier vs Student Plan vs Pro
- Installatie en first-time setup
- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline), `Ctrl+L` (chat), `Ctrl+Shift+L` (composer)
- AI model keuze: wanneer Haiku vs Sonnet?
- Privacy & security: hoe Cursor data behandelt
- `.cursorrules` introduceer: custom instructions voor je project

**Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal ervaringen van vorige les - wat vond je van Cursor vs OpenCode?
- Cursor installeren en Student Plan activeren
- Een van je Les 2 projecten openen in Cursor
- Tab completion, Ctrl+K, en Ctrl+L uitproberen
- Begint `.cursorrules` bestand voor je project

**Lesopdracht:** Open je Les 2 project in Cursor, voeg 3 nieuwe features toe (elk met ander shortcut: Tab, Ctrl+K, Chat), test telkens of het werkt, noteer: welke shortcut voelt het nuttigst?

**Huiswerk:** Experimenteer met Cursor Composer (Ctrl+Shift+L) op een bestaande component, schrijf reflectie (300 woorden) vergelijk je Cursor/OpenCode ervaringen, maak start-`.cursorrules` voor je eindproject.

[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)

---

### Les 4: Effectief Prompting, Iteratief Werken & Skills

**Tools:** OpenCode/WebStorm, Skills.sh

**Docent vertelt:**
- Zero-shot vs few-shot prompting (met voorbeelden)
- Chain-of-thought reasoning: laat AI stap voor stap denken
- Role prompting en constraint-based prompting
- Skills.sh: wat het is en waarom het werkt
- Iteratief werken: start simpel → voeg complexiteit toe

**Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal ervaringen met OpenCode - wat werkte, wat niet?
- Verschillende prompt technieken uitproberen
- Skills.sh installeren en eerste skill toevoegen
- Vergelijk output met/zonder skill
- Bouw feature in 4 iteraties (simpel → complex)

**Lesopdracht:** Installeer Skills.sh, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties (basis filter → multi-filter → sort → search).

**Huiswerk:** Maak persoonlijke prompt library met 8 templates voor verschillende taken, installeer en test 3 Skills, documenteer concrete verschillen.

[→ Ga naar Les 4](Samenvattingen/Les04-Samenvatting.md)

---

# Deel 2: Technical Foundations

**6 lessen · 10 EC**

Stevige technische basis: TypeScript, Next.js, databases en Supabase.

---

### Les 5: TypeScript Basics

**Tools:** OpenCode/WebStorm, TypeScript

**Docent vertelt:**
- Waarom TypeScript? Voordelen boven JavaScript
- Basic types: string, number, boolean, array, object
- Type inference: wanneer TypeScript types zelf raadt
- Interfaces en type aliases
- TypeScript met React: Props typen, useState met types
- Generics basics (Array<T>, Promise<T>)
- Veel voorkomende TypeScript errors en hoe ze op te lossen

**Studenten doen:**
- JavaScript file omzetten naar TypeScript
- Interfaces schrijven voor eigen data
- React component met typed props maken
- TypeScript errors debuggen

**Lesopdracht:**
1. Zet bestaand JS component om naar TypeScript
2. Maak interface voor User en Product data
3. Bouw typed React component met props
4. Fix 5 TypeScript errors in gegeven code

**Huiswerk:** Maak 3 nieuwe components volledig in TypeScript, schrijf interfaces voor je eindproject data, maak cheat sheet met TypeScript patterns.

[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)

---

### Les 6: Next.js 1: Pages, Routing & Layouts

**Tools:** Next.js 14, OpenCode/WebStorm, Vercel

**Docent vertelt:**
- Wat is Next.js? React framework met superpowers
- Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)
- Waarom SSR? SEO, performance, initial load
- App Router: file-based routing uitgelegd
- Folder structuur: app/, pages, layouts, loading, error
- Dynamic routes: [id], [...slug], [[...optional]]
- Link component en navigation
- Metadata en SEO basics

**Studenten doen:**
- Next.js project aanmaken met `npx create-next-app@latest`
- Pagina's maken met App Router
- Layout en nested layouts implementeren
- Dynamic routes bouwen
- Navigation met Link component

**Lesopdracht:**
1. `npx create-next-app@latest` met TypeScript + Tailwind + App Router
2. Maak 4 pagina's: home, about, products, contact
3. Maak root layout met Header en Footer
4. Maak `/products/[id]` dynamic route
5. Deploy naar Vercel

**Huiswerk:** Voeg nested layout toe voor products section, maak loading.tsx en error.tsx, experimenteer met metadata.

[→ Ga naar Les 6](Samenvattingen/Les06-Samenvatting.md)

---

### Les 7: Next.js 2: Server Components & Data Fetching

**Tools:** Next.js 14, React Query (TanStack Query), Cursor

**Docent vertelt:**
- Server Components vs Client Components
- 'use client' directive: wanneer en waarom
- Data fetching in Server Components (async/await)
- React Query: waarom, installatie, basics
- useQuery en useMutation hooks
- Caching en revalidation strategies

**Studenten doen:**
- Server Component met data fetching maken
- Client Component met React Query maken
- useQuery en useMutation implementeren
- Caching strategieën testen

**Lesopdracht:**
1. Maak Server Component met async data fetching
2. Bouw Client Component met React Query
3. Implementeer useQuery voor producten
4. Voeg useMutation toe voor user interactions
5. Test caching behavior

**Huiswerk:** Experimenteer met revalidation strategies, voeg error boundaries toe, bouw loading states voor betere UX.

[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)

---

### Les 8: Next.js 3: API Routes & Server Actions

**Tools:** Next.js 14, Cursor, Supabase

**Docent vertelt:**
- API Routes: Route Handlers in App Router
- HTTP methods: GET, POST, PUT, DELETE
- Server Actions: form actions en mutations
- Request/response handling
- Error handling in API routes
- Middleware basics (authentication)

**Studenten doen:**
- API routes schrijven voor CRUD operaties
- Server Actions implementeren voor forms
- Request validation toevoegen
- Error handling testen
- Authentication middleware bouwen

**Lesopdracht:**
1. Maak `/api/items` routes (GET, POST, PUT, DELETE)
2. Bouw Server Actions voor form submissions
3. Voeg request validation toe met Zod
4. Implementeer error handling
5. Test all CRUD operations

**Huiswerk:** Voeg authentication middleware toe, implementeer optimistic UI updates, schrijf API route tests.

[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)

---

### Les 9: Database Principles & Supabase Setup

**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase, Cursor

**Docent vertelt:**
- Wat is een relationele database? Tabellen, rijen, kolommen
- Primary Keys, Foreign Keys en relaties
- Relatie types: one-to-one, one-to-many, many-to-many
- Normalisatie basics
- Wat is Supabase? (database + auth in één)
- Supabase project setup
- Table Editor: tabellen maken zonder SQL
- Environment variables configuratie

**Studenten doen:**
- Database schema tekenen voor eigen project
- Supabase account en project aanmaken
- Tabellen maken via UI (op basis van eigen schema)
- `.env.local` configureren
- Supabase client instellen

**Lesopdracht:**
1. Teken database schema voor jouw eindproject
2. Maak Supabase project
3. Implementeer je tabellen in Table Editor
4. Configureer `.env.local`
5. Test connectie met Supabase client

**Huiswerk:** Refine je database schema, voeg meer relaties toe, dokumenteer decisions, bereid Les 10 vor.

[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)

---

### Les 10: Supabase: Auth & CRUD

**Tools:** Supabase, Next.js, Cursor, React Query

**Docent vertelt:**
- Supabase Authentication: email/password, OAuth basics
- User sessions en JWT tokens
- Row Level Security (RLS) policies
- CRUD operaties in Supabase
- Realtime subscriptions introduceer
- Error handling en validation
- Best practices: secrets, security

**Studenten doen:**
- **Groepsdiscussie:** Database schemas van vorige les - aanpassingen nodig?
- Auth setup met email/password
- User sessions implementeren
- RLS policies schrijven
- CRUD app bouwen (Todo, Notes, Bookmarks)
- Realtime features testen

**Lesopdracht:**
1. Setup Supabase Auth (email/password)
2. Maak login/signup forms
3. Implementeer user sessions
4. Schrijf RLS policies voor je tabellen
5. Bouw complete CRUD app met auth

**Huiswerk:** Add OAuth provider (Google/GitHub), implementeer logout en password reset, deploy naar Vercel met env secrets.

[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)

---

# Deel 3: Full-Stack Development

**4 lessen · 7 EC**

Integratie van alle geleerde technieken, styling en voorbereiding op eindproject.

---

### Les 11: Full-Stack Mini Project

**Tools:** Cursor, Supabase, Browser DevTools

**Docent vertelt:**
- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase, Auth
- Vandaag combineren we alles in een werkende mini-app
- Geen nieuwe concepten - alleen integratie en toepassing
- Probleemoplossing in real time

**Studenten doen:**
- **Groepsdiscussie:** Bespreek auth & CRUD ervaringen uit Les 10
- Mini-project kiezen: Bookmarks, Todo's, Notes, of Recipe Collection
- Met Cursor alle onderdelen kombinieren: auth, database, API, UI
- Zelfstandig problemen oplossen
- Polish en afronden

**Lesopdracht:** Bouw een volledige mini-app met: login, CRUD operaties, RLS security. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min testing, 150 min polish.

**Huiswerk:** Verbeterpunten toevoegen, reflectie schrijven (200 woorden), repo opruimen, voorbereiden op styling.

[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)

---

### Les 11: Hands-on: Van Idee naar Prototype

**Tools:** OpenCode/WebStorm, ChatGPT (voor planning)

**Docent vertelt:**
- Hoe ga je van vaag idee naar concrete features?
- Feature breakdown methode
- Component thinking: UI opdelen in herbruikbare stukken
- Minimum Viable Product (MVP) denken
- Korte demo van het proces

**Studenten doen:**
- **Groepsdiscussie:** Bespreek Tool Selection reflecties - welke workflows werken het beste?
- Kiezen van een simpel project idee
- Met AI features breakdown maken
- Component structuur bedenken
- Prototype bouwen met alles wat ze hebben geleerd
- Focus op WORKFLOW, niet perfectie

**Voorbeeld projecten:**
- Weer widget met 3-daagse forecast
- Simpele quiz app (3 vragen)
- Recipe card met ingrediënten toggle

**Lesopdracht:** Kies een mini-project, maak feature breakdown met AI, bouw werkend prototype. Documenteer je proces: welke prompts werkten, waar liep je vast, hoe loste je het op.

**Huiswerk:** Verbeter je prototype (styling, edge cases), schrijf "Lessons Learned" document (300 woorden).

[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)

---

### Les 12: Styling: Tailwind CSS & shadcn/ui

**Tools:** Tailwind CSS, shadcn/ui, Cursor

**Docent vertelt:**
- Waarom Tailwind? Utility-first CSS approach
- Tailwind setup in Next.js (meestal al aanwezig)
- Basis utilities: flexbox, grid, spacing, colors
- Tailwind components: buttons, cards, forms
- Wat is shadcn/ui? High-quality component library
- shadcn/ui installatie en configuratie
- Theme customization
- Dark mode setup

**Studenten doen:**
- Tailwind basix oefenen op bestaande components
- shadcn/ui components installeren en gebruiken
- Custom Tailwind themes making
- Bestaande mini-project restylen met Tailwind + shadcn
- Dark mode implementeren

**Lesopdracht:**
1. Refactor je mini-project UI met Tailwind classes
2. Installeer 5 shadcn/ui components (Button, Card, Input, etc.)
3. Cre je eigen color theme in Tailwind
4. Implementeer dark mode toggle
5. Polish: zorg dat het er professioneel uitziet

**Huiswerk:** Refactor alle components, add animations met Tailwind, explore shadcn variations, dokumenteer styling decisions.

[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)

---

### Les 13: Hands-on: Van Idee naar Prototype

**Tools:** Cursor, ChatGPT (voor planning)

**Docent vertelt:**
- Hoe ga je van vaag idee naar concrete features?
- Feature breakdown methode
- Component thinking: UI opdelen in herbruikbare stukken
- MVP (Minimum Viable Product) denken
- User stories schrijven
- Efficiënt met Cursor samenwerken voor iteratie

**Studenten doen:**
- **Groepsdiscussie:** Reflectie op styling - waar ben je tevreden mee?
- Kiezen van eindproject idee (of voorgestelde opties)
- Met AI feature breakdown maken
- Component structuur ontwerpen
- Start codebase met folder structure
- Eerste components bouwen

**Voorbeeld projecten:**
- E-commerce product filter & search
- Recipe planner met shoppinglist
- Expense tracker met analytics
- Blog platform met comments

**Lesopdracht:** Kies eindproject idee, maak feature breakdown met AI, ontwerp component tree, zet up codebase, bouw eerste 2-3 components.

**Huiswerk:** Bouw meer components, integreer eerste data, documenteer architecture decisions, voorbereiding Les 14.

[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)

---

# Deel 4: Advanced AI & Deployment

**4 lessen · 6 EC**

AI-powered features, streaming, finale afronding en deployment.

---

### Les 14: Project Setup & AI Config (.cursorrules, claude.md)

**Tools:** Cursor, Git, GitHub

**Docent vertelt:**
- Waarom goede project structuur cruciaal is voor AI samenwerking
- De ideale folder structuur voor Next.js + AI tools
- `.cursorrules` files: syntax, best practices, examples
- `claude.md`: project documentation voor Claude
- `docs/` folder: AI-DECISIONS.md, ARCHITECTURE.md
- Environment variables: lokaal vs productie setup
- `.gitignore` en `.cursorignore` voor AI tools
- README en documentatie best practices

**Studenten doen:**
- Eindproject repository aanmaken/opschonen
- Folder structuur optimaliseren
- Uitgebreide `.cursorrules` schrijven
- Project documentatie in claude.md
- docs/ folder vullen
- Eerste commits pushen

**Lesopdracht:**
1. Review folder structuur van je huidige project
2. Schrijf comprehensive `.cursorrules` (50+ lines)
3. Maak `claude.md` met project overview
4. Vul `docs/AI-DECISIONS.md` in
5. Push naar GitHub met cleane git history

**Huiswerk:** Polish documentatie, add architecture diagrams, test .cursorrules in Cursor, prepare voor Deel 4.

[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)

---

### Les 15: Vercel AI SDK, Tool Calling & Agents

**Tools:** Vercel AI SDK, Zod, Externe APIs, Cursor

**Docent vertelt:**
- Vercel AI SDK basics: useChat, streaming
- Tool Calling: AI laat externe APIs aanroepen
- Agents: AI voert autonome multi-step taken uit
- Zod voor schema validation
- System prompts schrijven
- Error handling en best practices
- Gratis APIs voor projecten

**Studenten doen:**
- AI SDK + Zod installeren
- Chat interface bouwen met streaming
- Tools definiëren voor externe API
- Tool calling implementeren
- Simple agent bouwen

**Lesopdracht:**
1. Installeer Vercel AI SDK en Zod
2. Bouw chat interface met streaming
3. Definieer minimaal 2 tools
4. Implementeer tool calling
5. Test met externe API

**Huiswerk:** Add more tools, implementeer agents met `maxSteps`, documenteer in AI-DECISIONS.md, integreer in eindproject.

[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)

---

### Les 16: AI Chat Interface & Streaming

**Tools:** Vercel AI SDK, Cursor, Browser APIs

**Docent vertelt:**
- Streaming responses: hoe werkt het?
- useChat hook: state management
- Chat UI patterns: message history, loading states
- Markdown rendering in chat
- Error states en edge cases
- User input handling en sanitization
- Performance optimalisatie

**Studenten doen:**
- Chat UI bouwen met useChat
- Streaming responses implementeren
- Message history managen
- Error handling toevoegen
- Styling met Tailwind
- In eindproject integreren

**Lesopdracht:**
1. Bouw chat interface met Vercel AI SDK
2. Implementeer streaming responses
3. Maak message history persistent (localStorage of DB)
4. Voeg error handling toe
5. Style met Tailwind + shadcn/ui

**Huiswerk:** Add chat features (clear history, export, favorites), deploy naar Vercel, gather user feedback.

[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)

---

### Les 17: Eindproject Werkdag

**Tools:** Cursor, Vercel, Supabase, alle vorige tools

**Docent vertelt:**
- Q&A session: wat loop je tegen aan?
- Cursor tips & tricks review
- Debugging strategies
- Performance optimization basics
- Deployment troubleshooting
- Final checklist review

**Studenten doen:**
- **Volle dag werken aan eindproject**
- Docent beschikbaar voor individuele hulp
- Features afmaken
- Testing en bug fixes
- Voorbereiding voor presentatie
- Code review voorbereiden

**Lesopdracht:**
1. Alle features afmaken van je eindproject
2. Testing: user flows doorlopen
3. Bug fixes en edge cases
4. Code cleanup en refactoring
5. Deploy naar Vercel

**Huiswerk:** Laatste fixes, presentatie voorbereiden, documentatie finaliseren, demo video opnemen (optioneel).

[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)

---

### Les 18: Deployment, Presentaties & Evaluatie

**Tools:** Vercel, GitHub, Supabase

**Deployment Setup (30 min):**
- Vercel deployment flow
- Environment variables setup
- Supabase productie configuration
- Custom domains (optioneel)
- Performance optimization (Lighthouse)
- Security checklist

**Presentaties & Evaluatie (90 min):**
- Iedereen presenteert eindproject (5 min per student)
- Live demo
- Vragen van docent en klasgenoten
- Feedback ontvangen
- Course evaluatie

**Docent vertelt:**
- Best practices deployment
- Performance monitoring
- Error tracking en logging
- Continuous deployment setup
- Next steps: career paths, advanced topics

**Studenten doen:**
- Final deployment naar Vercel
- Performance audit (Lighthouse)
- Security checklist doorlopen
- Presentatie geven (5 min)
- Course feedback geven

**Lesopdracht:**
1. Deploy eindproject productie
2. Configure environment variables
3. Run Lighthouse audit (score >80)
4. Complete security checklist
5. Present your project

**Huiswerk:** N.A. - Course afgerond!

[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)

---

## Tech Stack

- **Frontend:** React, Next.js, TypeScript, Tailwind CSS
- **Backend:** Supabase (Postgres database, Auth)
- **Data Fetching:** React Query (TanStack Query)
- **AI Tools:** ChatGPT, Claude Desktop, v0.dev, OpenCode, Cursor
- **AI SDK:** Vercel AI SDK voor AI features in apps
- **Deployment:** Vercel, GitHub

---

## Structuur per Les

Elke uitgewerkte les bevat:
- `Les[xx]-Slide-Overzicht.md` - Slide deck structuur
- `Les[xx]-Lesplan.md` - Tijdsindeling en activiteiten
- `Les[xx]-Docenttekst.md` - Uitgebreide docenthandleiding
- `Les[xx]-Bijlage-A-Lesopdracht.md` - Lesopdracht (2 uur)
- `Les[xx]-Bijlage-B-Huiswerkopdracht.md` - Huiswerkopdracht (2 uur)