798 lines
30 KiB
Markdown
798 lines
30 KiB
Markdown
# 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.
|