novi-lessons/Samenvattingen/Les07-Samenvatting.md

Les 7: Backend Basics met Supabase

📋 Lesmateriaal nog niet uitgewerkt

De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:

• Les07-Slide-Overzicht.md
• Les07-Lesplan.md
• Les07-Bijlage-A-Lesopdracht.md
• Les07-Bijlage-B-Huiswerkopdracht.md

---

Hoofdstuk

Hoofdstuk 2: Intermediate (Les 4-9)

Beschrijving

Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit.

---

Te Behandelen

Wat is Supabase?

• Open-source Firebase alternative
• Hosted Postgres database
• Gratis tier voor development
• Mooie UI om tabellen te beheren

Supabase UI Tour

• Dashboard overview
• Table Editor: tabellen maken zonder SQL
• Kolommen toevoegen (text, number, boolean, timestamp)
• Data handmatig invoeren en bekijken

Database Basics (zonder SQL kennis)

• Tabellen = spreadsheets met regels
• Kolommen = velden (naam, email, etc.)
• Rijen = individuele records
• Primary key: unieke identifier per rij

Supabase Client in Next.js

Installatie:

npm install @supabase/supabase-js

Setup:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

CRUD Operaties (met AI hulp)

Create:

const { data, error } = await supabase
  .from('todos')
  .insert({ title: 'Nieuwe taak', completed: false })

Read:

const { data, error } = await supabase
  .from('todos')
  .select('*')

Update:

const { data, error } = await supabase
  .from('todos')
  .update({ completed: true })
  .eq('id', 1)

Delete:

const { error } = await supabase
  .from('todos')
  .delete()
  .eq('id', 1)

Simpele Authentication

• Supabase Auth UI component (plug & play)
• Magic Link login (geen wachtwoord nodig)
• Session checken met supabase.auth.getUser()

Environment Variables

• .env.local voor secrets
• NEXT_PUBLIC_ prefix voor client-side
• Nooit API keys committen naar Git

AI Helpt Met

• Database schema suggesties
• Query schrijven als je vastloopt
• Error messages begrijpen
• Code voorbeelden genereren

---

Tools

• Supabase (gratis tier)
• Next.js
• Cursor/OpenCode

---

Lesopdracht (2 uur)

Bouw een Todo App met Supabase

Deel 1: Supabase Setup (20 min)

• Maak gratis Supabase account
• Maak nieuw project
• Kopieer URL en anon key naar .env.local

Deel 2: Database via UI (20 min)

• Maak todos tabel via Table Editor
• Kolommen: id (auto), title (text), completed (boolean), created_at (timestamp)
• Voeg 3 test todos toe via UI

Deel 3: Next.js Integratie (1 uur)

• Installeer @supabase/supabase-js
• Maak Supabase client
• Bouw simpele UI:
  • Lijst van todos ophalen en tonen
  • Form om nieuwe todo toe te voegen
  • Checkbox om todo af te vinken
  • Delete button

Deel 4: Auth toevoegen (20 min)

• Installeer @supabase/auth-ui-react
• Voeg login pagina toe met Auth UI component
• Check of user ingelogd is

Deliverable

• Werkende Todo app met Supabase backend
• Login functionaliteit
• CRUD operaties werken

---

Huiswerk (2 uur)

Extend de Todo App

Feature 1: Filtering (30 min)

• Filter op: Alle / Actief / Voltooid
• Sorteer op datum

Feature 2: User-specifieke todos (30 min)

• Voeg user_id kolom toe aan todos tabel
• Filter todos op ingelogde user
• Elke user ziet alleen eigen todos

Feature 3: Polish (30 min)

• Loading states
• Error handling met toast messages
• Empty state ("Geen todos gevonden")

Deploy (30 min)

• Deploy naar Vercel
• Voeg environment variables toe in Vercel dashboard
• Test of alles werkt in productie

Deliverable

• Deployed Todo app op Vercel
• Screenshot van werkende app
• Link naar live versie

---

Leerdoelen

Na deze les kan de student:

• Een Supabase project opzetten
• Tabellen maken via de Supabase UI (zonder SQL)
• De Supabase client installeren en configureren
• Basis CRUD operaties uitvoeren (create, read, update, delete)
• Simpele authenticatie implementeren met Auth UI
• Environment variables correct gebruiken