# Les 14: Project Setup & Repository Structure

---

## Hoofdstuk
**Deel 4: Advanced AI Features** (Les 13-18)

## Beschrijving
Leer professionele project setup en repository structuur. Begrijp hoe een goed georganiseerd project AI tools effectiever maakt en samenwerking vergemakkelijkt.

---

## Te Behandelen

### Groepsdiscussie (15 min)
Bespreek klassikaal de AI assistant reflecties uit Les 13 - welke instructies werkten goed en welke niet?

### Waarom Project Structuur Belangrijk Is

**Voor jezelf:**
- Sneller code terugvinden
- Makkelijker onderhouden
- Minder bugs door consistentie

**Voor AI tools:**
- Betere context understanding
- Consistentere code generation
- Cursor/Claude begrijpt je project beter

**Voor samenwerking:**
- Anderen begrijpen je code sneller
- Standaard conventies = minder discussie
- Onboarding nieuwe developers eenvoudiger

---

### Next.js 14 Project Structuur

**Aanbevolen structuur:**
```
project-root/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── (auth)/            # Route group voor auth pagina's
│   │   │   ├── login/
│   │   │   └── register/
│   │   ├── api/               # API routes
│   │   │   └── chat/
│   │   ├── dashboard/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   │
│   ├── components/            # React components
│   │   ├── ui/               # Basis UI components
│   │   │   ├── Button.tsx
│   │   │   ├── Input.tsx
│   │   │   └── Card.tsx
│   │   ├── layout/           # Layout components
│   │   │   ├── Header.tsx
│   │   │   ├── Footer.tsx
│   │   │   └── Sidebar.tsx
│   │   └── features/         # Feature-specifieke components
│   │       ├── auth/
│   │       └── dashboard/
│   │
│   ├── lib/                   # Utilities en configuraties
│   │   ├── supabase.ts       # Supabase client
│   │   ├── utils.ts          # Helper functies
│   │   └── constants.ts      # App constanten
│   │
│   ├── hooks/                 # Custom React hooks
│   │   ├── useAuth.ts
│   │   └── useTodos.ts
│   │
│   └── types/                 # TypeScript types
│       ├── database.ts
│       └── api.ts
│
├── public/                    # Static assets
│   ├── images/
│   └── favicon.ico
│
├── docs/                      # Documentatie
│   ├── PROMPT-LOG.md
│   ├── AI-DECISIONS.md
│   └── PROJECT-BRIEF.md
│
├── .cursorrules              # Cursor AI configuratie
├── .env.local                # Environment variables (niet in git!)
├── .env.example              # Template voor env vars
├── .gitignore
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── README.md
```

---

### Component Organisatie

**UI Components (src/components/ui/):**
- Herbruikbare, generieke components
- Geen business logic
- Props-driven
- Voorbeelden: Button, Input, Modal, Card

**Layout Components (src/components/layout/):**
- Structurele components
- Meestal één per type
- Voorbeelden: Header, Footer, Sidebar, Navigation

**Feature Components (src/components/features/):**
- Business logic bevattend
- Specifiek voor één feature
- Groepeer per feature/domein

---

### File Naming Conventions

**Components:**
```
✅ Button.tsx         # PascalCase
✅ UserProfile.tsx
❌ button.tsx
❌ user-profile.tsx
```

**Hooks:**
```
✅ useAuth.ts         # camelCase met 'use' prefix
✅ useTodos.ts
❌ UseAuth.ts
❌ auth-hook.ts
```

**Utilities:**
```
✅ formatDate.ts      # camelCase
✅ utils.ts
✅ constants.ts
```

**Types:**
```
✅ database.ts        # camelCase
✅ User.types.ts      # optioneel: .types suffix
```

---

### .cursorrules Setup

**Maak .cursorrules in project root:**
```markdown
# Project: [Jouw Project Naam]

## Tech Stack
- Next.js 14 met App Router
- TypeScript (strict mode)
- Tailwind CSS
- Supabase
- React Query

## File Structure
- Components in src/components/
- UI components in src/components/ui/
- API routes in src/app/api/

## Code Conventions
- Functional components only
- Named exports (geen default exports)
- Props interface boven component
- Nederlandse comments

## Naming
- Components: PascalCase (Button.tsx)
- Hooks: camelCase met use prefix (useAuth.ts)
- Utils: camelCase (formatDate.ts)

## Styling
- Tailwind CSS classes
- Geen inline styles
- Responsive mobile-first

## TypeScript
- Strict mode
- Geen any types
- Interfaces voor props
- Types voor data

## Don'ts
- Geen console.log in productie
- Geen hardcoded strings
- Geen unused imports
```

