9.1 KiB
9.1 KiB
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:
# 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:
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:
# .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
# 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
-
Installeer dependencies
npm install -
Maak .env.local (zie .env.example)
-
Start development server
npm run dev
Environment Variables
Zie .env.example voor benodigde variabelen.
Deployment
Deployed op Vercel: [productie-url]
Documentatie
---
## 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
-
Maak de mappenstructuur:
- src/components/ui/
- src/components/layout/
- src/components/features/
- src/lib/
- src/hooks/
- src/types/
- docs/
-
Maak placeholder files:
- src/lib/supabase.ts
- src/lib/utils.ts
Deel 2: Configuratie (30 min)
- Maak .cursorrules met jouw conventies
- Maak .env.example
- Update .gitignore
- Maak README.md met template
Deel 3: Git Setup (25 min)
- git init
- Initial commit met goede message
- Push naar GitHub
- 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)
- Maak Supabase project (of hergebruik van Les 9)
- Configureer src/lib/supabase.ts
- Voeg env vars toe aan .env.local
- 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