445 lines
9.1 KiB
Markdown
445 lines
9.1 KiB
Markdown
# 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
|
|
|
|
---
|
|
|
|
## 💡 Eindopdracht
|
|
|
|
Dit is een goed moment om te starten met **deelopdracht 1** van je eindopdracht. De setup die je vandaag maakt kun je direct gebruiken voor je eindproject. Bespreek je projectidee met de docent als je feedback wilt.
|
|
|
|
---
|
|
|
|
## 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
|