# 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