# 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)

```markdown
---
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)

```markdown
---
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)

```markdown
---
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.