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

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)

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