novi-lessons/Les13-Cursor-Vercel-Deploy/Les13-Huiswerk.md

# Les 13 — Huiswerk
## Background Agent + CI + branch protection + DEPLOY.md

**Vak:** AI-Assisted Development
**Opleiding:** NOVI Hogeschool Utrecht
**Deadline:** Voor Les 14 — MCP servers
**Inleveren:** GitHub repo URL + Vercel productie URL + DEPLOY.md

---

## Doel

Bouwt voort op de **lesopdracht** (Pokédex op Vercel productie). In dit huiswerk:

- Voeg een feature toe via **Cursor Background Agent** → preview URL
- Voeg **GitHub Actions CI** toe (lint + build)
- Activeer **branch protection** op `main`
- Schrijf **`DEPLOY.md`** met reflectie

> Niet klaar met de lesopdracht? Eerst die afmaken — het huiswerk heeft die als startpunt.

---

## Onderdeel A — Feature met Background Agent (verplicht)

Voeg een feature toe via **Cursor Background Agent**, niet via Composer.

### Stappen

1. **Open Background Agent** in Cursor:
   - `Cmd+Shift+P` → "Open Background Agent"
   - Eerste keer: verbind je GitHub repo aan Cursor cloud (volg flow)

2. **Schrijf een specifieke prompt.** Vage prompts → matige output. Voorbeeld:

   > Maak een nieuwe branch `feature/search`. Voeg een controlled input toe bovenaan `app/page.tsx`. Filter de Pokémon-lijst case-insensitive op naam terwijl gebruiker typt. Houd Tailwind-styling consistent met bestaande cards. Push de branch en open een PR met titel "Add search bar". Voeg in de PR body een korte beschrijving van wat je gedaan hebt.

3. **Wacht** (~3-5 min). Volg in Cursor panel wat agent doet.

4. **Open PR op GitHub.** Vercel zet een comment met preview URL. Klik die — feature werkt live.

5. **Review:**
   - Code-diff op GitHub
   - Live test op preview URL
   - Eventueel: comment achterlaten of nieuwe prompt aan agent

6. **Merge PR** (of laat open tot je CI hebt — zie B).

### Feature-ideeën (kies één — of bedenk eigen)

- **Search bar** — filter Pokémon op naam
- **Type filter** — chips per type (fire, water, ...) om te filteren
- **Sort** — op nummer of naam (asc/desc)
- **Favorites** — localStorage-based, ster-icoon per card
- **Pagination** — 20 per pagina i.p.v. 151 in één keer
- **Eigen externe API** — voeg bv. weather widget toe (Open-Meteo, geen key)

### Eisen

- [ ] Feature gebouwd via Background Agent (niet Composer)
- [ ] Branch `feature/...` op GitHub bestaat
- [ ] PR open of gemerged
- [ ] Vercel preview URL werkt
- [ ] In `DEPLOY.md`: prompt + agent-resultaat reflectie

---

## Onderdeel B — GitHub Actions CI (verplicht)

Voeg een CI workflow toe die lint + build draait op elke PR.

### Stappen

1. **Via Composer (of handmatig)** maak `.github/workflows/ci.yml`:

   ```yaml
   name: CI
   on:
     pull_request:
       branches: [main]
     push:
       branches: [main]

   jobs:
     check:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - uses: pnpm/action-setup@v3
           with:
             version: 9
         - uses: actions/setup-node@v4
           with:
             node-version: 20
             cache: pnpm
         - run: pnpm install --frozen-lockfile
         - run: pnpm lint
         - run: pnpm build
   ```

2. **Push naar een nieuwe branch** `chore/add-ci`:

   ```bash
   git checkout -b chore/add-ci
   git add .github/workflows/ci.yml
   git commit -m "Add CI workflow"
   git push -u origin chore/add-ci
   ```

3. **Open PR** op GitHub → tab "Actions" → workflow draait → groene check

4. **Merge** naar main

### Test je CI

- Maak een typo in code (bv. `<dvi>` in plaats van `<div>`)
- Push naar nieuwe branch + open PR
- CI faalt → rode X
- Fix met Composer of Background Agent → push → groene check

### Eisen

- [ ] `.github/workflows/ci.yml` in repo
- [ ] CI draait succesvol op merge naar main
- [ ] Minstens 1 voorbeeld van rode CI (screenshot of beschrijving in DEPLOY.md)

---

## Onderdeel C — Branch protection (verplicht)

Bescherm `main` zodat niemand direct kan pushen.

### Stappen

1. GitHub repo → **Settings → Branches → Add rule**
2. Branch name pattern: `main`
3. Check: **Require a pull request before merging**
4. Check: **Require status checks to pass before merging** → select `check` (van CI workflow)
5. Check: **Do not allow bypassing the above settings** (optioneel maar aanbevolen)
6. **Save changes**

### Test

```bash
git checkout main
echo "test" >> README.md
git add . && git commit -m "direct push"
git push
```

Verwacht: `! [remote rejected] main -> main (protected branch hook declined)`.

Goed — protection werkt.

### Eisen

- [ ] Branch protection actief op `main`
- [ ] PR's vereisen groene CI voor merge
- [ ] Direct pushes naar main worden geweigerd

