fix: lessons
This commit is contained in:
834
readme.md
834
readme.md
@@ -1,797 +1,103 @@
|
||||
# AI Development Curriculum - NOVI Hogeschool
|
||||
# AI Developer — Leerlijnbeschrijving
|
||||
|
||||
Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered developer.
|
||||
|
||||
**Totaal: 30 EC** verdeeld over 4 delen.
|
||||
**Opleiding:** NOVI Hogeschool Utrecht
|
||||
**Vak:** AI-Assisted Development (18 lessen × 3 uur fysiek)
|
||||
**Docent:** Tim Rijkse
|
||||
**Schooljaar:** 2025–2026
|
||||
|
||||
---
|
||||
|
||||
## Versies
|
||||
## Doel van de leerlijn
|
||||
|
||||
| Versie | Status | Beschrijving |
|
||||
|--------|--------|--------------|
|
||||
| **v1** | Gegeven | Originele lessen (Les01, Les02 mappen) |
|
||||
| **[v2](v2/)** | In ontwikkeling | Verbeterde lessen op basis van feedback |
|
||||
Studenten gaan in 18 lessen van "ik heb wel eens ChatGPT gebruikt" naar "ik kan een productie-klare AI-app bouwen". De leerlijn is opgebouwd in vier delen die in moeilijkheid en abstractie opbouwen.
|
||||
|
||||
**Feedback & Reflectie:** [v1-feedback.md](v1-feedback.md) - Bevindingen na het geven van les 1-3
|
||||
Aan het einde:
|
||||
- Kan de student een complete Next.js + Supabase-app from scratch opzetten.
|
||||
- Beheerst de student de Vercel AI SDK voor chat, tool-calling, agents en RAG.
|
||||
- Weet de student wat er nodig is om een AI-app naar productie te brengen — observability, evals, security, cost.
|
||||
- Heeft de student feeling met de bredere AI-toolbox: voice, vision, image gen, local LLMs, edge AI.
|
||||
|
||||
---
|
||||
|
||||
## Lesformat (Nieuw!)
|
||||
## Opbouw — vier delen
|
||||
|
||||
**Feedback van studenten:** Het traditionele "1 uur lecture + 2 uur solo werk" werkt niet optimaal. Studenten voelen zich verloren en geven voorkeur aan samenwerken.
|
||||
### Deel 1 — AI Foundations (Les 1–3)
|
||||
Kennismaking met AI, modellen, prompt engineering en de eerste AI-coding tools (ChatGPT, OpenCode, Cursor).
|
||||
|
||||
**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)
|
||||
### Deel 2 — Technical Foundations (Les 4–10)
|
||||
TypeScript fundamentals, Next.js basics, QuickPoll als rode draad, en Supabase + Auth + Row Level Security tot productie-niveau.
|
||||
|
||||
Dit format betrekent meer interactie, sneller feedback en meer mogelijkheden voor sparring en samenwerken.
|
||||
### Deel 3 — AI Development (Les 11–16)
|
||||
Vercel AI SDK, Tool Calling, Cursor + Vercel deploy, Agents, RAG met embeddings, en Model Context Protocol (MCP).
|
||||
|
||||
### Deel 4 — Production & Advanced (Les 17–18)
|
||||
Observability, evals, security, cost (Les 17). Voice, vision, image gen, local LLMs en edge AI (Les 18).
|
||||
|
||||
---
|
||||
|
||||
## Overzicht
|
||||
## Lessenoverzicht
|
||||
|
||||
> **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).
|
||||
| Nr | Deel | Onderwerp | Map |
|
||||
|----|------|-----------|-----|
|
||||
| 1 | 1 | Introductie AI & LLMs | `Les01-Introductie-AI/` |
|
||||
| 2 | 1 | AI Code Assistants & OpenCode | `Les02-OpenCode/` |
|
||||
| 3 | 1 | Cursor Setup & Basics | `Les03-Cursor-Basics/` |
|
||||
| 4 | 2 | TypeScript Fundamentals | `Les04-TypeScript-Fundamentals/` |
|
||||
| 5 | 2 | Next.js Basics (QuickPoll part 1) | `Les05-NextJS-Basics/` |
|
||||
| 6 | 2 | Next.js QuickPoll vervolg (part 2) | `Les06-NextJS-QuickPoll-Part2/` |
|
||||
| 7 | 2 | Supabase introductie | `Les07-Supabase/` |
|
||||
| 8 | 2 | Van In-Memory naar Supabase | `Les08-Van-InMemory-naar-Supabase/` |
|
||||
| 9 | 2 | Supabase Auth — eerste login flow | `Les09-Supabase-Auth/` |
|
||||
| 10 | 2 | Supabase Auth & RLS verdieping | `Les10-Supabase-Auth/` |
|
||||
| 11 | 3 | Vercel AI SDK — praat met je data | `Les11-AI-SDK/` |
|
||||
| 12 | 3 | Tool Calling | `Les12-Tool-Calling/` |
|
||||
| 13 | 3 | Externe APIs + Cursor + Vercel | `Les13-Cursor-Vercel-Deploy/` |
|
||||
| 14 | 3 | Agents | `Les14-Agents/` |
|
||||
| 15 | 3 | RAG + Embeddings | `Les15-RAG-Embeddings/` |
|
||||
| 16 | 3 | Model Context Protocol | `Les16-MCP/` |
|
||||
| 17 | 4 | AI Production Polish | `Les17-Production-Polish/` |
|
||||
| 18 | 4 | Advanced AI Toolbox + wrap-up | `Les18-AI-Toolbox-Next/` |
|
||||
|
||||
| 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 |
|
||||
Per les zit altijd dezelfde set bestanden in de map:
|
||||
- `LesXX-Slide-overzicht.md` — overzicht van de slides
|
||||
- `LesXX-Huiswerk.pdf` — huiswerk in NOVI-huisstijl
|
||||
- `LesXX-Docenttekst.md` — voorleesbaar lesscript
|
||||
- `LesXX-Lesstof.md` — lesstof / theorie
|
||||
- `LesXX-Slides.pptx` — slidedeck
|
||||
- (waar van toepassing) `LesXX-Lesopdracht.md/.pdf` en starterprojecten
|
||||
|
||||
---
|
||||
|
||||
## Tool Progressie
|
||||
## Eindopdracht
|
||||
|
||||
| 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)
|
||||
Studenten bouwen zelfstandig een eigen AI-app die voldoet aan alle leerdoelen van de leerlijn. Zie [`Eindopdracht-AI-Developer.md`](./Eindopdracht-AI-Developer.md) voor de volledige eisen, beoordelingscriteria en deadlines. De eindopdracht is **niet** een in-class lesonderdeel; studenten werken er thuis aan.
|
||||
|
||||
---
|
||||
|
||||
# Deel 1: AI Foundations
|
||||
## Aanvullende documenten
|
||||
|
||||
**3 lessen · 5 EC**
|
||||
|
||||
Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.
|
||||
- [`OPLEVERING.md`](./OPLEVERING.md) / [`OPLEVERING.pdf`](./OPLEVERING.pdf) — mapping van leerlijn naar de contract-deliverables (Art. 1).
|
||||
- [`Curriculum-Overzicht-Compleet.pdf`](./Curriculum-Overzicht-Compleet.pdf) — alle 18 lessen in één visueel deck in NOVI-huisstijl.
|
||||
- [`Curriculum-Lesboek.pdf`](./Curriculum-Lesboek.pdf) — tekstuele versie van het curriculum, leesbaar als kort lesboek.
|
||||
- [`Samenvattingen/`](./Samenvattingen) — per-les samenvattingen.
|
||||
|
||||
---
|
||||
|
||||
### Les 1: Introductie tot AI en Large Language Models
|
||||
## Stack en tooling
|
||||
|
||||
**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)
|
||||
| Onderdeel | Keuze |
|
||||
|-----------|-------|
|
||||
| Frontend | Next.js 16 (App Router) + TypeScript + Tailwind CSS + Shadcn |
|
||||
| Database | Supabase (Postgres + Auth + RLS + pgvector) |
|
||||
| AI SDK | Vercel AI SDK v6 |
|
||||
| AI-coding tools | ChatGPT, OpenCode, Cursor (Composer + Background Agent) |
|
||||
| Hosting | Vercel + GitHub Actions CI |
|
||||
| Productie-stack (Les 17) | Langfuse, Vitest evals, prompt-shield, model-routing |
|
||||
| Advanced toolbox (Les 18) | Whisper, GPT-4o vision, Flux via Fal.ai, Ollama, Vercel AI Gateway |
|
||||
|
||||
---
|
||||
|
||||
### Les 2: AI Code Assistants (OpenCode → Cursor)
|
||||
## Contact
|
||||
|
||||
**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.
|
||||
**Tim Rijkse** — docent AI-Assisted Development
|
||||
NOVI Hogeschool Utrecht
|
||||
|
||||
Reference in New Issue
Block a user