# Les 3: Cursor - AI-Powered Code Editor
## Slide-Overzicht (180 minuten / 3 uur)

---

## BLOK 1: WELKOM & MEDEDELING
### *Duur: 10 minuten | Slides 1-4*

---

### **Slide 1: Titelslide**
**Les 3: Cursor - AI-Powered Code Editor**

```
╔════════════════════════════════════════╗
║   LES 3: CURSOR                        ║
║   AI-Powered Code Editor               ║
║                                        ║
║   Tim                                  ║
║   NOVI Hogeschool                      ║
╚════════════════════════════════════════╝
```

**Timing:** 2 minuten

---

### **Slide 2: Planning Vandaag**

| Blok | Onderdeel | Duur |
|------|-----------|------|
| **Blok 1** | Welkom & Mededeling | 10 min |
| **Blok 2** | Installatie & Setup | 20 min |
| **Blok 3** | Cursor Features | 15 min |
| **Blok 4** | Skills, Rules & Requests | 15 min |
| **Blok 5** | Live Demo: Nieuw Project | 15 min |
| **PAUZE** | | 15 min |
| **Blok 6** | Hands-On Opdracht | 75 min |
| **Blok 7** | Afsluiting | 15 min |

**Timing:** 2 minuten

**Doelen van vandaag:**
- Cursor installeren en setup afronden
- Cursor Skills installeren (Next.js, React, Tailwind)
- .cursorrules genereren met AI Chat
- Nieuw project opzetten met npx create-next-app
- Een component bouwen volgens de regels

---

### **Slide 3: Mededeling Huiswerk & Les 2 Terugblik**

**Wat is er gebeurd in Les 2?**
- Jullie hebben OpenCode gebruikt voor AI-assisted development
- OpenCode had **token limieten** op free plan → snel op
- Terminal problemen: EACCES, permission denied, SSH issues

**Waarom schakelen we over naar Cursor?**
- ✅ Cursor is **ontworpen** voor developers
- ✅ Gratis **Student plan** beschikbaar (500 fast requests/maand)
- ✅ VS Code fork → **terminal ingebouwd** (geen losse terminal nodig)
- ✅ Leest je hele codebase als context
- ✅ Installeerbare **Skills** voor frameworks (Next.js, React, Tailwind)

**Timing:** 3 minuten

---

### **Slide 4: Wat is Cursor?**

```
╔════════════════════════════════════════╗
║  CURSOR = VS CODE + AI                 ║
║                                        ║
║  • Gebaseerd op VS Code               ║
║  • Ingebouwde AI assistent             ║
║  • Gratis voor studenten (Pro plan)    ║
║  • 500 fast requests/maand             ║
║                                        ║
║  Models beschikbaar:                   ║
║  - GPT-4o (standaard)                 ║
║  - Claude 3.5 Sonnet                  ║
║  - Claude 3.5 Haiku (sneller)         ║
╚════════════════════════════════════════╝
```

**Key Features:**
1. **Chat Panel (Ctrl+L)** - Vraag AI over je code
2. **Inline Edit (Ctrl+K)** - Selecteer code → AI past aan
3. **Composer (Ctrl+I)** - Multi-file edits voor grotere taken
4. **Tab Completion** - AI voorspelt je volgende lijn code
5. **@ Mentions** - Context geven: @file, @folder, @web, @docs

**Pricing (voor ons):**
- **Hobby account** (gratis) = Beperkte requests, langzamer
- **Student Pro** (gratis via cursor.com/students) = 500 fast requests/maand
- ⚠️ Start vandaag met Hobby, upgrade naar Student later

**Timing:** 3 minuten

---

## BLOK 2: INSTALLATIE & SETUP
### *Duur: 20 minuten | Slides 5-8*

---

### **Slide 5: Download Cursor**

**Stap 1: Ga naar cursor.com**

```
Kies je besturingssysteem:
├── 🍎 macOS (Intel / Apple Silicon)
├── 🪟 Windows (Installer)
└── 🐧 Linux (Snap / Appimage / Deb)
```

**Installatie:**
- **macOS:** Open `.dmg`, sleep Cursor naar Applications folder
- **Windows:** Run installer, default locations
- **Linux:** Snap of direct executable

