110 lines
5.5 KiB
Markdown
110 lines
5.5 KiB
Markdown
# 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?
|