# 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.

```bash
# 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

```bash
# Start development server
npm run dev

# Open browser: http://localhost:3000
```

### Stap 4: Supabase Project Aanmaken

**Op supabase.com:**

1. Ga naar [supabase.com](https://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:

```bash
# .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):

```bash
# .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

```bash
npm install @supabase/supabase-js
```

### Stap 7: Supabase Client Maken

Maak `src/lib/supabase.ts`:

```typescript
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

```typescript
// 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

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

**Login component:**
```tsx
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:**
```typescript
const { data: { user } } = await supabase.auth.getUser()

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

---

## Deployment naar Vercel (Productie)

### Stap 1: GitHub Repository

```bash
# 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](https://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