# Les 7: Van In-Memory naar Supabase (Introductie)

---

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

## Beschrijving
Eerste kennismaking met Supabase. Studenten maken hun QuickPoll uit Les 6 af, leren wat een relationele database is via de Supabase GUI (geen SQL nodig), en koppelen voor het eerst een echte database aan hun Next.js app.

> **Reflectie na geven:** Te veel materiaal voor één les. Studenten kwamen niet door Deel 3 heen. Daarom is Les 8 toegevoegd waarin de Supabase-koppeling rustig opnieuw wordt doorlopen, plus een /create pagina.

---

## Lesopbouw

### Deel 1 — Poll afmaken (30 min, klassikaal)
Onaffe stukken uit Les 6 wegwerken:
- `votePoll()` functie in `data.ts`
- POST route die echt verwerkt (geen `console.log` meer)
- **Server Component + VoteForm split** — kernmoment van de les
- GET route + visuele percentage bars in `PollItem`

### Deel 2 — Supabase Introductie, No Code (45 min)
Voor de meeste studenten hun eerste database ervaring.
- Wat is Supabase? Open-source Firebase alternatief op Postgres
- Project aanmaken (via GitHub login)
- `polls` tabel aanmaken via Table Editor (id, question, created_at)
- `options` tabel aanmaken met foreign key naar polls (CASCADE)
- RLS policies uitleggen en SELECT policies aanzetten
- Testdata invoeren via de GUI
- SQL Editor: eerste `SELECT`, `WHERE` en `JOIN` query

### Pauze (15 min)

### Deel 3 — Supabase koppelen aan Next.js (60 min)
- `npm install @supabase/supabase-js`
- `.env.local` met `NEXT_PUBLIC_SUPABASE_URL` + `NEXT_PUBLIC_SUPABASE_ANON_KEY`
- `lib/supabase.ts` client
- Types updaten (`Poll`, `Option`)
- `data.ts` herschrijven met Supabase queries (`select`, `eq`, `single`)
- Homepage async maken
- `PollItem`, `VoteForm`, detailpagina aanpassen
- Testen op localhost — data overleeft restart

### Vragen + Huiswerk (15 min)
**Huiswerk:** /create pagina bouwen (formulier → INSERT in Supabase) — voor de meeste studenten te zwaar gebleken, daarom in Les 8 herhaald.

---

## Kernconcepten
- Server Component vs Client Component patroon
- Database-as-a-service (Supabase = Postgres + Auth + REST + Realtime)
- Tabellen, kolommen, primary keys, foreign keys, CASCADE
- Row Level Security (RLS) basics
- Environment variables in Next.js (`NEXT_PUBLIC_` prefix)
- Supabase JavaScript client: `from`, `select`, `eq`, `single`

---

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

---

## Lesopdracht
Volg de docent klassikaal mee door Deel 1 → 3. Aan het eind draait je QuickPoll app met data uit Supabase.

## Huiswerk
- /create pagina afmaken (formulier dat een nieuwe poll insert)
- Validatie toevoegen
- Eventueel: extra SQL queries proberen

---

## Lesmateriaal
- `Les07-Slide-Overzicht.md`
- `Les07-Docenttekst.md`
- `Les07-Live-Coding-Guide.md`
- `Les07-Lesopdracht.pdf`
- `Les07-Slides.pptx`

---

## Leerdoelen
Na deze les kan de student:
- Uitleggen wat Supabase is en wanneer je het inzet
- Een Supabase project aanmaken via de GUI
- Tabellen met relaties (foreign keys) aanmaken in de Table Editor
- RLS policies opzetten voor publieke read access
- De Supabase JavaScript client installeren en configureren
- Environment variables gebruiken voor API keys
- Data ophalen met `select`, `eq` en relaties (`options(*)`)
- Het Server Component + Client Component patroon toepassen

---

## Lessons Learned (voor v2)
- 3 hoofddelen in 1 les is te ambitieus voor het tempo van deze klas
- /create pagina als huiswerk werkt niet — studenten hebben begeleiding nodig bij hun eerste INSERT
- Splits Supabase introductie en concrete code-koppeling over twee lessen → **Les 8 voegt dit toe**