18 KiB
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
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.
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).
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.
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.
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.
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).
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.
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).
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.
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.
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).
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.
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.
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.
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.
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 (
aipackage) - Core hooks:
useChatvoor conversaties,useCompletionvoor single completions - Streaming responses: hoe het werkt, waarom het UX verbetert
- API Routes opzetten voor AI (OpenAI/Anthropic providers)
- Chat UI bouwen met
useChathook (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.
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.
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.
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 (
aipackage) 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 structuurLes[xx]-Lesplan.md- Tijdsindeling en activiteitenLes[xx]-Docenttekst.md- Uitgebreide docenthandleidingLes[xx]-Bijlage-A-Lesopdracht.md- Lesopdracht (2 uur)Les[xx]-Bijlage-B-Huiswerkopdracht.md- Huiswerkopdracht (2 uur)