# 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.

---

## Overzicht

| Les | Onderwerp | Deel | Status |
|-----|-----------|------|--------|
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt |
| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | 📋 Samenvatting |
| 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | 📋 Samenvatting |
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
| 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
| 06 | [Next.js Fundamentals 1: SSR & Routing](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
| 07 | [Next.js Fundamentals 2: API Routes & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
| 08 | [Database Principles](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
| 09 | [Supabase Basics](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
| 10 | [Full-Stack Mini Project](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
| 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
| 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
| 13 | [Prompt Engineering & Custom GPTs](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting |
| 14 | [Project Setup & Repository Structure](Samenvattingen/Les14-Samenvatting.md) | 4 | 📋 Samenvatting |
| 15 | [MCP & Context Management](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
| 16 | [Mastering Cursor](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
| 17 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
| 18 | [Deployment & Production](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |

---

## Tool Progressie

| Deel | Lessen | Tools | Kosten |
|------|--------|-------|--------|
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) |
| Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis |
| Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar |
| Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar |

**Eindopdracht:** Cursor (free tier voldoende)

---

# Deel 1: AI Foundations

**4 lessen · 7 EC**

Kennismaking met AI, LLMs en de basis van AI-assisted development.

---

### 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)
- Prompt engineering basics: rol, context, taak, format
- De schets-naar-website workflow

**Studenten doen:**
- ChatGPT account aanmaken en verkennen
- Eerste prompts schrijven en itereren
- Complete workflow: schets op papier → foto → ChatGPT prompt → 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.

[→ Ga naar Les 1](Samenvattingen/Les01-Samenvatting.md)

---

### Les 2: AI Code Assistants en OpenCode

**Tools:** OpenCode (Terminal UI + Desktop App), Groq API, Ollama

**Docent vertelt:**
- Wat is OpenCode? Open-source AI coding assistant met 26.000+ GitHub stars
- **Demo Terminal UI:** Laat zien hoe krachtig maar overweldigend de terminal versie is
- **Demo Desktop App:** "Gelukkig is er ook dit!" - zelfde features, vriendelijkere interface
- Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode)
- Build vs Plan mode: wanneer welke gebruiken
- AI model providers: Groq (gratis cloud) vs Ollama (lokaal, privacy)
- Wanneer AI wel/niet te vertrouwen

**Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI?
- OpenCode Desktop App installeren
- Groq API configureren (gratis)
- **Optioneel:** Ollama installeren voor lokaal model
- Keyboard shortcuts oefenen
- Plan mode gebruiken voor analyse, Build mode voor code schrijven
- Responsive navbar bouwen met AI assistance

**Lesopdracht:** Installeer OpenCode, configureer Groq, oefen keyboard shortcuts, bouw responsive navbar met Plan mode (analyse) → Build mode (implementatie).

**Huiswerk:**
- Bouw landing page component library (hero, features, testimonial, CTA, footer)
- Schrijf blog post over OpenCode ervaring (300 woorden): Terminal vs Desktop, Build vs Plan mode, Groq vs Ollama
- **Optioneel:** Heb je het gevoel dat je React-kennis wat is weggezakt? Gebruik de eerste twee weken ook om React Fundamentals op EdHub te herhalen.

[→ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md)

---

### Les 3: AI Ethics, Privacy & Security + WebStorm Integration

**Tools:** WebStorm (school licentie), OpenCode plugin, Git

**Docent vertelt:**
- Privacy risico's: wat NOOIT te delen met AI (API keys, credentials, client data)
- Data ownership bij AI services - waar gaat je code naartoe?
- Security vulnerabilities in AI-generated code (SQL injection, XSS)
- GDPR/AVG compliance basics
- WebStorm als professionele IDE

**Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal de blog posts uit Les 2 - wat waren de ervaringen met AI-assisted coding?
- Security workshop: identificeer problemen in AI-generated code
- Maak persoonlijke "AI Safety Checklist"
- WebStorm installeren met school licentie
- OpenCode plugin configureren in WebStorm

**Lesopdracht:** Security audit van AI-generated code (vind 5 problemen), setup WebStorm met OpenCode plugin, maak je eerste project in WebStorm.

**Huiswerk:** Bouw secure feature (contact form of auth flow), review met je Safety Checklist, schrijf uitgebreide README met gevonden issues en fixes.

[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)

---

### Les 4: Effectief Prompting, Iteratief Werken & Skills

**Tools:** OpenCode/WebStorm, Skills.sh

**Docent vertelt:**
- Zero-shot vs few-shot prompting (met voorbeelden)
- Chain-of-thought reasoning: laat AI stap voor stap denken
- Role prompting en constraint-based prompting
- Skills.sh: wat het is en waarom het werkt
- Iteratief werken: start simpel → voeg complexiteit toe

**Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal ervaringen met OpenCode - wat werkte, wat niet?
- Verschillende prompt technieken uitproberen
- Skills.sh installeren en eerste skill toevoegen
- Vergelijk output met/zonder skill
- Bouw feature in 4 iteraties (simpel → complex)

**Lesopdracht:** Installeer Skills.sh, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties (basis filter → multi-filter → sort → search).

**Huiswerk:** Maak persoonlijke prompt library met 8 templates voor verschillende taken, installeer en test 3 Skills, documenteer concrete verschillen.

[→ Ga naar Les 4](Samenvattingen/Les04-Samenvatting.md)

---

# Deel 2: Technical Foundations

**5 lessen · 8 EC**

Stevige technische basis: TypeScript, Next.js, databases en Supabase.

---

### Les 5: TypeScript Basics

**Tools:** OpenCode/WebStorm, TypeScript

**Docent vertelt:**
- Waarom TypeScript? Voordelen boven JavaScript
- Basic types: string, number, boolean, array, object
- Type inference: wanneer TypeScript types zelf raadt
- Interfaces en type aliases
- TypeScript met React: Props typen, useState met types
- Generics basics (Array<T>, Promise<T>)
- Veel voorkomende TypeScript errors en hoe ze op te lossen

**Studenten doen:**
- JavaScript file omzetten naar TypeScript
- Interfaces schrijven voor eigen data
- React component met typed props maken
- TypeScript errors debuggen

**Lesopdracht:**
1. Zet bestaand JS component om naar TypeScript
2. Maak interface voor User en Product data
3. Bouw typed React component met props
4. Fix 5 TypeScript errors in gegeven code

**Huiswerk:** Maak 3 nieuwe components volledig in TypeScript, schrijf interfaces voor je eindproject data, maak cheat sheet met TypeScript patterns.

[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)

---

### Les 6: Next.js Fundamentals 1 - SSR & Routing

**Tools:** Next.js 14, OpenCode/WebStorm, Vercel

**Docent vertelt:**
- Wat is Next.js? React framework met superpowers
- Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)
- Waarom SSR? SEO, performance, initial load
- App Router: file-based routing uitgelegd
- Folder structuur: app/, pages, layouts, loading, error
- Dynamic routes: [id], [...slug], [[...optional]]
- Link component en navigation
- Metadata en SEO basics

**Studenten doen:**
- Next.js project aanmaken met `npx create-next-app@latest`
- Pagina's maken met App Router
- Layout en nested layouts implementeren
- Dynamic routes bouwen
- Navigation met Link component

**Lesopdracht:**
1. `npx create-next-app@latest` met TypeScript + Tailwind + App Router
2. Maak 4 pagina's: home, about, products, contact
3. Maak root layout met Header en Footer
4. Maak `/products/[id]` dynamic route
5. Deploy naar Vercel

**Huiswerk:** Voeg nested layout toe voor products section, maak loading.tsx en error.tsx, experimenteer met metadata.

[→ Ga naar Les 6](Samenvattingen/Les06-Samenvatting.md)

---

### Les 7: Next.js Fundamentals 2 - API Routes & Data Fetching

**Tools:** Next.js 14, React Query (TanStack Query), OpenCode

**Docent vertelt:**
- Server Components vs Client Components
- 'use client' directive: wanneer en waarom
- Data fetching in Server Components (async/await)
- API Routes: Route Handlers in App Router
- GET, POST, PUT, DELETE requests
- React Query: waarom, installatie, basics
- useQuery en useMutation hooks
- Caching en revalidation basics

**Studenten doen:**
- Server Component met data fetching maken
- API route schrijven
- Client Component met React Query
- CRUD operations via API routes

**Lesopdracht:**
1. Maak `/api/products` route met GET en POST
2. Bouw Server Component die products fetcht
3. Installeer React Query, maak QueryClientProvider
4. Bouw Client Component met useQuery
5. Implementeer useMutation voor product toevoegen

**Huiswerk:** Voeg PUT en DELETE toe aan API, implementeer optimistic updates met React Query, bouw complete CRUD interface.

[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)

---

### Les 8: Database Principles

**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase (ter voorbereiding)

**Docent vertelt:**
- Wat is een relationele database?
- Tabellen, rijen (records), kolommen (fields)
- Primary Keys: unieke identificatie
- Foreign Keys: relaties tussen tabellen
- Relatie types: one-to-one, one-to-many, many-to-many
- Normalisatie basics: waarom data niet dupliceren
- Data types: text, integer, boolean, timestamp, uuid
- NULL values en defaults
- Indexen: waarom en wanneer

**Studenten doen:**
- Database schema tekenen voor simpel project
- Relaties identificeren en documenteren
- Normalisatie oefening: slechte structuur verbeteren
- Primary en Foreign Keys bepalen

**Lesopdracht:**
1. Teken database schema voor "Blog met Comments" (users, posts, comments)
2. Identificeer alle relaties en key types
3. Normaliseer een "slechte" database structuur (gegeven)
4. Schrijf data types en constraints op
5. Bereid voor: welke tabellen heeft jouw eindproject nodig?

**Huiswerk:** Maak volledig database schema voor je eindproject, documenteer alle relaties, bereid Supabase account aan voor volgende les.

[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)

---

### Les 9: Supabase Basics

**Tools:** Supabase, Next.js, OpenCode

**Docent vertelt:**
- Wat is Supabase? (database + auth in één)
- Supabase project aanmaken (live demo)
- Table Editor: tabellen maken zonder SQL
- Je database schema van vorige les implementeren
- Environment variables: wat, waarom, hoe
- Supabase client setup
- CRUD operaties uitgelegd
- Auth UI component (plug & play login)

**Studenten doen:**
- **Groepsdiscussie:** Bespreek database schemas - wie heeft welke structuur gekozen en waarom?
- Supabase account en project aanmaken
- Tabellen maken via UI (gebaseerd op Les 8 schema)
- `.env.local` configureren
- Supabase client maken
- Data ophalen en tonen
- Auth toevoegen

**Lesopdracht:**
1. Maak Supabase project
2. Maak je tabellen via Table Editor (uit Les 8)
3. Configureer `.env.local`
4. Bouw Todo app: lijst tonen, toevoegen, afvinken, verwijderen
5. Voeg login toe met Auth UI

**Huiswerk:** Extend Todo app (filtering, user-specifieke todos), deploy naar Vercel met env vars, test in productie.

[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)

---

# Deel 3: Integration & AI Tooling

**3 lessen · 5 EC**

Integratie van alle geleerde technieken en introductie van professionele AI tools.

---

### Les 10: Full-Stack Mini Project

**Tools:** VS Code, Supabase, Browser DevTools

**Docent vertelt:**
- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase
- Vandaag combineren we alles in een werkende mini-app
- Geen nieuwe concepten - alleen integratie en toepassing

**Studenten doen:**
- **Groepsdiscussie:** Bespreek Supabase ervaringen uit Les 9 - welke uitdagingen bij auth en RLS?
- Bookmark manager bouwen: login, bookmarks toevoegen/bekijken/verwijderen
- Alle geleerde technieken combineren
- Zelfstandig integratieproblemen oplossen

**Lesopdracht:** Bouw een Personal Bookmarks app met login, CRUD operaties, en RLS. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min delete, 150 min polish.

**Huiswerk:** Reflectie schrijven (200 woorden): wat ging goed, waar liep je vast. Maak lijst van 3 verbeterpunten voor je code.

[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)

---

### Les 11: Hands-on: Van Idee naar Prototype

**Tools:** OpenCode/WebStorm, ChatGPT (voor planning)

**Docent vertelt:**
- Hoe ga je van vaag idee naar concrete features?
- Feature breakdown methode
- Component thinking: UI opdelen in herbruikbare stukken
- Minimum Viable Product (MVP) denken
- Korte demo van het proces

**Studenten doen:**
- **Groepsdiscussie:** Bespreek Tool Selection reflecties - welke workflows werken het beste?
- Kiezen van een simpel project idee
- Met AI features breakdown maken
- Component structuur bedenken
- Prototype bouwen met alles wat ze hebben geleerd
- Focus op WORKFLOW, niet perfectie

**Voorbeeld projecten:**
- Weer widget met 3-daagse forecast
- Simpele quiz app (3 vragen)
- Recipe card met ingrediënten toggle

**Lesopdracht:** Kies een mini-project, maak feature breakdown met AI, bouw werkend prototype. Documenteer je proces: welke prompts werkten, waar liep je vast, hoe loste je het op.

**Huiswerk:** Verbeter je prototype (styling, edge cases), schrijf "Lessons Learned" document (300 woorden).

[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)

---

### Les 12: Introduction to Cursor

**Tools:** Cursor

**Docent vertelt:**
- Waarom Cursor? De professionele AI editor
- Free tier vs Pro: wat krijg je?
- Core features: Tab completion, CMD+K, Chat, Composer
- Cursor vs OpenCode: wanneer welke?
- Live demo van Cursor workflow

**Studenten doen:**
- Cursor installeren
- Bestaand project openen in Cursor
- Tab completion ervaren
- CMD+K voor inline edits
- Chat voor vragen over code
- Composer voor multi-file changes

**Lesopdracht:**
1. Installeer Cursor (free tier)
2. Open je Todo app in Cursor
3. Voeg nieuwe feature toe met alleen Cursor (bijv. due dates)
4. Gebruik elke feature minstens 3x: Tab, CMD+K, Chat, Composer
5. Noteer: wat werkt goed, wat is wennen?

**Huiswerk:** Bouw complete mini-feature met Cursor, vergelijk ervaring met OpenCode, schrijf reflectie (400 woorden).

[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)

---

### Les 13: Prompt Engineering & Custom GPTs

**Tools:** ChatGPT (Custom GPTs), Claude (Projects)

**Docent vertelt:**
- Advanced prompt engineering: structured output, constraints, iterative refinement
- Custom GPTs: hoe maak je ze, wanneer gebruiken
- Claude Projects: custom instructions + project knowledge
- Vergelijking: Custom GPT vs Claude Project
- Prompt template library opbouwen

**Studenten doen:**
- **Groepsdiscussie:** Bespreek Cursor reflecties - hoe verschilt het van OpenCode?
- Custom GPT maken voor code review
- Claude Project opzetten voor eigen project
- Beide testen en vergelijken
- Persoonlijke prompt library starten

**Lesopdracht:**
1. Maak Custom GPT "Code Reviewer" met specifieke checklist
2. Maak Claude Project voor je project met context
3. Test beide met dezelfde code
4. Documenteer: welke is beter waarvoor?

**Huiswerk:** Optimaliseer je AI assistants, maak persoonlijke prompt library, schrijf reflectie over Custom GPTs vs Claude Projects.

[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)

---

# Deel 4: Advanced AI Features

**6 lessen · 10 EC**

Professionele workflows, advanced Cursor, AI features bouwen en deployment.

---

### Les 14: Project Setup & Repository Structure

**Tools:** Cursor, Git, GitHub

**Docent vertelt:**
- Waarom goede project structuur cruciaal is voor AI
- De ideale folder structuur voor Next.js + Cursor
- .cursorrules files: wat zijn ze, hoe schrijf je ze
- docs/ folder: PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF
- Environment variables: lokaal vs productie
- README best practices

**Studenten doen:**
- Eindproject repository aanmaken
- Folder structuur opzetten
- .cursorrules files schrijven
- docs/ templates invullen
- Eerste commit en push

**Lesopdracht:**
1. `npx create-next-app` voor je eindproject
2. Maak folder structuur aan (zie template)
3. Schrijf `general.mdc` met jouw project regels
4. Vul PROJECT-BRIEF.md volledig in
5. Push naar GitHub

**Huiswerk:** Voeg extra .cursorrules files toe, start PROMPT-LOG.md, maak eerste components met Cursor.

> 💡 **Eindopdracht:** Dit is een goed moment om te starten met deelopdracht 1. Je kunt de setup die je vandaag maakt direct gebruiken voor je eindproject.

[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)

---

### Les 15: MCP & Context Management

**Tools:** Cursor, Claude Desktop, MCP servers

**Docent vertelt:**
- Wat is MCP (Model Context Protocol)?
- MCP servers: filesystem, GitHub, databases
- Claude Desktop + MCP configureren
- Context windows: wat zijn tokens, waarom limiet?
- Context strategieën: relevante files, pruning
- .cursorignore voor grote projecten

**Studenten doen:**
- MCP servers configureren in Claude Desktop
- Filesystem MCP testen
- GitHub MCP verkennen
- Context optimalisatie oefenen
- .cursorignore opzetten

**Lesopdracht:**
1. Configureer Claude Desktop met filesystem MCP
2. Test: laat Claude je project analyseren
3. Configureer GitHub MCP
4. Maak .cursorignore voor je project
5. Experimenteer: wat gebeurt er met grote vs kleine context?

**Huiswerk:** Voeg extra MCP server toe (naar keuze), optimaliseer je project voor AI context, documenteer in AI-DECISIONS.md.

[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)

---

### Les 16: Mastering Cursor

**Tools:** Cursor, Claude models

**Docent vertelt:**
- Model keuze: wanneer Haiku vs Sonnet vs Opus?
- Composer Mode diepgaand: multi-file generatie
- @ mentions: @Files, @Folders, @Code, @Docs, @Web
- Codebase indexing optimaliseren
- .cursorrules advanced: meerdere files, condities
- Cost management: tokens monitoren

**Studenten doen:**
- Verschillende models testen op zelfde taak
- Complexe feature bouwen met Composer
- @ mentions effectief gebruiken
- .cursorrules uitbreiden en testen

**Lesopdracht:** Bouw complexe Multi-Step Form Wizard met Cursor Composer (4 stappen, progress indicator, validation, localStorage persistence).

**Huiswerk:** Research .cursorrules voorbeelden online, schrijf uitgebreide .cursorrules voor jouw eindproject, test en itereer.

> 💡 **Eindopdracht check-in:** Hoe gaat je eindproject? Loop je ergens tegenaan? Dit is een goed moment om vragen te stellen en feedback te krijgen.

[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)

---

### Les 17: Vercel AI SDK, Tool Calling & Agents

**Tools:** Vercel AI SDK, Zod, Externe APIs (TheCocktailDB, TheMealDB, etc.)

**Docent vertelt:**
- Vercel AI SDK basics: useChat, streaming
- **Tool Calling:** AI laat externe APIs aanroepen
- **Agents:** AI voert autonome multi-step taken uit met `maxSteps`
- Gratis APIs voor projecten (TheCocktailDB, TheMealDB, Open Trivia DB)
- Best practices voor tool design en system prompts

**Studenten doen:**
- AI SDK + Zod installeren
- Tools definiëren voor externe API
- Tool calling implementeren
- Agent bouwen met `maxSteps`
- Error handling toevoegen

**Lesopdracht:**
1. Kies een gratis API (cocktails, recepten, of quiz)
2. Implementeer minimaal 3 tools
3. Bouw een agent met `maxSteps: 5`
4. Test: "Plan een menu voor..." of vergelijkbare complexe taak

**Huiswerk:** Bouw agent voor eindproject met externe API, minimaal 3 tools, documenteer design in AI-DECISIONS.md.

> 💡 **Eindopdracht:** Heb je al nagedacht over je AI feature? Bespreek je idee met de docent en klasgenoten.

[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)

---

### Les 18: Deployment & Production

**Tools:** Vercel, GitHub, Supabase

**Eindopdracht kickoff (15 min):**
- Eindopdracht requirements doornemen
- Beoordelingscriteria uitleggen
- Timeline en deadlines
- Vragen beantwoorden

**Docent vertelt:**
- Vercel deployment flow
- Environment variables in Vercel
- Supabase productie setup
- Custom domains
- Performance basics (Lighthouse)
- Security checklist voor productie

**Studenten doen:**
- Eindproject deployen naar Vercel
- Env vars configureren
- Supabase redirect URLs instellen
- Lighthouse audit runnen
- Security checklist doorlopen

**Lesopdracht:**
1. Deploy eindproject naar Vercel
2. Configureer alle env vars
3. Test volledige app in productie
4. Run Lighthouse, fix issues tot score >80
5. Doorloop security checklist

**Huiswerk:** Custom domain toevoegen (optioneel), performance optimaliseren, documentatie updaten met productie URL, werk aan eindopdracht.

[→ Ga naar Les 18](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
- `Les[xx]-Docenttekst.md` - Uitgebreide docenthandleiding
- `Les[xx]-Bijlage-A-Lesopdracht.md` - Lesopdracht (2 uur)
- `Les[xx]-Bijlage-B-Huiswerkopdracht.md` - Huiswerkopdracht (2 uur)