# 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
**Afbeelding:** Supabase + Next.js logo's

---

### 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 (links):**
```javascript
// OUD
const polls = [
  { question: "...", options: [...], votes: [...] }
];
```

---

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

**Timeline:**
- 09:00-09:10 | Welkom & Terugblik (10 min)
- 09:10-10:15 | **DEEL 1: Live Coding — Supabase koppelen** (65 min)
- 10:15-10:30 | Pauze (15 min)
- 10:30-11:30 | **DEEL 2: Zelf Doen — /create pagina** (60 min)
- 11:30-11:45 | Vragen & Reflectie (15 min)
- 11:45-12:00 | Huiswerk & Afsluiting (15 min)

---

### 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: Live Coding Deel 1 — Supabase × Next.js
**Titel:** Live Coding — Deel 1: Supabase koppelen

**Ondertitel:** Stap-voor-stap

**Stappen:**
1. npm install @supabase/supabase-js
2. .env.local (API keys)
3. lib/supabase.ts (client)
4. types/index.ts (Poll + Option)
5. lib/data.ts (queries herschrijven)
6. app/page.tsx (Server Component)
7. components/PollItem.tsx (percentage bars)
8. components/VoteForm.tsx (Client Component)
9. app/poll/[id]/page.tsx (detail)
10. app/api/polls/[id]/route.ts (API)
11. Testen!

**Spreaker:** "We werken samen naar een werkende Supabase integratie."

---

### 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:** Supabase is gekoppeld! Na de pauze: /create pagina bouwen

**Icoon:** Koffie/pauze emojis

---

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

**Ondertitel:** /create pagina bouwen

**Stappen:**
1. **RLS INSERT policy** toevoegen in Supabase dashboard
2. **Form bouwen** met vraag + minimaal 2 opties
3. **Insert logica:** Eerst poll, dan options met poll_id
4. **Redirect** naar homepage na succes
5. **Link toevoegen** op homepage naar /create

**Docent zegt:** "Zelf doen, 60 minuten. Ik loop rond!"

---

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

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

**Extra:**
- Delete functionaliteit
- SQL queries direct in Supabase testen
- Realtime subscriptions uittesten
- Styling verbeteren

---

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

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

**Achtergrond:** Supabase Auth afbeelding