diff --git a/readme.md b/readme.md index 359c4cf..c1e4a8f 100644 --- a/readme.md +++ b/readme.md @@ -12,22 +12,22 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve |-----|-----------|------|--------| | 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 | [IDE Integratie: WebStorm en Cursor](Samenvattingen/Les03-Samenvatting.md) | 1 | πŸ“‹ Samenvatting | -| 04 | [Prompt Engineering Deep Dive](Samenvattingen/Les04-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | -| 05 | [Skills.sh - Herbruikbare AI Packages](Samenvattingen/Les05-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | -| 06 | [Supabase Fundamentals](Samenvattingen/Les06-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | -| 07 | [Supabase Advanced Features](Samenvattingen/Les07-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | -| 08 | [MCP - Model Context Protocol](Samenvattingen/Les08-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | -| 09 | [AI Agents en Agentic Coding](Samenvattingen/Les09-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | -| 10 | [Claude Code CLI](Samenvattingen/Les10-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 11 | [Custom GPTs en Claude Projects](Samenvattingen/Les11-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 12 | [AI-Assisted Testing Basics](Samenvattingen/Les12-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 13 | [Advanced Testing met AI](Samenvattingen/Les13-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 14 | [Deployment en CI/CD](Samenvattingen/Les14-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 15 | [Capstone Project Start](Samenvattingen/Les15-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 16 | [Capstone Development](Samenvattingen/Les16-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 17 | [Capstone Afronding](Samenvattingen/Les17-Samenvatting.md) | 3 | πŸ“‹ Samenvatting | -| 18 | [Presentaties en Afsluiting](Samenvattingen/Les18-Samenvatting.md) | 3 | πŸ“‹ 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 | --- @@ -35,32 +35,64 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve **3 lessen Β· 5 EC** -Kennismaking met AI, LLMs en de basis van AI-assisted development. Van eerste prompt tot werkende applicatie. +Kennismaking met AI, LLMs en de basis van AI-assisted development. --- ### Les 1: Introductie tot AI en Large Language Models -Kennismaking met AI, LLMs, ChatGPT en de basis van prompt engineering. Praktische workflow van schets op papier naar werkende website met v0.dev. **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 -Introductie tot standalone AI coding tools. OpenCode als eerste hands-on ervaring met AI-geΓ―ntegreerde development. -**Tools:** OpenCode Desktop App, Ollama/Groq API +**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: IDE Integratie: WebStorm en Cursor -AI-assistants binnen bestaande development workflows. Vergelijking van WebStorm met OpenCode plugin vs Cursor als AI-native IDE. +### Les 3: AI Ethics, Privacy & Security + WebStorm Integration -**Tools:** WebStorm + OpenCode plugin, Cursor +**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) @@ -76,19 +108,41 @@ Verdieping in prompt engineering, backend development met Supabase, en introduct ## 2.1 Prompt Engineering & Skills -### Les 4: Prompt Engineering Deep Dive -Geavanceerde prompt technieken voor consistente, hoogwaardige output. +### Les 4: Effectief Prompting, Iteratief Werken & Skills -**Tools:** ChatGPT, Claude +**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: Skills.sh - Herbruikbare AI Packages -Skills als herbruikbare best-practices packages. Hoe je bestaande skills gebruikt en eigen skills maakt. +### Les 5: AI voor Content en Asset Generation -**Tools:** Skills.sh, Claude Code +**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) @@ -96,19 +150,41 @@ Skills als herbruikbare best-practices packages. Hoe je bestaande skills gebruik ## 2.2 Backend & Database -### Les 6: Supabase Fundamentals -Backend-as-a-Service met Supabase. Database, authenticatie en storage basics. +### Les 6: MCP & Component Libraries -**Tools:** Supabase (Database, Auth, Storage) +**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: Supabase Advanced Features -Geavanceerde Supabase features: Realtime subscriptions, Edge Functions en Row Level Security. +### Les 7: Backend Made Easy met Supabase + AI + Skills -**Tools:** Supabase (Realtime, Edge Functions, RLS) +**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) @@ -116,19 +192,41 @@ Geavanceerde Supabase features: Realtime subscriptions, Edge Functions en Row Le ## 2.3 AI Integration -### Les 8: MCP - Model Context Protocol -AI verbinden met externe data en services via het Model Context Protocol. +### Les 8: Claude Code - Agentic Coding Mode -**Tools:** MCP Servers, Claude Desktop +**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 en Agentic Coding -Van simpele prompts naar autonome AI agents die taken uitvoeren. +### Les 9: AI Agents - Custom GPTs & Claude Projects -**Tools:** Claude, Agent frameworks +**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) @@ -138,94 +236,193 @@ Van simpele prompts naar autonome AI agents die taken uitvoeren. **9 lessen Β· 15 EC** -Geavanceerde AI tools, testing, deployment en het capstone project. +Geavanceerde AI tools, testing, deployment en het eindproject. --- ## 3.1 Advanced AI Tools -### Les 10: Claude Code CLI -Command-line AI development met Claude Code. Agentic mode en autonome development. +### Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows -**Tools:** Claude Code CLI +**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: Custom GPTs en Claude Projects -Gepersonaliseerde AI-assistants bouwen voor specifieke taken en projecten. +### Les 11: Introduction to Cursor - De Professionele AI Editor -**Tools:** OpenAI GPT Builder, Claude Projects +**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) --- -## 3.2 Testing +### Les 12: Advanced Context Management & AI-Vriendelijke Code -### Les 12: AI-Assisted Testing Basics -AI gebruiken voor het schrijven van unit tests en component tests. +**Tools:** Cursor, Claude Desktop, .cursorignore -**Tools:** Vitest, React Testing Library, MSW +**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: Advanced Testing met AI -End-to-end testing en test automation met AI assistance. +### Les 13: Mastering Cursor met Claude Opus & Advanced Skills -**Tools:** Playwright, AI test generation +**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.3 Deployment +## 3.2 Testing & Advanced Supabase -### Les 14: Deployment en CI/CD -Van development naar productie met AI-ondersteunde deployment pipelines. +### Les 14: Supabase Advanced - Realtime, Storage & Edge Functions -**Tools:** Vercel, GitHub Actions +**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) --- -## 3.4 Capstone Project +### Les 15: AI-Driven Testing & Quality Assurance -### Les 15: Capstone Project Start -Projectkeuze, planning en architectuur. Eerste AI-assisted development sprint. +**Tools:** Cursor, Vitest, React Testing Library, MSW, Playwright -**Tools:** Alle geleerde tools +**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) --- -### Les 16: Capstone Development -Hoofdontwikkeling van het capstone project met focus op testing en kwaliteit. +## 3.3 AI Features & Deployment -**Tools:** Alle geleerde tools +### 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: Capstone Afronding -Deployment, documentatie en presentatievoorbereiding. +### Les 17: Advanced Deployment & Production (Vercel) -**Tools:** Vercel, Documentatie tools +**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) --- -### Les 18: Presentaties en Afsluiting -Eindpresentaties, reflectie en vooruitblik naar de toekomst van AI development. +## 3.4 Eindproject -**Tools:** Presentatie tools +### 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) @@ -233,7 +430,7 @@ Eindpresentaties, reflectie en vooruitblik naar de toekomst van AI development. ## Tech Stack -- **Frontend:** React, Tailwind CSS +- **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