novi-lessons/Les07-Nextjs/Les07-Slide-Overzicht.md

Les 7 — Slide Overzicht

Van In-Memory naar Supabase

---

Slide 1: Titelslide

Layout: Split (cream links, blauw rechts) — Keynote stijl

• NOVI Hogeschool logo
• "AI leerlijn"
• Next.js
• Les 7

---

Slide 2: Terugblik vorige les

Layout: Cream + blauw blob rechts

• Titel: Terugblik vorige les
• Links: Wat we gebouwd hebben
  • Next.js QuickPoll app van scratch
  • TypeScript types, API routes, pages
  • Server Components + Client Components
  • Loading, Error, Not-Found states
  • Middleware
• Rechts: Wat nog mist
  • Stemmen werkt niet echt
  • Data verdwijnt bij restart
  • Geen echte database

---

Slide 3: Planning

Layout: Gele achtergrond + decoratieve blobs

• Titel: Planning
• Deel 1: Poll afmaken — 30 min
  • votePoll functie, POST route, bug fix, visuele feedback
• Deel 2: Supabase Introductie (No Code) — 45 min
  • Account, tabellen, foreign keys, RLS, SQL
• Pauze — 15 min
• Deel 3: Supabase koppelen — 60 min
  • Client, environment variables, data.ts, testen
• Afsluiting — 30 min

---

Slide 4: Wat is Supabase?

Layout: Cream + blauw blob rechts

• Titel: Wat is Supabase?
• Open-source Firebase alternatief
• PostgreSQL database — 30+ jaar, professioneel
• Auth — login, registratie, OAuth
• Storage — bestanden uploaden
• Realtime — live updates
• Edge Functions — serverless
• Gratis tier voor leren en kleine projecten

---

Slide 5: Van Array naar Database

Layout: Cream + blauw blob rechts

• Titel: Van Array naar Database
• Links: code block met de oude in-memory array

  let polls: Poll[] = [
    { id: "1", question: "...", options: [...], votes: [...] }
  ];
  

• Rechts: twee tabellen
  • polls: id, question, created_at
  • options: id, poll_id, text, votes
• Pijl van links naar rechts: "Normalisatie"
• Uitleg: "Eén array → twee tabellen met een relatie"

---

Slide 6: Live Coding — Deel 1

Layout: Blauw volledig + cream blob links

• Titel: Live Coding
• Subtitel: Deel 1: Poll afmaken
• Stappen:
  • votePoll() functie
  • POST route werkend
  • Bug fix: optionIndex
  • Visuele feedback

---

Slide 7: Supabase Setup — Deel 2

Layout: Blauw volledig + cream blob links

• Titel: Supabase Setup
• Subtitel: Deel 2: No Code — alles via de browser
• Stappen:
  • Project aanmaken
  • Tabellen: polls + options
  • Foreign keys & relaties
  • RLS policies
  • Testdata + SQL Editor

---

Slide 8: Pauze

Layout: Cream + grote blauwe cirkel

• Titel: Pauze
• Subtitel: 15 minuten
• "Deel 1 & 2 staan er. Na de pauze: koppelen aan Next.js!"

---

Slide 9: Live Coding — Deel 3

Layout: Blauw volledig + cream blob links

• Titel: Live Coding
• Subtitel: Deel 3: Supabase × Next.js
• Stappen:
  • @supabase/supabase-js installeren
  • .env.local + supabase client
  • data.ts herschrijven
  • Components + pages aanpassen
  • Testen: stem → refresh → data bewaard!

---

Slide 10: Vragen?

Layout: Cream + blauw blob rechts

• Titel: Vragen?
• Reflectievragen:
  • Snap je het verschil tussen in-memory en database?
  • Kun je uitleggen wat een foreign key doet?
  • Begrijp je hoe RLS werkt?

---

Slide 11: Huiswerk

Layout: Cream + blauw blob rechts

• Titel: Huiswerk
• Opdracht: /create pagina bouwen
  1. Formulier met vraag + opties
  2. Opslaan in Supabase (INSERT)
  3. Navbar link toevoegen
  4. Redirect na aanmaken
• Extra:
  • SQL queries schrijven (meeste stemmen, sorteren)
  • Validatie toevoegen

---

Slide 12: Afsluiting

Layout: Blauw volledig + cream/roze/zwart blobs links

• Titel: Tot volgende week!
• Volgende les: Supabase Auth — inloggen & registreren
• "Van array naar echte database. Goed gedaan!"