rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: implement lessons feedback

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-30 11:56:39 +01:00
parent 04f32babd3
commit 1e324e2f0e
18 changed files with 3828 additions and 3199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

521
Samenvattingen/Les14-Samenvatting.md
View File

@@ -1,211 +1,438 @@
# Les 14: Debugging & Code Review met AI
> 📋 **Lesmateriaal nog niet uitgewerkt**
>
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
> - Les14-Slide-Overzicht.md
> - Les14-Lesplan.md
> - Les14-Bijlage-A-Lesopdracht.md
> - Les14-Bijlage-B-Huiswerkopdracht.md
# Les 14: Project Setup & Repository Structure
---
## Hoofdstuk
**Hoofdstuk 3: Advanced** (Les 10-18)
**Deel 4: Advanced AI Features** (Les 13-18)
## Beschrijving
Leer hoe je AI effectief inzet voor debugging en code review. Begrijp foutmeldingen, los problemen op, en verbeter je code kwaliteit.
Leer professionele project setup en repository structuur. Begrijp hoe een goed georganiseerd project AI tools effectiever maakt en samenwerking vergemakkelijkt.
---
## Te Behandelen
### Waarom AI voor Debugging?
- AI begrijpt error messages vaak beter dan Google
- Kan context van jouw code meenemen
- Suggereert oplossingen specifiek voor jouw situatie
- Leert je patterns herkennen
### Groepsdiscussie (15 min)
Bespreek klassikaal de AI assistant reflecties uit Les 13 - welke instructies werkten goed en welke niet?
### Error Messages Begrijpen
### Waarom Project Structuur Belangrijk Is
**Typische JavaScript/React errors:**
- `TypeError: Cannot read properties of undefined`
- `ReferenceError: x is not defined`
- `SyntaxError: Unexpected token`
- `Hydration error` (Next.js specifiek)
**Voor jezelf:**
- Sneller code terugvinden
- Makkelijker onderhouden
- Minder bugs door consistentie
**Hoe AI vragen:**
**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:**
```
Ik krijg deze error:
[plak error message]
In deze code:
[plak relevante code]
Wat gaat er mis en hoe los ik het op?
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
```
### Debugging Workflow met AI
---
**Stap 1: Isoleer het probleem**
- Waar treedt de error op?
- Wat was de laatste wijziging?
- Kan je het reproduceren?
### Component Organisatie
**Stap 2: Verzamel context**
- Error message (volledig!)
- Relevante code
- Wat je verwacht vs wat er gebeurt
**UI Components (src/components/ui/):**
- Herbruikbare, generieke components
- Geen business logic
- Props-driven
- Voorbeelden: Button, Input, Modal, Card
**Stap 3: Vraag AI**
- Wees specifiek
- Geef context
- Vraag om uitleg, niet alleen fix
**Layout Components (src/components/layout/):**
- Structurele components
- Meestal één per type
- Voorbeelden: Header, Footer, Sidebar, Navigation
**Stap 4: Begrijp de oplossing**
- Vraag door als je het niet snapt
- Leer het pattern voor volgende keer
**Feature Components (src/components/features/):**
- Business logic bevattend
- Specifiek voor één feature
- Groepeer per feature/domein
### Console.log Debugging
- Strategisch plaatsen
- Variabele waarden checken
- Flow van code volgen
- AI kan helpen met waar te loggen
---
### Browser DevTools Basics
- Console tab: errors en logs
- Network tab: API calls checken
- Elements tab: HTML/CSS inspecteren
- React DevTools: component state bekijken
### File Naming Conventions
### Code Review met AI
**Wat kan AI reviewen:**
- Code kwaliteit en leesbaarheid
- Potentiële bugs
- Performance issues
- Security problemen
- Best practices
**Goede review prompt:**
**Components:**
```
Review deze code op:
1. Bugs of edge cases die ik mis
2. Performance verbeteringen
3. Leesbaarheid
4. Best practices voor React/Next.js
[plak code]
✅ Button.tsx # PascalCase
✅ UserProfile.tsx
❌ button.tsx
❌ user-profile.tsx
```
### Veelvoorkomende Issues die AI Vindt
- Missing error handling
- Memory leaks (useEffect cleanup)
- Onnodig re-renders
- Hardcoded values
- Missing loading/error states
- Accessibility issues
**Hooks:**
```
✅ useAuth.ts # camelCase met 'use' prefix
✅ useTodos.ts
❌ UseAuth.ts
❌ auth-hook.ts
```
### Refactoring met AI
- "Hoe kan ik deze code simplificeren?"
- "Extract dit naar een custom hook"
- "Maak dit component meer herbruikbaar"
**Utilities:**
```
✅ formatDate.ts # camelCase
✅ utils.ts
✅ constants.ts
```
### Wanneer NIET AI Vertrouwen
- Als je de oplossing niet begrijpt
- Bij security-gerelateerde code (dubbel check!)
- Bij verouderde info (check versie docs)
**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
- Browser DevTools
- React DevTools
- Console/Terminal
- Git
- GitHub
---
## Lesopdracht (2 uur)
### Debugging Challenge
### Setup Je Eindproject
Je krijgt een project met opzettelijke bugs. Los ze op met AI hulp.
**Deel 1: Project Structuur (45 min)**
**Deel 1: Setup (10 min)**
- Clone het buggy project (wordt gedeeld)
- Run `npm install` en `npm run dev`
- Zie alle errors!
1. Maak nieuw Next.js project:
```bash
npx create-next-app@latest mijn-eindproject --typescript --tailwind --app
```
**Deel 2: Bug Hunting (1 uur 20 min)**
2. Maak de mappenstructuur:
- src/components/ui/
- src/components/layout/
- src/components/features/
- src/lib/
- src/hooks/
- src/types/
- docs/
Los de volgende bugs op (met AI hulp):
3. Maak placeholder files:
- src/lib/supabase.ts
- src/lib/utils.ts
| Bug | Symptoom |
|-----|----------|
| 1 | App crashed bij opstarten |
| 2 | Data wordt niet geladen |
| 3 | Form submit werkt niet |
| 4 | Styling is broken op mobile |
| 5 | Infinite loop bij useEffect |
| 6 | Button click doet niets |
**Deel 2: Configuratie (30 min)**
**Per bug:**
- Identificeer de error message
- Vraag AI om hulp met context
- Implementeer de fix
- Documenteer wat je geleerd hebt
1. Maak .cursorrules met jouw conventies
2. Maak .env.example
3. Update .gitignore
4. Maak README.md met template
**Deel 3: Documentatie (30 min)**
- Voeg toe aan je `PROMPT-LOG.md`:
- De prompts die je gebruikte
- Wat werkte wel/niet
**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
- Alle 6 bugs gefixed
- PROMPT-LOG.md bijgewerkt
- Korte notities per bug: wat was het probleem, hoe opgelost
- GitHub repository met correcte structuur
- .cursorrules file
- README.md
- docs/ folder met templates
---
## Huiswerk (2 uur)
### Code Review Je Eigen Project
### Bouw Project Foundation
**Deel 1: Self-Review met AI (1 uur)**
- Kies 3 belangrijke files uit je eindproject
- Laat AI ze reviewen met een goede prompt
- Documenteer bevindingen in `AI-DECISIONS.md`
**Deel 1: Base Components (1 uur)**
**Per file noteer:**
- Welke issues AI vond
- Welke je hebt gefixed
- Welke je bewust negeert (en waarom)
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
**Deel 2: Refactoring (45 min)**
- Kies 1 component dat te complex is
- Vraag AI om refactoring suggesties
- Implementeer de verbeteringen
- Vergelijk before/after
Requirements:
- TypeScript interfaces voor props
- Tailwind styling
- Responsive design
- Volg je .cursorrules
**Deel 3: Debugging Checklist (15 min)**
- Maak persoonlijke debugging checklist
- Wat check je eerst bij errors?
- Welke prompts werken goed voor jou?
**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
- AI-DECISIONS.md met review bevindingen
- 1 gerefactored component
- Persoonlijke debugging checklist
- Werkende UI components
- Supabase connectie
- 1 basic feature
- Alle commits met goede messages
---
## Leerdoelen
Na deze les kan de student:
- Error messages lezen en begrijpen
- Effectieve debugging prompts schrijven voor AI
- Browser DevTools gebruiken voor debugging
- Code laten reviewen door AI
- Feedback van AI kritisch evalueren
- Refactoring uitvoeren met AI suggesties
- Documenteren wat geleerd is van debugging sessies
- 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