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