Les	Onderwerp	Deel	Status
01	Introductie tot AI en Large Language Models	1	✅ Uitgewerkt
02	AI Code Assistants en OpenCode Desktop App	1	📋 Samenvatting
03	AI Ethics, Privacy & Security + WebStorm	1	📋 Samenvatting
04	Effectief Prompting, Iteratief Werken & Skills	2	📋 Samenvatting
05	AI voor Content en Asset Generation	2	📋 Samenvatting
06	MCP & Component Libraries	2	📋 Samenvatting
07	Backend Basics met Supabase	2	📋 Samenvatting
08	Claude Code - Agentic Coding Mode	2	📋 Samenvatting
09	AI Agents - Custom GPTs & Claude Projects	2	📋 Samenvatting
10	Project Setup & Repository Structure	3	📋 Samenvatting
11	Introduction to Cursor	3	📋 Samenvatting
12	Advanced Context Management	3	📋 Samenvatting
13	Mastering Cursor met Claude Opus	3	📋 Samenvatting
14	Debugging & Code Review met AI	3	📋 Samenvatting
15	AI-Driven Testing & Quality Assurance	3	📋 Samenvatting
16	Building AI-Powered Features	3	📋 Samenvatting
17	Advanced Deployment & Production	3	📋 Samenvatting
18	Eindopdracht Intro, Planning & Advanced Topics	3	📋 Samenvatting

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

Theorie/Uitleg:

Het AI-landschap (ChatGPT, Claude, Grok, Gemini)
Large Language Models en next-token prediction
ChatGPT interface, model kiezen, afbeeldingen analyseren
Prompt engineering basics (rol, context, taak, format)
Tech stack en kleuren specificeren in prompts
De schets-naar-website workflow met v0.dev

Lesopdracht: Doorloop de complete workflow: teken een hero section op papier, maak foto, upload naar ChatGPT met tech stack/kleuren/stijl, genereer prompt, plak in v0.dev, deploy naar Vercel.

Huiswerk: Reflectie schrijven (500 woorden), 5 AI use cases bedenken, tweede component bouwen via de workflow.

→ Ga naar Les 1

Les 2: AI Code Assistants en OpenCode Desktop App

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

Theorie/Uitleg:

Verschil chat-interfaces vs geïntegreerde development tools
OpenCode als standalone desktop applicatie
Installatie en configuratie met gratis modellen
Interface verkenning: code editor, chat, terminal, file browser
Best practices voor code generation prompts

Lesopdracht: Installeer OpenCode, koppel gratis model (Ollama/Groq), bouw responsive navbar component met AI assistance.

Huiswerk: Bouw landing page component library (hero, features, testimonial, CTA, footer), schrijf blog post over ervaring (300 woorden).

→ Ga naar Les 2

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

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

Theorie/Uitleg:

Privacy risico's: wat NOOIT te delen (API keys, credentials, client data)
Data ownership bij AI services
Security vulnerabilities (SQL injection, XSS, prompt injection)
GDPR/AVG compliance basics
WebStorm installatie en OpenCode plugin configuratie
Voordelen IDE vs standalone (project context, Git, debugging)

Lesopdracht: Security workshop: identificeer problemen in AI-generated code, maak persoonlijke "AI Safety Checklist". Setup WebStorm met OpenCode plugin.

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

→ Ga naar Les 3

Deel 2: Intermediate AI-Driven Development

6 lessen · 10 EC

Verdieping in prompt engineering, Supabase basics, en introductie tot AI agents en MCP.

2.1 Prompt Engineering & Skills

Les 4: Effectief Prompting, Iteratief Werken & Skills

Tools: OpenCode/WebStorm, Skills.sh

Theorie/Uitleg:

Zero-shot vs few-shot prompting
Chain-of-thought reasoning
Role prompting en constraint-based prompting
Skills.sh introductie: herbruikbare best-practices packages
Skills installeren via CLI (npx skills add <skill-name>)
Iteratief werken: start simpel → voeg complexiteit toe

Lesopdracht: Installeer Skills, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties.

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

