fix: implement lessons feedback

2026-01-30 11:56:39 +01:00
parent 04f32babd3
commit 1e324e2f0e
18 changed files with 3828 additions and 3199 deletions
--- a/Samenvattingen/Les11-Samenvatting.md
+++ b/Samenvattingen/Les11-Samenvatting.md
@@ -1,448 +1,237 @@
-# Les 11: Project Setup & Repository Structure
+# Les 11: Hands-on: Van Idee naar Prototype

 ---

 ## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 10-18)
+**Deel 3: AI Tooling & Prototyping** (Les 10-12)

 ## Beschrijving
-Zet je eindproject professioneel op met de juiste structuur, documentatie, en AI-configuratie. Je past alles toe wat je hebt geleerd en maakt je project klaar voor Cursor.
+Pas alles wat je hebt geleerd toe in een hands-on sessie. Ga van een vaag idee naar een werkend prototype met behulp van je AI workflow.

 ---

 ## Te Behandelen

-### Waarom Goede Structuur Belangrijk Is
+### Van Idee naar Feature Breakdown

-**Voor AI:**
- AI begrijpt beter wat je project doet
- Betere code suggestions
- Minder hallucinaties
+**Het probleem:** Je hebt een idee, maar waar begin je?

-**Voor jezelf:**
- Makkelijker navigeren
- Sneller features bouwen
- Betere samenwerking
+**Stap 1: Beschrijf je idee in 1-2 zinnen**
+```
+"Ik wil een app waar je kunt bijhouden welke planten water nodig hebben."
+```
+
+**Stap 2: Vraag AI om feature breakdown**
+```
+Prompt: Ik wil een plant watering tracker app bouwen.
+Wat zijn de minimale features voor een werkend prototype?
+Denk aan: wat moet een gebruiker kunnen doen?
+```
+
+**Stap 3: Prioriteer (MVP denken)**
+- Wat is essentieel? → In prototype
+- Wat is nice-to-have? → Later

 ---

-### Eindproject Aanmaken
+### Component Thinking

-```bash
-# Kies een goede naam voor je project
-npx create-next-app@latest ai-recipe-generator
-# of: smart-budget-buddy
-# of: travel-planner-ai
-# of: jouw-eigen-idee
+**Vraag jezelf af:**
+- Welke "blokken" zie ik op het scherm?
+- Welke blokken worden herhaald?
+- Welke blokken komen op meerdere pagina's?

-# Beantwoord de vragen:
-# ✔ Would you like to use TypeScript? → Yes
-# ✔ Would you like to use ESLint? → Yes
-# ✔ Would you like to use Tailwind CSS? → Yes
-# ✔ Would you like to use `src/` directory? → Yes
-# ✔ Would you like to use App Router? → Yes
-# ✔ Would you like to customize the default import alias? → No
+**Voorbeeld: Plant Tracker**
+```
+Herhaalde componenten:
+- PlantCard (naam, foto, laatste water datum)
+- WaterButton (markeer als water gegeven)

-cd ai-recipe-generator
+Pagina componenten:
+- PlantList (toont alle PlantCards)
+- AddPlantForm (nieuw plant toevoegen)
 ```

 ---

-### De Ideale Folder Structuur
+### MVP (Minimum Viable Product) Denken
+
+**Wat is MVP?**
+De simpelste versie van je app die nog steeds waarde levert.
+
+**❌ Niet MVP:**
+- Alle features tegelijk
+- Perfect design
+- Edge cases afhandelen
+- Login systeem
+
+**✅ Wel MVP:**
+- Core functionaliteit werkt
+- Basis styling
+- Happy path werkt
+- Hardcoded data is oké
+
+---
+
+### De Prototype Workflow

 ```
