fix: add les 8

Les08-Van-InMemory-naar-Supabase/Les08-Slide-Overzicht.md

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