---

### Git Best Practices

**Commit Message Format:**
```
type: korte beschrijving

Types:
- feat: nieuwe feature
- fix: bug fix
- refactor: code verbetering
- docs: documentatie
- style: formatting
- test: tests toevoegen
```

**Voorbeelden:**
```bash
git commit -m "feat: add user authentication with Supabase"
git commit -m "fix: resolve hydration error in TodoList"
git commit -m "docs: update README with setup instructions"
```

**.gitignore essentials:**
```
# Dependencies
node_modules/

# Environment
.env*.local

# Next.js
.next/
out/

# IDE
.idea/
.vscode/

# OS
.DS_Store
```

---

### Environment Variables

**Structuur:**
```bash
# .env.local (NOOIT committen!)
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
OPENAI_API_KEY=sk-...

# .env.example (WEL committen)
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
OPENAI_API_KEY=your-openai-key
```

**Regels:**
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
- Zonder prefix = alleen server-side
- Nooit secrets in `NEXT_PUBLIC_` vars

---

### README.md Template

```markdown
# Project Naam

Korte beschrijving van je project.

## Features
- Feature 1
- Feature 2
- Feature 3

## Tech Stack
- Next.js 14
- TypeScript
- Tailwind CSS
- Supabase
- Vercel AI SDK

## Getting Started

### Prerequisites
- Node.js 18+
- npm of yarn
- Supabase account

### Installation

1. Clone de repository
   ```bash
   git clone https://github.com/username/project.git
   cd project
   ```

2. Installeer dependencies
   ```bash
   npm install
   ```

3. Maak .env.local (zie .env.example)

4. Start development server
   ```bash
   npm run dev
   ```

## Environment Variables
Zie `.env.example` voor benodigde variabelen.

## Deployment
Deployed op Vercel: [productie-url]

## Documentatie
- [PROMPT-LOG.md](docs/PROMPT-LOG.md)
- [AI-DECISIONS.md](docs/AI-DECISIONS.md)
```

---

## Tools
- Cursor
- Git
- GitHub

---

## Lesopdracht (2 uur)

### Setup Je Eindproject

**Deel 1: Project Structuur (45 min)**

1. Maak nieuw Next.js project:
   ```bash
   npx create-next-app@latest mijn-eindproject --typescript --tailwind --app
   ```

2. Maak de mappenstructuur:
   - src/components/ui/
   - src/components/layout/
   - src/components/features/
   - src/lib/
   - src/hooks/
   - src/types/
   - docs/

3. Maak placeholder files:
   - src/lib/supabase.ts
   - src/lib/utils.ts

**Deel 2: Configuratie (30 min)**

1. Maak .cursorrules met jouw conventies
2. Maak .env.example
3. Update .gitignore
4. Maak README.md met template

**Deel 3: Git Setup (25 min)**

1. git init
2. Initial commit met goede message
3. Push naar GitHub
4. Check: .env.local NIET gecommit?

**Deel 4: Documentatie Start (20 min)**

Maak in docs/:
- PROJECT-BRIEF.md (beschrijving eindproject)
- PROMPT-LOG.md (leeg template)
- AI-DECISIONS.md (leeg template)

### Deliverable
- GitHub repository met correcte structuur
- .cursorrules file
- README.md
- docs/ folder met templates

---

## Huiswerk (2 uur)

### Bouw Project Foundation

**Deel 1: Base Components (1 uur)**

Maak basis UI components met AI hulp:
- src/components/ui/Button.tsx
- src/components/ui/Input.tsx
- src/components/ui/Card.tsx
- src/components/layout/Header.tsx
- src/components/layout/Footer.tsx

Requirements:
- TypeScript interfaces voor props
- Tailwind styling
- Responsive design
- Volg je .cursorrules

**Deel 2: Supabase Setup (30 min)**

1. Maak Supabase project (of hergebruik van Les 9)
2. Configureer src/lib/supabase.ts
3. Voeg env vars toe aan .env.local
4. Test connectie

**Deel 3: Eerste Feature (30 min)**

Kies je eindproject en implementeer 1 basisfeature:
- Recipe Generator: ingredient input form
- Budget Buddy: expense entry form
- Travel Planner: destination search

Commit en push!

### Deliverable
- Werkende UI components
- Supabase connectie
- 1 basic feature
- Alle commits met goede messages

---

## Leerdoelen
Na deze les kan de student:
- Een professionele project structuur opzetten
- File naming conventions toepassen
- Een effectieve .cursorrules file schrijven
- Git best practices volgen
- Environment variables correct beheren
- Een README.md schrijven
- Project documentatie structureren