-ai-recipe-generator/
-├── .cursor/
-│   └── rules/
-│       └── general.mdc          # Cursor instructies
-├── docs/
-│   ├── PROJECT-BRIEF.md         # Project beschrijving
-│   ├── PROMPT-LOG.md            # AI prompts logboek
-│   └── AI-DECISIONS.md          # Architectuur beslissingen
-├── src/
-│   ├── app/
-│   │   ├── api/                 # API routes (voor AI)
-│   │   ├── layout.tsx
-│   │   └── page.tsx
-│   ├── components/
-│   │   ├── ui/                  # Herbruikbare UI components
-│   │   └── features/            # Feature-specifieke components
-│   ├── lib/
-│   │   └── supabase.ts          # Supabase client
-│   └── types/
-│       └── index.ts             # TypeScript types
-├── .env.example                 # Template voor env vars
-├── .env.local                   # Echte env vars (niet committen!)
-├── .gitignore
-└── README.md
-```
-
-**Maak de folders aan:**
-```bash
-mkdir -p .cursor/rules
-mkdir -p docs
-mkdir -p src/components/ui
-mkdir -p src/components/features
-mkdir -p src/lib
-mkdir -p src/types
+1. IDEE (1-2 zinnen)
+   ↓
+2. FEATURES (AI breakdown)
+   ↓
+3. PRIORITEER (wat is MVP?)
+   ↓
+4. COMPONENTS (welke blokken?)
+   ↓
+5. BOUWEN (tool per stap)
+   ↓
+6. ITEREREN (feedback → aanpassen)
 ```

 ---

-### .cursorrules Files
+### Voorbeeld: Weer Widget Prototype

-**.cursor/rules/general.mdc:**
-```markdown
-# Project: AI Recipe Generator
+**Stap 1: Idee**
+"Simpele weer widget met 3-daagse forecast"

-## Tech Stack
- Next.js 14 met App Router
- TypeScript (strict mode)
- Tailwind CSS voor styling
- Supabase voor database en auth
- Vercel AI SDK voor chat features
-
-## Code Conventies
- Gebruik functionele React components
- Gebruik named exports (geen default exports)
- Destructure props in function signature
- Gebruik async/await (geen .then() chains)
- Schrijf TypeScript types voor alle props en data
-
-## File Naming
- Components: PascalCase (Button.tsx, RecipeCard.tsx)
- Utilities: camelCase (formatDate.ts, fetchRecipes.ts)
- Types: PascalCase met 'Type' suffix (RecipeType.ts)
-
-## Styling
- Alleen Tailwind classes, geen inline styles
- Mobile-first approach
- Gebruik consistent spacing (4, 8, 16, 24, 32)
-
-## Supabase
- Client in src/lib/supabase.ts
- Gebruik typed queries waar mogelijk
- Handle errors expliciet
-
-## AI Features
- API routes in src/app/api/
- Gebruik Vercel AI SDK useChat hook
- Stream responses voor betere UX
+**Stap 2: AI Feature Breakdown**
 ```
+Vraag aan ChatGPT:
+"Wat zijn de minimale features voor een weer widget met 3-daagse forecast?"
+
+Antwoord:
+- Huidige temperatuur tonen
+- Weer icoon (zon, regen, etc.)
+- 3-daagse forecast (dag + temp + icoon)
+- Locatie tonen
+```
+
+**Stap 3: MVP Selectie**
+- ✅ Huidige temperatuur
+- ✅ Weer icoon
+- ✅ 3 dagen forecast
+- ❌ Locatie selectie (later)
+- ❌ Animated icons (later)
+
+**Stap 4: Components**
+```
+WeatherWidget/
+├── CurrentWeather (temp + icoon)
+├── ForecastDay (dag + temp + icoon)
+└── ForecastList (3x ForecastDay)
+```
+
+**Stap 5: Bouwen**
+1. v0.dev: "Weather widget with current temp and 3 day forecast, minimal design"
+2. OpenCode: "Integreer dit in mijn project, maak components in src/components/weather/"
+
+**Stap 6: Itereren**
+- Wat werkt niet?
+- Wat kan beter?
+- Vraag AI om verbeteringen

 ---