→ Ga naar Les 4

Les 5: AI voor Content en Asset Generation

Tools: DALL-E 3, Leonardo.ai, Ideogram, Next.js Image

Theorie/Uitleg:

Image generation tools vergelijking
Prompt engineering voor images (style, mood, composition)
Asset generation workflow voor web
Image optimization (compression, WebP/AVIF, responsive)
Copyright en licenties bij AI-generated content
Next.js Image component optimalisatie

Lesopdracht: Genereer complete visual identity voor fictieve SaaS: hero image, 6 feature icons, 2 illustraties, background pattern, favicon. Integreer in Next.js landing page.

Huiswerk: Vervang alle placeholder images in bestaand project met AI-gegenereerde assets, schrijf case study (400 woorden) met before/after screenshots.

→ Ga naar Les 5

2.2 MCP & Supabase

Les 6: MCP & Component Libraries

Tools: Claude Desktop, MCP servers, Shadcn/ui, Supabase

Theorie/Uitleg:

MCP (Model Context Protocol): AI verbinden met externe data
MCP servers: filesystem, databases, APIs
Claude Desktop configuratie voor MCP
Shadcn/ui systematisch bouwen
Component composition patterns
Data-driven components die MCP data consumeren

Lesopdracht: Configureer MCP servers (filesystem, Supabase), bouw Shadcn component library (DataTable, Card, Form, Button), integreer MCP data in dashboard.

Huiswerk: Voeg 5 extra components toe (Modal, Toast, Dropdown, Tabs, Accordion), experimenteer met extra MCP servers (GitHub, Google Drive).

→ Ga naar Les 6

Les 7: Backend Basics met Supabase

Tools: Supabase, Next.js, Cursor/OpenCode

Theorie/Uitleg:

Wat is Supabase: open-source Firebase alternative
Supabase UI Tour: Table Editor, tabellen maken zonder SQL
Database basics: tabellen, kolommen, rijen (geen SQL kennis nodig)
Supabase client setup in Next.js
CRUD operaties: create, read, update, delete
Simpele authenticatie met Auth UI component
Environment variables correct gebruiken

Lesopdracht: Bouw Todo App met Supabase: maak tabel via UI, setup client, bouw CRUD interface, voeg login toe met Auth UI.

Huiswerk: Extend Todo app met filtering, user-specifieke todos, loading/error states. Deploy naar Vercel.

→ Ga naar Les 7

2.3 AI Integration

Les 8: Claude Code - Agentic Coding Mode

Tools: Claude Desktop (Code mode), Skills.sh, Supabase, Next.js

Theorie/Uitleg:

Wat is Claude Code: agentic coding mode
Verschil met chat-based coding
Claude Desktop modes: Chat, Projects, Cowork, Code
Wanneer Claude Code gebruiken
Hoe Claude Code werkt: high-level instructie → analyse → plan → uitvoering
Best practices voor autonome development

Lesopdracht: Bouw multi-step form wizard met Claude Code (autonoom), bouw User Dashboard met stats die data uit Supabase haalt.

Huiswerk: Gebruik Claude Code voor grote refactoring (extract queries), schrijf vergelijkings essay OpenCode vs Claude Code (500 woorden).

→ Ga naar Les 8

Les 9: AI Agents - Custom GPTs & Claude Projects

Tools: Custom GPTs (OpenAI), Claude Projects (Anthropic), MCP

Theorie/Uitleg:

Wat zijn AI Agents: verschil chatbot vs agent
Agent capabilities: tool use, memory, planning
Custom GPTs: instructions, knowledge base, capabilities
Claude Projects: custom instructions, project knowledge
Projects combineren met MCP
Real-world developer agents bouwen

Lesopdracht: Bouw Code Review Agent (met checklist als instructions), bouw Documentation Agent voor component library.

Huiswerk: Test agents in workflow, maak Personal Dev Assistant agent afgestemd op jouw workflow, deel config als gist.

→ Ga naar Les 9

Deel 3: Advanced AI-Driven Development

