novi-lessons/Les14-Cursor-Vercel-Deploy/Les14-Slide-Overzicht.md

# Les 14 — Cursor + Vercel: van leeg project naar preview
## Slide Overzicht (Klas A — online, demo-driven)

**Lesvorm:** online via Teams. Tim deelt scherm met slides + Cursor + browser.
**Demo:** een vers `npx`-gescaffold Next.js project, gebouwd live in Cursor.
**Aansluit op:** Les 13 (Polderfest-agent op localhost) → Les 15 (RAG).

---

## Blok-structuur

| Blok | Onderwerp | Slides |
|------|-----------|--------|
| 1 | Welkom + Vandaag | 1–2 |
| 2 | Scaffold + Git + Vercel koppelen | 3–7 |
| 3 | Vercel CLI + env vars | 8–10 |
| 4 | Cursor — Editor / Agent / Background + rules | 11–19 |
| 5 | Live feature-workflow (plan → branch → preview) | 20–24 |
| 6 | Recap + Nu jullie | 25–27 |

---

## Slide 1: Title
### Les 14 — Cursor + Vercel

**Visual:**
- Background: CREAM
- "Les 14" in BLUE
- "Cursor + Vercel" in BLACK
- Subtitle: "Van leeg project naar preview-deploys — met AI"
- Iconen onderaan: Cursor-logo, Vercel-driehoek, GitHub-octocat

---

## Slide 2: Vandaag
### Wat we live gaan bouwen

**Vandaag in één lopend voorbeeld:**
1. `npx create-next-app` — vers project
2. Git init + push naar GitHub
3. Vercel project koppelen → eerste deploy
4. Vercel CLI: link, env pull/add
5. Cursor open: Plan, Build, Context, Rules, Background agents
6. Feature in nieuwe branch → preview-URL
7. Tweede feature via een Background agent

**Werkwijze:** ik bouw klassikaal, jullie kijken en knopen mee. Na pauze doen jullie het zelf.

**Visual:** workflow-pijl van leeg project → Cursor-features → preview-URL.

---

## Slide 3: Scaffold met `npx`
### Vers Next.js project in 30 seconden

```bash
npx create-next-app@latest mijn-portfolio
# kies: TypeScript, Tailwind, App Router, src/ dir
cd mijn-portfolio
npm run dev
```

**Wat je krijgt:**
- Werkende Next.js 16 app op `localhost:3000`
- TypeScript + Tailwind preconfigured
- ESLint klaar
- `.gitignore` met `.env.local`, `node_modules`, `.next`

**Visual:** terminal-screenshot van create-next-app vragen.

---

## Slide 4: Git init + push naar GitHub
### Code online krijgen

```bash
git init
git add .
git commit -m "init"
git branch -M main

gh repo create mijn-portfolio --public --source=. --push
```

**Of handmatig:**
- github.com → New repository → naam → empty
- `git remote add origin <url>`
- `git push -u origin main`

**Resultaat:** je code staat op github.com — basis voor alles wat volgt.

**Visual:** flow-diagram local → GitHub.

---

## Slide 5: Vercel project koppelen
### Van GitHub-repo naar live URL

**Drie stappen:**
1. vercel.com/new → **Import Git Repository**
2. Kies je `mijn-portfolio` repo
3. Framework auto-detect: Next.js → **Deploy**

**Wat Vercel doet:**
- Klonet je repo
- Draait `npm install` + `npm run build`
- Deploy't naar het Edge Network
- Geeft je een URL: `mijn-portfolio-<scope>.vercel.app`

**Voortaan:** elke `git push` → automatische deploy. Geen extra werk.

**Visual:** Vercel "Import Project" scherm.

---

## Slide 6: Productie-URL + branches
### Wat krijg je gratis

**Twee URL-types:**

| Type | URL-formaat | Wanneer |
|------|-------------|---------|
| **Productie** | `mijn-portfolio-<scope>.vercel.app` | push naar `main` |
| **Preview** | `...-git-<branch>-<scope>.vercel.app` | push naar elke andere branch |

**Voordeel preview-URLs:**
- Iedereen kan klikken zonder lokale setup
- PR-bot post URL automatisch in je Pull Request
- Per push update de preview vanzelf

**Visual:** twee URL-bubbels (groen = productie, blauw = preview).

---

## Slide 7: Env vars in Vercel UI
### Geheimen veilig op productie

**Wat je vandaag NOG niet hebt** (lege app), maar binnenkort wel:
- Database URLs
- API keys (OpenAI, Stripe, etc.)
- Secret tokens

**Drie environments:**

| Environment | Wanneer actief |
|-------------|----------------|
| Production | `main` branch deploys |
| Preview | alle andere branches |
| Development | `vercel dev` lokaal |

**`NEXT_PUBLIC_` prefix** → variabele wordt in browser-bundle gestopt. Zonder prefix = server-only.

