rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: les 6

Browse Source
This commit is contained in:
Tim Rijkse
2026-03-11 14:07:00 +01:00
parent d5066021ab
commit 9ffdecf2c4
117 changed files with 13198 additions and 5194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
Samenvattingen/Les09-Samenvatting.md
View File

@@ -1,305 +1,126 @@
# Les 9: Supabase Basics
# Les 9: Full-Stack Mini Project
---
## Hoofdstuk
**Deel 2: Technical Foundations** (Les 5-9)
**Deel 3: Integration & AI Tooling** (Les 9-12)
## Beschrijving
Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Pas je database schema uit Les 8 toe en bouw je eerste full-stack app.
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
### Wat is Supabase?
### Groepsdiscussie (15 min)
Bespreek klassikaal de Supabase ervaringen uit Les 8 - welke uitdagingen kwamen jullie tegen bij authenticatie en RLS?
**Supabase = Database + Auth in één**
- PostgreSQL database (gratis tier: 500MB)
- Ingebouwde authenticatie
- Real-time subscriptions
- File storage
- Auto-generated API
### Doel van deze les
**Waarom Supabase voor beginners:**
- Geen eigen server nodig
- Visuele Table Editor (geen SQL kennis nodig)
- Simpele JavaScript SDK
- Gratis tier is ruim voldoende
Je hebt nu alle bouwstenen:
- TypeScript (Les 4)
- Next.js met App Router (Les 5-6)
- Supabase database & auth (Les 7-8)
Vandaag combineren we dit in een **werkende mini-app**. Geen nieuwe concepten - alleen integratie en toepassing.
---
### Supabase Project Aanmaken
### Mini Project: Personal Bookmarks
**Stap 1:** Ga naar [supabase.com](https://supabase.com) en maak account
Een simpele bookmark manager waar je links kunt opslaan.
**Stap 2:** Klik "New Project"
- Naam: `todo-app`
- Database Password: (bewaar deze!)
- Region: `West EU (Frankfurt)` (dichtst bij NL)
**Features:**
- Login met Supabase Auth
- Bookmarks toevoegen (URL + titel)
- Bookmarks bekijken en verwijderen
**Stap 3:** Wacht ~2 minuten tot project klaar is
**Stap 4:** Ga naar Settings → API en kopieer:
- `Project URL`
- `anon public` key
**Tech stack:**
- Next.js 14 met App Router
- TypeScript
- Tailwind CSS
- Supabase (auth + database)
- React Query
---
### Je Database Schema Implementeren
### Stap-voor-stap
In Les 8 heb je een database schema ontworpen. Nu gaan we dat implementeren!
#### Database Schema
**In Supabase Dashboard → Table Editor:**
**Tabel: bookmarks**
| Kolom | Type |
|-------|------|
| id | uuid (PK) |
| user_id | uuid (FK naar auth.users) |
| url | text |
| title | text |
| created_at | timestamptz |
1. Klik "New Table"
2. Gebruik je schema uit Les 8
3. Voeg kolommen toe met de juiste types
4. Definieer Primary Keys en Foreign Keys
**RLS:** Users kunnen alleen eigen bookmarks zien, toevoegen en verwijderen.
**Voorbeeld: todos tabel**
#### Wat je bouwt
| Name | Type | Default | Primary |
|------|------|---------|---------|
| id | int8 | - | ✓ (auto) |
| title | text | - | |
| completed | bool | false | |
| created_at | timestamptz | now() | |
---
### Environment Variables
**Wat zijn environment variables?**
- Configuratie die NIET in je code hoort
- API keys, database URLs, secrets
- Verschillend per omgeving (lokaal vs productie)
**Maak `.env.local` in je project root:**
```bash
# .env.local - NOOIT committen naar Git!
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
```
**Maak ook `.env.example` (WEL committen):**
```bash
# .env.example - template voor anderen
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
---
### Supabase SDK Installeren
```bash
npm install @supabase/supabase-js
```
**Maak `src/lib/supabase.ts`:**
```typescript
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
```
---
### CRUD Operaties
**C - Create (toevoegen):**
```typescript
const { data, error } = await supabase
.from('todos')
.insert({ title: 'Nieuwe taak' })
```
**R - Read (ophalen):**
```typescript
const { data, error } = await supabase
.from('todos')
.select('*')
.order('created_at', { ascending: false })
```
**U - Update (wijzigen):**
```typescript
const { data, error } = await supabase
.from('todos')
.update({ completed: true })
.eq('id', todoId)
```
**D - Delete (verwijderen):**
```typescript
const { error } = await supabase
.from('todos')
.delete()
.eq('id', todoId)
```
---
### Authenticatie met Auth UI
**Installeer auth packages:**
```bash
npm install @supabase/auth-ui-react @supabase/auth-ui-shared
```
**Login component:**
```tsx
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { supabase } from '@/lib/supabase'
export function LoginForm() {
return (
<Auth
supabaseClient={supabase}
appearance={{ theme: ThemeSupa }}
providers={[]}
magicLink={true}
/>
)
}
```
**Huidige user checken:**
```typescript
const { data: { user } } = await supabase.auth.getUser()
if (user) {
// User is ingelogd
console.log('Logged in as:', user.email)
} else {
// Redirect naar login
}
```
---
### Deployment naar Vercel
**Stap 1: Push naar GitHub**
```bash
git add .
git commit -m "Add Supabase integration"
git push
```
**Stap 2: Deploy op Vercel**
1. Ga naar [vercel.com](https://vercel.com)
2. "Add New Project"
3. Import je GitHub repo
4. **BELANGRIJK:** Voeg Environment Variables toe!
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
5. Klik "Deploy"
**Stap 3: Supabase Redirect URLs**
1. Ga naar Supabase → Authentication → URL Configuration
2. Voeg toe bij "Redirect URLs":
- `https://jouw-app.vercel.app/**`
1. **Login pagina** - Supabase Auth
2. **Dashboard** - Lijst van bookmarks
3. **Add form** - URL + titel invoeren
4. **Delete** - Bookmark verwijderen
---
## Tools
- Supabase
- Next.js
- OpenCode/WebStorm
- Vercel
- Git
- VS Code
- Supabase Dashboard
- Browser DevTools
---
## Lesopdracht (2 uur)
## Lesopdracht (2.5 uur)
### Bouw een Todo App met Supabase
### Bouw de Bookmark Manager
**Groepsdiscussie (15 min):**
Bespreek klassikaal de database schemas uit Les 8 - wie heeft welke structuur gekozen en waarom?
**Checkpoints:**
**Deel 1: Supabase Setup (30 min)**
| 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 |
1. Maak Supabase account en project
2. Maak je tabellen via Table Editor (gebaseerd op Les 8 schema)
3. Kopieer credentials
4. Installeer `@supabase/supabase-js`
5. Maak `src/lib/supabase.ts`
6. Configureer `.env.local`
Test: `npm run dev` werkt zonder errors
**Deel 2: CRUD Interface (1 uur)**
Bouw UI voor todos:
1. Lijst van todos tonen
2. Form om nieuwe todo toe te voegen
3. Checkbox om todo af te vinken
4. Delete button per todo
Gebruik AI hulp voor de components!
**Deel 3: Authenticatie (30 min)**
1. Installeer auth packages
2. Maak login pagina met Auth UI
3. Toon alleen app voor ingelogde users
4. Test: login met magic link
**Minimale eisen:**
- [ ] Login/logout werkt
- [ ] Bookmarks toevoegen werkt
- [ ] Bookmarks worden getoond
- [ ] Delete werkt
### Deliverable
- Werkende Todo app lokaal
- GitHub repository met code
- Screenshot van werkende app
- Werkende lokale applicatie
- Screenshot van je app met data
---
## Huiswerk (2 uur)
## Huiswerk (1 uur)
### Deploy naar Productie + Uitbreiden
### Reflectie
**Deel 1: Deployment (30 min)**
Schrijf korte reflectie (200 woorden):
- Wat ging goed bij het integreren?
- Waar liep je vast?
- Wat zou je volgende keer anders doen?
1. Push naar GitHub
2. Deploy naar Vercel
3. Configureer env vars in Vercel
4. Voeg Vercel URL toe aan Supabase Redirect URLs
5. Test: app werkt op productie URL!
**Deel 2: Features Uitbreiden (1 uur)**
Voeg toe:
1. Filter buttons: Alle / Actief / Voltooid
2. Sorteer op datum (nieuwste eerst)
3. Loading state tijdens data ophalen
4. Error state bij problemen
5. Empty state: "Geen todos gevonden"
**Deel 3: Polish (30 min)**
1. Styling verbeteren met Tailwind
2. Responsive design (mobile friendly)
3. Kleine animaties (fade in/out)
Maak een lijst van 3 verbeterpunten voor je code.
### Deliverable
- Deployed app op Vercel (werkende URL!)
- Alle features werken in productie
- Screenshot van productie app
- Reflectie (200 woorden)
- 3 verbeterpunten
---
## Leerdoelen
Na deze les kan de student:
- Een Supabase project aanmaken en configureren
- Database schema implementeren via Table Editor
- Environment variables correct beheren
- De Supabase client installeren en configureren
- CRUD operaties uitvoeren met de Supabase SDK
- Authenticatie implementeren met Auth UI
- Deployen naar Vercel met environment variables
- Database principles uit Les 8 toepassen in de praktijk
- 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