# 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-3

---

## Lesformat (Nieuw!)

**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](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 | ✅ Gegeven |
| 04 | [TypeScript Fundamentals](Samenvattingen/Les04-Samenvatting.md) | 2 | ✅ Gegeven |
| 05 | [Next.js — Het React Framework (Part 1)](Samenvattingen/Les05-Samenvatting.md) | 2 | ✅ Gegeven (v1) |
| 06 | [Next.js — QuickPoll Vervolg (Part 2)](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Gepland |
| 07 | [Van In-Memory naar Supabase (Introductie)](Samenvattingen/Les07-Samenvatting.md) | 2 | ✅ Gegeven |
| 08 | [Van In-Memory naar Supabase (Self-Paced + /create)](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Gepland |
| 09 | [Cursor Deep Dive (Student Plan)](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Gepland |
| 10 | [Styling: Tailwind CSS & shadcn/ui](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
| 11 | [Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
| 12 | [Project Setup & AI Config (.cursorrules, claude.md)](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
| 13 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting |
| 14 | [AI Chat Interface & Streaming](Samenvattingen/Les14-Samenvatting.md) | 4 | 📋 Samenvatting |
| 15 | [Eindproject Werkdag 1](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
| 16 | [Eindproject Werkdag 2](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
| 17 | [Eindproject Polish & Code Review](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-3 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
| Deel 2: Technical Foundations | 4-9 | TypeScript, Next.js, Supabase, Supabase Auth | 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:**
- [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 (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:**
- [Slide-Overzicht](Les03-Cursor-Basics/Les03-Slide-Overzicht.md)
- [Lesplan](Les03-Cursor-Basics/Les03-Lesplan.md)
- [Docenttekst](Les03-Cursor-Basics/Les03-Docenttekst.md)
- [Keynote Notes](Les03-Cursor-Basics/Les03-Docenttekst-Notes.md)
- [Lesopdracht](Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md)
- [Huiswerkopdracht](Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md)

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

---

### 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:**
- [Slide-Overzicht](Les04-TypeScript-Fundamentals/Les04-Slide-Overzicht.md)
- [Lesplan](Les04-TypeScript-Fundamentals/Les04-Lesplan.md)
- [Docenttekst](Les04-TypeScript-Fundamentals/Les04-Docenttekst.md)
- [Lesopdracht](Les04-TypeScript-Fundamentals/Les04-Bijlage-A-Lesopdracht.md)
- [Huiswerkopdracht](Les04-TypeScript-Fundamentals/Les04-Bijlage-B-Huiswerkopdracht.md)

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

---

# Deel 2: Technical Foundations

**6 lessen · 10 EC**

Stevige technische basis: TypeScript, Next.js, Supabase database en Cursor deep dive.

> **Curriculum-shift:** Deel 2 telt nu 6 lessen i.p.v. 5. Tijdens het geven van Les 7 bleek dat studenten meer tijd nodig hadden voor het Supabase-traject. Daarom is Les 8 (Self-paced redo + /create) toegevoegd. Les 9 is een Cursor Deep Dive nu studenten de Student Plan hebben. **Supabase Auth schuift naar Les 10. Les 10-18 schuiven hierdoor één plek op en moeten nog opnieuw gepland worden.**

---

### 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](Samenvattingen/Les05-Samenvatting.md)

---

### 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](Samenvattingen/Les06-Samenvatting.md)

---

### Les 7: Van In-Memory naar Supabase (Introductie)

**Tools:** Next.js 15, Supabase (Table Editor, SQL Editor), `@supabase/supabase-js`, Cursor, TypeScript

**Docent vertelt (~75 min, klassikaal):**
- Recap Les 6: QuickPoll met in-memory data — wat mist nog?
- Server Component + Client Component patroon (kernmoment)
- Wat is Supabase? Open-source Firebase alternatief op Postgres
- Tabellen, primary keys, foreign keys, CASCADE
- RLS policies basics
- SQL: SELECT, WHERE, JOIN
- Environment variables in Next.js (`NEXT_PUBLIC_` prefix)
- Supabase JavaScript client (`from`, `select`, `eq`, `single`)

**Samen bouwen (~120 min, klassikaal):**
- **Deel 1:** Poll afmaken — `votePoll()`, POST route, Server/Client split, percentage bars
- **Deel 2:** Supabase no-code — project, polls + options tabellen met foreign key, RLS, testdata, SQL Editor
- **Deel 3:** Supabase koppelen — `npm install`, `.env.local`, `lib/supabase.ts`, types, `data.ts` herschrijven, components aanpassen, testen

**Lesopdracht:** Volg klassikaal mee. Aan het eind draait je QuickPoll app met data uit Supabase.

**Huiswerk:** /create pagina bouwen (formulier → INSERT). *Bleek voor de meeste studenten te zwaar — daarom wordt dit in Les 8 herhaald.*

**Lesmateriaal:**
- [Slide-Overzicht](Les07-Supabase/Les07-Slide-Overzicht.md)
- [Docenttekst](Les07-Supabase/Les07-Docenttekst.md)
- [Live Coding Guide](Les07-Supabase/Les07-Live-Coding-Guide.md)
- [Lesopdracht (PDF)](Les07-Supabase/Les07-Lesopdracht.pdf)
- [Slides (PPTX)](Les07-Supabase/Les07-Slides.pptx)

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

---

### Les 8: Van In-Memory naar Supabase (Self-Paced + /create)

**Tools:** Next.js 15, Supabase (SQL Editor, RLS), `@supabase/supabase-js`, Cursor, TypeScript

**Achtergrond:** Studenten kregen vorige les niet door Deel 3 heen. Deze les loopt de docent de Supabase-koppeling rustig opnieuw door — nu via een **self-paced PDF** met copy-paste blokken en TODO-blokken. Daarna bouwen studenten zelfstandig de **/create pagina** (hun eerste INSERT).

**Aanpak:** Deel 1-3 klassikaal door de PDF. Deel 4 (/create pagina) zelfstandig met docent als coach.

**Tijdsindeling:**
- 09:00–09:15 Welkom + PDF uitdelen
- 09:15–09:45 **PDF Deel 1** — Setup (npm, .env, supabase.ts, types, `vote_option` SQL functie)
- 09:45–10:00 **PDF Deel 2** — Queries (`getPolls`, `getPollById`, `votePoll` met TODO's)
- 10:00–10:15 **PDF Deel 3** — Componenten (page, PollItem, VoteForm, [id])
- 10:15–10:30 Pauze
- 10:30–10:45 Uitleg INSERT theorie + RLS policy
- 10:45–11:30 **ZELFSTANDIG: PDF Deel 4** — /create pagina
- 11:30–12:00 Vragen + Huiswerk + Vooruitblik Auth

**Belangrijke leermomenten:**
- Self-paced PDF werkt beter dan live coding voor deze klas
- Next.js 15: `params` is nu een `Promise<{ id: string }>` → `const { id } = await params`
- Supabase RPC: `vote_option` PostgreSQL function aanmaken (anders PGRST202 error)
- RLS INSERT policy nodig vóór `.insert()` (anders "row-level security violation")

**Lesopdracht:** PDF met 4 delen — grijze blokken zijn copy-paste, gele TODO-blokken vullen studenten zelf in.

**Huiswerk:** /create pagina afmaken, validatie toevoegen (vraag niet leeg, min 2 opties). Extra: delete functie, SQL queries, realtime, styling.

**Lesmateriaal:**
- [Slide-Overzicht](Les08-Van-InMemory-naar-Supabase/Les08-Slide-Overzicht.md)
- [Docenttekst](Les08-Van-InMemory-naar-Supabase/Les08-Docenttekst.md)
- [Lesopdracht (PDF)](Les08-Van-InMemory-naar-Supabase/Les08-Lesopdracht.pdf) — self-paced handleiding
- [Slides (PPTX)](Les08-Van-InMemory-naar-Supabase/Les08-Slides.pptx)

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

---

### Les 9: Cursor Deep Dive (Student Plan)

**Tools:** Cursor (Student Plan), Next.js 16, TypeScript, Tailwind CSS

**Context:** Studenten hebben Cursor met het Student Plan (500 fast requests/maand). Tijd voor een deep dive in 5 professionele workflows die elke developer nodig heeft bij het werken met coding agents.

**We bouwen een nieuwe app from scratch: LinkVault** — een bookmark manager. In-memory data, geen Supabase.

**Docent vertelt (~25 min):**
- Hoe werkt een coding agent? Het Harness concept (instructions + tools + model)
- Rules & Skills: `.cursor/rules/` met 3 `.mdc` bestanden (project, components, styles)
- Context management: nieuw feature = nieuwe chat, @file/@codebase/@docs combineren
- Plan Mode: Shift+Tab → plan → review → edit → Build
- Agent Mode vs Ask Mode: wanneer welke?
- Debug Mode: hypotheses → logging → reproduceren → analyseren → fix
- Code Review & Testing: "Find Issues", tests schrijven, semantic commits

**Samen bouwen (~120 min, klassikaal):**
1. Setup: `npx create-next-app@latest` + 3 `.cursor/rules` bestanden
2. Plan Mode: plan LinkVault → review → Build
3. Agent Mode: features bouwen (edit bookmark, tag filtering)
4. Debug Mode: deterministische bug (handmatig geïntroduceerd) vinden en fixen
5. Code Review: "Find Issues" + unit tests + semantic commits + git push
6. (Optioneel) PR review met Cursor

**Lesopdracht:** Bouw LinkVault mee met alle 5 technieken.

**Huiswerk:** Bouw je eigen app from scratch (recepten, films, notities, of eigen idee) met dezelfde 5 technieken. Reflectie schrijven (200 woorden). Zie `Les09-Huiswerk.md`.

**Lesmateriaal:**
- [Slide-Overzicht](Les09-Cursor-Deep-Dive/Les09-Slide-Overzicht.md)
- [Docenttekst](Les09-Cursor-Deep-Dive/Les09-Docenttekst.md)
- [Huiswerk](Les09-Cursor-Deep-Dive/Les09-Huiswerk.md)

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

---

# Deel 3: Full-Stack Development

**4 lessen · 7 EC** *(nog te herplannen — Les 10-12 schuiven naar Les 11-13)*

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

> **Let op:** De onderstaande lessen 9-12 zijn nog op de oude nummering. Na de Les 7/8/9 herschikking schuift dit blok één plek op (Les 10 = Mini Project, Les 11 = Styling, etc.). Bestanden zijn nog niet hernoemd.

---

### Les 9 (oud → wordt Les 10): 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](Samenvattingen/Les09-Samenvatting.md)

---

### 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:**
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 10 Samenvatting](Samenvattingen/Les10-Samenvatting.md)

---

### 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](Samenvattingen/Les11-Samenvatting.md)

---

### 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:**
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 12 Samenvatting](Samenvattingen/Les12-Samenvatting.md)

---

# 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:**
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 13 Samenvatting](Samenvattingen/Les13-Samenvatting.md)

---

### 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:**
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 14 Samenvatting](Samenvattingen/Les14-Samenvatting.md)

---

### 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:**
1. Core features van eindproject afmaken
2. Testing: user flows doorlopen
3. Bug fixes en edge cases
4. Code cleanup
5. Checkpoint: is het werkend?

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

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

---

### 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:**
1. Alle geplande features afmaken
2. Uitgebreide testing en bug fixes
3. Performance audit
4. Code review voorbereiding
5. Presentatie voorbereiding

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

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

---

### 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:**
1. Zorg dat iemand anders je code review
2. Voer feedback uit
3. Run Lighthouse en fix issues
4. Accessibility check
5. Deploy final version

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

[→ Ga naar Les 17 Samenvatting](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 Samenvatting](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 (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.
