# Les 8: Van In-Memory naar Supabase (Self-Paced + /create)

---

## Hoofdstuk
**Deel 2: Technical Foundations** (Les 4-9)

## Beschrijving
Vervolg op Les 7. Studenten kregen vorige les niet alles af, dus loopt de docent de Supabase-koppeling rustig opnieuw door — nu in een **self-paced PDF** met copy-paste blokken en TODO-blokken. Daarna bouwen studenten zelfstandig de **/create pagina** (hun eerste INSERT).

**Aanpak:** Deel 1-3 doet de docent klassikaal door de PDF heen. Deel 4 (de /create pagina) doen studenten zelfstandig met de docent als coach.

---

## Lesopbouw (3 uur)

| Tijd | Onderwerp | Vorm |
|------|-----------|------|
| 09:00–09:15 | Welkom + Intro + PDF uitdelen | Klassikaal |
| 09:15–09:45 | **PDF Deel 1** — Setup (npm, .env, supabase.ts, types, vote_option SQL) | Klassikaal |
| 09:45–10:00 | **PDF Deel 2** — Queries (`getPolls`, `getPollById`, `votePoll`) | Klassikaal |
| 10:00–10:15 | **PDF Deel 3** — Componenten (page, PollItem, VoteForm, [id]) | Klassikaal |
| 10:15–10:30 | Pauze | — |
| 10:30–10:45 | Uitleg INSERT theorie + RLS policy + start Deel 4 | Klassikaal |
| 10:45–11:30 | **PDF Deel 4** — /create pagina bouwen | **Zelfstandig** |
| 11:30–12:00 | Vragen + Huiswerk + Vooruitblik Auth | Klassikaal |

---

## Lesopdracht (PDF)
Studenten krijgen één PDF met vier delen. Grijze blokken zijn copy-paste, gele TODO-blokken vullen ze zelf in.

### Deel 1 — Setup (klassikaal)
1. `npm install @supabase/supabase-js`
2. `.env.local` met SUPABASE URL + ANON KEY
3. `lib/supabase.ts` client
4. `types/index.ts` updaten (`Poll`, `Option`)
5. **vote_option SQL functie** aanmaken in Supabase SQL Editor (voorkomt PGRST202 error)

### Deel 2 — Queries (klassikaal, TODO's invullen)
- `getPolls()` — `select("*, options(*)")`
- `getPollById(id)` — `eq("id", id).single()`
- `votePoll(optionId)` — `rpc("vote_option", { option_id })`

### Deel 3 — Componenten (klassikaal, copy-paste)
- `app/page.tsx` (async Server Component)
- `components/PollItem.tsx` (Client, percentage bars)
- `components/VoteForm.tsx` (Client)
- `app/poll/[id]/page.tsx` (Server Component, **Next.js 15 `params` is een Promise**)

### Deel 4 — /create pagina (zelfstandig)
1. RLS INSERT policy voor `polls` en `options`
2. INSERT theorie (poll inserten → id terugkrijgen → options met `poll_id`)
3. `app/create/page.tsx` — volledig formulier in PDF, alleen `handleSubmit` TODO invullen

---

## Belangrijke leermomenten
- **Self-paced PDF werkt beter dan live coding** voor deze klas — studenten kunnen op eigen tempo
- **Next.js 15 breaking change:** `params` is nu een `Promise<{ id: string }>`. Je moet `const { id } = await params`
- **Supabase RPC functies:** `vote_option` aanmaken in SQL Editor — anders PGRST202 error
- **RLS policies:** Zonder INSERT policy faalt elke `.insert()` met "row-level security violation"
- **Server vs Client Components:** Server haalt data (`async` + `await`), Client doet interactie (`'use client'` + `useState`)

---

## Tools
- Next.js 15
- Supabase (SQL Editor, Table Editor, RLS)
- `@supabase/supabase-js`
- TypeScript
- Cursor / VS Code

---

## Huiswerk
**Verplicht:**
- /create pagina afmaken (als niet klaar)
- Validatie toevoegen (vraag niet leeg, minimaal 2 opties)

**Extra:**
- Delete functionaliteit
- SQL queries direct testen in Supabase
- Realtime subscriptions uitproberen
- Styling polish

---

## Lesmateriaal
- `Les08-Slide-Overzicht.md`
- `Les08-Docenttekst.md`
- `Les08-Lesopdracht.pdf` (de self-paced handleiding)
- `Les08-Slides.pptx`

---

## Leerdoelen
Na deze les kan de student:
- De Supabase JavaScript client installeren en configureren
- Environment variables gebruiken voor API keys
- Data ophalen via Supabase queries (`select` met relaties, `eq`, `single`)
- Een PostgreSQL function aanroepen via `.rpc()`
- Het verschil uitleggen tussen Server en Client Components in Next.js 15
- Een formulier bouwen dat data INSERT in Supabase
- RLS policies schrijven voor publieke read en insert
- Veelvoorkomende Supabase errors herkennen en oplossen (PGRST202, RLS violation)

---

## Voorbereiding docent
- [ ] QuickPoll project werkt lokaal op localhost:3000
- [ ] Supabase project met `polls` + `options` tabellen
- [ ] `vote_option` RPC functie aangemaakt
- [ ] SELECT RLS policies staan aan
- [ ] Lesopdracht PDF gedeeld met studenten (digitaal)
- [ ] Whiteboard voor de vier query-patronen