# 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 voor Content en Asset Generation](Samenvattingen/Les05-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | | 06 | [MCP & Component Libraries](Samenvattingen/Les06-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | | 07 | [Backend Made Easy met Supabase + AI](Samenvattingen/Les07-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | | 08 | [Claude Code - Agentic Coding Mode](Samenvattingen/Les08-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | | 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | | 10 | [Supabase Automation - Cron Jobs & Webhooks](Samenvattingen/Les10-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 11 | [Introduction to Cursor](Samenvattingen/Les11-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 12 | [Advanced Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 13 | [Mastering Cursor met Claude Opus](Samenvattingen/Les13-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 14 | [Supabase Advanced - Realtime & Edge Functions](Samenvattingen/Les14-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 15 | [AI-Driven Testing & Quality Assurance](Samenvattingen/Les15-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 16 | [Building AI-Powered Features](Samenvattingen/Les16-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 17 | [Advanced Deployment & Production](Samenvattingen/Les17-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | | 18 | [Eindopdracht Intro, Planning & Advanced Topics](Samenvattingen/Les18-Samenvatting.md) | 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](Samenvattingen/Les01-Samenvatting.md) --- ### 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](Samenvattingen/Les02-Samenvatting.md) --- ### 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](Samenvattingen/Les03-Samenvatting.md) --- # 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 `) - 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](Samenvattingen/Les04-Samenvatting.md) --- ### 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](Samenvattingen/Les05-Samenvatting.md) --- ## 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](Samenvattingen/Les06-Samenvatting.md) --- ### 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](Samenvattingen/Les07-Samenvatting.md) --- ## 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](Samenvattingen/Les08-Samenvatting.md) --- ### 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](Samenvattingen/Les09-Samenvatting.md) --- # 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](Samenvattingen/Les10-Samenvatting.md) --- ### 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](Samenvattingen/Les11-Samenvatting.md) --- ### 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](Samenvattingen/Les12-Samenvatting.md) --- ### 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](Samenvattingen/Les13-Samenvatting.md) --- ## 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](Samenvattingen/Les14-Samenvatting.md) --- ### 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](Samenvattingen/Les15-Samenvatting.md) --- ## 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](Samenvattingen/Les16-Samenvatting.md) --- ### 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](Samenvattingen/Les17-Samenvatting.md) --- ## 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](Samenvattingen/Les18-Samenvatting.md) --- ## 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)