# Les 14: Supabase Advanced - Realtime, Storage & Edge Functions

> 📋 **Lesmateriaal nog niet uitgewerkt**
>
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
> - Les14-Slide-Overzicht.md
> - Les14-Lesplan.md
> - Les14-Docenttekst.md
> - Les14-Bijlage-A-Lesopdracht.md
> - Les14-Bijlage-B-Huiswerkopdracht.md

---

## Hoofdstuk
**Hoofdstuk 3: Advanced** (Les 8-18)

## Beschrijving
Geavanceerde Supabase features voor productie apps.

---

## Te Behandelen

### Realtime Subscriptions
- Hoe Postgres broadcasts
- Subscriben op table changes
- Channel-based real-time (presence, broadcast)
- Collaborative features
- Reconnections handlen

### Supabase Storage
- File uploads (images, PDFs)
- Buckets organiseren
- Image transformations (resize, format, quality)
- Signed URLs
- Storage RLS policies

### Edge Functions Deep Dive
- Deno runtime
- TypeScript
- At edge
- Waarom gebruiken:
  - Hide API keys
  - Server-side logic
  - Scheduled tasks
  - Webhooks

### AI Integratie Patterns
- Call OpenAI/Anthropic veilig
- Streaming responses

### Praktische Patterns
- Form processing
- Emails
- Data verrijking

### Authentication Advanced
- Social logins (Google, GitHub, Discord)
- Magic links
- Email confirmatie
- Password reset
- Session management

### Error Handling & Debugging
- Supabase error messages
- RLS debuggen
- Logging

### Cursor Composer
- Voor complexe multi-feature development

---

## Tools
- Supabase (Realtime, Storage, Edge Functions)
- Cursor
- OpenAI/Anthropic API

---

## Lesopdracht (2 uur)

### Level Up Todo App met 3 Advanced Features (met Cursor)

### Feature 1: Realtime Collaboration (40 min)

Real-time updates wanneer user A/B changes:
- Subscribe
- Update UI
- Show "live" indicator
- Handle reconnection

**Test met multiple windows**

### Feature 2: File Attachments met Storage (40 min)

Attach files (images/PDFs):
- Upload button
- Thumbnail voor images (transformations)
- Download voor PDFs
- Delete optie
- Proper RLS

### Feature 3: AI-Powered Task Suggestions met Edge Function (40 min)

"Suggest Subtasks" button:
- Edge Function
- OpenAI/Anthropic API (hide key)
- AI returns 3-5 subtasks
- Auto-create in database
- Stream results

**Use Cursor Composer voor alle 3 features orchestreren**

---

## Huiswerk (2 uur)

### Bouw Production-Ready Supabase Starter Template

**Use Cursor Composer + Skills**

### Include:

| Feature | Details |
|---------|---------|
| Complete Auth | Email + Google, protected routes HOC, profile met avatar |
| Database Examples | Schema met relationships, RLS gedocumenteerd, types auto-generated |
| Realtime Demo | Chat of live updates |
| Storage Demo | Upload met preview, optimization |
| Edge Function | Met AI, error handling, rate limiting |
| Documentation | Setup, env vars, extend, patterns, troubleshooting |

### Structureer als GitHub Template

**Test:**
- Clone
- Rename
- Deploy naar Vercel
- Aim: <10 min

### Deliverable
- Template repo
- Setup video
- Reflectie

---

## Leerdoelen
Na deze les kan de student:
- Realtime subscriptions implementeren voor collaborative features
- Supabase Storage gebruiken met transformations en RLS
- Edge Functions schrijven met AI integratie
- Advanced authentication implementeren (social, magic links)
- Errors debuggen in Supabase (RLS, queries)
- Een production-ready Supabase starter template bouwen