novi-lessons/Les09-Cursor-Deep-Dive/Les09-Huiswerk.md

Les 9 Huiswerk: Bouw je eigen app met de 5 Cursor-technieken

Vak: AI-Assisted Development
Opleiding: NOVI Hogeschool Utrecht
Deadline: Voor de volgende les

---

Overzicht

In de les heb je 5 Cursor-technieken geleerd en toegepast op LinkVault. Nu is het tijd om te laten zien dat je deze technieken zelfstandig kunt toepassen. Je gaat een eigen app bouwen van scratch -- geen LinkVault!

---

Kies je app

Kies een van de volgende projecten (of bedenk er zelf een):

Optie	Omschrijving
Recepten app	Recepten opslaan met ingredienten, bereidingswijze en tags
Film tracker	Films bijhouden met rating, genre en watchlist
Notitie app	Notities met categorieen en zoekfunctie
Eigen idee	Overleg dit eerst met Tim voordat je begint!

Tech stack: Next.js 16, TypeScript, Tailwind CSS (net als in de les).

---

Checklist: Wat moet je opleveren?

Gebruik deze checklist om te controleren of je alles hebt gedaan. Elk punt is verplicht (tenzij anders aangegeven).

• 1. Cursor Rules -- .cursor/rules/ map aangemaakt met minimaal 2 rule bestanden (met YAML frontmatter!)
• 2. Plan Mode -- Plan Mode gebruikt om je app te plannen (maak een screenshot van je plan)
• 3. Agent Mode -- Agent Mode gebruikt om minimaal 2 features te bouwen
• 4. Debug Mode -- Debug Mode gebruikt voor minstens 1 bug (maak een screenshot van je debug sessie)
• 5. Tests -- Tests geschreven met de agent (minimaal 3 unit tests)
• 6. Code Review -- "Find Issues" gedraaid en eventuele issues gefixt
• 7. Semantic Commits -- Semantic commits gemaakt (feat:, fix:, docs:, etc.)
• 8. GitHub -- Alles gepusht naar een GitHub repository
• 9. (Bonus) -- Pull Request aangemaakt en door Cursor laten reviewen

---

Wat lever je in?

1. GitHub repository link -- Zorg dat de repo public is (of nodig Tim uit als collaborator)
2. Korte reflectie (200 woorden) -- Beantwoord deze vragen:
   • Welke Cursor-technieken werkten het beste voor jou?
   • Waar liep je vast?
   • Wat doe je de volgende keer anders?
3. Screenshots van:
   • Je Plan Mode plan
   • Een Debug Mode sessie
   • Je test resultaten (terminal output)

---

Tips

• Begin met Plan Mode! Laat Cursor eerst een plan maken voordat je gaat bouwen.
• Commit vroeg en vaak. Gebruik semantic commits vanaf het begin.
• Loop je vast? Gebruik Debug Mode -- beschrijf de fout en laat Cursor helpen.
• Houd je prompt requests in de gaten. Je hebt 500 fast requests per maand op het Student Plan.

---

Appendix A: Keyboard Shortcuts Reference

Alle belangrijke Cursor sneltoetsen op een rij:

Actie	Windows / Linux	macOS
Chat openen	Ctrl+L	Cmd+L
Plan Mode toggle	Shift+Tab	Shift+Tab
Inline Edit	Ctrl+K	Cmd+K
Composer	Ctrl+I	Cmd+I
Autocomplete accepteren	Tab	Tab
Terminal openen	Ctrl+`	Ctrl+`
Command Palette	Ctrl+Shift+P	Cmd+Shift+P

---

Appendix B: .cursor/rules Templates

Maak een .cursor/rules/ map in je project root en voeg daar .mdc bestanden toe. Hieronder staan templates die je kunt kopieren en aanpassen voor je eigen project.

project.mdc (algemene projectregels)

---
description: Algemene projectregels en conventies
alwaysApply: true
---

# Project Regels

## Tech Stack
- Next.js 16 met App Router
- TypeScript (strict mode)
- Tailwind CSS voor styling

## Conventies
- Gebruik functionele componenten met TypeScript interfaces
- Bestandsnamen in kebab-case
- Componenten in PascalCase
- Gebruik `async/await` in plaats van `.then()` chains

## Mappenstructuur
- `src/app/` -- App Router pagina's en layouts
- `src/components/` -- Herbruikbare componenten
- `src/lib/` -- Utility functies en types
- `src/types/` -- TypeScript type definities

components.mdc (componentregels)

---
description: Regels voor React componenten
globs:
  - "src/components/**/*.tsx"
  - "src/app/**/*.tsx"
---

# Component Regels

## Structuur
- Elke component heeft een eigen map met index.tsx
- Props worden gedefinieerd als TypeScript interface boven de component
- Gebruik `"use client"` alleen wanneer nodig (interactieve componenten)

## Styling
- Gebruik Tailwind utility classes
- Geen inline styles
- Gebruik `cn()` helper voor conditionele classes

