# 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:**
```bash
npm install @supabase/supabase-js
```

**Setup:**
```ts
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:**
```ts
const { data, error } = await supabase
  .from('todos')
  .insert({ title: 'Nieuwe taak', completed: false })
```

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

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

**Delete:**
```ts
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