Feedback van studenten: Het traditionele "1 uur lecture + 2 uur solo werk" werkt niet optimaal. Studenten voelen zich verloren en geven voorkeur aan samenwerken.

Nieuw format (toegepast op alle lessen):

~45 minuten: Theorie met live demo's (docent codeert en verklaart)
15 minuten: Pauze
~120 minuten: Klassikaal bouwen (Tim codeert voor, studenten volgen mee met regelmatige "nu jullie" momenten waar zij zelf code schrijven)

Dit format betrekent meer interactie, sneller feedback en meer mogelijkheden voor sparring en samenwerken.

Overzicht

Let op: Curriculum v2 - geherstructureerd na teaching experience. Old Les 5 (TypeScript voor React/Next.js) is uitgewerkt in de twee Next.js lessen. Old Les 6-8 zijn samengevat in nieuwe Les 5-6. Old Les 9-16 verschuiven naar Les 7-14. Old Les 17 (1 werkdag) is uitgebreid naar 3 werkdagen (Les 15-17).

Les	Onderwerp	Deel	Status
01	Introductie tot AI en Large Language Models	1	✅ Gegeven
02	AI Code Assistants (OpenCode → Cursor)	1	✅ Gegeven
03	Cursor Setup & Basics	1	✅ Gegeven
04	TypeScript Fundamentals	2	✅ Gegeven
05	Next.js — Het React Framework (Part 1)	2	✅ Gegeven (v1)
06	Next.js — QuickPoll Vervolg (Part 2)	2	📋 Gepland
07	Database Principles & Supabase Setup	2	📋 Samenvatting
08	Supabase: Auth & CRUD	2	📋 Samenvatting
09	Full-Stack Mini Project	3	📋 Samenvatting
10	Styling: Tailwind CSS & shadcn/ui	3	📋 Samenvatting
11	Van Idee naar Prototype	3	📋 Samenvatting
12	Project Setup & AI Config (.cursorrules, claude.md)	3	📋 Samenvatting
13	Vercel AI SDK, Tool Calling & Agents	4	📋 Samenvatting
14	AI Chat Interface & Streaming	4	📋 Samenvatting
15	Eindproject Werkdag 1	4	📋 Samenvatting
16	Eindproject Werkdag 2	4	📋 Samenvatting
17	Eindproject Polish & Code Review	4	📋 Samenvatting
18	Deployment, Presentaties & Evaluatie	4	📋 Samenvatting

Tool Progressie

Deel	Lessen	Tools	Kosten
Deel 1: AI Foundations	1-3	ChatGPT, v0.dev, OpenCode, Cursor	Gratis (Cursor Student Plan)
Deel 2: Technical Foundations	4-8	TypeScript, Next.js, Supabase	Gratis
Deel 3: Full-Stack Development	9-12	Next.js, Supabase, Tailwind, shadcn/ui, Cursor	Gratis
Deel 4: Advanced AI & Deployment	13-18	Cursor, Vercel AI SDK, Vercel	Gratis (Cursor Student Plan)

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

Deel 1: AI Foundations

3 lessen · 5 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:

→ Ga naar Les 1 Samenvatting

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:

→ Ga naar Les 2 Samenvatting

Les 3: Cursor Setup & Basics

Tools: Cursor (Student Plan), Git, GitHub, Next.js, TypeScript, Tailwind CSS

Docent vertelt:

Cursor overview: VS Code fork met AI, tab completion, inline edits, chat, composer
Free vs Pro vs Student Plan (500 fast requests/maand)
Request types en kosten: Tab = gratis, Chat/Composer/Inline Edit = 1 request
Cursor Skills & Docs: framework documentatie toevoegen via Settings → Features → Docs
.cursorrules genereren via Chat (1 request, goed besteed)
Keyboard shortcuts: Tab, Ctrl+K, Ctrl+L, Ctrl+I

Studenten doen:

Terminal setup check (node, git, npm, npx)
Cursor Student Plan activeren
Nieuw project: git init → npx create-next-app@latest
Skills/Docs configureren (Next.js, React, Tailwind)
.cursorrules genereren via Chat
Hands-on (75 min): Hero component bouwen, styling tweaken, extra feature toevoegen
Git commit

Lesopdracht: Bouw een nieuw Next.js project met Cursor: scaffold, configureer, bouw minimaal 2 componenten, commit.

Huiswerk: Debug Challenge — intentioneel kapot project fixen met Cursor. Drie niveaus: standaard (5 fouten), hard (12 fouten), super hard (18 fouten).

