2.6 KiB
Les 10: Full-Stack Mini Project
Hoofdstuk
Deel 3: Integration & AI Tooling (Les 10-12)
Beschrijving
Combineer alles wat je geleerd hebt (TypeScript, Next.js, Supabase) in een kleine werkende applicatie. Dit is je eerste "echte" full-stack project en voorbereiding op het werken met AI tools.
Te Behandelen
Groepsdiscussie (15 min)
Bespreek klassikaal de Supabase ervaringen uit Les 9 - welke uitdagingen kwamen jullie tegen bij authenticatie en RLS?
Doel van deze les
Je hebt nu alle bouwstenen:
- TypeScript (Les 5)
- Next.js met App Router (Les 6-7)
- Supabase database & auth (Les 8-9)
Vandaag combineren we dit in een werkende mini-app. Geen nieuwe concepten - alleen integratie en toepassing.
Mini Project: Personal Bookmarks
Een simpele bookmark manager waar je links kunt opslaan.
Features:
- Login met Supabase Auth
- Bookmarks toevoegen (URL + titel)
- Bookmarks bekijken en verwijderen
Tech stack:
- Next.js 14 met App Router
- TypeScript
- Tailwind CSS
- Supabase (auth + database)
- React Query
Stap-voor-stap
Database Schema
Tabel: bookmarks
| Kolom | Type |
|---|---|
| id | uuid (PK) |
| user_id | uuid (FK naar auth.users) |
| url | text |
| title | text |
| created_at | timestamptz |
RLS: Users kunnen alleen eigen bookmarks zien, toevoegen en verwijderen.
Wat je bouwt
- Login pagina - Supabase Auth
- Dashboard - Lijst van bookmarks
- Add form - URL + titel invoeren
- Delete - Bookmark verwijderen
Tools
- VS Code
- Supabase Dashboard
- Browser DevTools
Lesopdracht (2.5 uur)
Bouw de Bookmark Manager
Checkpoints:
| Tijd | Wat klaar moet zijn |
|---|---|
| 30 min | Project setup + database schema |
| 60 min | Auth werkt (login/logout) |
| 90 min | Bookmarks toevoegen en bekijken |
| 120 min | Delete werkt |
| 150 min | Styling en testen |
Minimale eisen:
- Login/logout werkt
- Bookmarks toevoegen werkt
- Bookmarks worden getoond
- Delete werkt
Deliverable
- Werkende lokale applicatie
- Screenshot van je app met data
Huiswerk (1 uur)
Reflectie
Schrijf korte reflectie (200 woorden):
- Wat ging goed bij het integreren?
- Waar liep je vast?
- Wat zou je volgende keer anders doen?
Maak een lijst van 3 verbeterpunten voor je code.
Deliverable
- Reflectie (200 woorden)
- 3 verbeterpunten
Leerdoelen
Na deze les kan de student:
- Een complete full-stack applicatie bouwen met Next.js, TypeScript en Supabase
- CRUD operaties implementeren met React Query
- Authenticatie integreren in een applicatie
- Zelfstandig integratieproblemen oplossen