final lessons

Les08-Van-InMemory-naar-Supabase/Les08-Huiswerk.md

@@ -0,0 +1,102 @@
+# Les 8 — Huiswerk
+## QuickPoll polish + bonus features
+
+**Deadline:** Voor Les 9
+**Inleveren:** GitHub repo via Teams
+
+---
+
+## Opdracht 1 — Deploy naar Vercel
+
+Push je app naar GitHub (als nog niet), dan:
+
+1. vercel.com → Add New Project → import jouw repo
+2. Add env vars: `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`
+3. Deploy
+
+Test op productie URL — moet werken.
+
+Noteer in `DEPLOY.md`: productie URL.
+
+---
+
+## Opdracht 2 — Voeg validatie toe
+
+Server actions valideren nu te min. Voeg toe:
+
+- Min 3, max 100 karakters voor poll-titel
+- Min 2, max 10 opties
+- Toon validation errors **inline** (geen throw)
+- Form blijft ingevuld bij error
+
+Hint: return error-object uit server action, gebruik `useActionState` in form.
+
+---
+
+## Opdracht 3 — Optimistic UI
+
+Voeg `useOptimistic` toe aan VoteForm voor instant vote-feedback:
+
+```tsx
+const [optimisticOptions, addOptimisticVote] = useOptimistic(
+  poll.options,
+  (state, optionId) => state.map(o =>
+    o.id === optionId ? { ...o, votes: o.votes + 1 } : o
+  )
+);
+```
+
+Bij click: roep `addOptimisticVote(optionId)` aan voor de server call.
+
+---
+
+## Opdracht 4 — TypeScript types
+
+Genereer types vanuit Supabase (uit Les 7 bonus):
+
+```bash
+pnpm dlx supabase gen types typescript --linked > types/database.ts
+```
+
+Update `lib/supabase.ts`:
+
+```typescript
+import type { Database } from "@/types/database";
+export const supabase = createClient<Database>(...);
+```
+
+Refactor één query om de gegenereerde types te gebruiken (autocomplete moet werken).
+
+---
+
+## Opdracht 5 — Reflectie (250 woorden)
+
+In `REFLECTIE.md`:
+- Wat voelt natuurlijk aan Server Actions + Supabase combo?
+- Welke RPC functions zou je nog meer willen maken?
+- Wat verbaast je over Supabase t.o.v. eerdere database-ervaringen?
+- Wat is je grootste vraag voor Les 9 (Auth)?
+
+---
+
+## Bonus
+
+- **Realtime updates** — `supabase.channel(...).on("postgres_changes", ...)` voor live vote-updates
+- **Delete polls** — admin-page met delete button
+- **Public link sharing** — kopieer-URL knop voor polls
+
+---
+
+## Inleveren
+
+GitHub repo URL + Vercel productie URL via Teams. Werkende app + REFLECTIE.md + DEPLOY.md.
+
+---
+
+## Tips
+
+- **Validation** is meestal het vervelendste — werk er gestaag aan
+- **Optimistic UI** voelt magisch maar is lastig — test edge cases
+- **Tijd:** ~2-3 uur
+
+Volgende les: Supabase Auth. We laten users inloggen + RLS per user.