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	🔨 In ontwikkeling
05	TypeScript voor React/Next.js	2	📋 Samenvatting
06	Next.js 1: Pages, Routing & Layouts	2	📋 Samenvatting
07	Next.js 2: Server Components & Data Fetching	2	📋 Samenvatting
08	Next.js 3: API Routes & Server Actions	2	📋 Samenvatting
09	Database Principles & Supabase Setup	2	📋 Samenvatting
10	Supabase: Auth & CRUD	2	📋 Samenvatting
11	Full-Stack Mini Project	3	📋 Samenvatting
12	Styling: Tailwind CSS & shadcn/ui	3	📋 Samenvatting
13	Hands-on: Van Idee naar Prototype	3	📋 Samenvatting
14	Project Setup & AI Config (.cursorrules, claude.md)	3	📋 Samenvatting
15	Vercel AI SDK, Tool Calling & Agents	4	📋 Samenvatting
16	AI Chat Interface & Streaming	4	📋 Samenvatting
17	Eindproject Werkdag	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-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

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

7 lessen · 12 EC

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

Les 5: TypeScript voor React/Next.js

Tools: Cursor, TypeScript, React, Next.js

Docent vertelt:

TypeScript + React: props typen, useState met types
Event handlers en callback types
Generics basics (Array, Promise)
API response types en async functies
Type narrowing en utility types (Partial, Pick, Omit)
JS naar TS omzetten in een React project

Studenten doen:

React components typen met interfaces
useState en useEffect met types gebruiken
Event handlers correct typen
Bestaand React project omzetten naar TypeScript

Lesopdracht: Bouw getypte React componenten met Cursor. Type props, state, events en API responses.

Huiswerk: Zet een compleet React project om van JavaScript naar TypeScript. Alle componenten, hooks en API calls volledig typen.

→ Ga naar Les 5

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:

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

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

→ Ga naar Les 6

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:

Maak Server Component met async data fetching
Bouw Client Component met React Query
Implementeer useQuery voor producten
Voeg useMutation toe voor user interactions
Test caching behavior

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

→ Ga naar Les 7

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:

Maak /api/items routes (GET, POST, PUT, DELETE)
Bouw Server Actions voor form submissions
Voeg request validation toe met Zod
Implementeer error handling
Test all CRUD operations

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

→ Ga naar Les 8

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:

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 10 vor.

→ Ga naar Les 9

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:

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 10

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

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

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:

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 12

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

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:

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 14

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:

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 15

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:

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 16

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:

Alle features afmaken van je eindproject
Testing: user flows doorlopen
Bug fixes en edge cases
Code cleanup en refactoring
Deploy naar Vercel

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

→ Ga naar Les 17

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

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)