**Visual:** Vercel env-vars dashboard screenshot.

---

## Slide 8: Vercel CLI — waarom
### Sneller dan klikken in het dashboard

**Wat de CLI je geeft:**
- `vercel link` — koppel lokale folder aan Vercel project
- `vercel env pull` — productie-env-vars → `.env.local`
- `vercel env add` / `rm` — vars beheren zonder dashboard
- `vercel logs` — bekijk runtime logs
- `vercel --prod` — handmatige productie-deploy

**Installeren:**

```bash
npm i -g vercel
vercel login
```

**Visual:** terminal-screenshot van `vercel --help`.

---

## Slide 9: `vercel link` + `vercel env pull`
### Lokaal werken met dezelfde env vars als productie

```bash
cd mijn-portfolio
vercel link
# → kiest scope (org/team) + project
# → maakt .vercel/project.json aan

vercel env pull .env.local
# → trekt ALLE env vars uit je gekoppelde environment
# → schrijft naar .env.local (overschrijft bestaande)
```

**Voordeel:** je hoeft je env vars niet handmatig te kopiëren. Eén commando = synced lokaal.

**Tip:** `vercel env pull --environment=preview` voor preview-specifieke vars.

**Visual:** terminal-output van een succesvolle env pull.

---

## Slide 10: `vercel env add/rm`
### Vars wijzigen vanuit terminal

```bash
# Toevoegen
vercel env add OPENAI_API_KEY production
# → vraagt om waarde

# Voor alle 3 environments tegelijk:
vercel env add DATABASE_URL production preview development

# Verwijderen
vercel env rm OPENAI_API_KEY production

# Lijst
vercel env ls
```

**Wanneer handig:** als je een API-key roteert, hoef je niet via dashboard. Eén CLI-commando, klaar.

**Visual:** CLI-flow met prompt-balletjes.

---

## Slide 11: Cursor — alles in één IDE
### Wat is het, waarom belangrijk

**Wat is Cursor:**
- VS Code-fork met AI native ingebouwd
- Niet een extensie — het IS de IDE
- Werkt met Claude, GPT, Gemini en lokale modellen

**Wat je krijgt boven gewone VS Code:**
- Chat met volledige codebase-context
- Plan-mode (eerst denken, dan doen)
- Build-mode (autonoom uitvoeren)
- Inline edit (Cmd+K)
- Background agents (cloud, async)
- Cursor Rules (per-project instructies)
- Tab-completion die meekijkt met je hele bestand

**Visual:** vier kwadranten met de hoofdfeatures.

---

## Slide 12: De twee windows + Agent mode
### Cursor 3 — wat zit waar

In Cursor 3 zijn er **twee hoofdvensters** die je met **Cmd+Shift+N** wisselt:

| Window | Wanneer | Hoe |
|--------|---------|-----|
| **Editor Window** (classic) | Code schrijven en reviewen | Cmd+Shift+N → Editor |
| **Agents Window** | Meerdere agents parallel managen | Cmd+Shift+N → Agents |

**Binnen Editor Window:**
- **Cmd+L** — chat opent rechts (kies modus: Ask / Agent / Plan)
- **Cmd+K** — inline edit op selectie
- **Tab** — completion

**Binnen Agents Window:**
- Lijst met running / done agents
- Lokale agents, cloud (background) agents, remote SSH

**Gouden regel:**
- Code schrijven of 1 ding bouwen → **Editor Window** + **Agent mode** in chat
- Meerdere features parallel → **Agents Window** met Background agents

**Visual:** twee windows naast elkaar + sneltoets-pijl.

---

## Slide 13: Editor Window — stap voor stap
### Je hoofdwerkplek voor code

**Wat je live ziet:**
1. **Cmd+Shift+N** — switcht naar Editor Window (classic IDE-layout)
2. Linker zijbalk = file explorer, midden = editor, onder = terminal
3. **Cmd+L** — opent chat-paneel rechts
4. Voor snelle inline edits: selecteer code, druk **Cmd+K**, beschrijf wijziging
5. Cursor toont **diff inline** in de editor
6. **Accept** (Tab) of **Reject** (Esc)
7. Voor file-search: **Cmd+P** (zoals VS Code)
8. **Tab** — accepteert AI auto-completion suggesties

**Wanneer kies je dit:**
- Je standaard coding-flow — alles wat je in VS Code zou doen
- Wanneer je veel files tegelijk wilt zien (split screen)
- Voor VS Code extensions (linters, formatters, debugger)

**Visual:** screenshot Editor Window met file explorer + editor + Cmd+K-diff.

---

## Slide 14: Agent mode — stap voor stap
### AI bouwt autonoom in je Editor Window

