# Les 12: Project Setup & AI Config (.cursorrules, claude.md)

---

## Hoofdstuk
**Deel 3: Full-Stack Development** (Les 9-12)

## Beschrijving
Professional project setup en AI configuration voor optimal developer experience. Setup .cursorrules, claude.md, docs/ folder, folder structure optimalisatie en git best practices.

---

## Te Behandelen (~45 min)

- Waarom goede project structuur cruciaal is voor AI tools
- De ideale folder structuur voor Next.js + AI collaboration
- .cursorrules file: syntax, best practices, examples
- claude.md: project documentation voor Claude
- docs/ folder organization: AI-DECISIONS.md, ARCHITECTURE.md, PROMPT-LOG.md
- .env.local vs .env.example configuratie
- .gitignore en .cursorignore voor AI tools
- .git best practices: meaningful commits, proper history
- README setup met project info
- TypeScript configuration optimization

---

## Tools
- Cursor
- Git
- GitHub

---

## Lesopdracht (2 uur, klassikaal)

### Setup Je Eindproject Proper

**Groepsdiscussie (15 min):**
Bespreek klassikaal de architecture planning uit Les 11 - welke design patterns voelen goed voor jullie eindproject?

**Deel 1: Folder Structure (30 min)**

Zorg dat je project er zo uitziet:
```
project/
├── src/
│   ├── app/
│   ├── components/
│   │   ├── ui/
│   │   ├── layout/
│   │   └── features/
│   ├── lib/
│   ├── hooks/
│   └── types/
├── docs/
├── public/
├── .cursorrules
├── .env.local
├── .env.example
├── .gitignore
├── README.md
└── claude.md
```

**Deel 2: .cursorrules Writing (30 min)**

Maak comprehensive `.cursorrules`:
1. Project naam + beschrijving
2. Tech stack (Next.js 14, TypeScript, Tailwind, Supabase)
3. File structure conventions
4. Code conventions (naming, styling, error handling)
5. TypeScript strict rules
6. DO's en DON'Ts specifiek voor je project

Example snippets:
- "Named exports only, no default exports"
- "All components are functional with TypeScript"
- "Use Tailwind classes, no inline styles"

**Deel 3: Documentation Files (30 min)**

Maak in docs/ folder:
- `PROJECT-BRIEF.md` - Project overview, features
- `ARCHITECTURE.md` - Component structure, data flow
- `AI-DECISIONS.md` - Start document met AI choices
- `PROMPT-LOG.md` - Template voor prompts die je gebruikt

**Deel 4: Git Setup (20 min)**

1. Review `.gitignore` (include `.env.local`)
2. Make initial commit: "Initial project setup"
3. Push naar GitHub
4. Verify: `.env.local` NOT in git history

### Deliverable
- Complete folder structure
- Comprehensive .cursorrules file
- Documentation files in docs/
- GitHub repo met clean initial commit
- README.md with project info

---

## Huiswerk (2 uur)

### Optimize Configuration & Start Building

**Deel 1: tsconfig.json Optimization (30 min)**

1. Enable strict mode in TypeScript
2. Configure path aliases for cleaner imports:
   ```json
   "@/*": ["./src/*"]
   ```
3. Set proper include/exclude

**Deel 2: Tailwind & Component Setup (45 min)**

1. Customize `tailwind.config.ts` with your colors
2. Setup `globals.css` properly
3. Create 5 base UI components:
   - Button.tsx
   - Input.tsx
   - Card.tsx
   - Layout.tsx
   - Navigation.tsx

**Deel 3: Lib Setup (30 min)**

Create essential lib files:
- `lib/supabase.ts` - Initialize Supabase client
- `lib/utils.ts` - Utility functions
- `lib/constants.ts` - App constants
- `types/database.ts` - Database types

### Deliverable
- Optimized TypeScript config with path aliases
- Base UI components created
- Lib utilities setup
- Documentation updated with decisions
- GitHub commits with setup progress

---

## Leerdoelen

Na deze les kan de student:
- Een professional project structure opzetten
- Een effectieve .cursorrules file schrijven
- claude.md projectdocumentatie maken
- AI-DECISIONS.md beginnen en onderhouden
- Git best practices volgen
- TypeScript strict mode configureren
- Path aliases voor cleaner imports opzetten
- Base components en utilities creëren
- Voorbereiding maken op Deel 4 (Advanced AI)