741 lines
25 KiB
Markdown
741 lines
25 KiB
Markdown
# AI Development Curriculum - NOVI Hogeschool
|
|
|
|
Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered developer.
|
|
|
|
**Totaal: 30 EC** verdeeld over 4 delen.
|
|
|
|
---
|
|
|
|
## Versies
|
|
|
|
| Versie | Status | Beschrijving |
|
|
|--------|--------|--------------|
|
|
| **v1** | Gegeven | Originele lessen (Les01, Les02 mappen) |
|
|
| **[v2](v2/)** | In ontwikkeling | Verbeterde lessen op basis van feedback |
|
|
|
|
**Feedback & Reflectie:** [v1-feedback.md](v1-feedback.md) - Bevindingen na het geven van les 1 en 2
|
|
|
|
---
|
|
|
|
## Overzicht
|
|
|
|
> **Let op:** Curriculum v2 - geherstructureerd na feedback les 1-2. Cursor vervangt OpenCode als primaire AI tool. Meer tijd voor Next.js en Supabase.
|
|
|
|
| Les | Onderwerp | Deel | Status |
|
|
|-----|-----------|------|--------|
|
|
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Gegeven |
|
|
| 02 | [AI Code Assistants (OpenCode → Cursor)](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Gegeven |
|
|
| 03 | [Cursor Setup & Basics](Samenvattingen/Les03-Samenvatting.md) | 1 | 🔨 In ontwikkeling |
|
|
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
|
|
| 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 06 | [Next.js 1: Pages, Routing & Layouts](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 07 | [Next.js 2: Server Components & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 08 | [Next.js 3: API Routes & Server Actions](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 09 | [Database Principles & Supabase Setup](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 10 | [Supabase: Auth & CRUD](Samenvattingen/Les10-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 11 | [Full-Stack Mini Project](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 12 | [Styling: Tailwind CSS & shadcn/ui](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 13 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 14 | [Project Setup & AI Config (.cursorrules, claude.md)](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 15 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
|
|
| 16 | [AI Chat Interface & Streaming](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
|
|
| 17 | [Eindproject Werkdag](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
|
|
| 18 | [Deployment, Presentaties & Evaluatie](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |
|
|
|
|
---
|
|
|
|
## Tool Progressie
|
|
|
|
| Deel | Lessen | Tools | Kosten |
|
|
|------|--------|-------|--------|
|
|
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
|
|
| Deel 2: Technical Foundations | 5-10 | TypeScript, Next.js, Supabase | Gratis |
|
|
| Deel 3: Full-Stack Development | 11-14 | Next.js, Supabase, Tailwind, **shadcn/ui**, Cursor | Gratis |
|
|
| Deel 4: Advanced AI & Deployment | 15-18 | Cursor, Vercel AI SDK, Vercel | Gratis (Cursor Student Plan) |
|
|
|
|
**Eindopdracht:** Cursor (Student Plan - gratis Pro voor 1 jaar)
|
|
|
|
---
|
|
|
|
# Deel 1: AI Foundations
|
|
|
|
**4 lessen · 7 EC**
|
|
|
|
Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.
|
|
|
|
---
|
|
|
|
### Les 1: Introductie tot AI en Large Language Models
|
|
|
|
**Tools:** ChatGPT, v0.dev, Vercel, GitHub
|
|
|
|
**Docent vertelt:**
|
|
- Het AI-landschap anno nu (ChatGPT, Claude, Grok, Gemini)
|
|
- Wat zijn Large Language Models? Next-token prediction uitgelegd
|
|
- Hallucinaties: waarom AI soms dingen verzint
|
|
- **AI Modellen & Kosten:** Gratis opties (ChatGPT Free, Claude Free, Groq, Ollama) vs Betaald ($20/maand) vs Premium (Claude Opus)
|
|
- **Privacy:** Ollama voor lokaal draaien (data verlaat je computer niet)
|
|
- **ChatGPT Projects:** Werkruimtes met eigen instructies en geheugen
|
|
- Prompt engineering basics: rol, context, taak, format
|
|
- De schets-naar-website workflow
|
|
|
|
**Studenten doen:**
|
|
- ChatGPT account aanmaken en verkennen
|
|
- Custom Instructions instellen + Project aanmaken voor v0.dev
|
|
- Complete workflow: schets op papier → foto → ChatGPT Project → v0.dev → deploy naar Vercel
|
|
|
|
**Lesopdracht:** Doorloop de complete workflow: teken een hero section op papier, maak foto, genereer prompt met ChatGPT, bouw in v0.dev, deploy naar Vercel.
|
|
|
|
**Huiswerk:** Reflectie schrijven (500 woorden), 5 AI use cases bedenken voor eigen projecten, tweede component bouwen via de workflow.
|
|
|
|
**Lesmateriaal:**
|
|
- [Slide-Overzicht](Les01-Introductie-AI/Les01-Slide-Overzicht.md)
|
|
- [Lesplan](Les01-Introductie-AI/Les01-Lesplan.md)
|
|
- [Docenttekst](Les01-Introductie-AI/Les01-Docenttekst.md)
|
|
- [Keynote Notes](Les01-Introductie-AI/Les01-Docenttekst-Notes.md)
|
|
- [Lesopdracht](Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md)
|
|
- [Huiswerkopdracht](Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md)
|
|
|
|
[→ Ga naar Les 1 Samenvatting](Samenvattingen/Les01-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 2: AI Code Assistants (OpenCode → Cursor)
|
|
|
|
**Tools:** OpenCode Desktop App, Cursor (Preview), Git, Vercel
|
|
|
|
**Docent vertelt:**
|
|
- Recap: OpenCode workflow uit Les 1 huiswerk
|
|
- Introduceer Cursor: professionele AI editor
|
|
- Cursor vs OpenCode: krachten en zwakten
|
|
- Installatie en configuratie
|
|
- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline edit), `Ctrl+L` (chat)
|
|
- De deployment workflow: git push → Vercel auto-deploy
|
|
|
|
**Studenten doen:**
|
|
- OpenCode Desktop App gebruiken voor continue integratie
|
|
- Cursor installeren en eerste keer verkennen
|
|
- Bestaand v0 project openen in Cursor
|
|
- Met Cursor een nieuwe pagina maken + link op homepage
|
|
- Deployen via git push → Vercel
|
|
|
|
**Lesopdracht:** Maak een nieuwe pagina in je v0 project. Clone je repo, draai lokaal, maak een pagina (/about, /services, of /contact) met componenten, voeg link op homepage toe, deploy minimaal 2x naar Vercel.
|
|
|
|
**Huiswerk:**
|
|
- Maak nieuw project vanaf scratch met `create-next-app`
|
|
- Bouw 3 componenten met Cursor (navbar, hero, + keuze)
|
|
- Push naar GitHub, koppel aan Vercel
|
|
- Schrijf reflectie (300 woorden)
|
|
|
|
**Lesmateriaal:**
|
|
- [Slide-Overzicht](Les02-OpenCode/Les02-Slide-Overzicht.md)
|
|
- [Lesplan](Les02-OpenCode/Les02-Lesplan.md)
|
|
- [Docenttekst](Les02-OpenCode/Les02-Docenttekst.md)
|
|
- [Keynote Notes](Les02-OpenCode/Les02-Docenttekst-Notes.md)
|
|
- [Lesopdracht](Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md)
|
|
- [Huiswerkopdracht](Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md)
|
|
|
|
[→ Ga naar Les 2 Samenvatting](Samenvattingen/Les02-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 3: Cursor Setup & Basics
|
|
|
|
**Tools:** Cursor, Git, GitHub
|
|
|
|
**Docent vertelt:**
|
|
- Cursor overview: tab completion, inline edits, chat, composer
|
|
- Free tier vs Student Plan vs Pro
|
|
- Installatie en first-time setup
|
|
- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline), `Ctrl+L` (chat), `Ctrl+Shift+L` (composer)
|
|
- AI model keuze: wanneer Haiku vs Sonnet?
|
|
- Privacy & security: hoe Cursor data behandelt
|
|
- `.cursorrules` introduceer: custom instructions voor je project
|
|
|
|
**Studenten doen:**
|
|
- **Groepsdiscussie:** Bespreek klassikaal ervaringen van vorige les - wat vond je van Cursor vs OpenCode?
|
|
- Cursor installeren en Student Plan activeren
|
|
- Een van je Les 2 projecten openen in Cursor
|
|
- Tab completion, Ctrl+K, en Ctrl+L uitproberen
|
|
- Begint `.cursorrules` bestand voor je project
|
|
|
|
**Lesopdracht:** Open je Les 2 project in Cursor, voeg 3 nieuwe features toe (elk met ander shortcut: Tab, Ctrl+K, Chat), test telkens of het werkt, noteer: welke shortcut voelt het nuttigst?
|
|
|
|
**Huiswerk:** Experimenteer met Cursor Composer (Ctrl+Shift+L) op een bestaande component, schrijf reflectie (300 woorden) vergelijk je Cursor/OpenCode ervaringen, maak start-`.cursorrules` voor je eindproject.
|
|
|
|
[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 4: Effectief Prompting, Iteratief Werken & Skills
|
|
|
|
**Tools:** OpenCode/WebStorm, Skills.sh
|
|
|
|
**Docent vertelt:**
|
|
- Zero-shot vs few-shot prompting (met voorbeelden)
|
|
- Chain-of-thought reasoning: laat AI stap voor stap denken
|
|
- Role prompting en constraint-based prompting
|
|
- Skills.sh: wat het is en waarom het werkt
|
|
- Iteratief werken: start simpel → voeg complexiteit toe
|
|
|
|
**Studenten doen:**
|
|
- **Groepsdiscussie:** Bespreek klassikaal ervaringen met OpenCode - wat werkte, wat niet?
|
|
- Verschillende prompt technieken uitproberen
|
|
- Skills.sh installeren en eerste skill toevoegen
|
|
- Vergelijk output met/zonder skill
|
|
- Bouw feature in 4 iteraties (simpel → complex)
|
|
|
|
**Lesopdracht:** Installeer Skills.sh, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties (basis filter → multi-filter → sort → search).
|
|
|
|
**Huiswerk:** Maak persoonlijke prompt library met 8 templates voor verschillende taken, installeer en test 3 Skills, documenteer concrete verschillen.
|
|
|
|
[→ Ga naar Les 4](Samenvattingen/Les04-Samenvatting.md)
|
|
|
|
---
|
|
|
|
# Deel 2: Technical Foundations
|
|
|
|
**6 lessen · 10 EC**
|
|
|
|
Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
|
|
|
---
|
|
|
|
### Les 5: TypeScript Basics
|
|
|
|
**Tools:** OpenCode/WebStorm, TypeScript
|
|
|
|
**Docent vertelt:**
|
|
- Waarom TypeScript? Voordelen boven JavaScript
|
|
- Basic types: string, number, boolean, array, object
|
|
- Type inference: wanneer TypeScript types zelf raadt
|
|
- Interfaces en type aliases
|
|
- TypeScript met React: Props typen, useState met types
|
|
- Generics basics (Array<T>, Promise<T>)
|
|
- Veel voorkomende TypeScript errors en hoe ze op te lossen
|
|
|
|
**Studenten doen:**
|
|
- JavaScript file omzetten naar TypeScript
|
|
- Interfaces schrijven voor eigen data
|
|
- React component met typed props maken
|
|
- TypeScript errors debuggen
|
|
|
|
**Lesopdracht:**
|
|
1. Zet bestaand JS component om naar TypeScript
|
|
2. Maak interface voor User en Product data
|
|
3. Bouw typed React component met props
|
|
4. Fix 5 TypeScript errors in gegeven code
|
|
|
|
**Huiswerk:** Maak 3 nieuwe components volledig in TypeScript, schrijf interfaces voor je eindproject data, maak cheat sheet met TypeScript patterns.
|
|
|
|
[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 6: Next.js 1: Pages, Routing & Layouts
|
|
|
|
**Tools:** Next.js 14, OpenCode/WebStorm, Vercel
|
|
|
|
**Docent vertelt:**
|
|
- Wat is Next.js? React framework met superpowers
|
|
- Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)
|
|
- Waarom SSR? SEO, performance, initial load
|
|
- App Router: file-based routing uitgelegd
|
|
- Folder structuur: app/, pages, layouts, loading, error
|
|
- Dynamic routes: [id], [...slug], [[...optional]]
|
|
- Link component en navigation
|
|
- Metadata en SEO basics
|
|
|
|
**Studenten doen:**
|
|
- Next.js project aanmaken met `npx create-next-app@latest`
|
|
- Pagina's maken met App Router
|
|
- Layout en nested layouts implementeren
|
|
- Dynamic routes bouwen
|
|
- Navigation met Link component
|
|
|
|
**Lesopdracht:**
|
|
1. `npx create-next-app@latest` met TypeScript + Tailwind + App Router
|
|
2. Maak 4 pagina's: home, about, products, contact
|
|
3. Maak root layout met Header en Footer
|
|
4. Maak `/products/[id]` dynamic route
|
|
5. Deploy naar Vercel
|
|
|
|
**Huiswerk:** Voeg nested layout toe voor products section, maak loading.tsx en error.tsx, experimenteer met metadata.
|
|
|
|
[→ Ga naar Les 6](Samenvattingen/Les06-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 7: Next.js 2: Server Components & Data Fetching
|
|
|
|
**Tools:** Next.js 14, React Query (TanStack Query), Cursor
|
|
|
|
**Docent vertelt:**
|
|
- Server Components vs Client Components
|
|
- 'use client' directive: wanneer en waarom
|
|
- Data fetching in Server Components (async/await)
|
|
- React Query: waarom, installatie, basics
|
|
- useQuery en useMutation hooks
|
|
- Caching en revalidation strategies
|
|
|
|
**Studenten doen:**
|
|
- Server Component met data fetching maken
|
|
- Client Component met React Query maken
|
|
- useQuery en useMutation implementeren
|
|
- Caching strategieën testen
|
|
|
|
**Lesopdracht:**
|
|
1. Maak Server Component met async data fetching
|
|
2. Bouw Client Component met React Query
|
|
3. Implementeer useQuery voor producten
|
|
4. Voeg useMutation toe voor user interactions
|
|
5. Test caching behavior
|
|
|
|
**Huiswerk:** Experimenteer met revalidation strategies, voeg error boundaries toe, bouw loading states voor betere UX.
|
|
|
|
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 8: Next.js 3: API Routes & Server Actions
|
|
|
|
**Tools:** Next.js 14, Cursor, Supabase
|
|
|
|
**Docent vertelt:**
|
|
- API Routes: Route Handlers in App Router
|
|
- HTTP methods: GET, POST, PUT, DELETE
|
|
- Server Actions: form actions en mutations
|
|
- Request/response handling
|
|
- Error handling in API routes
|
|
- Middleware basics (authentication)
|
|
|
|
**Studenten doen:**
|
|
- API routes schrijven voor CRUD operaties
|
|
- Server Actions implementeren voor forms
|
|
- Request validation toevoegen
|
|
- Error handling testen
|
|
- Authentication middleware bouwen
|
|
|
|
**Lesopdracht:**
|
|
1. Maak `/api/items` routes (GET, POST, PUT, DELETE)
|
|
2. Bouw Server Actions voor form submissions
|
|
3. Voeg request validation toe met Zod
|
|
4. Implementeer error handling
|
|
5. Test all CRUD operations
|
|
|
|
**Huiswerk:** Voeg authentication middleware toe, implementeer optimistic UI updates, schrijf API route tests.
|
|
|
|
[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 9: Database Principles & Supabase Setup
|
|
|
|
**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase, Cursor
|
|
|
|
**Docent vertelt:**
|
|
- Wat is een relationele database? Tabellen, rijen, kolommen
|
|
- Primary Keys, Foreign Keys en relaties
|
|
- Relatie types: one-to-one, one-to-many, many-to-many
|
|
- Normalisatie basics
|
|
- Wat is Supabase? (database + auth in één)
|
|
- Supabase project setup
|
|
- Table Editor: tabellen maken zonder SQL
|
|
- Environment variables configuratie
|
|
|
|
**Studenten doen:**
|
|
- Database schema tekenen voor eigen project
|
|
- Supabase account en project aanmaken
|
|
- Tabellen maken via UI (op basis van eigen schema)
|
|
- `.env.local` configureren
|
|
- Supabase client instellen
|
|
|
|
**Lesopdracht:**
|
|
1. Teken database schema voor jouw eindproject
|
|
2. Maak Supabase project
|
|
3. Implementeer je tabellen in Table Editor
|
|
4. Configureer `.env.local`
|
|
5. Test connectie met Supabase client
|
|
|
|
**Huiswerk:** Refine je database schema, voeg meer relaties toe, dokumenteer decisions, bereid Les 10 vor.
|
|
|
|
[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 10: Supabase: Auth & CRUD
|
|
|
|
**Tools:** Supabase, Next.js, Cursor, React Query
|
|
|
|
**Docent vertelt:**
|
|
- Supabase Authentication: email/password, OAuth basics
|
|
- User sessions en JWT tokens
|
|
- Row Level Security (RLS) policies
|
|
- CRUD operaties in Supabase
|
|
- Realtime subscriptions introduceer
|
|
- Error handling en validation
|
|
- Best practices: secrets, security
|
|
|
|
**Studenten doen:**
|
|
- **Groepsdiscussie:** Database schemas van vorige les - aanpassingen nodig?
|
|
- Auth setup met email/password
|
|
- User sessions implementeren
|
|
- RLS policies schrijven
|
|
- CRUD app bouwen (Todo, Notes, Bookmarks)
|
|
- Realtime features testen
|
|
|
|
**Lesopdracht:**
|
|
1. Setup Supabase Auth (email/password)
|
|
2. Maak login/signup forms
|
|
3. Implementeer user sessions
|
|
4. Schrijf RLS policies voor je tabellen
|
|
5. Bouw complete CRUD app met auth
|
|
|
|
**Huiswerk:** Add OAuth provider (Google/GitHub), implementeer logout en password reset, deploy naar Vercel met env secrets.
|
|
|
|
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
|
|
|
---
|
|
|
|
# Deel 3: Full-Stack Development
|
|
|
|
**4 lessen · 7 EC**
|
|
|
|
Integratie van alle geleerde technieken, styling en voorbereiding op eindproject.
|
|
|
|
---
|
|
|
|
### Les 11: Full-Stack Mini Project
|
|
|
|
**Tools:** Cursor, Supabase, Browser DevTools
|
|
|
|
**Docent vertelt:**
|
|
- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase, Auth
|
|
- Vandaag combineren we alles in een werkende mini-app
|
|
- Geen nieuwe concepten - alleen integratie en toepassing
|
|
- Probleemoplossing in real time
|
|
|
|
**Studenten doen:**
|
|
- **Groepsdiscussie:** Bespreek auth & CRUD ervaringen uit Les 10
|
|
- Mini-project kiezen: Bookmarks, Todo's, Notes, of Recipe Collection
|
|
- Met Cursor alle onderdelen kombinieren: auth, database, API, UI
|
|
- Zelfstandig problemen oplossen
|
|
- Polish en afronden
|
|
|
|
**Lesopdracht:** Bouw een volledige mini-app met: login, CRUD operaties, RLS security. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min testing, 150 min polish.
|
|
|
|
**Huiswerk:** Verbeterpunten toevoegen, reflectie schrijven (200 woorden), repo opruimen, voorbereiden op styling.
|
|
|
|
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 11: Hands-on: Van Idee naar Prototype
|
|
|
|
**Tools:** OpenCode/WebStorm, ChatGPT (voor planning)
|
|
|
|
**Docent vertelt:**
|
|
- Hoe ga je van vaag idee naar concrete features?
|
|
- Feature breakdown methode
|
|
- Component thinking: UI opdelen in herbruikbare stukken
|
|
- Minimum Viable Product (MVP) denken
|
|
- Korte demo van het proces
|
|
|
|
**Studenten doen:**
|
|
- **Groepsdiscussie:** Bespreek Tool Selection reflecties - welke workflows werken het beste?
|
|
- Kiezen van een simpel project idee
|
|
- Met AI features breakdown maken
|
|
- Component structuur bedenken
|
|
- Prototype bouwen met alles wat ze hebben geleerd
|
|
- Focus op WORKFLOW, niet perfectie
|
|
|
|
**Voorbeeld projecten:**
|
|
- Weer widget met 3-daagse forecast
|
|
- Simpele quiz app (3 vragen)
|
|
- Recipe card met ingrediënten toggle
|
|
|
|
**Lesopdracht:** Kies een mini-project, maak feature breakdown met AI, bouw werkend prototype. Documenteer je proces: welke prompts werkten, waar liep je vast, hoe loste je het op.
|
|
|
|
**Huiswerk:** Verbeter je prototype (styling, edge cases), schrijf "Lessons Learned" document (300 woorden).
|
|
|
|
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 12: Styling: Tailwind CSS & shadcn/ui
|
|
|
|
**Tools:** Tailwind CSS, shadcn/ui, Cursor
|
|
|
|
**Docent vertelt:**
|
|
- Waarom Tailwind? Utility-first CSS approach
|
|
- Tailwind setup in Next.js (meestal al aanwezig)
|
|
- Basis utilities: flexbox, grid, spacing, colors
|
|
- Tailwind components: buttons, cards, forms
|
|
- Wat is shadcn/ui? High-quality component library
|
|
- shadcn/ui installatie en configuratie
|
|
- Theme customization
|
|
- Dark mode setup
|
|
|
|
**Studenten doen:**
|
|
- Tailwind basix oefenen op bestaande components
|
|
- shadcn/ui components installeren en gebruiken
|
|
- Custom Tailwind themes making
|
|
- Bestaande mini-project restylen met Tailwind + shadcn
|
|
- Dark mode implementeren
|
|
|
|
**Lesopdracht:**
|
|
1. Refactor je mini-project UI met Tailwind classes
|
|
2. Installeer 5 shadcn/ui components (Button, Card, Input, etc.)
|
|
3. Cre je eigen color theme in Tailwind
|
|
4. Implementeer dark mode toggle
|
|
5. Polish: zorg dat het er professioneel uitziet
|
|
|
|
**Huiswerk:** Refactor alle components, add animations met Tailwind, explore shadcn variations, dokumenteer styling decisions.
|
|
|
|
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 13: Hands-on: Van Idee naar Prototype
|
|
|
|
**Tools:** Cursor, ChatGPT (voor planning)
|
|
|
|
**Docent vertelt:**
|
|
- Hoe ga je van vaag idee naar concrete features?
|
|
- Feature breakdown methode
|
|
- Component thinking: UI opdelen in herbruikbare stukken
|
|
- MVP (Minimum Viable Product) denken
|
|
- User stories schrijven
|
|
- Efficiënt met Cursor samenwerken voor iteratie
|
|
|
|
**Studenten doen:**
|
|
- **Groepsdiscussie:** Reflectie op styling - waar ben je tevreden mee?
|
|
- Kiezen van eindproject idee (of voorgestelde opties)
|
|
- Met AI feature breakdown maken
|
|
- Component structuur ontwerpen
|
|
- Start codebase met folder structure
|
|
- Eerste components bouwen
|
|
|
|
**Voorbeeld projecten:**
|
|
- E-commerce product filter & search
|
|
- Recipe planner met shoppinglist
|
|
- Expense tracker met analytics
|
|
- Blog platform met comments
|
|
|
|
**Lesopdracht:** Kies eindproject idee, maak feature breakdown met AI, ontwerp component tree, zet up codebase, bouw eerste 2-3 components.
|
|
|
|
**Huiswerk:** Bouw meer components, integreer eerste data, documenteer architecture decisions, voorbereiding Les 14.
|
|
|
|
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
|
|
|
|
---
|
|
|
|
# Deel 4: Advanced AI & Deployment
|
|
|
|
**4 lessen · 6 EC**
|
|
|
|
AI-powered features, streaming, finale afronding en deployment.
|
|
|
|
---
|
|
|
|
### Les 14: Project Setup & AI Config (.cursorrules, claude.md)
|
|
|
|
**Tools:** Cursor, Git, GitHub
|
|
|
|
**Docent vertelt:**
|
|
- Waarom goede project structuur cruciaal is voor AI samenwerking
|
|
- De ideale folder structuur voor Next.js + AI tools
|
|
- `.cursorrules` files: syntax, best practices, examples
|
|
- `claude.md`: project documentation voor Claude
|
|
- `docs/` folder: AI-DECISIONS.md, ARCHITECTURE.md
|
|
- Environment variables: lokaal vs productie setup
|
|
- `.gitignore` en `.cursorignore` voor AI tools
|
|
- README en documentatie best practices
|
|
|
|
**Studenten doen:**
|
|
- Eindproject repository aanmaken/opschonen
|
|
- Folder structuur optimaliseren
|
|
- Uitgebreide `.cursorrules` schrijven
|
|
- Project documentatie in claude.md
|
|
- docs/ folder vullen
|
|
- Eerste commits pushen
|
|
|
|
**Lesopdracht:**
|
|
1. Review folder structuur van je huidige project
|
|
2. Schrijf comprehensive `.cursorrules` (50+ lines)
|
|
3. Maak `claude.md` met project overview
|
|
4. Vul `docs/AI-DECISIONS.md` in
|
|
5. Push naar GitHub met cleane git history
|
|
|
|
**Huiswerk:** Polish documentatie, add architecture diagrams, test .cursorrules in Cursor, prepare voor Deel 4.
|
|
|
|
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 15: Vercel AI SDK, Tool Calling & Agents
|
|
|
|
**Tools:** Vercel AI SDK, Zod, Externe APIs, Cursor
|
|
|
|
**Docent vertelt:**
|
|
- Vercel AI SDK basics: useChat, streaming
|
|
- Tool Calling: AI laat externe APIs aanroepen
|
|
- Agents: AI voert autonome multi-step taken uit
|
|
- Zod voor schema validation
|
|
- System prompts schrijven
|
|
- Error handling en best practices
|
|
- Gratis APIs voor projecten
|
|
|
|
**Studenten doen:**
|
|
- AI SDK + Zod installeren
|
|
- Chat interface bouwen met streaming
|
|
- Tools definiëren voor externe API
|
|
- Tool calling implementeren
|
|
- Simple agent bouwen
|
|
|
|
**Lesopdracht:**
|
|
1. Installeer Vercel AI SDK en Zod
|
|
2. Bouw chat interface met streaming
|
|
3. Definieer minimaal 2 tools
|
|
4. Implementeer tool calling
|
|
5. Test met externe API
|
|
|
|
**Huiswerk:** Add more tools, implementeer agents met `maxSteps`, documenteer in AI-DECISIONS.md, integreer in eindproject.
|
|
|
|
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 16: AI Chat Interface & Streaming
|
|
|
|
**Tools:** Vercel AI SDK, Cursor, Browser APIs
|
|
|
|
**Docent vertelt:**
|
|
- Streaming responses: hoe werkt het?
|
|
- useChat hook: state management
|
|
- Chat UI patterns: message history, loading states
|
|
- Markdown rendering in chat
|
|
- Error states en edge cases
|
|
- User input handling en sanitization
|
|
- Performance optimalisatie
|
|
|
|
**Studenten doen:**
|
|
- Chat UI bouwen met useChat
|
|
- Streaming responses implementeren
|
|
- Message history managen
|
|
- Error handling toevoegen
|
|
- Styling met Tailwind
|
|
- In eindproject integreren
|
|
|
|
**Lesopdracht:**
|
|
1. Bouw chat interface met Vercel AI SDK
|
|
2. Implementeer streaming responses
|
|
3. Maak message history persistent (localStorage of DB)
|
|
4. Voeg error handling toe
|
|
5. Style met Tailwind + shadcn/ui
|
|
|
|
**Huiswerk:** Add chat features (clear history, export, favorites), deploy naar Vercel, gather user feedback.
|
|
|
|
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 17: Eindproject Werkdag
|
|
|
|
**Tools:** Cursor, Vercel, Supabase, alle vorige tools
|
|
|
|
**Docent vertelt:**
|
|
- Q&A session: wat loop je tegen aan?
|
|
- Cursor tips & tricks review
|
|
- Debugging strategies
|
|
- Performance optimization basics
|
|
- Deployment troubleshooting
|
|
- Final checklist review
|
|
|
|
**Studenten doen:**
|
|
- **Volle dag werken aan eindproject**
|
|
- Docent beschikbaar voor individuele hulp
|
|
- Features afmaken
|
|
- Testing en bug fixes
|
|
- Voorbereiding voor presentatie
|
|
- Code review voorbereiden
|
|
|
|
**Lesopdracht:**
|
|
1. Alle features afmaken van je eindproject
|
|
2. Testing: user flows doorlopen
|
|
3. Bug fixes en edge cases
|
|
4. Code cleanup en refactoring
|
|
5. Deploy naar Vercel
|
|
|
|
**Huiswerk:** Laatste fixes, presentatie voorbereiden, documentatie finaliseren, demo video opnemen (optioneel).
|
|
|
|
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 18: Deployment, Presentaties & Evaluatie
|
|
|
|
**Tools:** Vercel, GitHub, Supabase
|
|
|
|
**Deployment Setup (30 min):**
|
|
- Vercel deployment flow
|
|
- Environment variables setup
|
|
- Supabase productie configuration
|
|
- Custom domains (optioneel)
|
|
- Performance optimization (Lighthouse)
|
|
- Security checklist
|
|
|
|
**Presentaties & Evaluatie (90 min):**
|
|
- Iedereen presenteert eindproject (5 min per student)
|
|
- Live demo
|
|
- Vragen van docent en klasgenoten
|
|
- Feedback ontvangen
|
|
- Course evaluatie
|
|
|
|
**Docent vertelt:**
|
|
- Best practices deployment
|
|
- Performance monitoring
|
|
- Error tracking en logging
|
|
- Continuous deployment setup
|
|
- Next steps: career paths, advanced topics
|
|
|
|
**Studenten doen:**
|
|
- Final deployment naar Vercel
|
|
- Performance audit (Lighthouse)
|
|
- Security checklist doorlopen
|
|
- Presentatie geven (5 min)
|
|
- Course feedback geven
|
|
|
|
**Lesopdracht:**
|
|
1. Deploy eindproject productie
|
|
2. Configure environment variables
|
|
3. Run Lighthouse audit (score >80)
|
|
4. Complete security checklist
|
|
5. Present your project
|
|
|
|
**Huiswerk:** N.A. - Course afgerond!
|
|
|
|
[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)
|
|
|
|
---
|
|
|
|
## Tech Stack
|
|
|
|
- **Frontend:** React, Next.js, TypeScript, Tailwind CSS
|
|
- **Backend:** Supabase (Postgres database, Auth)
|
|
- **Data Fetching:** React Query (TanStack Query)
|
|
- **AI Tools:** ChatGPT, Claude Desktop, v0.dev, OpenCode, Cursor
|
|
- **AI SDK:** Vercel AI SDK voor AI features in apps
|
|
- **Deployment:** Vercel, GitHub
|
|
|
|
---
|
|
|
|
## 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)
|