novi-lessons/Samenvattingen/Les14-Samenvatting.md

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