novi-lessons/Les08-Supabase+Nextjs/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 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):

// 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)

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