**Controle:**
Na installatie, start Cursor → je ziet welcome screen

**Timing:** 3 minuten

---

### **Slide 6: Account Aanmaken & Student Plan**

**Stap 1: Start Cursor → Sign Up**

**Stap 2: Kies HOBBY account**
```
┌─────────────────────────────────────────┐
│ ACCOUNT OPTIONS                         │
├─────────────────────────────────────────┤
│ ✓ Hobby (gratis, basic features)       │
│   → Start hier!                         │
│                                         │
│ ○ Student (gratis, 500 fast requests)  │
│   → Upgrade later via cursor.com/students│
│                                         │
│ ○ Pro (betaald)                        │
│   → Niet nodig voor ons                 │
└─────────────────────────────────────────┘
```

**Stap 3: E-mail & wachtwoord → verifieer e-mail**

**Stap 4: UPGRADE NAAR STUDENT (vandaag of morgen)**
1. Ga naar https://cursor.com/students
2. Log in met je account
3. Voer NOVI e-mail in
4. Volg verification process

**⚠️ CHECKPOINT: Je ziet Cursor welcome screen**

**Timing:** 5 minuten

---

### **Slide 7: Interface Tour - De Onderdelen**

```
╔════════════════════════════════════════════════════════════╗
║                      CURSOR INTERFACE                      ║
╠════════════════════════════════════════════════════════════╣
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ ACTIVITY BAR                                           │ ║
║ │ (Links: Explorer, Search, Source Control, Extensions) │ ║
║ └────────────────────────────────────────────────────────┘ ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ SIDEBAR                     │ EDITOR        │ CHAT     │ ║
║ │ (Files/Folders)             │ (Code hier)   │ (Ctrl+L)│ ║
║ │                             │               │         │ ║
║ │ • project/                  │ import...     │ ╭─────╮ │ ║
║ │   ├── src/                  │               │ │ Chat│ ║
║ │   ├── public/               │ function...   │ ╰─────╯ ║
║ │   └── package.json          │               │         │ ║
║ └────────────────────────────────────────────────────────┘ ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ TERMINAL (Ctrl+`)                                      │ ║
║ │ $ npm run dev                                          │ ║
║ └────────────────────────────────────────────────────────┘ ║
╚════════════════════════════════════════════════════════════╝
```

**Belangrijkste onderdelen:**

| Onderdeel | Functie | Shortcut |
|-----------|---------|----------|
| **Sidebar** | Bekijk bestanden/folders | Ctrl+B (toggle) |
| **Editor** | Schrijf en edit je code | Midden |
| **Terminal** | Run commands (npm, git, etc.) | Ctrl+` |
| **Chat Panel** | Vraag AI over je code | Ctrl+L |
| **Command Palette** | Commands zoeken | Ctrl+Shift+P |

**Timing:** 4 minuten

---

### **Slide 8: Terminal Setup Check - SAMEN DOEN**

**Stap 1: Open Terminal** → Druk `Ctrl+`` (backtick)

**Stap 2: Run deze commands (1 per 1)**

```bash
# Check Node.js versie
node -v
# Verwacht: v20.x.x of hoger ✓

# Check Git versie
git --version
# Verwacht: git version 2.x.x ✓

# Check npm
npm -v
# Verwacht: 10.x.x ✓

# Check npx (nodig voor create-next-app!)
npx -v
# Verwacht: 10.x.x ✓ (zelfde versie als npm)
```

**Veel voorkomende errors & fixes:**

```
ERROR: "command not found: node"
→ Node.js niet geïnstalleerd
→ FIX: Download van nodejs.org (v20+) of gebruik nvm

ERROR: "command not found: npx"
→ Oude Node versie of npm niet goed geïnstalleerd
→ FIX: npm install -g npx  OF  nvm install 20

ERROR: "EACCES: permission denied"
→ FIX: chmod +x [bestand] of gebruik nvm
```

**⚠️ CHECKPOINT: node, git, npm EN npx werken allemaal**

**Timing:** 8 minuten

---

## BLOK 3: CURSOR FEATURES
### *Duur: 15 minuten | Slides 9-13*

---

### **Slide 9: Chat Panel (Ctrl+L)**

**Wat is Chat Panel?**
Vraag AI vragen over je code. AI kan je hele codebase zien.

**Hoe gebruik je het:**
```
1. Druk Ctrl+L
2. Chat panel opent rechts
3. Type je vraag
4. AI analyseert en antwoordt

