novi-lessons/Samenvattingen/Les08-Samenvatting.md

Les 8: Supabase Basics

---

Hoofdstuk

Hoofdstuk 2: Intermediate (Les 4-9)

Beschrijving

Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Je bouwt je eerste full-stack app met data die persistent is.

---

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

---

Tabel Maken via Table Editor

In Supabase Dashboard:

1. Ga naar "Table Editor"
2. Klik "New Table"
3. Naam: todos
4. Kolommen:

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

5. Klik "Save"

Test: Voeg een paar rijen toe via de UI om te zien dat het werkt.

---

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

Check .gitignore bevat:

.env*.local

---

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/**

---

Lokaal vs Productie

Aspect	Lokaal	Productie
URL	localhost:3000	jouw-app.vercel.app
Env vars	.env.local	Vercel Dashboard
Database	Supabase (zelfde)	Supabase (zelfde)
Command	npm run dev	Automatisch via Vercel

Let op: Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor echte projecten zou je aparte databases hebben.

---

Tools

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

---

Lesopdracht (2 uur)

Bouw een Todo App met Supabase

Deel 1: Supabase Setup (30 min)

1. Maak Supabase account en project
2. Maak todos tabel via Table Editor
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
• Tabellen maken via de Table Editor (zonder SQL)
• 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
• Het verschil tussen lokale en productie omgeving begrijpen