## Toegankelijkheid
- Alle images hebben een alt attribuut
- Interactieve elementen hebben aria-labels
- Gebruik semantische HTML elementen

styles.mdc (styling regels)

---
description: Regels voor styling en Tailwind gebruik
globs:
  - "src/**/*.css"
  - "src/**/*.tsx"
---

# Styling Regels

## Tailwind CSS
- Gebruik de standaard Tailwind kleurenpalet
- Definieer custom kleuren in `tailwind.config.ts`
- Gebruik `dark:` variant voor dark mode support
- Responsive design: mobile-first (`sm:`, `md:`, `lg:`)

## CSS Bestanden
- Gebruik `globals.css` alleen voor CSS variabelen en base styles
- Geen component-specifieke CSS bestanden -- gebruik Tailwind classes

---

Appendix C: Prompt Templates

Goede prompts maken het verschil. Hieronder staan templates die je kunt gebruiken voor elke techniek.

1. Plan Mode prompt

Ik wil een [app naam] bouwen met Next.js 16, TypeScript en Tailwind CSS.

De app moet het volgende kunnen:
- [Feature 1]
- [Feature 2]
- [Feature 3]

Maak een gedetailleerd plan met:
1. Mappenstructuur
2. Benodigde componenten
3. Data model / types
4. Stappen om te bouwen (in volgorde)

Gebruik de App Router en server components waar mogelijk.

2. Agent Mode feature prompt

Bouw de [feature naam] feature voor mijn app.

Wat het moet doen:
- [Beschrijving van de feature]
- [Verwacht gedrag]
- [Edge cases]

Gebruik bestaande types uit src/types/ en componenten uit src/components/.
Volg de regels in .cursor/rules/.

3. Debug Mode prompt

Ik krijg de volgende fout:

[Plak hier de foutmelding of beschrijf het onverwachte gedrag]

Wat ik verwacht: [beschrijf het verwachte gedrag]
Wat er gebeurt: [beschrijf wat er daadwerkelijk gebeurt]

Het relevante bestand is [bestandsnaam]. Kun je de bug vinden en fixen?

4. Test writing prompt

Schrijf unit tests voor [component/functie naam].

Test minimaal:
- Het happy path (normaal gebruik)
- Edge cases (lege input, lange strings, etc.)
- Error handling

Gebruik de bestaande test setup in het project.

5. Semantic commits prompt

Maak een semantic commit message voor de huidige wijzigingen.

Gebruik dit formaat:
- feat: voor nieuwe features
- fix: voor bugfixes
- docs: voor documentatie
- style: voor opmaak (geen code wijzigingen)
- refactor: voor code refactoring
- test: voor tests
- chore: voor overige taken

Houd de message kort en beschrijvend in het Engels.

6. Code review prompt

Review de code in [bestandsnaam of map].

Let op:
- TypeScript best practices
- Performance issues
- Security problemen
- Toegankelijkheid
- Code duplicatie

Geef concrete suggesties voor verbeteringen.

---

Appendix D: Troubleshooting

Plan Mode verschijnt niet

Probleem	Oplossing
Plan Mode optie niet zichtbaar	Zorg dat je Cursor versie up-to-date is (Help > Check for Updates)
Toggle doet niets	Probeer Shift+Tab in het chat venster, niet in de editor
Plan wordt niet gegenereerd	Zorg dat je prompt duidelijk genoeg is -- geef context over wat je wilt bouwen

Agent Mode voert niets uit

Probleem	Oplossing
Agent maakt geen bestanden aan	Controleer of Agent Mode actief is (niet Ask Mode) in de chat dropdown
Agent stopt halverwege	Druk op "Continue" of geef een follow-up prompt
Agent maakt fouten	Wees specifieker in je prompt, verwijs naar bestaande bestanden

.cursor/rules worden niet opgepikt

Probleem	Oplossing
Rules hebben geen effect	Controleer dat de map .cursor/rules/ heet (niet .cursor/rule/)
YAML frontmatter fout	Controleer de --- blokken bovenaan elk .mdc bestand
Globs matchen niet	Check je glob patronen -- src/**/*.tsx matcht alles onder src/
Bestanden staan verkeerd	De .cursor/ map moet in je project root staan

Tests draaien niet

Probleem	Oplossing
npm test geeft fout	Controleer of Vitest of Jest is geinstalleerd: npm install -D vitest
Tests worden niet gevonden	Bestandsnaam moet eindigen op .test.ts of .test.tsx
Import errors in tests	Controleer je tsconfig.json paths en test configuratie
Module not found	Voer npm install uit om dependencies te installeren

Git / GitHub problemen

Probleem	Oplossing
git push geeft permission denied	Controleer of je SSH key of personal access token is ingesteld
Repo niet gevonden op GitHub	Maak eerst een repo aan op github.com en volg de instructies
Merge conflicts	Gebruik git status om conflicten te zien, los ze op in Cursor
Vergeten te committen	git add . en daarna git commit -m "feat: beschrijving"

---

Veel succes en plezier met bouwen! Kom je er niet uit, stel je vraag in het les-kanaal.