VOORBEELD VRAGEN:
├─ "Wat doet deze functie?"
├─ "Hoe kan ik dit component beter maken?"
├─ "Genereer een .cursorrules voor dit project"
├─ "Leg uit wat package.json doet"
└─ "Wat zijn alle routes in dit project?"
```

**Pro tip:** Wees specifiek in je vragen → bespaart requests!

**Timing:** 3 minuten

---

### **Slide 10: Inline Edit (Ctrl+K)**

**Wat is Inline Edit?**
Selecteer code → geef AI instructie → AI past aan.

**Hoe gebruik je het:**

```
STAP 1: Selecteer code (klik+drag)
STAP 2: Druk Ctrl+K → prompt popup
STAP 3: Type je instructie
STAP 4: Accept (Enter) of Reject (Esc)
```

**VOORBEELD:**
```javascript
// Origineel (inline styles):
<div style={{padding: '20px', backgroundColor: 'blue'}}>

// Selecteer, Ctrl+K: "Converteer naar Tailwind classes"

// Result:
<div className="p-5 bg-blue-500">
```

**Wanneer:** Kleine aanpassingen, styling, inline styles → Tailwind

**Timing:** 3 minuten

---

### **Slide 11: Composer (Ctrl+I)**

**Wat is Composer?**
Multi-file editor: grote opdrachten, meerdere files tegelijk.

**Hoe gebruik je het:**

```
STAP 1: Druk Ctrl+I → Composer opent
STAP 2: Typ je taak
  "Voeg /about pagina toe met hero en content sectie"
