# Les 10: Project Setup & Repository Structure

> 📋 **Lesmateriaal nog niet uitgewerkt**
>
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
> - Les10-Slide-Overzicht.md
> - Les10-Lesplan.md
> - Les10-Bijlage-A-Lesopdracht.md
> - Les10-Bijlage-B-Huiswerkopdracht.md

---

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

## Beschrijving
Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.

---

## Te Behandelen

### Waarom Project Structure Belangrijk Is
- AI tools werken beter met duidelijke structuur
- Makkelijker samenwerken
- Sneller nieuwe features toevoegen
- Professionele uitstraling

### Ideale Folder Structuur

```
project/
├── .cursor/
│   └── rules/                 # Cursor instructies
│       ├── general.mdc        # Algemene project regels
│       └── components.mdc     # Component-specifieke regels
├── docs/
│   ├── PROMPT-LOG.md          # Belangrijke AI prompts
│   ├── AI-DECISIONS.md        # Architectuur beslissingen
│   └── PROJECT-BRIEF.md       # Project beschrijving
├── src/
│   ├── app/                   # Next.js App Router
│   ├── components/
│   │   ├── ui/                # Basis UI components
│   │   └── features/          # Feature-specifieke components
│   ├── lib/                   # Utilities en helpers
│   └── types/                 # TypeScript types
├── .env.local                 # Environment variables
├── .env.example               # Template voor env vars
├── .gitignore
└── README.md
```

### .cursorrules Files

**Wat zijn .cursorrules?**
- Markdown files met instructies voor Cursor
- Project-specifieke regels en conventies
- Worden automatisch meegenomen in context

**Voorbeeld `general.mdc`:**
```markdown
# Project Rules

## Tech Stack
- Next.js 14 met App Router
- TypeScript (strict mode)
- Tailwind CSS voor styling
- Supabase voor backend

## Code Conventies
- Gebruik functionele components
- Prefer named exports
- Destructure props
- Gebruik async/await (geen .then())

## Styling
- Tailwind classes, geen inline styles
- Mobile-first approach
- Gebruik design tokens waar mogelijk
```

### docs/ Folder

**PROMPT-LOG.md**
- Log van belangrijke prompts die tot goede code leidden
- Minimaal 10 prompts documenteren
- Format: doel → prompt → resultaat

**AI-DECISIONS.md**
- Architectuur beslissingen gemaakt met AI hulp
- Waarom bepaalde keuzes gemaakt
- Trade-offs en alternatieven

**PROJECT-BRIEF.md**
- Wat doet het project?
- Wie is de doelgroep?
- Welke features zijn er?

### Environment Variables

**.env.example** (commit naar Git):
```
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
OPENAI_API_KEY=your-openai-key
```

**.env.local** (NOOIT committen):
```
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
OPENAI_API_KEY=sk-...
```

### README.md Best Practices
- Project titel en korte beschrijving
- Screenshots of demo GIF
- Installatie instructies
- Environment variables uitleg
- Beschikbare scripts (`npm run dev`, etc.)

### Git Best Practices
- Kleine, focused commits
- Duidelijke commit messages
- Feature branches
- `.gitignore` correct ingesteld

---

## Tools
- Cursor
- Git & GitHub
- Next.js
- VS Code / WebStorm

---

## Lesopdracht (2 uur)

### Richt je Eindproject Repository In

**Deel 1: Repository Setup (30 min)**
- Maak nieuwe GitHub repository
- Clone lokaal
- Run `npx create-next-app@latest` met TypeScript + Tailwind
- Push initial commit

**Deel 2: Folder Structuur (30 min)**
- Maak `docs/` folder met:
  - `PROJECT-BRIEF.md` (beschrijf je eindproject idee)
  - `PROMPT-LOG.md` (lege template)
  - `AI-DECISIONS.md` (lege template)
- Maak `.cursor/rules/` folder met:
  - `general.mdc` (project regels)
- Reorganiseer `src/` folder

**Deel 3: Environment Setup (20 min)**
- Maak `.env.example` met alle benodigde variabelen
- Maak `.env.local` met echte waarden
- Controleer `.gitignore` (env files moeten erin staan!)

**Deel 4: README & Git (40 min)**
- Schrijf complete README.md
- Maak eerste feature branch
- Commit alle changes met goede messages
- Push en maak PR (voor jezelf)

### Deliverable
- GitHub repository met complete structuur
- Alle docs files aanwezig
- .cursorrules file geschreven
- README compleet

---

## Huiswerk (2 uur)

### Verfijn je Project Setup

**Deel 1: .cursorrules Uitbreiden (45 min)**
- Voeg `components.mdc` toe met component conventies
- Voeg `api.mdc` toe met API/Supabase regels
- Test of Cursor de regels oppikt

**Deel 2: Documentatie (45 min)**
- Vul `PROJECT-BRIEF.md` volledig in:
  - Projectnaam en tagline
  - Probleem dat je oplost
  - Target audience
  - Core features (3-5)
  - Nice-to-have features
  - Tech stack keuzes
- Start `AI-DECISIONS.md` met eerste beslissing

**Deel 3: Basis Components (30 min)**
- Maak `src/components/ui/` met basic components:
  - Button.tsx
  - Card.tsx
  - Input.tsx
- Gebruik Cursor met je nieuwe .cursorrules

### Deliverable
- Uitgebreide .cursorrules (minimaal 2 files)
- Volledig ingevulde PROJECT-BRIEF.md
- Basis UI components gemaakt met Cursor
- Screenshot van Cursor die je rules gebruikt

---

## Leerdoelen
Na deze les kan de student:
- Een professionele project structuur opzetten
- .cursorrules files schrijven voor project-specifieke AI instructies
- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF)
- Environment variables correct beheren
- Git best practices toepassen
- Een README schrijven die anderen kunnen volgen