76 lines
1.8 KiB
Markdown
76 lines
1.8 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
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.
|