# 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 Basics met Supabase](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 | [Project Setup & Repository Structure](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 | [Debugging & Code Review met AI](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, 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 `) - 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 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](Samenvattingen/Les06-Samenvatting.md) --- ### 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](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: 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](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 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](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: 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](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 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)