# Curriculum Klas B — 18 Lessen

**Versie:** 1.1 (concept)
**Doelgroep:** Studenten met al kennis van terminal/git, JS/TS, React/Next.js en AI tools.
**Focus:** Code kwaliteit · Veiligheid · Mooie ontwerpen
**Eindopdracht:** ongewijzigd (Next.js 14 + Supabase + Vercel AI SDK + externe API)
**Lesvorm:** Online, 2 uur per les

---

## Lesformat (elke les)

| Tijd | Onderdeel |
|------|-----------|
| 0:00 – 1:00 | Uitleg / live demo (60 min) |
| 1:00 – 1:15 | Pauze (15 min) |
| 1:15 – 2:00 | Praktijk / hands-on (45 min) |

Plus: **kleine huiswerkopdracht** elke week (~30–60 min) — reinforced wat in de les is behandeld en bereidt voor op volgende les.

---

## Filosofie

Klas A had veel tijd nodig voor setup, basics en klassikaal volgen. Klas B niet. Daarom:

- **Geen setup-tijd:** terminal, git, npm, Cursor staan al. Controle in Les 2 in 10 min.
- **Theorie kort, demo-driven:** binnen de 60 min talk zo veel mogelijk live coden.
- **Standaarden vanaf dag 1:** elke les bevat één "professional habit" (types, validatie, a11y, security).
- **Huiswerk is verplicht klein:** geen weekend-projecten — wel iedere week een concrete oefening.
- **Eindopdracht parallel** vanaf Les 4 (eigen project naast lessen, niet pas na les 18).

---

## Roadmap — 4 Blokken

### Blok 1 — Solid Foundation (Les 1–4)

| Les | Titel | Kern-leerdoel | Huiswerk |
|-----|-------|---------------|----------|
| 1 | Introductie AI & LLMs | (Reeds gegeven 2026-05-12) | — |
| 2 | AI-Dev Workflow Mastery | Cursor + Skills.sh + .cursorrules + MCPs effectief inzetten | Maak een eigen .cursorrules voor je stack |
| 3 | Next.js 14 Architectuur | App Router, Server vs Client Components, folder conventies | Bouw een mini-app skeleton met juiste structuur |
| 4 | TypeScript voor Professionals | Generics, discriminated unions, Zod schemas, type-safe contracts | Refactor 1 functie naar volledig type-safe + Zod |

### Blok 2 — Design & Craft (Les 5–9)

| Les | Titel | Kern-leerdoel | Huiswerk |
|-----|-------|---------------|----------|
| 5 | Design Systems met Tailwind + Shadcn | Design tokens, theming, dark mode, componenten library | Setup eigen design tokens + 3 componenten |
| 6 | Mooie UI in de Praktijk | Smaak ontwikkelen: typografie, spacing, kleur, hiërarchie | Herontwerp 1 bestaande pagina, screenshot voor/na |
| 7 | Motion & Micro-interactions | Framer Motion, loading states, transitions, feedback patterns | Voeg 3 micro-interactions toe aan je app |
| 8 | Accessibility & Responsive | ARIA, keyboard nav, contrast, mobile-first | a11y audit op eigen project + 3 fixes |
| 9 | Clean Code & Refactor met AI | Naming, code smells, AI-assisted refactoring | Refactor 1 component van "werkt" naar "mooi" |

### Blok 3 — Data & Security (Les 10–13)

| Les | Titel | Kern-leerdoel | Huiswerk |
|-----|-------|---------------|----------|
| 10 | Supabase + Database Design | Schema modelleren, relaties, indexes, migraties | ERD + schema voor je eindopdracht |
| 11 | Auth & RLS vanaf de Grond | Auth flow, sessions, JWT, RLS policies (vanaf dag 1!) | RLS policies schrijven + testen met 2 users |
| 12 | Server Actions & Validatie | Zod, sanitization, error handling, never-trust-client | Alle forms in je app valideren met Zod |
| 13 | Web Security in de Praktijk | OWASP Top 10, XSS, CSRF, secrets management, .env hygiene | Security audit eigen project + fix top-3 issues |

### Blok 4 — AI Features & Production (Les 14–18)

| Les | Titel | Kern-leerdoel | Huiswerk |
|-----|-------|---------------|----------|
| 14 | Vercel AI SDK Basics | Streaming, useChat, generateText, structured outputs | Bouw een streaming chat in eigen project |
| 15 | Tool Calling & Externe APIs | Function calling, API integratie, error states | 1 AI tool koppelen aan een gratis externe API |
| 16 | AI Agents & maxSteps | Multi-step autonome agents, planning, tool orchestration | Agent maken die 2+ tools chained gebruikt |
| 17 | Testing & Deployment | Vitest + Playwright (AI-assisted), Vercel deploy, Lighthouse | Tests schrijven + deployen naar productie |
| 18 | Code Review & Pitch | Peer review, refactor sessie, eindopdracht presentatie | Pitch-deck voorbereiden (5 min) |

---

## Mapping naar eindopdracht-leeruitkomsten

| Leeruitkomst | Lessen die dit dekken |
|---|---|
| 1. TypeScript & Next.js Development | 3, 4, 5, 9 |
| 2. Database Design & Supabase | 10, 11, 12 |
| 3. AI-Assisted Development met Cursor | 2, 9, 17 |
| 4. Skills.sh voor Consistente Output | 2 (intro), terugkerend |
| 5. Prompt Engineering & Iteratief Werken | 2, 14, 16 |
| 6. AI Agents Bouwen met Vercel AI SDK | 14, 15, 16 |

Bovenop eindopdracht-eisen (kwaliteit/security/design): 6, 7, 8, 13, 17, 18.

---

## Verschillen met Klas A curriculum

- Geen losse "Cursor Basics" — Klas B start direct op niveau (Les 2 = workflow mastery).
- Geen "TypeScript Fundamentals" als beginnersles — vervangen door pro-versie (Les 4).
- Design krijgt **5 lessen** i.p.v. impliciet meeliften.
- Security krijgt eigen volwaardige les (13) bovenop Auth/RLS (11, 12).
- AI Agents krijgt 3 lessen i.p.v. 2 (14–16).
- Testing + Deployment samengevoegd in 1 les (17) — past in 2-uur format.
- Eindopdracht-werk parallel vanaf Les 4.

---

## Open vragen voor jou

1. **Eindopdracht parallel vanaf Les 4:** akkoord, of pas later?
2. **Pair programming online:** breakout rooms in Zoom/Teams of laten studenten zelf afspreken?
3. **Huiswerk inleveren:** GitHub PR, Discord/Slack channel, of niet centraal verzamelen?
4. **Die ene gevorderde leerling** (recruitment-app): aparte uitdaging in huiswerk of normaal meeloopen?