17 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, backend development met Supabase, 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 Backend & Database
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 Made Easy met Supabase + AI + Skills
Tools: OpenCode/WebStorm, Supabase, supabase-postgres-best-practices skill, Next.js
Theorie/Uitleg:
- Supabase overview: Postgres, Auth, Storage, Realtime, Edge Functions
- Waarom Supabase + AI perfect combo
- Database design met AI + Skills
- Row Level Security (RLS) policies
- TypeScript types auto-genereren
- Supabase client setup en CRUD operaties
Lesopdracht: Bouw Todo App backend: database schema met AI, RLS policies, Next.js integratie met CRUD.
Huiswerk: Extend Todo app met categories, user profile (avatar upload), stats dashboard. 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: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
Tools: Supabase (Edge Functions, pg_cron), Claude/OpenAI API, Resend/SendGrid
Theorie/Uitleg:
- Types van automation: scheduled tasks, event-driven, AI-powered
- Supabase Edge Functions (Deno, TypeScript, serverless)
- Scheduled Edge Functions (cron jobs)
- Webhook Edge Functions
- AI integratie in Edge Functions
- AI Automation workflow patterns
Lesopdracht: Bouw 2 automations: Daily Summary Email (cron → AI samenvatting → email), AI Content Moderation (webhook bij nieuwe todo → AI check → enrich/flag).
Huiswerk: Bouw intelligente notificaties (gepersonaliseerd AI bericht), AI Task Breakdown Agent (complex todo → auto subtaken). 4 werkende automations + reflectie.
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 Testing & Advanced Supabase
Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
Tools: Supabase (Realtime, Storage, Edge Functions), Cursor, OpenAI/Anthropic API
Theorie/Uitleg:
- Realtime Subscriptions: table changes, channels, presence
- Supabase Storage: uploads, buckets, transformations, signed URLs
- Edge Functions Deep Dive: Deno runtime, AI integratie
- Advanced Authentication: social logins, magic links
- Error handling & debugging
Lesopdracht: Level up Todo app met 3 features: Realtime Collaboration, File Attachments met Storage, AI-Powered Task Suggestions via Edge Function.
Huiswerk: Bouw Production-Ready Supabase Starter Template met complete auth, database examples, realtime demo, storage demo, Edge Function, documentatie.
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: Building AI-Powered Features & Workflow Automation
Tools: Supabase Edge Functions, OpenAI/Anthropic API, n8n/Pipedream, Cursor
Theorie/Uitleg:
- AI APIs overzicht: OpenAI, Anthropic, pricing, rate limits
- Veel voorkomende AI features: tekst generatie, samenvatting, chatbots
- API integratie patterns: streaming, error handling, caching
- API keys verbergen via Edge Functions
- Streaming UI implementeren
- Workflow automation met n8n/Pipedream
Lesopdracht: Bouw 1 AI-powered feature (Blog Generator/Summarizer/Writing Assistant) + 1 workflow automation (Smart Form Processor/Daily AI Summary).
Huiswerk: Polish AI feature (streaming, history, rate limiting), bouw 2 automations voor eindopdracht, documentatie.
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, Auth, Storage, Realtime, Edge Functions)
- AI Tools: ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
- 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)