# Les 8 — Slide-overzicht
## Van In-Memory naar Supabase (10 slides)

---

## Slide-indeling

### Slide 1: Titelslide
**Titel:** Les 8 — Van In-Memory naar Supabase
**Ondertitel:** Koppelen van Supabase aan Next.js

---

### Slide 2: Terugblik vorige les
**Titel:** Terugblik — Waar waren we?

**Bullets:**
- Stemmen werkt lokaal (in-memory data)
- QuickPoll app: / en /poll/[id] pagina's
- VoteForm component → stemmen onmiddellijk
- Nu: alles naar een echte database!

---

### Slide 3: Planning vandaag
**Titel:** Planning — Les 8 (3 uur)

**Timeline:**
- 09:00-09:15 | Welkom & Intro (15 min)
- 09:15-09:45 | **KLASSIKAAL: Setup** — PDF Deel 1 (30 min)
- 09:45-10:00 | **KLASSIKAAL: Queries** — PDF Deel 2 (15 min)
- 10:00-10:15 | **KLASSIKAAL: Componenten** — PDF Deel 3 (15 min)
- 10:15-10:30 | Pauze (15 min)
- 10:30-10:45 | Uitleg INSERT + start Deel 4 (15 min)
- 10:45-11:30 | **ZELFSTANDIG: /create pagina** — PDF Deel 4 (45 min)
- 11:30-12:00 | Vragen + Huiswerk (30 min)

**Aanpak:** Deel 1-3 klassikaal met de PDF. Deel 4 zelfstandig.

---

### Slide 4: Van Array naar Database
**Titel:** Van In-Memory Array naar Supabase

**Links:** In-memory (OUD)
```javascript
const polls = [
  { question: "Favoriete taal?",
    options: ["JS", "Python"],
    votes: [10, 5]
  }
];
```

**Rechts:** Supabase Database (NIEUW)
```
polls tabel
├─ id (1)
├─ question ("Favoriete taal?")
└─ options[] (relatie)

options tabel
├─ poll_id (1)
├─ text ("JS")
└─ votes (10)
```

---

### Slide 5: Supabase Queries
**Titel:** Supabase Queries
**Ondertitel:** Vier operaties die je nodig hebt

**Queries:**
- SELECT alles: `.from("polls").select("*, options(*)")`
- SELECT een: `.eq("id", 5).single()`
- INSERT: `.insert({ question }).select().single()`
- RPC: `.rpc("vote_option", { option_id })`

**Tekst:** Dit zijn de TODO blokken in de PDF!

---

### Slide 6: Server vs Client: Wie doet wat?
**Titel:** Server vs Client
**Ondertitel:** Wie doet wat?

**Twee kolommen:**

**SERVER Component:**
- async function
- await getPolls()
- Data fetching
- Direct naar DB

**CLIENT Component:**
- 'use client'
- useState, onClick
- Interactief: klik, type
- useEffect

**Zeg:** "Server haalt data, Client maakt het interactief."

---

### Slide 7: Pauze
**Titel:** Pauze

**Tekst:** Deel 1-3 klaar! Na de pauze: zelfstandig /create pagina bouwen.

---

### Slide 8: Zelf Doen — /create pagina
**Titel:** Zelf Doen — PDF Deel 4

**Ondertitel:** Het formulier staat in de PDF — jij schrijft de INSERT!

**Stappen:**
1. RLS INSERT policy toevoegen (Stap 4.1)
2. Copy-paste app/create/page.tsx (Stap 4.3)
3. handleSubmit TODO invullen (de INSERT logica)
4. Testen: poll aanmaken → verschijnt op homepage

---

### Slide 9: Huiswerk
**Titel:** Huiswerk

**Verplicht:**
- /create pagina afmaken
- Validatie toevoegen (vraag niet leeg, min 2 opties)

**Extra:**
- Delete functionaliteit
- SQL queries in Supabase testen
- Styling verbeteren

---

### Slide 10: Afsluiting
**Titel:** Tot volgende week!

**Tekst:**
- Volgende les: Supabase Auth
- Inloggen, registreren & bepalen wie wat mag