-### docs/ Folder
+### Mini-Project Ideeën

-#### docs/PROJECT-BRIEF.md
-```markdown
-# Project Brief: AI Recipe Generator
-
-## Projectnaam
-AI Recipe Generator
-
-## Tagline
-"Ontdek recepten op basis van wat je in huis hebt"
-
-## Probleem
-Mensen hebben vaak ingrediënten in huis maar weten niet wat ze
-ermee kunnen maken. Ze verspillen voedsel of bestellen onnodig.
-
-## Oplossing
-Een app waar je ingrediënten invoert en AI receptsuggesties genereert.
-Je kunt chatten met de AI voor variaties en tips.
-
-## Doelgroep
- Studenten met beperkt budget
- Thuiskoks die inspiratie zoeken
- Mensen die voedselverspilling willen verminderen
-
-## Core Features
-1. Ingrediënten invoeren
-2. AI genereert recepten op basis van ingrediënten
-3. Chat interface voor follow-up vragen
-4. Recepten opslaan als favoriet
-5. Login om favorieten te bewaren
-
-## Nice-to-have Features
- Dieetwensen (vegetarisch, glutenvrij, etc.)
- Boodschappenlijst genereren
- Recept delen
-
-## Tech Stack
- Frontend: Next.js, TypeScript, Tailwind CSS
- Backend: Supabase (database, auth)
- AI: Vercel AI SDK met OpenAI
- Deployment: Vercel
-```
-
-#### docs/PROMPT-LOG.md
-```markdown
-# Prompt Log
-
-Dit document bevat de belangrijkste prompts die ik heb gebruikt.
-
-## Template per prompt:
-
-### [Datum] - [Onderwerp]
-**Doel:** Wat wilde ik bereiken?
-**Prompt:**
-\`\`\`
-De exacte prompt die ik gebruikte
-\`\`\`
-**Resultaat:** Wat was het resultaat? Werkte het?
-**Geleerd:** Wat heb ik hiervan geleerd?
-
---
-
-## Prompts
-
-### [Datum] - Project Setup
-**Doel:** Basis project structuur opzetten
-**Prompt:**
-\`\`\`
-[Nog in te vullen tijdens development]
-\`\`\`
-**Resultaat:**
-**Geleerd:**
-
---
-
-(Voeg minimaal 10 prompts toe tijdens je project)
-```
-
-#### docs/AI-DECISIONS.md
-```markdown
-# AI Decisions Log
-
-Dit document bevat architectuur- en designbeslissingen gemaakt met AI hulp.
-
-## Template per beslissing:
-
-### [Datum] - [Beslissing titel]
-**Context:** Wat was de situatie?
-**Vraag aan AI:** Wat heb ik gevraagd?
-**Opties:** Welke opties werden voorgesteld?
-**Keuze:** Wat heb ik gekozen en waarom?
-**Trade-offs:** Wat zijn de voor- en nadelen?
-
---
-
-## Beslissingen
-
-### [Datum] - Database Schema
-**Context:** Ik moet bepalen hoe ik recepten opsla.
-**Vraag aan AI:** "Wat is een goede database structuur voor een recept app?"
-**Opties:**
-1. Één tabel met JSON voor ingrediënten
-2. Genormaliseerde tabellen (recipes, ingredients, recipe_ingredients)
-**Keuze:** Optie 1 - één tabel met JSON
-**Trade-offs:**
- Pro: Simpeler, sneller te implementeren
- Con: Minder flexibel voor complexe queries
-
---
-
-(Voeg minimaal 5 beslissingen toe tijdens je project)
-```
-
---
-
-### Environment Variables
-
-**.env.example (WEL committen):**
-```bash
-# Supabase
-NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
-
-# OpenAI (voor Vercel AI SDK)
-OPENAI_API_KEY=your-openai-key
-```
-
-**.env.local (NIET committen):**
-```bash
-# Supabase
-NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
-
-# OpenAI
-OPENAI_API_KEY=sk-xxxxx
-```
-
---
-
-### README.md Best Practices
-
-```markdown
-# AI Recipe Generator
-
-Ontdek recepten op basis van wat je in huis hebt.
-
-## Features
- Voer ingrediënten in die je hebt
- AI genereert receptsuggesties
- Chat voor follow-up vragen
- Sla favoriete recepten op
-
-## Tech Stack
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Supabase
- Vercel AI SDK
-
-## Getting Started
-
-### Prerequisites
- Node.js 18+
- npm of yarn
- Supabase account
- OpenAI API key
-
-### Installation
-
-1. Clone de repository:
-\`\`\`bash
-git clone https://github.com/jouw-username/ai-recipe-generator.git
-cd ai-recipe-generator
-\`\`\`
-
-2. Installeer dependencies:
-\`\`\`bash
-npm install
-\`\`\`
-
-3. Kopieer environment variables:
-\`\`\`bash
-cp .env.example .env.local
-\`\`\`
-
-4. Vul je credentials in `.env.local`
-
-5. Start development server:
-\`\`\`bash
-npm run dev
-\`\`\`
-
-6. Open [http://localhost:3000](http://localhost:3000)
-
-## Scripts
- `npm run dev` - Start development server
- `npm run build` - Build voor productie
- `npm run lint` - Run ESLint
-
-## Deployment
-Deze app is gedeployed op Vercel: [link naar productie]
-
-## Author
-[Jouw naam]
-```
-
---
-
-### GitHub Repository Aanmaken
-
-```bash
-# Initialiseer Git (als dat nog niet is gebeurd)
-git init
-
-# Maak eerste commit
-git add .
-git commit -m "Initial Next.js setup with project structure"
-
-# Maak repository op GitHub.com, dan:
-git remote add origin https://github.com/jouw-username/ai-recipe-generator.git
-git branch -M main
-git push -u origin main
-```
+| Project | Core Feature | Complexiteit |
+|---------|-------------|--------------|
+| **Weer Widget** | 3-daagse forecast | ⭐ |
+| **Quiz App** | 3 vragen + score | ⭐ |
+| **Recipe Card** | Ingrediënten toggle | ⭐ |
+| **Pomodoro Timer** | Start/stop + countdown | ⭐⭐ |
+| **Expense Tracker** | Lijst + totaal | ⭐⭐ |

 ---

 ## Tools
