449 lines
10 KiB
Markdown
449 lines
10 KiB
Markdown
# 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
|