fix: add 9

Les08-Supabase+Nextjs/Les08-Slide-Overzicht.md

@@ -0,0 +1,169 @@
+# 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