- Next.js
- Cursor
- Git & GitHub
- Supabase
+- ChatGPT (voor planning)
+- v0.dev (voor prototypes)
+- OpenCode/WebStorm (voor implementation)

 ---

 ## Lesopdracht (2 uur)

-### Richt je Eindproject Repository In
+### Bouw Je Mini-Prototype

-**Deel 1: Project Aanmaken (20 min)**
- Kies je eindproject (Recipe Generator / Budget Buddy / Travel Planner / eigen idee)
- Run `npx create-next-app@latest [project-naam]`
- Open in Cursor
+**Groepsdiscussie (15 min):**
+Bespreek klassikaal de Tool Selection reflecties uit Les 10 - welke workflows werken het beste?

-**Deel 2: Folder Structuur (20 min)**
- Maak alle folders aan volgens de structuur
- Maak alle bestanden aan
- Test: folder structuur is compleet
+**Deel 1: Planning (30 min)**

-**Deel 3: .cursorrules (30 min)**
- Schrijf `general.mdc` met jouw project details
- Pas de tech stack, conventies, en styling regels aan
- Test: open een file en vraag Cursor iets - volgt hij je regels?
+1. Kies een project uit de lijst (of bedenk eigen simpel idee)
+2. Schrijf je idee in 1-2 zinnen
+3. Vraag ChatGPT om feature breakdown
+4. Selecteer MVP features (max 3)
+5. Schets de components op papier

