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:

vercel.com → Add New Project → import jouw repo
Add env vars: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY
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:

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):

pnpm dlx supabase gen types typescript --linked > types/database.ts

Update lib/supabase.ts:

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.

2.4 KiB Raw Blame History