9 lessen · 15 EC

Geavanceerde AI tools, testing, deployment en het eindproject.

3.1 Advanced AI Tools

Les 10: Project Setup & Repository Structure

Tools: Cursor, Git & GitHub, Next.js

Theorie/Uitleg:

Waarom goede project structuur belangrijk is voor AI tools
Ideale folder structuur voor Next.js projecten
.cursorrules files: project-specifieke instructies voor Cursor
docs/ folder: PROMPT-LOG.md, AI-DECISIONS.md, PROJECT-BRIEF.md
Environment variables beheren (.env.local vs .env.example)
README.md best practices
Git best practices: commits, branches, .gitignore

Lesopdracht: Richt je eindproject repository in: GitHub repo, folder structuur, .cursorrules, docs/ files, environment setup, complete README.

Huiswerk: Verfijn setup: uitgebreide .cursorrules (meerdere files), volledig ingevulde PROJECT-BRIEF.md, basis UI components bouwen met Cursor.

→ Ga naar Les 10

Les 11: Introduction to Cursor - De Professionele AI Editor

Tools: Cursor, GitHub, Skills.sh, Supabase

Theorie/Uitleg:

Waarom Cursor: purpose-built for AI, snelle tab completion
Core features: Tab completion, CMD+K, Chat, @ mentions, Composer
Skills compatibiliteit (werken meteen in Cursor)
Cost discussie: Free vs Pro
Wanneer welke tool (OpenCode/Claude Code/Cursor)

Lesopdracht: Setup Cursor + Skills migration, feature comparison (rebuild filtering system), test Composer mode met analytics dashboard.

Huiswerk: Bouw complete mini-app met Cursor (Weather/Expense/Recipe/Habit), track metrics (tab completion, CMD+K, Composer usage), reflectie (600 woorden).

→ Ga naar Les 11

Les 12: Advanced Context Management & AI-Vriendelijke Code

Tools: Cursor, Claude Desktop, .cursorignore

Theorie/Uitleg:

Context windows begrijpen (tokens, sizes)
Context strategieën: relevant files, narrow down, pruning
Project documentatie voor AI (README, ARCHITECTURE, COMPONENTS)
AI-vriendelijke code organisatie
Context pruning: fresh chat, .cursorignore
Knowledge persistence met Claude Projects

Lesopdracht: Context Optimization Challenge: assessment van messy codebase, documentation maken, organization refactor, re-test met verbeterde scores.

Huiswerk: Maak Context Management Playbook met pre-project checklist, folder templates, prompting templates. Maak 3 document templates. Test op nieuw project.

→ Ga naar Les 12

Les 13: Mastering Cursor met Claude Opus & Advanced Skills

Tools: Cursor, Claude Opus/Sonnet/Haiku, Skills.sh, .cursorrules

Theorie/Uitleg:

Model Deep Dive: wanneer Haiku/Sonnet/Opus
Composer Mode Mastery: multi-file generatie
@ Mentions Deep Dive: @Files, @Folders, @Code, @Docs, @Web
Codebase Indexing optimaliseren
.cursorrules files: project-specifieke instructies
Cost Management: token usage monitoren

Lesopdracht: Bouw complexe Multi-Step Form Wizard met Cursor Composer + Claude + Skills (4 stappen, progress indicator, validation, localStorage, animations).

Huiswerk: Research .cursorrules voorbeelden, schrijf comprehensive .cursorrules voor jouw stack, test en itereer.

→ Ga naar Les 13

3.2 Debugging & Testing

Les 14: Debugging & Code Review met AI

Tools: Cursor, Browser DevTools, React DevTools

Theorie/Uitleg:

Waarom AI effectief is voor debugging
Error messages begrijpen (TypeError, ReferenceError, Hydration errors)
Debugging workflow met AI: isoleer → verzamel context → vraag AI → begrijp
Console.log debugging strategieën
Browser DevTools basics (Console, Network, Elements)
Code review met AI: kwaliteit, bugs, performance, security
Refactoring met AI hulp
Wanneer AI niet te vertrouwen

