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

---

### Slide 1: Titelslide
**Titel:** Les 8 — Van In-Memory naar Supabase
**Ondertitel:** Koppelen van Supabase aan Next.js
**Visual:** Supabase + Next.js logo's, BLUE achtergrond

---

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

**Bullets:**
- Stemmen werkt lokaal (in-memory data)
- QuickPoll app heeft 2 pages: / en /poll/[id]
- VoteForm component ziet stemmen onmiddellijk
- Nu: alles naar een echte database

**Code snippet:**
```javascript
// OUD
const polls = [
  { question: "...", options: [...], votes: [...] }
];
```

---

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

**Timeline:**
- 09:00-09:15 | Welkom & Uitleg aanpak (15 min)
- 09:15-09:45 | **Uitleg concepten** (30 min)
- 09:45-10:15 | **Zelfstandig: Setup + Queries** (30 min)
- 10:15-10:30 | Pauze (15 min)
- 10:30-10:45 | **Uitleg INSERT queries** (15 min)
- 10:45-11:30 | **Zelfstandig: /create pagina** (45 min)
- 11:30-11:45 | Vragen & Reflectie (15 min)
- 11:45-12:00 | Huiswerk & Afsluiting (15 min)

**Extra tekst:** "Jullie werken met de Lesopdracht PDF. Alle UI staat erin — jullie schrijven de queries!"

---

### 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
├─ id (1)
├─ poll_id (1)
├─ text ("JS")
├─ votes (10)
```

---

### Slide 5: Supabase Queries
**Titel:** Supabase Queries — Vier operaties

**Vier blokken:**

1. **SELECT alles** (met relaties)
```typescript
supabase.from("polls")
  .select("*, options(*)")
```

2. **SELECT één** (filter + single)
```typescript
supabase.from("polls")
  .select("*, options(*)")
  .eq("id", 5).single()
```

3. **INSERT** (nieuw record)
```typescript
supabase.from("polls")
  .insert({ question: "..." })
  .select().single()
```

4. **RPC** (database functie)
```typescript
supabase.rpc("vote_option",
  { option_id: 42 })
```

---

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

**Twee kolommen:**

**SERVER Component:**
- `export default async function HomePage() { ... }`
- `const polls = await getPolls()` ✓
- Data fetching
- Direct naar database
- TypeScript compile-time

**CLIENT Component:**
- `'use client'`
- `const [voted, setVoted] = useState(...)`
- Interactief: klikken, typen, formulieren
- useEffect, event handlers
- Browser runtime

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

---

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

**Tekst:** Setup + queries klaar? Na de pauze: /create pagina bouwen!

---

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

**Ondertitel:** Het formulier staat in de PDF. Jij schrijft de INSERT logica!

**INSERT voorbeeld:**
```typescript
// 1. Insert poll → krijg id terug
const { data: poll } = await supabase
  .from("polls")
  .insert({ question })
  .select().single();

// 2. Insert options met poll.id
await supabase.from("options").insert([
  { poll_id: poll.id, text: "...", votes: 0 }
]);
```

**Stappen:**
1. RLS INSERT policy toevoegen (Stap 4.1 in PDF)
2. handleSubmit invullen (TODO blok in PDF)
3. Testen: poll aanmaken → homepage checken

---

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

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

**Extra:**
- Delete functionaliteit
- Styling verbeteren

---

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

**Tekst:**
- "Volgende les: Supabase Auth"
- "Inloggen, registreren"
- "Bepalen wie wat mag doen"