fix: add 9

Les07-Nextjs/Les07-Slide-Overzicht.md

@@ -0,0 +1,149 @@
+# 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!"