Les 5 — Huiswerk

QuickPoll uitbreiden + Next.js verkennen

Deadline: Voor volgende les Inleveren: GitHub repo link via Teams

Opdracht 1 — Push naar GitHub

Als je dat nog niet hebt gedaan:

cd quickpoll
git init
git add .
git commit -m "QuickPoll Part 1 — Les 5"
# Maak nieuwe repo op github.com/new (public)
git branch -M main
git remote add origin https://github.com/JOUW-USER/quickpoll.git
git push -u origin main

Opdracht 2 — Voeg 3 polls toe + statistiek

Pas lib/data.ts aan: voeg minstens 3 polls toe met diverse opties. Op de homepage: toon het totale aantal stemmen per poll (sum van votes).

Opdracht 3 — Detail-pagina aanvulling

Voeg op de poll-detailpagina toe:

Aantal totaal stemmen (boven de buttons)
Percentage per optie (bv. "45%") naast votes-aantal
Een "Terug naar overzicht" link naar homepage

Opdracht 4 — Eigen polish (vrij)

Kies minstens één:

Mooie skeleton in app/loading.tsx
Custom 404 in app/not-found.tsx
Hover-animatie op poll-items
Mobile-vriendelijke styling (responsive grid)

Opdracht 5 — Reflectie (200 woorden)

Schrijf een korte reflectie:

Wat snap je nog niet over Server vs Client Components?
Welke onderdelen voelden makkelijk? Welke lastig?
Wat zou je willen leren over Next.js dat we nog niet hebben gedaan?

Plak in een REFLECTIE.md in je repo.

Inleveren

GitHub repo URL via Teams. Aan het eind moet je pnpm dev runnen en alles werken — geen broken pages.

Tips

Commit per opdracht — kleinere commits = makkelijker review
Test mobile — Chrome DevTools → toggle device toolbar
Vraag hulp in Teams als je vastloopt
Tijdsindicatie: ~1,5 uur

Volgende les bouwen we Server Actions in — Part 2 van QuickPoll.

1.8 KiB Raw Permalink Blame History