rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: implement lessons feedback

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-30 11:56:39 +01:00
parent 04f32babd3
commit 1e324e2f0e
18 changed files with 3828 additions and 3199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

524
readme.md
View File

@@ -2,7 +2,7 @@
Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered developer.
**Totaal: 30 EC** verdeeld over 3 delen.
**Totaal: 30 EC** verdeeld over 4 delen.
---
@@ -13,39 +13,40 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt |
| 02 | [AI Code Assistants en OpenCode Desktop App](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) | 2 | 📋 Samenvatting |
| 05 | [AI Tool Selection & Workflows](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
| 06 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
| 07 | [Next.js Project Setup](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
| 08 | [Supabase Basics](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
| 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
| 10 | [Introduction to Cursor](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
| 11 | [Project Setup & Repository Structure](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
| 12 | [MCP & Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
| 13 | [Mastering Cursor](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
| 14 | [Debugging & Code Review met AI](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
| 15 | [Vercel AI SDK - AI Features in je App](Samenvattingen/Les15-Samenvatting.md) | 3 | 📋 Samenvatting |
| 16 | [Deployment & Production](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
| 17 | [Eindopdracht Kickoff](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
| 18 | [Eindproject Werksessie](Samenvattingen/Les18-Samenvatting.md) | 3 | 📋 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 | [AI Tool Selection & Workflows](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 | [AI Agents - Custom GPTs & Claude Projects](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 - AI Features in je App](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
| 18 | [Deployment & Production](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |
---
## Tool Progressie
| Deel | Tools | Kosten |
|------|-------|--------|
| Deel 1 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) |
| Deel 2 | OpenCode, Claude Desktop, Skills.sh | Gratis |
| Deel 3 | Cursor | Free tier beschikbaar |
| 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: AI Tooling & Prototyping | 10-12 | ChatGPT, Claude, v0.dev, OpenCode, Cursor | Free tier beschikbaar |
| Deel 4: Advanced AI Features | 13-18 | Cursor, Claude Projects, Custom GPTs, Vercel AI SDK | Free tier beschikbaar |
**Eindopdracht:** Cursor (free tier voldoende)
---
# Deel 1: Fundamentals of AI-Driven Development
# Deel 1: AI Foundations
**3 lessen · 5 EC**
**4 lessen · 5 EC**
Kennismaking met AI, LLMs en de basis van AI-assisted development.
@@ -94,7 +95,10 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
**Lesopdracht:** Installeer OpenCode, koppel gratis model, bouw responsive navbar component met AI assistance, experimenteer met verschillende prompts.
**Huiswerk:** Bouw landing page component library (hero, features, testimonial, CTA, footer), schrijf blog post over ervaring met OpenCode (300 woorden).
**Huiswerk:**
- Bouw landing page component library (hero, features, testimonial, CTA, footer)
- Schrijf blog post over ervaring met OpenCode (300 woorden)
- **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)
@@ -112,6 +116,7 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
- WebStorm als professionele IDE
**Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal de reflecties over AI van Les 1 - wat zijn de voor- en nadelen die jullie zien?
- Security workshop: identificeer problemen in AI-generated code
- Maak persoonlijke "AI Safety Checklist"
- WebStorm installeren met school licentie
@@ -125,16 +130,6 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
---
# Deel 2: Intermediate AI-Driven Development
**6 lessen · 10 EC**
Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase en AI agents.
---
## 2.1 Prompt Engineering & Consolidatie
### Les 4: Effectief Prompting, Iteratief Werken & Skills
**Tools:** OpenCode/WebStorm, Skills.sh
@@ -147,6 +142,7 @@ Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase e
- 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
@@ -160,7 +156,191 @@ Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase e
---
### Les 5: AI Tool Selection & Workflows
# Deel 2: Technical Foundations
**5 lessen · 10 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: AI Tooling & Prototyping
**3 lessen · 5 EC**
AI tools effectief inzetten voor professionele development.
---
### Les 10: AI Tool Selection & Workflows
**Tools:** ChatGPT, Claude, v0.dev, OpenCode
@@ -188,11 +368,11 @@ Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase e
**Huiswerk:** Maak je eigen "Tool Selection Cheat Sheet", test het op 2 nieuwe taken, reflecteer op je workflow (400 woorden).
[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
---
### Les 6: Hands-on: Van Idee naar Prototype
### Les 11: Hands-on: Van Idee naar Prototype
**Tools:** OpenCode/WebStorm, ChatGPT (voor planning)
@@ -204,6 +384,7 @@ Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase e
- 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
@@ -217,122 +398,13 @@ Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase e
**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), bereid je voor op Les 7 (Next.js).
**Huiswerk:** Verbeter je prototype (styling, edge cases), schrijf "Lessons Learned" document (300 woorden).
[→ Ga naar Les 6](Samenvattingen/Les06-Samenvatting.md)
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
---
## 2.2 Next.js & Supabase
### Les 7: Next.js Project Setup
**Tools:** Next.js, OpenCode/WebStorm, Git, Vercel
**Docent vertelt:**
- Wat is Next.js en waarom gebruiken we het?
- `npx create-next-app` stap voor stap
- Project structuur uitgelegd (app/, components/, lib/)
- TypeScript basics voor React
- Tailwind CSS in Next.js
- Git basics: commits, push, .gitignore
**Studenten doen:**
- Eerste Next.js project aanmaken
- Project structuur verkennen
- Simpele pagina's maken
- Components maken en importeren
- Deployen naar Vercel
**Lesopdracht:**
1. Run `npx create-next-app@latest` met TypeScript + Tailwind
2. Maak 3 pagina's (home, about, contact)
3. Maak 2 herbruikbare components (Header, Footer)
4. Style met Tailwind
5. Deploy naar Vercel
**Huiswerk:** Voeg 2 extra pagina's toe, maak 3 extra components, experimenteer met Tailwind, push alles naar GitHub.
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
---
### Les 8: 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
- Environment variables: wat, waarom, hoe
- Supabase client setup
- CRUD operaties uitgelegd
- Auth UI component (plug & play login)
**Studenten doen:**
- Supabase account en project aanmaken
- Eerste tabel maken via UI
- `.env.local` configureren
- Supabase client maken
- Data ophalen en tonen
- Auth toevoegen
**Lesopdracht:**
1. Maak Supabase project
2. Maak `todos` tabel via Table Editor
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 8](Samenvattingen/Les08-Samenvatting.md)
---
## 2.3 AI Agents
### Les 9: AI Agents - Custom GPTs & Claude Projects
**Tools:** ChatGPT (Custom GPTs), Claude Desktop (Projects)
**Docent vertelt:**
- Wat zijn AI Agents? Verschil chatbot vs agent
- Custom GPTs: hoe maak je ze, wat kun je ermee
- Claude Projects: custom instructions + project knowledge
- Wanneer een agent vs gewoon chatten
- Best practices voor agent instructions
**Studenten doen:**
- Custom GPT maken voor code review
- Claude Project opzetten voor eigen project
- Agents testen en vergelijken
- Instructions itereren en verbeteren
**Lesopdracht:**
1. Maak Custom GPT "Code Reviewer" met specifieke checklist
2. Maak Claude Project voor je Todo app met project context
3. Test beide met dezelfde code
4. Documenteer: welke geeft betere feedback?
**Huiswerk:** Maak "Personal Dev Assistant" agent afgestemd op jouw workflow, test in echt werk, deel je beste agent config met de klas.
[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
---
# Deel 3: Advanced AI-Driven Development
**9 lessen · 15 EC**
Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindproject.
---
## 3.1 Cursor & Professional Workflow
### Les 10: Introduction to Cursor
### Les 12: Introduction to Cursor
**Tools:** Cursor
@@ -360,11 +432,49 @@ Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindpr
**Huiswerk:** Bouw complete mini-feature met Cursor, vergelijk ervaring met OpenCode, schrijf reflectie (400 woorden).
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
---
### Les 11: Project Setup & Repository Structure
### Les 13: AI Agents - Custom GPTs & Claude Projects
**Tools:** ChatGPT (Custom GPTs), Claude Desktop (Projects)
**Docent vertelt:**
- Wat zijn AI Agents? Verschil chatbot vs agent
- Custom GPTs: hoe maak je ze, wat kun je ermee
- Claude Projects: custom instructions + project knowledge
- Wanneer een agent vs gewoon chatten
- Best practices voor agent instructions
**Studenten doen:**
- **Groepsdiscussie:** Bespreek Cursor reflecties - hoe verschilt het van OpenCode?
- Custom GPT maken voor code review
- Claude Project opzetten voor eigen project
- Agents testen en vergelijken
- Instructions itereren en verbeteren
**Lesopdracht:**
1. Maak Custom GPT "Code Reviewer" met specifieke checklist
2. Maak Claude Project voor je Todo app met project context
3. Test beide met dezelfde code
4. Documenteer: welke geeft betere feedback?
**Huiswerk:** Maak "Personal Dev Assistant" agent afgestemd op jouw workflow, test in echt werk, deel je beste agent config met de klas.
[→ 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
@@ -392,11 +502,11 @@ Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindpr
**Huiswerk:** Voeg extra .cursorrules files toe, start PROMPT-LOG.md, maak eerste components met Cursor.
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
---
### Les 12: MCP & Context Management
### Les 15: MCP & Context Management
**Tools:** Cursor, Claude Desktop, MCP servers
@@ -424,11 +534,11 @@ Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindpr
**Huiswerk:** Voeg extra MCP server toe (naar keuze), optimaliseer je project voor AI context, documenteer in AI-DECISIONS.md.
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
---
### Les 13: Mastering Cursor
### Les 16: Mastering Cursor
**Tools:** Cursor, Claude models
@@ -450,39 +560,11 @@ Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindpr
**Huiswerk:** Research .cursorrules voorbeelden online, schrijf uitgebreide .cursorrules voor jouw eindproject, test en itereer.
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
---
## 3.2 Quality & AI Features
### Les 14: Debugging & Code Review met AI
**Tools:** Cursor, Browser DevTools, React DevTools
**Docent vertelt:**
- Waarom AI goed is in debugging
- Error messages lezen en begrijpen
- Debugging workflow: isoleer → context → vraag AI → begrijp
- Browser DevTools basics (Console, Network, Elements)
- Code review met AI: wat kun je vragen?
- Wanneer AI NIET te vertrouwen
**Studenten doen:**
- Debugging challenge: 6 bugs fixen met AI hulp
- Browser DevTools gebruiken
- Code review van eigen code met AI
- Refactoring met AI suggesties
**Lesopdracht:** Los 6 opzettelijke bugs op in gegeven project, documenteer per bug: error message, prompt aan AI, oplossing, wat je leerde.
**Huiswerk:** Code review 3 files uit je eindproject met AI, fix gevonden issues, maak persoonlijke debugging checklist.
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
---
### Les 15: Vercel AI SDK - AI Features in je App
### Les 17: Vercel AI SDK - AI Features in je App
**Tools:** Vercel AI SDK, Cursor, OpenAI/Anthropic API
@@ -512,23 +594,26 @@ Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindpr
**Huiswerk:** Integreer AI feature in je eindproject (Recipe chat / Budget advisor / Travel planner), sla conversations op in Supabase.
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
---
## 3.3 Deployment & Eindproject
### Les 16: Deployment & Production
### 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)
- Monitoring en error tracking
- Security checklist voor productie
**Studenten doen:**
@@ -545,61 +630,7 @@ Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindpr
4. Run Lighthouse, fix issues tot score >80
5. Doorloop security checklist
**Huiswerk:** Custom domain toevoegen (optioneel), performance optimaliseren, documentatie updaten met productie URL.
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
---
### Les 17: Eindopdracht Kickoff
**Tools:** Cursor, alle geleerde tools
**Docent vertelt:**
- Eindopdracht requirements doorlopen
- Beoordelingscriteria uitleggen
- Timeline en deadlines
- Tips voor succesvol afronden
- Q&A over onduidelijkheden
**Studenten doen:**
- Eindopdracht document lezen
- Vragen stellen
- Planning maken voor komende weken
- Beginnen aan ontbrekende features
- Peer review setup
**Lesopdracht:** Maak gedetailleerde planning voor afronden eindproject, identificeer wat nog moet gebeuren, begin met hoogste prioriteit items.
**Huiswerk:** Werk aan eindproject volgens planning, documenteer voortgang, bereid vragen voor voor werksessie.
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
---
### Les 18: Eindproject Werksessie
**Tools:** Cursor, alle geleerde tools
**Docent vertelt:**
- Korte standup: waar staat iedereen?
- Beschikbaar voor vragen en hulp
- Geen nieuwe theorie
**Studenten doen:**
- Werken aan eindproject
- Hulp vragen waar nodig
- Peer feedback geven
- Laatste features afronden
- Documentatie completeren
- PROMPT-LOG en AI-DECISIONS afronden
**Focus:** Dit is werktijd. De docent loopt rond, beantwoordt vragen, helpt bij problemen. Studenten werken zelfstandig aan hun eindproject.
**Deliverable eind van de les:**
- Werkende app deployed
- Documentatie compleet
- Klaar voor inleveren (of bijna)
**Huiswerk:** Custom domain toevoegen (optioneel), performance optimaliseren, documentatie updaten met productie URL, werk aan eindopdracht.
[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)
@@ -607,8 +638,9 @@ Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindpr
## Tech Stack
- **Frontend:** React, Next.js, Tailwind CSS
- **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