fix: better order

2026-01-29 16:16:07 +01:00
parent f5ed2f7f31
commit 04f32babd3
15 changed files with 3917 additions and 1705 deletions
--- a/Samenvattingen/Les11-Samenvatting.md
+++ b/Samenvattingen/Les11-Samenvatting.md
@@ -1,173 +1,448 @@
-# Les 11: Introduction to Cursor - De Professionele AI Editor
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les11-Slide-Overzicht.md
-> - Les11-Lesplan.md
-> - Les11-Bijlage-A-Lesopdracht.md
-> - Les11-Bijlage-B-Huiswerkopdracht.md
+# Les 11: Project Setup & Repository Structure

 ---

 ## Hoofdstuk
-**Hoofdstuk 3: Advanced** (Les 8-18)
+**Hoofdstuk 3: Advanced** (Les 10-18)

 ## Beschrijving
-Kennismaking met Cursor als premium AI code editor - best of both worlds tussen IDE en AI power.
+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.

 ---

 ## Te Behandelen

-### Waarom Cursor na OpenCode/WebStorm + Claude Code?
- Purpose-built for AI
- Bliksem snel
- Superieure tab completion
- CMD+K inline editing
- Composer mode
- @ mentions systeem
+### Waarom Goede Structuur Belangrijk Is

-### Skills Compatibiliteit
- Al je Skills werken ook in Cursor
+**Voor AI:**
+- AI begrijpt beter wat je project doet
+- Betere code suggestions
+- Minder hallucinaties

-### Installatie
- Download
- GitHub integration
- 2-week Pro trial
+**Voor jezelf:**
+- Makkelijker navigeren
+- Sneller features bouwen
+- Betere samenwerking

-### Core Features
+---

-| Feature | Beschrijving |
-|---------|-------------|
-| Tab completion | AI-powered autocomplete |
-| CMD+K | Inline editing |
-| Chat | Conversatie met context |
-| @ mentions | Reference files, folders, docs |
-| Composer mode | Multi-file generation |
+### Eindproject Aanmaken

-### Skills Migratie
- Skills van OpenCode werken meteen in Cursor
+```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

-### Cost Discussie
- Free tier vs Pro ($20/maand)
+# 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

-### Wanneer Wat Gebruiken?
+cd ai-recipe-generator
+```

-| Tool | Gebruik voor |
-|------|--------------|
-| OpenCode/WebStorm | Leren |
-| Claude Code | Grote autonome taken |
-| Cursor | Dagelijkse development |
+---
+
+### De Ideale Folder Structuur
+
+```
+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
+```
+
+---
+
+### .cursorrules Files
+
+**.cursor/rules/general.mdc:**
+```markdown
+# Project: AI Recipe Generator
+
+## 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
+```
+
+---
+
+### docs/ Folder
+
+#### 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
+```

 ---

 ## Tools
+- Next.js
 - Cursor
- GitHub
- Skills.sh
+- Git & GitHub
 - Supabase

 ---

 ## Lesopdracht (2 uur)

-### Deel 1: Setup & Skills Migration (30 min)
+### Richt je Eindproject Repository In

-**Installatie:**
- Install Cursor
- Connect GitHub
- Activate Pro trial
+**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

-**Verificatie:**
- Verifieer Skills werken (`npx skills list`)
- Test prompt met skill
+**Deel 2: Folder Structuur (20 min)**
+- Maak alle folders aan volgens de structuur
+- Maak alle bestanden aan
+- Test: folder structuur is compleet

-**Eerste Indrukken:**
- Bouw component
- Test tab completion
- Test CMD+K
- Test Chat met @ mentions
- Documenteer verschillen vs OpenCode
+**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?

-### Deel 2: Feature Comparison (45 min)
+**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

-**Rebuild filtering system uit Les 4 in Cursor:**
- Time het
+**Deel 5: Git (20 min)**
+- Initialiseer Git
+- Maak GitHub repository
+- Push alles

-**Gebruik alle features:**
- Extensive tab completion
- CMD+K
- Chat
- @ mentions
- Try Composer
-
-**Vergelijk:**
- Tijd
- Code quality
- Experience
-
-### Deel 3: Composer Mode (45 min)
-
-**Test Composer mode - Bouw analytics dashboard:**
- Sidebar nav
- Top navbar
- 4 stat cards
- Line chart
- Activity feed
-
-**Process:**
- Geef high-level beschrijving
- Laat autonoom werken
- Feedback in Composer chat
-
-**Vergelijk:** Cursor Composer vs Claude Code
+### Deliverable
+- GitHub repository URL
+- Volledig ingevulde PROJECT-BRIEF.md
+- Werkende .cursorrules file
+- Screenshot van Cursor die je regels volgt

 ---

 ## Huiswerk (2 uur)

-### Bouw Complete Mini-App met Cursor
+### Verfijn Setup & Start Bouwen

-**Kies 1 van 4:**
-1. Weather App
-2. Expense Tracker
-3. Recipe Finder
-4. Habit Tracker
+**Deel 1: Extra .cursorrules (30 min)**
+- Maak `components.mdc` met component conventies
+- Maak `api.mdc` met API route conventies
+- Test beide in Cursor

-**Requirements:**
- Full CRUD met Supabase
- Responsive
- TypeScript strict
- Shadcn
- Deployed naar Vercel
+**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)

-**Challenge:** Maximaliseer Cursor + Skills
+Gebruik Cursor met je .cursorrules!
+Log effectieve prompts in PROMPT-LOG.md

-### Track Metrics
- Tab completion usage
- CMD+K count
- Composer usage
- Skills active
- AI vs manual ratio
+**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

-### Deliverables
- Deployed app
- GitHub repo
- Comprehensive reflectie (600 woorden):
-  - Is Cursor worth switching?
-  - Cursor vs Claude Code?
-  - Free vs Pro?
-  - Skills performance?
-  - Final verdict?
+### Deliverable
+- Minimaal 2 .cursorrules files
+- Minimaal 3 UI components
+- Supabase project gekoppeld
+- Eerste entries in PROMPT-LOG.md en AI-DECISIONS.md

 ---

 ## Leerdoelen
 Na deze les kan de student:
- Cursor installeren en configureren
- Skills migreren naar Cursor
- Core features gebruiken (Tab, CMD+K, Chat, @ mentions, Composer)
- Het verschil beoordelen tussen Cursor en andere AI tools
- Composer mode gebruiken voor multi-file generatie
- Een weloverwogen keuze maken over welke tool wanneer te gebruiken
+- 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