---

## Onderdeel D — `DEPLOY.md` (verplicht)

Schrijf in repo-root.

### Sectie 1 — URLs

```markdown
- Productie: https://pokedex-XXX.vercel.app
- Preview (feature/search): https://pokedex-git-feature-search-XXX.vercel.app
- GitHub repo: https://github.com/USER/pokedex
```

### Sectie 2 — Background Agent prompt

Plak je exacte prompt + wat de agent uiteindelijk leverde:

```markdown
**Prompt:**
"Maak een nieuwe branch ..."

**Resultaat:**
- Branch: feature/search
- PR #4 — Add search bar
- Files changed: app/page.tsx, app/components/SearchBar.tsx
- Build time: 2m 14s
```

### Sectie 3 — Composer vs Background reflectie

Maximaal 200 woorden over:

- Wanneer werkte Composer beter voor jou?
- Wanneer Background Agent?
- Eén voorbeeld waar de agent verbluffend goed was
- Eén voorbeeld waar het matig was (en wat je deed)

### Sectie 4 — CI workflow

- Link naar `.github/workflows/ci.yml`
- 1 screenshot van een groene CI run
- 1 screenshot of beschrijving van een rode CI run + hoe je het fixte

### Sectie 5 — Eén observatie

Iets wat je opviel deze week:

- Preview deployments — wat was makkelijker dan verwacht?
- Branch protection — hoe veranderde je workflow?
- Vercel logs / Cursor Background panel?
- Iets anders?

### Vorm

- Max 600 woorden totaal
- Concrete links, screenshots, prompts
- Mag wat informeel

---

## Bonus (optioneel)

### Bonus 1 — Eigen externe API

Integreer een 2e externe API in je Pokédex (of als losse pagina):

- **Open-Meteo** (weer, geen key) — bv. "Pikachu's geboorteplaats Pallet Town weer"
- **GitHub API** — embed repo-stats van je eigen pokedex-repo
- **Quote API** — random quote bovenaan elke detail-pagina

### Bonus 2 — Environment scoping

- Voeg een `NEXT_PUBLIC_APP_NAME` env-var toe
- Production scope: "Pokédex"
- Preview scope: "Pokédex (Preview)"
- Development scope (.env.local): "Pokédex (Dev)"
- Toon de naam in header → zie verschil per environment

### Bonus 3 — Twee parallelle Background Agents

Start 2 features tegelijk:

- `feature/sort` — sorteer op naam of nummer
- `feature/types` — type-filter chips

Documenteer in `DEPLOY.md` of parallel werken meerwaarde gaf, of dat het lastig was.

### Bonus 4 — Custom domain

Voeg een custom domain toe via Vercel (gratis subdomeinen via vercel.app blijven werken). Niet verplicht — leuk om eens gedaan te hebben.

---

## Inleveren

1. **GitHub repo URL** in Brightspace
2. **Vercel productie URL** in Brightspace
3. **`DEPLOY.md`** in repo-root
4. **Updated `.github/workflows/ci.yml`** in repo
5. **Minstens 1 merged PR** van een Background Agent

---

## Beoordeling

| Criterium | Punten |
|-----------|--------|
| A — Background Agent feature werkt + preview URL | 3 |
| B — GitHub Actions CI werkt + bewijs van rode + groene run | 2 |
| C — Branch protection actief op main | 1 |
| D — DEPLOY.md compleet met 5 secties | 3 |
| Productie URL werkt | 1 |
| **Totaal** | **10** |

Voldoende = 6+. Bonus telt mee bij twijfelgevallen.

---

## Tijd-indicatie

| Onderdeel | Tijd |
|-----------|------|
| A — Background Agent feature | 40 min |
| B — GitHub Actions CI | 25 min |
| C — Branch protection | 5 min |
| D — DEPLOY.md schrijven | 30 min |
| **Totaal** | **~1,5-2 uur** |

---

## Veelvoorkomende valkuilen

| Probleem | Oplossing |
|----------|-----------|
| Background Agent niet beschikbaar | Cursor Pro nodig — gebruik trial of vraag credits |
| Agent maakt branch niet | Prompt explicieter: "Push branch en open PR" |
| Vercel preview URL leeg / 404 | Preview-deploy nog aan het builden — wacht 1-2 min |
| CI faalt op `pnpm install` | `frozen-lockfile` flag aan — commit je `pnpm-lock.yaml` |
| Branch protection blokkeert merge | CI moet eerst groen zijn — wacht of fix lint-errors |
| Background Agent kost te veel credits | Maak prompts korter, beperk scope per agent |

---

## Tips

- **Specifieke prompts** voor Background Agent — vague = matig
- **Lees PR description** die agent schrijft — staat vaak goede uitleg in
- **Vercel logs zijn je vriend** — bouwfout? Logs lezen meestal de oplossing
- **Houd DEPLOY.md bij tijdens werken** — screenshots maak je dan in flow, niet aan eind
- **CI failure ≠ slechte agent** — CI vangt typo's, agent loopt soms net naast

Volgende les: MCP — Model Context Protocol. Een vector-DB met PostgreSQL pgvector. We gaan een tool bouwen die semantic search doet — handig om in een agent te gebruiken. Tot dan!