novi-lessons/readme.md

# AI Development Curriculum - NOVI Hogeschool

Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered developer.

**Totaal: 30 EC** verdeeld over 3 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 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 |

---

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

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

---

# Deel 1: Fundamentals of AI-Driven Development

**3 lessen · 5 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
- 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 Desktop App

**Tools:** OpenCode Desktop App, Ollama/Groq API

**Docent vertelt:**
- Verschil chat-interfaces vs geïntegreerde development tools
- OpenCode als standalone desktop applicatie (gratis!)
- Hoe AI code assistants werken
- Best practices voor code generation prompts
- Wanneer AI wel/niet te vertrouwen

**Studenten doen:**
- OpenCode installeren en configureren
- Gratis model koppelen (Ollama lokaal of Groq API)
- Interface verkennen: code editor, chat, terminal
- Eerste component bouwen met AI hulp

**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).

[→ 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:**
- 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)

---

# 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

**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:**
- 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)

---

### Les 5: AI Tool Selection & Workflows

**Tools:** ChatGPT, Claude, v0.dev, OpenCode

**Docent vertelt:**
- Overzicht van alle AI tools die we kennen
- Sterke en zwakke punten per tool
- Wanneer gebruik je welke tool?
- Tool selection framework: taak → tool
- Workflow patterns voor AI-assisted development

**Studenten doen:**
- Dezelfde taak uitvoeren in 3 verschillende tools
- Output vergelijken en analyseren
- Tool selection framework invullen
- Eigen workflow documenteren

| Tool | Sterk in | Minder sterk in |
|------|----------|-----------------|
| ChatGPT | Brainstormen, uitleg, planning | Grote codebases |
| Claude | Lange context, nuance, analyse | Soms te voorzichtig |
| v0.dev | UI components, snel prototypen | Complexe logica |
| OpenCode | Code schrijven, project context | Geen web access |

**Lesopdracht:** Bouw een "Contact Form" component met 3 tools (ChatGPT planning → v0.dev UI → OpenCode logica). Documenteer per tool: wat werkte, wat niet, hoe lang duurde het.

**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)

---

### Les 6: 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:**
- 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), bereid je voor op Les 7 (Next.js).

[→ Ga naar Les 6](Samenvattingen/Les06-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

**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 10](Samenvattingen/Les10-Samenvatting.md)

---

### Les 11: 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.

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

---

### Les 12: 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 12](Samenvattingen/Les12-Samenvatting.md)

---

### Les 13: 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.

[→ Ga naar Les 13](Samenvattingen/Les13-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

**Tools:** Vercel AI SDK, Cursor, OpenAI/Anthropic API

**Docent vertelt:**
- Waarom Vercel AI SDK? (vs raw API calls)
- Installatie en setup
- useChat hook: chat interfaces bouwen
- useCompletion hook: single completions
- Streaming responses: hoe en waarom
- API routes voor AI
- System prompts schrijven
- Kosten en rate limiting

**Studenten doen:**
- AI SDK installeren
- API route maken
- Chat component bouwen met useChat
- Streaming implementeren
- Custom system prompt schrijven

**Lesopdracht:**
1. `npm install ai @ai-sdk/openai`
2. Maak `/api/chat` route
3. Bouw chat component met useChat
4. Implementeer streaming
5. Pas system prompt aan voor jouw app

**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)

---

## 3.3 Deployment & Eindproject

### Les 16: Deployment & Production

**Tools:** Vercel, GitHub, Supabase

**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:**
- 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.

[→ 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)

[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)

---

## Tech Stack

- **Frontend:** React, Next.js, Tailwind CSS
- **Backend:** Supabase (Postgres database, Auth)
- **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)