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

Zet je eerste "echte" Next.js project op en koppel het aan Supabase voor database en authenticatie. Je leert de complete flow van lokaal ontwikkelen tot productie deployment.

---

Te Behandelen

Stap 1: Next.js Project Aanmaken

Dit is de eerste keer dat je een volledig Next.js project opzet.

# Maak nieuw project
npx create-next-app@latest todo-app

# Beantwoord de vragen:
# ✔ Would you like to use TypeScript? → Yes
# ✔ Would you like to use ESLint? → Yes
# ✔ Would you like to use Tailwind CSS? → Yes
# ✔ Would you like to use `src/` directory? → Yes
# ✔ Would you like to use App Router? → Yes
# ✔ Would you like to customize the default import alias? → No

# Ga naar project folder
cd todo-app

# Open in je editor
code .  # of: cursor .

Stap 2: Project Structuur Begrijpen

todo-app/
├── src/
│   └── app/
│       ├── layout.tsx      # Root layout (header, footer)
│       ├── page.tsx        # Homepage (/)
│       └── globals.css     # Global styles + Tailwind
├── public/                 # Static files (images, etc.)
├── .env.local             # Environment variables (maak zelf aan)
├── next.config.js         # Next.js configuratie
├── tailwind.config.ts     # Tailwind configuratie
├── package.json           # Dependencies
└── tsconfig.json          # TypeScript configuratie

Stap 3: Lokaal Draaien

# Start development server
npm run dev

# Open browser: http://localhost:3000

Stap 4: Supabase Project Aanmaken

Op supabase.com:

1. Ga naar supabase.com en maak account (gratis)
2. Klik "New Project"
3. Kies een naam (bijv. todo-app)
4. Kies een database wachtwoord (bewaar deze!)
5. Kies region: West EU (Frankfurt) (dichtst bij NL)
6. Wacht ~2 minuten tot project klaar is

Credentials ophalen:

1. Ga naar Settings → API
2. Kopieer:
   • Project URL → dit wordt NEXT_PUBLIC_SUPABASE_URL
   • anon public key → dit wordt NEXT_PUBLIC_SUPABASE_ANON_KEY

Stap 5: Environment Variables (Lokaal)

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 (deze WEL committen):

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

Check .gitignore:

# .gitignore moet bevatten:
.env*.local

Stap 6: Supabase SDK Installeren

npm install @supabase/supabase-js

Stap 7: Supabase Client Maken

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)

Stap 8: Database Tabel Maken (via UI)

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()
   user_id	uuid	auth.uid()

5. Klik "Save"

Stap 9: CRUD Operaties

// CREATE - nieuwe todo toevoegen
const { data, error } = await supabase
  .from('todos')
  .insert({ title: 'Nieuwe taak' })

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

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

// DELETE - todo verwijderen
const { error } = await supabase
  .from('todos')
  .delete()
  .eq('id', todoId)

Stap 10: Authenticatie Setup

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}
    />
  )
}

Session checken:

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

if (user) {
  // User is ingelogd
} else {
  // Redirect naar login
}

---

Deployment naar Vercel (Productie)

Stap 1: GitHub Repository

# In je project folder
git init
git add .
git commit -m "Initial commit"

# Maak repo op GitHub, dan:
git remote add origin https://github.com/jouw-username/todo-app.git
git push -u origin main

Stap 2: Vercel Deployment

1. Ga naar vercel.com
2. "Add New Project"
3. Import je GitHub repository
4. BELANGRIJK: Voeg Environment Variables toe:
   • NEXT_PUBLIC_SUPABASE_URL → je Supabase URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY → je anon key
5. Klik "Deploy"

Stap 3: Supabase URL Toestaan

In Supabase Dashboard:

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

---

Overzicht: 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 een echt project zou je aparte databases hebben, maar voor deze cursus is dat niet nodig.

---

Tools

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

---

Lesopdracht (2 uur)

Bouw een Todo App met Supabase

Deel 1: Project Setup (30 min)

• Run npx create-next-app@latest todo-app met juiste opties
• Maak Supabase account en project aan
• Configureer .env.local met credentials
• Installeer @supabase/supabase-js
• Maak src/lib/supabase.ts
• Test: npm run dev werkt zonder errors

Deel 2: Database (20 min)

• Maak todos tabel via Supabase Table Editor
• Voeg 3 test todos toe via de UI
• Test: data is zichtbaar in Table Editor

Deel 3: CRUD Interface (50 min)

• Bouw UI om todos te tonen (lijst)
• Voeg form toe om nieuwe todo te maken
• Voeg checkbox toe om todo af te vinken
• Voeg delete button toe
• Test: alle CRUD operaties werken

Deel 4: Authenticatie (20 min)

• Installeer auth packages
• Maak login pagina met Auth UI
• Toon alleen todos voor ingelogde user
• Test: login met magic link werkt

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)

• Push code naar GitHub
• Deploy naar Vercel
• Configureer environment variables in Vercel
• Voeg Vercel URL toe aan Supabase Redirect URLs
• Test: app werkt op productie URL

Deel 2: Features Uitbreiden (1 uur)

• Filter buttons: Alle / Actief / Voltooid
• Sorteer op datum (nieuwste eerst)
• Toon alleen todos van ingelogde user (filter op user_id)
• Loading state tijdens data ophalen
• Error state bij problemen
• Empty state: "Geen todos gevonden"

Deel 3: Polish (30 min)

• Styling verbeteren met Tailwind
• Responsive design (mobile friendly)
• 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 Next.js project opzetten met npx create-next-app
• De project structuur begrijpen en navigeren
• Een Supabase project aanmaken en configureren
• Environment variables correct beheren (lokaal en productie)
• De Supabase client installeren en configureren
• Tabellen maken via de Supabase UI
• 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