STAP 3: AI creëert plan + preview
STAP 4: Review & Accept alle changes
```

**VOORBEELD:**
```
Je zegt: "Maak een ContactForm component met Tailwind"
Composer maakt aan:
├─ components/ContactForm.tsx
├─ Update app/contact/page.tsx
└─ Voegt form validatie toe
```

**Wanneer:** Nieuwe pagina's, grote features, meerdere files

**Timing:** 3 minuten

---

### **Slide 12: Tab Completion**

**Wat is Tab Completion?**
AI voorspelt je volgende lijn code terwijl je typt.

```
Je typt:
  const users = fetch(

AI voorstelt (grijs):
  const users = fetch('/api/users')
    .then(res => res.json())

Je drukt TAB → ingevoegd!
```

**Pro tip:** Tab completion is GRATIS / kost geen premium requests!
→ Gebruik dit zo veel mogelijk i.p.v. Chat/Composer voor kleine dingen.

**Timing:** 2 minuten

---

### **Slide 13: @ Mentions - Context geven**

```
@file       → Specifiek bestand meegeven
@folder     → Hele folder meegeven
@web        → Internet zoeken
@docs       → Documentatie referenties (Next.js, React, Tailwind!)
```

**VOORBEELD:**
```
"Hoe maak ik een server component? @docs Next.js"
→ AI zoekt in Next.js documentatie voor antwoord
```

**Timing:** 2 minuten

---

## BLOK 4: SKILLS, RULES & REQUESTS
### *Duur: 15 minuten | Slides 14-16*

---

### **Slide 14: Cursor Skills Installeren**

**⚠️ SAMEN DOEN - Iedereen volgt mee!**

**Wat zijn Cursor Skills/Docs?**
Documentatie die Cursor kan raadplegen via @docs. Hierdoor begrijpt AI je frameworks beter.

**Stap 1: Open Cursor Settings**
```
Ctrl+Shift+P → "Cursor Settings" → Features → Docs
```

**Stap 2: Voeg documentatie toe**
```
┌─────────────────────────────────────────┐
│ + Add new doc                           │
├─────────────────────────────────────────┤
│ 1. Next.js                              │
│    URL: https://nextjs.org/docs         │
│                                         │
│ 2. React                                │
│    URL: https://react.dev               │
│                                         │
│ 3. Tailwind CSS                         │
│    URL: https://tailwindcss.com/docs    │
│                                         │
│ (Optioneel)                             │
│ 4. shadcn/ui                            │
│    URL: https://ui.shadcn.com           │
└─────────────────────────────────────────┘
```

**Stap 3: Test het!**
```
Chat (Ctrl+L): "Hoe maak ik een layout in Next.js? @docs Next.js"
→ AI gebruikt de officiële Next.js docs als bron
```

**Waarom?**
- AI geeft betere, up-to-date antwoorden
- Geen verouderde patterns
- Specifiek voor jouw stack

**⚠️ CHECKPOINT: Minimaal Next.js en Tailwind docs toegevoegd**

**Timing:** 5 minuten

---

### **Slide 15: .cursorrules - Genereren met AI Chat**

**Wat is .cursorrules?**
Een bestand in je project root dat AI vertelt hoe jij wilt werken.

**⚠️ WE GAAN DIT NIET HANDMATIG SCHRIJVEN**
We laten Cursor Chat het genereren! Dat bespaart tijd en geeft een goed startpunt.

**Hoe:**
```
STAP 1: Open Chat (Ctrl+L)

STAP 2: Typ dit prompt:
"Genereer een .cursorrules bestand voor een Next.js project.
 Het project gebruikt:
 - Next.js App Router
 - Tailwind CSS voor styling
 - TypeScript
 - Functional components met React hooks
 - Nederlandse comments
 Maak regels voor file structure, naming conventions,
 en styling guidelines."

STAP 3: Kopieer de output

STAP 4: Maak nieuw bestand: .cursorrules (in project root)

STAP 5: Paste + Save (Ctrl+S)
```

**Dit kost 1 request → efficiënt!**

**Timing:** 5 minuten

---

### **Slide 16: Request Management - Hobby Account Tips**

**⚠️ BELANGRIJK: Jullie requests zijn beperkt!**

**Hobby account:** Beperkt aantal premium requests per maand
**Student account:** 500 fast requests per maand (upgrade z.s.m.!)

**Hoe zuinig omgaan met requests:**

```
╔════════════════════════════════════════════════════════╗
║  GRATIS / GOEDKOOP:                                    ║
║  ✅ Tab Completion (kost GEEN premium request)         ║
║  ✅ Code typen met AI suggesties                       ║
║                                                        ║
║  KOST 1 REQUEST:                                       ║
║  ⚡ Chat vraag (Ctrl+L)                                ║
║  ⚡ Inline Edit (Ctrl+K)                               ║
║  ⚡ Composer actie (Ctrl+I)                            ║
║                                                        ║
║  TIPS OM REQUESTS TE BESPAREN:                         ║
║  1. Denk EERST, prompt DAARNA                          ║
║  2. Combineer taken in 1 prompt                        ║
║     ✗ "Maak een button" → "Maak het blauw"            ║
║       → "Voeg hover toe" = 3 requests                  ║
║     ✓ "Maak een blauwe button met hover effect"        ║
║       = 1 request!                                     ║
║  3. Gebruik Tab Completion voor kleine dingen           ║
║  4. Lees error messages ZELF eerst                     ║
║  5. Gebruik @docs voor framework vragen                ║
╚════════════════════════════════════════════════════════╝
```

**Timing:** 5 minuten

---

## BLOK 5: LIVE DEMO - NIEUW PROJECT
### *Duur: 15 minuten | Slide 17*

---

### **Slide 17: Demo - Nieuw Project Opzetten (blijft op scherm)**

**Docent demonstreert de HELE workflow die studenten straks zelf doen:**

```
╔═════════════════════════════════════════════════════════╗
║              LIVE DEMO: NIEUW PROJECT                    ║
╠═════════════════════════════════════════════════════════╣
║                                                         ║
║  STAP 1: Git Repository (2 min)                        ║
║  ├─ $ mkdir my-cursor-project                          ║
║  ├─ $ cd my-cursor-project                             ║
║  ├─ $ git init                                         ║
║  └─ Open in Cursor: File → Open Folder                 ║
║                                                         ║
║  STAP 2: npx Scaffold (3 min)                          ║
║  ├─ Terminal in Cursor (Ctrl+`)                        ║
║  ├─ $ npx create-next-app@latest .                     ║
║  │   ├─ TypeScript? → Yes                              ║
║  │   ├─ ESLint? → Yes                                  ║
║  │   ├─ Tailwind CSS? → Yes                            ║
║  │   ├─ src/ directory? → Yes                          ║
║  │   ├─ App Router? → Yes                              ║
║  │   └─ Import alias? → @/* (default)                  ║
║  └─ $ npm run dev → localhost:3000                     ║
║                                                         ║
║  STAP 3: Skills Check (1 min)                          ║
║  ├─ Settings → Docs → Next.js, React, Tailwind        ║
║  └─ (al gedaan in Slide 14)                            ║
║                                                         ║
║  STAP 4: .cursorrules via Chat (3 min)                 ║
║  ├─ Ctrl+L → Chat                                     ║
║  ├─ "Genereer .cursorrules voor Next.js + Tailwind"   ║
║  ├─ Kopieer output → maak .cursorrules                ║
║  └─ Save (Ctrl+S) → 1 request gebruikt                ║
║                                                         ║
║  STAP 5: Component Bouwen (4 min)                      ║
║  ├─ Ctrl+I → Composer                                 ║
║  ├─ "Maak een HeroSection component met:              ║
║  │    - Grote titel, subtitel                           ║
║  │    - Gradient achtergrond                            ║
║  │    - CTA button                                      ║
║  │    - Tailwind styling, responsive"                   ║
║  ├─ Accept → component gemaakt                         ║
║  ├─ Voeg toe aan page.tsx                              ║
║  └─ Refresh browser → ZIE RESULTAAT!                   ║
║                                                         ║
║  STAP 6: Git Commit (2 min)                            ║
║  ├─ $ git add .                                        ║
║  ├─ $ git commit -m "Initial project with hero"       ║
║  └─ (Push naar GitHub komt later)                      ║
║                                                         ║
╚═════════════════════════════════════════════════════════╝
```

**Kernboodschap:** "Van niks naar werkende website in 15 minuten!"

**Timing:** 15 minuten (hele blok is demo)

---

## BLOK 6: HANDS-ON OPDRACHT
### *Duur: 75 minuten + 15 minuten pauze | Slide 18*

---

### **Slide 18: Aan de Slag! (blijft op scherm)**

```
╔════════════════════════════════════════════════════════════╗
║               LES 3 HANDS-ON OPDRACHT                      ║
║               Bouw je eigen project met Cursor!             ║
╚════════════════════════════════════════════════════════════╝

STAP 1: NIEUW PROJECT AANMAKEN
═════════════════════════════════════════════════════════════

□ Open Cursor Terminal (Ctrl+`)

□ Maak een nieuwe map:
  $ mkdir ~/projects/mijn-project
  $ cd ~/projects/mijn-project

□ Initialiseer Git:
  $ git init

□ Scaffold met npx:
  $ npx create-next-app@latest .

  Antwoorden op de vragen:
  ┌────────────────────────────────────┐
  │ TypeScript?         → Yes          │
  │ ESLint?             → Yes          │
  │ Tailwind CSS?       → Yes          │
  │ src/ directory?     → Yes          │
  │ App Router?         → Yes          │
  │ Import alias @/*?   → Yes (Enter)  │
  └────────────────────────────────────┘

□ Start dev server:
  $ npm run dev

□ Open browser: http://localhost:3000
  → Je ziet de Next.js welcome pagina!

✓ CHECKPOINT 1: localhost:3000 toont Next.js default pagina


STAP 2: CURSOR CONFIGUREREN
═════════════════════════════════════════════════════════════

□ Check dat je Docs/Skills hebt (Slide 14):
  Settings → Features → Docs
  → Next.js, React, Tailwind moeten erin staan

□ Genereer .cursorrules via Chat:
  Ctrl+L → Chat Panel
  Typ: "Genereer een .cursorrules bestand voor dit project.
        We gebruiken Next.js App Router, Tailwind CSS,
        TypeScript, en functional components met hooks.
        Nederlandse comments. Geef regels voor
        file structure, naming, en styling."

□ Maak .cursorrules bestand:
  - File → New File → naam: .cursorrules
  - Plak de output van Chat
  - Save (Ctrl+S)

  ⚡ Dit kostte 1 request - goed besteed!

✓ CHECKPOINT 2: .cursorrules staat in project root


STAP 3: BOUW EEN COMPONENT (de fun part!)
═════════════════════════════════════════════════════════════

⚠️ LET OP: Combineer taken in 1 prompt om requests te sparen!

TAAK 1: HERO COMPONENT (Composer, 1 request)
─────────────────────────────────────────────
□ Druk Ctrl+I → Composer
□ Typ: "Maak een HeroSection component in
        src/components/HeroSection.tsx.
        Met grote titel, subtitel, gradient achtergrond,
        CTA button, responsive Tailwind styling.
        Voeg de HeroSection toe aan src/app/page.tsx
        (vervang de default Next.js content)."
□ Review de preview
□ Click Accept
□ Refresh localhost:3000 → ZIE JE HERO!

→ DOEL: 1 Composer prompt = werkend component!


TAAK 2: STYLING TWEAKEN (Inline Edit, 1 request)
─────────────────────────────────────────────────
□ Open src/components/HeroSection.tsx
□ Selecteer de hele component code
□ Druk Ctrl+K → Inline Edit
□ Typ: "Voeg een hover animatie toe aan de button.
        Maak de gradient mooier met meer kleuren.
        Zorg voor goede spacing op mobiel."
□ Accept (Enter)
□ Refresh browser → Verbeterd!

→ DOEL: Quick styling fix met 1 request


TAAK 3: EXTRA FEATURE (Composer, 1 request)
────────────────────────────────────────────
□ Druk Ctrl+I → Composer
□ Kies EEN van deze:
  A) "Maak een FeatureCards component met 3 cards.
      Elke card heeft een icon (emoji), titel, en tekst.
      Responsive grid: 1 kolom mobiel, 3 kolommen desktop.
      Tailwind styling. Voeg toe onder de Hero op page.tsx."

  B) "Maak een ContactForm component met naam, email,
      en bericht velden. Tailwind styling.
      Voeg toe op een nieuwe /contact pagina."

  C) "Maak een Footer component met links, copyright,
      en social media icons (emoji). Voeg toe aan layout.tsx."

□ Accept → Refresh browser

→ DOEL: 2e component gemaakt = project groeit!

✓ CHECKPOINT 3: Minimaal 2 componenten werken op je site


STAP 4: GIT COMMIT
═════════════════════════════════════════════════════════════

□ Terminal (Ctrl+`) in Cursor:
  $ git add .
  $ git commit -m "Add hero and feature components"

□ (Optioneel) Maak GitHub repo en push:
  $ gh repo create mijn-project --public --source=. --push
  OF:
  Ga naar github.com → New Repository → volg instructies

✓ CHECKPOINT 4: Code gecommit!


═════════════════════════════════════════════════════════════
☕ PAUZE: 10:15 - 10:30 (15 minuten)
═════════════════════════════════════════════════════════════

Na pauze: Verder bouwen! Voeg meer componenten toe.
Gebruik je overige requests SLIM.


═════════════════════════════════════════════════════════════
NA PAUZE: VERDER BOUWEN
═════════════════════════════════════════════════════════════

□ Voeg nog 1-2 componenten toe met Composer
  (let op: je requests zijn beperkt!)

□ Gebruik Tab Completion voor kleine code (GRATIS!)

□ Gebruik Inline Edit voor styling fixes (1 request per fix)

□ Probeer @docs te gebruiken:
  Chat: "Hoe werkt de App Router? @docs Next.js"


═════════════════════════════════════════════════════════════
DOELEN BEREIKT?
═════════════════════════════════════════════════════════════

✓ Nieuw project gescaffold met npx
✓ Cursor Skills/Docs geïnstalleerd
✓ .cursorrules gegenereerd met Chat
✓ Minimaal 2 componenten gebouwd
✓ Alles werkt op localhost:3000
✓ Git commits gemaakt
✓ Requests slim gebruikt! 🎉


═════════════════════════════════════════════════════════════
HELP NODIG?
═════════════════════════════════════════════════════════════

npx create-next-app faalt:
→ Check Node versie: node -v (moet v18+)
→ Probeer: npx create-next-app@latest mijn-project

npm run dev faalt:
→ Check of je in de juiste map staat: pwd
→ $ rm -rf node_modules && npm install

Cursor Chat/Composer reageert niet:
→ Check internet
→ Check requests: cursor.com/account
→ Restart Cursor

Git problemen:
→ $ git status → check wat er mis is
→ $ git add . && git commit -m "message"
```

**Timing:** 75 minuten + 15 minuten pauze

---

## BLOK 7: AFSLUITING
### *Duur: 15 minuten | Slides 19-22*

---

### **Slide 19: Resultaten Delen**

**Show & Tell (5 minuten)**

```
╔═══════════════════════════════════════════════════════╗
║  TOON JE PROJECT AAN DE KLAS                          ║
║  (3-4 studenten, ~1 minuut per project)               ║
╚═══════════════════════════════════════════════════════╝
```

**Wat we kijken naar:**
- Welke componenten heb je gemaakt? ✓
- Werkt het op localhost? ✓
- Hoe veel requests heb je gebruikt? ✓
- Hoe ziet je .cursorrules eruit? ✓

**Timing:** 5 minuten

---

### **Slide 20: Samenvatting**

```
╔════════════════════════════════════════════════════════╗
║          CURSOR - WAT HEBBEN WE GELEERD?              ║
╠════════════════════════════════════════════════════════╣
║                                                        ║
║  SETUP                                                ║
║  ├─ Cursor installeren + Hobby/Student account        ║
║  ├─ Skills/Docs toevoegen (Next.js, React, Tailwind)  ║
║  └─ .cursorrules genereren met AI Chat                ║
║                                                        ║
║  AI FEATURES                                          ║
║  ├─ Chat (Ctrl+L) → vragen, analyse, genereren       ║
║  ├─ Composer (Ctrl+I) → grote taken, meerdere files   ║
║  ├─ Inline Edit (Ctrl+K) → kleine aanpassingen        ║
║  ├─ Tab Completion → gratis code suggesties            ║
║  └─ @mentions → context geven (@file, @docs)          ║
║                                                        ║
║  WORKFLOW                                              ║
║  ├─ npx create-next-app → scaffold                    ║
║  ├─ .cursorrules → AI kent je regels                  ║
║  ├─ Composer → componenten bouwen                      ║
║  └─ git commit → code opslaan                         ║
║                                                        ║
║  REQUEST MANAGEMENT                                    ║
║  ├─ Tab Completion = GRATIS                            ║
║  ├─ Combineer taken in 1 prompt                       ║
║  └─ Denk EERST, prompt DAARNA                         ║
║                                                        ║
╚════════════════════════════════════════════════════════╝
```

**Timing:** 3 minuten

---

### **Slide 21: Huiswerk - Debug Challenge!**

**Download het huiswerk-zipbestand van Teams**

```
╔════════════════════════════════════════════════════════╗
║              LES 3 HUISWERK: DEBUG CHALLENGE           ║
╚════════════════════════════════════════════════════════╝

OPDRACHT:
Download het zipbestand "les3-debug-challenge.zip" van Teams.
Dit is een Next.js project met EXPRES FOUTEN erin!

Jouw taak: Fix ALLE fouten met behulp van Cursor.

FOUTEN DIE JE GAAT TEGENKOMEN:
═════════════════════════════════════════════════════════

1. MISSENDE DEPENDENCIES
   → npm install zal FALEN
   → Bekijk de error message
   → Gebruik Cursor Chat: "Welke dependencies missen er?"
   → Fix package.json en installeer opnieuw

2. SYNTAX ERRORS
   → npm run dev zal ERRORS geven
   → Lees de error messages in de terminal
   → Gebruik Cursor om de fouten te vinden en te fixen
   → Tip: ESLint helpt hier ook!

3. INLINE STYLES → TAILWIND
   → Sommige componenten gebruiken inline styles
   → Gebruik Inline Edit (Ctrl+K) om ze naar Tailwind
     te converteren
   → Selecteer de code, Ctrl+K:
     "Converteer alle inline styles naar Tailwind classes"

4. SKILL NODIG!
   → Voor de Tailwind conversie heb je de Tailwind docs
     nodig in Cursor
   → Check dat je Tailwind docs hebt toegevoegd
     (Settings → Docs)

INLEVEREN (voor Les 4):
═════════════════════════════════════════════════════════

□ Werkend project (npm run dev zonder errors)
□ Alle inline styles omgezet naar Tailwind
□ Push naar GitHub
□ Vercel deployment (optioneel maar aanbevolen)

POST OP TEAMS:
→ GitHub link
→ Screenshot van werkende site
→ Kort: "Dit waren de fouten die ik tegenkwam en
         hoe ik ze heb opgelost"
```

**Tips:**
- Lees ERROR MESSAGES - ze vertellen je precies wat fout is
- Gebruik de terminal in Cursor (niet een losse terminal!)
- Chat is je vriend: "Wat betekent deze error: [plak error]"
- Tab Completion is gratis - gebruik het!

**Timing:** 5 minuten

---

### **Slide 22: Volgende Les - Effectief Prompting**

```
╔════════════════════════════════════════════════════════╗
║   LES 4: EFFECTIEF PROMPTING &                        ║
║   ITERATIEF WERKEN MET AI                             ║
╚════════════════════════════════════════════════════════╝

Onderwerpen:
├─ Prompt engineering 101 (betere vragen stellen)
├─ Iteratief refinement (prompt → review → verbeter)
├─ Debugging met AI (errors → fixes)
├─ Code reviews met AI
└─ .cursorrules verfijnen

Voorbereiding:
└─ Huiswerk debug challenge MOET af zijn!
```

**Tot ziens volgende week! 🚀**

**Timing:** 2 minuten

---

## BIJLAGE: TROUBLESHOOTING CHEAT SHEET

### Common Issues & Solutions

**TERMINAL ISSUES**

```
ERROR: "command not found: npx"
→ Node.js niet geïnstalleerd of te oude versie
→ FIX: nvm install 20 && nvm use 20

ERROR: "EACCES: permission denied"
→ File permissions probleem
→ FIX: gebruik nvm (geen sudo nodig)

ERROR: "create-next-app faalt"
→ Node versie te oud
→ FIX: node -v (moet v18+), anders nvm install 20
```

**CURSOR ISSUES**

```
Chat/Composer not responding
→ Check internet connection
→ Restart Cursor
→ Check requests: cursor.com/account

.cursorrules wordt niet gelezen
→ Check: bestand in project ROOT (niet in src/)
→ Check: bestandsnaam exact ".cursorrules" (met punt)

Extensions not loading
→ Command Palette → Reload Window
```

**GIT ISSUES**

```
"fatal: not a git repository"
→ $ git init (in project folder)

"nothing to commit"
→ Alle files al gecommit, maak eerst wijzigingen
```

---

## TIMING SUMMARY

| Blok | Onderdeel | Duur |
|------|-----------|------|
| 1 | Welkom & Mededeling | 10 min |
| 2 | Installatie & Setup | 20 min |
| 3 | Cursor Features | 15 min |
| 4 | Skills, Rules & Requests | 15 min |
| 5 | Live Demo: Nieuw Project | 15 min |
| **PAUZE** | | **15 min** |
| 6 | Hands-On Opdracht | 75 min |
| 7 | Afsluiting | 15 min |
| **TOTAAL** | | **180 min** |

---

## NOTITIES VOOR TIM

- **Voorbereiding:**
  - Test npx create-next-app op eigen machine
  - Cursor Skills/Docs vooraf toevoegen (Next.js, React, Tailwind)
  - .cursorrules genereren als demo
  - Maak het huiswerk zipbestand klaar met fouten (les3-debug-challenge.zip)

- **Huiswerk zip moet bevatten:**
  - Next.js project met:
    - package.json met missende dependency (bijv. `lucide-react` used maar niet in deps)
    - Syntax error in een component (missing closing tag of typo)
    - 3-4 componenten met inline styles (style={{...}}) i.p.v. Tailwind
    - Een component die een import mist

- **Tijdens les:**
  - Terminal checks (Slide 8) zijn KRITISCH
  - Benadruk request management VOOR hands-on begint
  - npx create-next-app duurt 1-2 min, laat iedereen wachten
  - Loop rond tijdens hands-on, help met npx/npm issues

- **Request bewust:**
  - Demo gebruikt ~3 requests (cursorrules + hero + feature)
  - Studenten moeten ~5-7 requests in de les gebruiken
  - Tab Completion benadrukken als gratis alternatief

---

**Einde Slide-Overzicht Les 3**
