novi-lessons/Samenvattingen/Les11-Samenvatting.md

Les 11: Project Setup & Repository Structure

---

Hoofdstuk

Hoofdstuk 3: Advanced (Les 10-18)

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.

---

Te Behandelen

Waarom Goede Structuur Belangrijk Is

Voor AI:

• AI begrijpt beter wat je project doet
• Betere code suggestions
• Minder hallucinaties

Voor jezelf:

• Makkelijker navigeren
• Sneller features bouwen
• Betere samenwerking

---

Eindproject Aanmaken

# 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

# 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

cd ai-recipe-generator

---

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:

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:

# 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

# 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

# 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

# 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):

# 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):

# 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

# 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

# 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
• Git & GitHub
• Supabase

---

Lesopdracht (2 uur)

Richt je Eindproject Repository In

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

Deel 2: Folder Structuur (20 min)

• Maak alle folders aan volgens de structuur
• Maak alle bestanden aan
• Test: folder structuur is compleet

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 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 5: Git (20 min)

• Initialiseer Git
• Maak GitHub repository
• Push alles

Deliverable

• GitHub repository URL
• Volledig ingevulde PROJECT-BRIEF.md
• Werkende .cursorrules file
• Screenshot van Cursor die je regels volgt

---

Huiswerk (2 uur)

Verfijn Setup & Start Bouwen

Deel 1: Extra .cursorrules (30 min)

• Maak components.mdc met component conventies
• Maak api.mdc met API route conventies
• Test beide in Cursor

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)

Gebruik Cursor met je .cursorrules! Log effectieve prompts in PROMPT-LOG.md

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

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:

• 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