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