127 lines
2.6 KiB
Markdown
127 lines
2.6 KiB
Markdown
# 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
|
|
|
|
1. **Login pagina** - Supabase Auth
|
|
2. **Dashboard** - Lijst van bookmarks
|
|
3. **Add form** - URL + titel invoeren
|
|
4. **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
|