-**Deel 4: Documentatie (30 min)**
- Vul PROJECT-BRIEF.md volledig in
- Maak templates klaar in PROMPT-LOG.md en AI-DECISIONS.md
- Schrijf complete README.md
+**Deel 2: Bouwen (1 uur)**

-**Deel 5: Git (20 min)**
- Initialiseer Git
- Maak GitHub repository
- Push alles
+1. Genereer UI in v0.dev
+2. Open project in OpenCode
+3. Integreer en pas aan
+4. Zorg dat het werkt (happy path)
+
+**Focus op WORKFLOW, niet perfectie!**
+
+**Deel 3: Documentatie (15 min)**
+
+Maak `docs/PROTOTYPE-LOG.md`:
+- Je idee
+- Feature breakdown
+- MVP keuzes
+- Prompts die werkten
+- Wat ging fout en hoe opgelost

 ### Deliverable
- GitHub repository URL
- Volledig ingevulde PROJECT-BRIEF.md
- Werkende .cursorrules file
- Screenshot van Cursor die je regels volgt
+- Werkend prototype (kan simpel zijn)
+- `docs/PROTOTYPE-LOG.md` met je proces
+- Screenshot van werkend prototype

 ---

 ## Huiswerk (2 uur)

-### Verfijn Setup & Start Bouwen
+### Verbeter en Reflecteer

-**Deel 1: Extra .cursorrules (30 min)**
- Maak `components.mdc` met component conventies
- Maak `api.mdc` met API route conventies
- Test beide in Cursor
+**Deel 1: Prototype Verbeteren (1 uur)**

-**Deel 2: Basis Components (1 uur)**
-Maak 3-5 basis UI components in `src/components/ui/`:
- Button.tsx
- Card.tsx
- Input.tsx
- (optioneel: Modal.tsx, Toast.tsx)
+1. Fix eventuele bugs
+2. Voeg 1 extra feature toe
+3. Verbeter styling
+4. Handle 1 edge case

-Gebruik Cursor met je .cursorrules!
-Log effectieve prompts in PROMPT-LOG.md
+**Deel 2: Peer Review (30 min)**

-**Deel 3: Supabase Setup (30 min)**
- Maak nieuw Supabase project voor eindopdracht
- Configureer `.env.local` en `.env.example`
- Bespreek met AI welke tabellen je nodig hebt
- Maak eerste tabel aan
- Documenteer in AI-DECISIONS.md
+- Deel je prototype met een klasgenoot
+- Krijg feedback
+- Geef feedback op hun prototype
+
+**Deel 3: Reflectie (30 min)**
+
+Schrijf "Lessons Learned" document (300 woorden):
+- Wat ging goed in je workflow?
+- Waar liep je vast?
+- Welke tool was het meest nuttig?
+- Wat doe je volgende keer anders?
+- Hoe voelde het om met AI te bouwen vs alleen?

 ### Deliverable
- Minimaal 2 .cursorrules files
- Minimaal 3 UI components
- Supabase project gekoppeld
- Eerste entries in PROMPT-LOG.md en AI-DECISIONS.md
+- Verbeterd prototype
+- Peer review feedback (gegeven en ontvangen)
+- Lessons Learned document (300 woorden)

 ---

 ## Leerdoelen
 Na deze les kan de student:
- Een professionele project structuur opzetten
- .cursorrules files schrijven die Cursor instrueren
- Documentatie files aanmaken (PROJECT-BRIEF, PROMPT-LOG, AI-DECISIONS)
- Environment variables correct beheren
- Een GitHub repository aanmaken en pushen
- De basis leggen voor AI-assisted development met goede context
+- Van een vaag idee naar concrete features gaan
+- AI gebruiken voor feature breakdown
+- MVP denken toepassen (essentieel vs nice-to-have)
+- Een app opdelen in components
+- De complete workflow doorlopen (idee → prototype)
+- Het bouwproces documenteren
+- Reflecteren op wat werkt en wat niet