novi-lessons/Samenvattingen/Les09-Samenvatting.md

Les 9: Supabase Basics

---

Hoofdstuk

Deel 2: Technical Foundations (Les 5-9)

Beschrijving

Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Pas je database schema uit Les 8 toe en bouw je eerste full-stack app.

---

Te Behandelen

Wat is Supabase?

Supabase = Database + Auth in één

• PostgreSQL database (gratis tier: 500MB)
• Ingebouwde authenticatie
• Real-time subscriptions
• File storage
• Auto-generated API

Waarom Supabase voor beginners:

• Geen eigen server nodig
• Visuele Table Editor (geen SQL kennis nodig)
• Simpele JavaScript SDK
• Gratis tier is ruim voldoende

---

Supabase Project Aanmaken

Stap 1: Ga naar supabase.com en maak account

Stap 2: Klik "New Project"

• Naam: todo-app
• Database Password: (bewaar deze!)
• Region: West EU (Frankfurt) (dichtst bij NL)

Stap 3: Wacht ~2 minuten tot project klaar is

Stap 4: Ga naar Settings → API en kopieer:

• Project URL
• anon public key

---

Je Database Schema Implementeren

In Les 8 heb je een database schema ontworpen. Nu gaan we dat implementeren!

In Supabase Dashboard → Table Editor:

1. Klik "New Table"
2. Gebruik je schema uit Les 8
3. Voeg kolommen toe met de juiste types
4. Definieer Primary Keys en Foreign Keys

Voorbeeld: todos tabel

Name	Type	Default	Primary
id	int8	-	✓ (auto)
title	text	-
completed	bool	false
created_at	timestamptz	now()

---

Environment Variables

Wat zijn environment variables?

• Configuratie die NIET in je code hoort
• API keys, database URLs, secrets
• Verschillend per omgeving (lokaal vs productie)

Maak .env.local in je project root:

# .env.local - NOOIT committen naar Git!
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx

Maak ook .env.example (WEL committen):

# .env.example - template voor anderen
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

---

Supabase SDK Installeren

npm install @supabase/supabase-js

Maak src/lib/supabase.ts:

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

---

CRUD Operaties

C - Create (toevoegen):

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

R - Read (ophalen):

const { data, error } = await supabase
  .from('todos')
  .select('*')
  .order('created_at', { ascending: false })

U - Update (wijzigen):

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

D - Delete (verwijderen):

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

---

Authenticatie met Auth UI

Installeer auth packages:

npm install @supabase/auth-ui-react @supabase/auth-ui-shared

Login component:

import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { supabase } from '@/lib/supabase'

export function LoginForm() {
  return (
    <Auth
      supabaseClient={supabase}
      appearance={{ theme: ThemeSupa }}
      providers={[]}
      magicLink={true}
    />
  )
}

Huidige user checken:

const { data: { user } } = await supabase.auth.getUser()

if (user) {
  // User is ingelogd
  console.log('Logged in as:', user.email)
} else {
  // Redirect naar login
}

---

Deployment naar Vercel

Stap 1: Push naar GitHub

git add .
git commit -m "Add Supabase integration"
git push

Stap 2: Deploy op Vercel

1. Ga naar vercel.com
2. "Add New Project"
3. Import je GitHub repo
4. BELANGRIJK: Voeg Environment Variables toe!
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
5. Klik "Deploy"

Stap 3: Supabase Redirect URLs

1. Ga naar Supabase → Authentication → URL Configuration
2. Voeg toe bij "Redirect URLs":
   • https://jouw-app.vercel.app/**

---

Tools

• Supabase
• Next.js
• OpenCode/WebStorm
• Vercel
• Git

---

Lesopdracht (2 uur)

Bouw een Todo App met Supabase

Groepsdiscussie (15 min): Bespreek klassikaal de database schemas uit Les 8 - wie heeft welke structuur gekozen en waarom?

Deel 1: Supabase Setup (30 min)

1. Maak Supabase account en project
2. Maak je tabellen via Table Editor (gebaseerd op Les 8 schema)
3. Kopieer credentials
4. Installeer @supabase/supabase-js
5. Maak src/lib/supabase.ts
6. Configureer .env.local

Test: npm run dev werkt zonder errors

Deel 2: CRUD Interface (1 uur)

Bouw UI voor todos:

1. Lijst van todos tonen
2. Form om nieuwe todo toe te voegen
3. Checkbox om todo af te vinken
4. Delete button per todo

Gebruik AI hulp voor de components!

Deel 3: Authenticatie (30 min)

1. Installeer auth packages
2. Maak login pagina met Auth UI
3. Toon alleen app voor ingelogde users
4. Test: login met magic link

Deliverable

• Werkende Todo app lokaal
• GitHub repository met code
• Screenshot van werkende app

---

Huiswerk (2 uur)

Deploy naar Productie + Uitbreiden

Deel 1: Deployment (30 min)

1. Push naar GitHub
2. Deploy naar Vercel
3. Configureer env vars in Vercel
4. Voeg Vercel URL toe aan Supabase Redirect URLs
5. Test: app werkt op productie URL!

Deel 2: Features Uitbreiden (1 uur)

Voeg toe:

1. Filter buttons: Alle / Actief / Voltooid
2. Sorteer op datum (nieuwste eerst)
3. Loading state tijdens data ophalen
4. Error state bij problemen
5. Empty state: "Geen todos gevonden"

Deel 3: Polish (30 min)

1. Styling verbeteren met Tailwind
2. Responsive design (mobile friendly)
3. Kleine animaties (fade in/out)

Deliverable

• Deployed app op Vercel (werkende URL!)
• Alle features werken in productie
• Screenshot van productie app

---

Leerdoelen

Na deze les kan de student:

• Een Supabase project aanmaken en configureren
• Database schema implementeren via Table Editor
• Environment variables correct beheren
• De Supabase client installeren en configureren
• CRUD operaties uitvoeren met de Supabase SDK
• Authenticatie implementeren met Auth UI
• Deployen naar Vercel met environment variables
• Database principles uit Les 8 toepassen in de praktijk