# 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

```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

# 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:**
```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
- 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