novi-lessons/Samenvattingen/Les10-Samenvatting.md

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:

# 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