158 lines
4.0 KiB
Markdown
158 lines
4.0 KiB
Markdown
# 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)
|