752 lines
26 KiB
Markdown
752 lines
26 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 | [Database Principles & Supabase Setup](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 08 | [Supabase: Auth & CRUD](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 09 | [Full-Stack Mini Project](Samenvattingen/Les09-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 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-8 | TypeScript, Next.js, Supabase | 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
|
|
|
|
**5 lessen · 10 EC**
|
|
|
|
Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
|
|
|
---
|
|
|
|
### 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: Database Principles & Supabase Setup
|
|
|
|
**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase, Cursor
|
|
|
|
**Docent vertelt:**
|
|
- Wat is een relationele database? Tabellen, rijen, kolommen
|
|
- Primary Keys, Foreign Keys en relaties
|
|
- Relatie types: one-to-one, one-to-many, many-to-many
|
|
- Normalisatie basics
|
|
- Wat is Supabase? (database + auth in één)
|
|
- Supabase project setup
|
|
- Table Editor: tabellen maken zonder SQL
|
|
- Environment variables configuratie
|
|
|
|
**Studenten doen:**
|
|
- Database schema tekenen voor eigen project
|
|
- Supabase account en project aanmaken
|
|
- Tabellen maken via UI (op basis van eigen schema)
|
|
- `.env.local` configureren
|
|
- Supabase client instellen
|
|
|
|
**Lesopdracht:**
|
|
1. Teken database schema voor jouw eindproject
|
|
2. Maak Supabase project
|
|
3. Implementeer je tabellen in Table Editor
|
|
4. Configureer `.env.local`
|
|
5. Test connectie met Supabase client
|
|
|
|
**Huiswerk:** Refine je database schema, voeg meer relaties toe, dokumenteer decisions, bereid Les 8 vor.
|
|
|
|
[→ Ga naar Les 7 Samenvatting](Samenvattingen/Les07-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 8: Supabase: Auth & CRUD
|
|
|
|
**Tools:** Supabase, Next.js, Cursor, React Query
|
|
|
|
**Docent vertelt:**
|
|
- Supabase Authentication: email/password, OAuth basics
|
|
- User sessions en JWT tokens
|
|
- Row Level Security (RLS) policies
|
|
- CRUD operaties in Supabase
|
|
- Realtime subscriptions introduceer
|
|
- Error handling en validation
|
|
- Best practices: secrets, security
|
|
|
|
**Studenten doen:**
|
|
- **Groepsdiscussie:** Database schemas van vorige les - aanpassingen nodig?
|
|
- Auth setup met email/password
|
|
- User sessions implementeren
|
|
- RLS policies schrijven
|
|
- CRUD app bouwen (Todo, Notes, Bookmarks)
|
|
- Realtime features testen
|
|
|
|
**Lesopdracht:**
|
|
1. Setup Supabase Auth (email/password)
|
|
2. Maak login/signup forms
|
|
3. Implementeer user sessions
|
|
4. Schrijf RLS policies voor je tabellen
|
|
5. Bouw complete CRUD app met auth
|
|
|
|
**Huiswerk:** Add OAuth provider (Google/GitHub), implementeer logout en password reset, deploy naar Vercel met env secrets.
|
|
|
|
[→ Ga naar Les 8 Samenvatting](Samenvattingen/Les08-Samenvatting.md)
|
|
|
|
---
|
|
|
|
# Deel 3: Full-Stack Development
|
|
|
|
**4 lessen · 7 EC**
|
|
|
|
Integratie van alle geleerde technieken, styling en voorbereiding op eindproject.
|
|
|
|
---
|
|
|
|
### Les 9: 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.
|