Lesmateriaal:

→ Ga naar Les 3 Samenvatting

Les 4: TypeScript Fundamentals

Tools: Cursor (Student Plan), TypeScript, Node.js

Docent vertelt:

Waarom TypeScript? Het probleem met JavaScript runtime errors
Live demo: JS vs TS in Cursor — zelfde code, maar TS vangt fouten vooraf
Basic types: string, number, boolean, arrays
Type inference: wanneer TypeScript types zelf raadt
Interfaces en type aliases
Union types en literal types
Functies typen: parameters en return types
Veelvoorkomende TypeScript errors lezen en oplossen

Studenten doen:

TypeScript Escaperoom: 8 kamers met type-puzzels van makkelijk naar moeilijk
Elke kamer leert een concept (basics → inference → interfaces → unions → functies)
Escape code ontgrendelen door alle type-errors te fixen

Lesopdracht: TypeScript Escaperoom — los 8 kamers met TypeScript puzzels op. Gebruik Cursor's autocomplete en error fixing.

Huiswerk: JS → TypeScript Converter — zet een werkend JavaScript project (users, products, orders, utils) volledig om naar TypeScript. Tests (al in TS) moeten slagen.

Lesmateriaal:

→ Ga naar Les 4 Samenvatting

Deel 2: Technical Foundations

5 lessen · 10 EC

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

Les 5: Next.js — Het React Framework (Part 1)

Tools: Next.js 15, Cursor, TypeScript, Tailwind CSS

Docent vertelt (~45 min, demo-driven):

Waarom Next.js? Het probleem met pure React
Create-next-app en project structuur
App Router: file-based routing, page.tsx, layout.tsx
Dynamic routes ([id]) met TypeScript
Server Components vs Client Components ("use client")
Data Fetching in Server Components (async components)
Server Actions introductie
Route Groups en best practices

Samen bouwen (~120 min, klassikaal):

QuickPoll app Part 1 (Stap 0-3 uit lesopdracht)
Tim + klas: create-next-app, types definiëren, folder structuur
Klassikaal: layout met navigatie, homepage met polls list
Klassikaal: API route GET single poll

Lesopdracht: QuickPoll app Part 1 (Stap 0-3 uit lesopdracht) - stap-voor-stap handleiding

Huiswerk: Stap 0-3 zelfstandig afmaken als je het niet af hebt

Lesmateriaal:

Slide-Overzicht
Docenttekst
Les05-Lesopdracht.pdf (stap-voor-stap handleiding)
les5-quickpoll-starter.zip (scaffolded project)
les5-quickpoll-voorbeeld.zip (Tim's referentie)

→ Ga naar Les 5 Samenvatting

Les 6: Next.js — QuickPoll Vervolg (Part 2)

Tools: Next.js 15, Cursor, TypeScript, Tailwind CSS

Docent vertelt (~30-40 min):

Recap Les 5 + Q&A
API Route Handlers: GET, POST met NextResponse (dieper)
Middleware: request intercepten, logging, rate limiting
Environment Variables (.env.local, NEXT_PUBLIC_)
Loading, Error, Not-Found special files
next/image, next/link, Metadata
Deployment op Vercel
Cursor/AI workflow (.cursorrules, Cmd+K, Cmd+L)

Samen bouwen (~120 min, klassikaal):

QuickPoll app Part 2 (Stap 4-7 uit lesopdracht)
Klassikaal: API POST vote route
Klassikaal: Poll detail pagina (server component)
Klassikaal: VoteForm (client component met fetch)
Klassikaal: Loading, error, not-found states
Bonus: Create poll pagina
Deploy naar Vercel

Lesopdracht: QuickPoll app Part 2 (Stap 4-7 uit lesopdracht)

Huiswerk: App afmaken en deployen op Vercel, bonus features toevoegen

Lesmateriaal:

Slide-Overzicht
Docenttekst
Les06-Lesopdracht.pdf (stap-voor-stap handleiding)
les6-quickpoll-starter.zip (scaffolded project)
les6-quickpoll-voorbeeld.zip (Tim's referentie)

→ Ga naar Les 6 Samenvatting

Les 7: 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:

Teken database schema voor jouw eindproject
Maak Supabase project
Implementeer je tabellen in Table Editor
Configureer .env.local
Test connectie met Supabase client

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

→ Ga naar Les 7 Samenvatting

Les 8: 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:

Setup Supabase Auth (email/password)
Maak login/signup forms
Implementeer user sessions
Schrijf RLS policies voor je tabellen
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 8 Samenvatting

Deel 3: Full-Stack Development

4 lessen · 7 EC

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

Les 9: 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 8
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 9 Samenvatting

Les 10: 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:

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

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

→ Ga naar Les 10 Samenvatting

Les 11: 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 12.

→ Ga naar Les 11 Samenvatting

Les 12: 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:

Review folder structuur van je huidige project
Schrijf comprehensive .cursorrules (50+ lines)
Maak claude.md met project overview
Vul docs/AI-DECISIONS.md in
Push naar GitHub met cleane git history

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

→ Ga naar Les 12 Samenvatting

Deel 4: Advanced AI & Deployment

6 lessen · 8 EC

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

Les 13: 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:

Installeer Vercel AI SDK en Zod
Bouw chat interface met streaming
Definieer minimaal 2 tools
Implementeer tool calling
Test met externe API

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

→ Ga naar Les 13 Samenvatting

Les 14: 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:

Bouw chat interface met Vercel AI SDK
Implementeer streaming responses
Maak message history persistent (localStorage of DB)
Voeg error handling toe
Style met Tailwind + shadcn/ui

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

→ Ga naar Les 14 Samenvatting

Les 15: Eindproject Werkdag 1

Tools: Cursor, Vercel, Supabase, alle vorige tools

Focus: Core features bouwen

Docent vertelt:

Q&A session: wat loop je tegen aan?
Cursor tips & tricks review
Debugging strategies
Performance optimization basics
Deployment troubleshooting

Studenten doen:

Volle dag werken aan eindproject
Docent beschikbaar voor individuele hulp en klassikaal sparring
Core features bouwen
Testing en bug fixes
Regelmatig vragen stellen

Lesopdracht:

Core features van eindproject afmaken
Testing: user flows doorlopen
Bug fixes en edge cases
Code cleanup
Checkpoint: is het werkend?

Huiswerk: Voortgang bijhouden, notities maken voor volgende werkdag, extra features plannen.

→ Ga naar Les 15 Samenvatting

Les 16: Eindproject Werkdag 2

Tools: Cursor, Vercel, Supabase, alle vorige tools

Focus: Features afmaken, testing, bug fixes

Docent vertelt:

Recap vorige werkdag
Extra features planning
Performance optimization
Deployment preparation

Studenten doen:

Volle dag werken aan eindproject
Docent beschikbaar voor hulp
Remaining features afmaken
Uitgebreide testing
Korte demo's van voortgang aan de klas
Performance optimization

Lesopdracht:

Alle geplande features afmaken
Uitgebreide testing en bug fixes
Performance audit
Code review voorbereiding
Presentatie voorbereiding

Huiswerk: Laatste polishing, documentatie finaliseren, code review met klasgenoot.

→ Ga naar Les 16 Samenvatting

Les 17: Eindproject Polish & Code Review

Tools: Cursor, Vercel, GitHub, Supabase

Focus: Code review in paren, UI polish, performance check, presentatie voorbereiding

Docent vertelt:

Code review best practices
Performance optimization details
Presentation tips
Deployment final checks

Studenten doen:

Code review in paren (peer feedback)
UI polish en refinement
Performance optimization (Lighthouse audit)
Accessibility audit
Presentatie voorbereiding
Final deployment checks

Lesopdracht:

Zorg dat iemand anders je code review
Voer feedback uit
Run Lighthouse en fix issues
Accessibility check
Deploy final version

Huiswerk: Presentatie oefenen, demo video opnemen (optioneel), laatste tweaks.

→ Ga naar Les 17 Samenvatting

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:

Deploy eindproject productie
Configure environment variables
Run Lighthouse audit (score >80)
Complete security checklist
Present your project

Huiswerk: N.A. - Course afgerond!

→ Ga naar Les 18 Samenvatting

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 (nu: ~45 min theorie + 15 min pauze + ~120 min klassikaal bouwen)
Les[xx]-Docenttekst.md - Uitgebreide docenthandleiding
Les[xx]-Bijlage-A-Lesopdracht.md - Lesopdracht (klassikaal en huiswerk)
Les[xx]-Bijlage-B-Huiswerkopdracht.md - Huiswerkopdracht

Lesformat verandering (v2): Meer klassikaal bouwen, minder solo werk. Docent codeert voor, studenten volgen mee met regelmatige "nu jullie" momenten. Betere interactie en sparring.