# 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!"