**Wat je live ziet:**
1. In Editor Window: **Cmd+L** — chat opent rechts
2. Bovenaan chat: **mode-selector** → kies **"Agent"**
3. Typ de **hele taak**: *"Bouw een /about pagina met team-grid in onze huisstijl"*
4. **Enter** — agent start zelfstandig
5. Cursor toont een lopende **takenlijst** + voortgang
6. Agent **edit meerdere files**, runt terminal-commando's (vraagt vooraf), kan **web browsen**
7. Geen limiet op het aantal tool-calls per taak
8. Aan het einde: samenvatting → **Keep / Accept all** of per file

**Wanneer kies je dit:**
- Grotere feature die meerdere files raakt
- Refactors, nieuwe pagina's, API-routes opzetten
- Je vertrouwt het plan en hebt tijd om aan het eind te reviewen

**Visual:** chat-paneel met mode-dropdown + lopende takenlijst.

---

## Slide 15: Background agents — stap voor stap
### Cloud-based async — in Agents Window

**Wat het is:**
- Async agents die in **geïsoleerde cloud VMs** draaien
- Werken parallel in eigen Git branches
- Beheer via **Agents Window** (Cmd+Shift+N) of `cursor.com/agents`

**Hoe een agent aanmaken:**
1. **Cmd+Shift+N** → naar Agents Window
2. Klik **"New agent"** (of `+` in de kop)
3. Kies **environment**: local / cloud / remote SSH
4. Beschrijf de taak — specifiek, alsof het een ticket is
5. Optioneel: kies branch-naam (`feature/about`)
6. Klik **"Start"**
7. Agent draait → je kunt switchen terug naar Editor Window en doorwerken

**Hoe je resultaten ophaalt:**
1. **Cmd+Shift+N** terug naar Agents Window
2. Klare agents staan op **"Done"** in de agents-lijst
3. Klik agent → zie **diff + commit message + uitgevoerde stappen**
4. **"Open in PR"** → automatische PR op GitHub
5. Vercel maakt preview-URL → review → merge

**Wanneer:** 2–4 parallelle features, lange refactors die je niet wilt babysitten, of taken die je triggert vanuit je telefoon / Slack / Linear.

**Visual:** Agents Window screenshot met agents-lijst.

---

## Slide 16: Context — `@`-mentions
### Hoe Cursor je codebase begrijpt

**Wat je kunt taggen in chat:**

| Tag | Betekenis |
|-----|-----------|
| `@file:foo.tsx` | specifiek bestand |
| `@folder:components` | hele map |
| `@code:functionName` | losse functie/class |
| `@docs` | externe documentatie |
| `@web` | live web-search |
| `@git` | git history / blame |
| `@recommended` | Cursor's eigen suggestie |

**Voorbeeld:** *"Refactor @file:UserCard.tsx zodat het @code:useUser uit @folder:hooks gebruikt"*

**Visual:** chat-bubble met meerdere `@`-tags highlighted.

---

## Slide 17: Cursor Rules
### Per-project instructies aan de AI

**Wat zijn rules:**
- Markdown-bestanden in `.cursor/rules/`
- Worden aan ELKE prompt toegevoegd als systeem-instructie
- Per-bestand-glob: alleen actief op matching bestanden

**Voorbeeld `.cursor/rules/general.mdc`:**

```markdown
---
description: Algemene project-conventies
alwaysApply: true
---

- Gebruik TypeScript strict mode
- Tailwind voor styling — geen CSS modules
- Server components by default; "use client" alleen waar nodig
- Imports: gebruik @/ alias voor src/
- Geen any-types
```

**Visual:** mappenstructuur met `.cursor/rules/` uitgevouwen.

---

## Slide 18: Project context — `AGENTS.md`
### High-level documentatie voor AI

**Naast Cursor Rules:**
- `AGENTS.md` of `PROJECT.md` in repo root
- Beschrijft architectuur, conventies, "hoe wij hier dingen doen"
- Cursor + Claude Code + GitHub Copilot lezen dit alle drie

**Wat erin staat:**
- Tech stack + waarom die keuzes
- Belangrijke patronen (auth flow, error handling, etc.)
- Hoe testen, hoe lokaal runnen, hoe deployen
- Pointers naar belangrijke bestanden

**Effect:** AI begrijpt je codebase in plaats van wilde gokken te doen.

**Visual:** AGENTS.md structuur als outline.

---

## Slide 19: Tips & Tricks
### Wat Cursor-power-users doen

**De top 7:**
1. **Cmd+I** voor Composer met multi-file context
2. **@-everything aanvullen** — Cursor onthoudt context per chat
3. **Plan + Apply per stap** — niet alles tegelijk accepteren
4. **`alwaysApply: false`** Rules voor opt-in conventies
5. **Auto-mode** — Cursor kiest beste model per taak
6. **Diff-preview** vóór accept — Cmd+Shift+Enter
7. **Notepads** — herbruikbare prompt-snippets per project

