103 lines
2.4 KiB
Markdown
103 lines
2.4 KiB
Markdown
# 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.
|