Lesopdracht: Debugging Challenge: los 6 opzettelijke bugs op in een project met AI hulp, documenteer wat je leert in PROMPT-LOG.md.

Huiswerk: Code review je eigen eindproject met AI (3 files), refactor 1 complex component, maak persoonlijke debugging checklist.

→ Ga naar Les 14

Les 15: AI-Driven Testing & Quality Assurance

Tools: Cursor, Vitest, React Testing Library, MSW, Playwright

Theorie/Uitleg:

Types van tests: unit, component, integration, E2E
AI voor test generation
Testing tools: Vitest, React Testing Library, MSW, Playwright
Testing Supabase: mocking, RLS testen
Code review met AI
Code kwaliteit metrics: coverage >70%

Lesopdracht: Setup Vitest + RTL, schrijf tests met Cursor (unit, component, integration), bereik >70% coverage.

Huiswerk: Implementeer AI Code Review workflow: maak review agent, review 3 components, fix issues, add testing setup aan Starter Template.

→ Ga naar Les 15

3.3 AI Features & Deployment

Les 16: Vercel AI SDK - AI Features in je App

Tools: Vercel AI SDK, Next.js API Routes, OpenAI/Anthropic API, Cursor

Theorie/Uitleg:

Vercel AI SDK introductie: waarom een SDK vs raw API calls
Installatie en configuratie (ai package)
Core hooks: useChat voor conversaties, useCompletion voor single completions
Streaming responses: hoe het werkt, waarom het UX verbetert
API Routes opzetten voor AI (OpenAI/Anthropic providers)
Chat UI bouwen met useChat hook (messages, input, handleSubmit)
Conversation history opslaan in Supabase
Error handling en loading states
Rate limiting en cost management

Lesopdracht: Bouw een AI Chat component met Vercel AI SDK: setup API route, implementeer useChat hook, style met Tailwind, sla chat history op in Supabase.

Huiswerk: Extend naar volledige AI feature voor je eindproject (Recipe Generator / Budget Advisor / Travel Planner), voeg streaming UI toe, implementeer conversation history, documenteer je implementatie.

→ Ga naar Les 16

Les 17: Advanced Deployment & Production (Vercel)

Tools: Vercel, GitHub Actions, Sentry/LogRocket, Lighthouse, Cursor

Theorie/Uitleg:

Vercel deployment: edge network, serverless, Git integration
Environment variables en secrets
Custom domains en DNS
Performance optimization: images, fonts, code splitting
Vercel Analytics en Web Vitals
CI/CD met GitHub Actions
Security checklist voor productie

Lesopdracht: Production-ready deployment: pre-deployment checklist, performance optimization (Lighthouse 90+), deploy + monitoring setup.

Huiswerk: Maak Production Deployment Playbook met checklists, setup GitHub Actions, bouw monitoring dashboard.

→ Ga naar Les 17

3.4 Eindproject

Les 18: Eindopdracht Intro, Planning & Advanced Topics

Tools: Cursor, Supabase, Skills.sh, Planning tools

Theorie/Uitleg:

Eindopdracht walkthrough: 10 project opties
Requirements en grading rubric
Timeline planning (2 weken)
Project planning met Cursor als AI partner
Database Schema Design workshop
Geavanceerde architecture patterns
Accessibility Deep Dive (WCAG AA)

Lesopdracht: Kies eindproject, maak gedetailleerde planning met AI (features, schema, architecture, timeline), setup GitHub repo + Next.js + Supabase + Skills.

Huiswerk: Start bouwen core features: Auth, database, basis layout, eerste core feature. Commit frequent, test elke feature, lever progress update + deployed preview URL.

→ Ga naar Les 18

Tech Stack

Frontend: React, Next.js, Tailwind CSS
Backend: Supabase (Postgres database, Auth)
AI Tools: ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
AI SDK: Vercel AI SDK (ai package) voor AI features in apps
Testing: Vitest, React Testing Library, Playwright
Deployment: Vercel, GitHub Actions

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)