**Anti-pattern:** alles in één gigantische chat dumpen. Hou chats focused.

**Visual:** tips als badges met nummering.

---

## Slide 20: De feature-workflow
### Hoe één feature van idee naar preview-URL gaat

**Vijf stappen die we live doen:**
1. **Plan** in Cursor: beschrijf de feature
2. **Branch:** `git checkout -b feature/x` (Cursor kan dit ook)
3. **Build:** laat Cursor de code schrijven
4. **Commit + push** → Vercel start automatisch een preview-deploy
5. **Open preview-URL** → test, geef feedback, itereer

**Cyclus duurt ±10 minuten** per feature. Inclusief AI denkwerk.

**Visual:** circulair diagram met de 5 stappen.

---

## Slide 21: Live demo 1 — Hero section
### Plan → Build via Cursor Chat

**Wat ik demonstreer:**
- Nieuwe branch: `git checkout -b feature/hero`
- Cursor Chat: *"Plan een hero-section voor de homepage. Gradient achtergrond, een grote titel, ondertitel, twee CTA-knoppen."*
- Plan bekijken → Apply
- Inline tweaks via Cmd+K voor finetuning
- `git add . && git commit -m "feat: hero section"`

**Visual:** screenshot van Cursor met Plan-output.

---

## Slide 22: Push → preview-URL
### Vercel doet de rest

```bash
git push -u origin feature/hero
```

**Binnen 30–60 seconden:**
- Vercel start build
- Preview-URL verschijnt
- (Als er een PR open is) Vercel-bot plakt URL onder de PR

**Open de preview-URL:** je nieuwe hero section staat live, gedeeld met iedereen die de link heeft.

**Visual:** Vercel build-progress screen.

---

## Slide 23: Live demo 2 — About page (background agent)
### Parallel werken

**Wat ik demonstreer:**
- Nieuwe branch: `git checkout -b feature/about`
- Cursor → *"Open background agent: bouw een /about pagina met team-leden in een grid. Gebruik onze hero-section als stijlreferentie."*
- Agent gaat in eigen tab aan de slag
- Ik blijf in main editor verder werken
- Agent meldt zich klaar → review diff → apply
- Commit + push → tweede preview-URL

**Effect:** twee features tegelijk, beide met eigen preview.

**Visual:** twee preview-URLs naast elkaar.

---

## Slide 24: PR mergen → productie
### De cyclus afsluiten

**Op GitHub:**
1. Beide branches → PR's openen
2. Reviewen in preview-URL's
3. Mergen naar `main`
4. Vercel detecteert merge → bouwt productie-deploy
5. Productie-URL update vanzelf

**Mentaliteit:** main is altijd deploy-baar. Feature branches zijn experimenteerruimte.

**Visual:** PR-pagina met "Merge" knop gemarkeerd.

---

## Slide 25: Recap
### Wat we vandaag hebben gedaan

- Vers Next.js project gescaffold met `npx`
- Git repo + push naar GitHub
- Vercel project gekoppeld + eerste deploy
- Vercel CLI: link, env pull/add
- Cursor in detail: Chat, Plan, Build, Inline, Rules, Background agents
- Twee features in eigen branches → twee preview-URL's
- PRs gemerged → productie

**Wat je nu kunt:** elke nieuwe app uit deze opleiding (of erbuiten) op deze manier opzetten. Cursor + Vercel zijn je standaard-werkbank.

**Visual:** checklist met alle stappen.

---

## Slide 26: Nu jullie — Lesopdracht
### Bouw je eigen Cursor + Vercel flow

**Wat je gaat doen (in eigen tempo, ±1,5 uur):**
1. `npx create-next-app` — je eigen project (kies een onderwerp dat je leuk vindt)
2. Push naar GitHub
3. Vercel project + eerste deploy
4. `vercel link` + `vercel env pull`
5. Open in Cursor → schrijf één `.cursor/rules/general.mdc`
6. Schrijf één `AGENTS.md`
7. Bouw 2 features in eigen branches via Cursor (Plan → Build)
8. Push beide → check preview-URL's
9. Open één PR, deel beide URL's in de chat

**Voor exacte stappen:** `Les14-Lesopdracht.pdf`.

**Visual:** opdrachtkaart met checklist.

---

## Slide 27: Volgende les
### Wat komt eraan

**Les 15 — RAG + Embeddings:**
- AI antwoorden op basis van eigen documenten
- Embeddings + pgvector + context-injectie
- We bouwen een PDF Q&A-app

**Voorbereiding:**
- Je Next.js-app uit vandaag staat live op Vercel
- Je hebt minstens 2 PR's met preview-URL's gemerged
- Cursor draait, AGENTS.md en `.cursor/rules/` zijn ingevuld

**Visual:** plaatje document → embedding → AI-antwoord.