2026-01-29 12:25:21 +01:00

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 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 Made Easy met Supabase + AI 2 📋 Samenvatting
08 Claude Code - Agentic Coding Mode 2 📋 Samenvatting
09 AI Agents - Custom GPTs & Claude Projects 2 📋 Samenvatting
10 Supabase Automation - Cron Jobs & Webhooks 3 📋 Samenvatting
11 Introduction to Cursor 3 📋 Samenvatting
12 Advanced Context Management 3 📋 Samenvatting
13 Mastering Cursor met Claude Opus 3 📋 Samenvatting
14 Supabase Advanced - Realtime & Edge Functions 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, 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.

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

→ Ga naar Les 6


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.

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

→ 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 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.

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

→ 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, 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 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)
Description
No description provided
Readme 655 KiB
Languages
Markdown 100%