fix: implement lessons feedback

2026-01-30 11:56:39 +01:00
parent 04f32babd3
commit 1e324e2f0e
18 changed files with 3828 additions and 3199 deletions
--- a/Samenvattingen/Les09-Samenvatting.md
+++ b/Samenvattingen/Les09-Samenvatting.md
@@ -1,302 +1,305 @@
-# Les 9: AI Agents - Custom GPTs & Claude Projects
+# Les 9: Supabase Basics

 ---

 ## Hoofdstuk
-**Hoofdstuk 2: Intermediate** (Les 4-9)
+**Deel 2: Technical Foundations** (Les 5-9)

 ## Beschrijving
-Leer werken met AI Agents: gepersonaliseerde AI assistenten die je kunt trainen op jouw specifieke taken en werkwijze.
+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.

 ---

 ## Te Behandelen

-### Wat zijn AI Agents?
+### Wat is Supabase?

-**Chatbot vs Agent:**
+**Supabase = Database + Auth in één**
+- PostgreSQL database (gratis tier: 500MB)
+- Ingebouwde authenticatie
+- Real-time subscriptions
+- File storage
+- Auto-generated API

-| Chatbot | Agent |
-|---------|-------|
-| Reageert op vragen | Neemt initiatief |
-| Geen geheugen | Onthoudt context |
-| Algemene kennis | Specifieke expertise |
-| Eenmalige interactie | Langere samenwerkingen |
-
-**Agent = AI met:**
- Custom instructies (hoe moet hij zich gedragen)
- Eigen kennis (documenten, voorbeelden)
- Specifieke taken (waar is hij goed in)
+**Waarom Supabase voor beginners:**
+- Geen eigen server nodig
+- Visuele Table Editor (geen SQL kennis nodig)
+- Simpele JavaScript SDK
+- Gratis tier is ruim voldoende

 ---

-### Custom GPTs (ChatGPT)
+### Supabase Project Aanmaken

-**Wat is een Custom GPT?**
-Een gepersonaliseerde versie van ChatGPT voor specifieke taken.
+**Stap 1:** Ga naar [supabase.com](https://supabase.com) en maak account

-**Onderdelen:**
-1. **Instructions:** Hoe moet de GPT zich gedragen?
-2. **Conversation starters:** Voorbeeld prompts
-3. **Knowledge:** Upload documenten als context
-4. **Capabilities:** Web browsing, code interpreter, DALL-E
+**Stap 2:** Klik "New Project"
+- Naam: `todo-app`
+- Database Password: (bewaar deze!)
+- Region: `West EU (Frankfurt)` (dichtst bij NL)

-**Voorbeeld: Code Reviewer GPT**
+**Stap 3:** Wacht ~2 minuten tot project klaar is

-*Instructions:*
+**Stap 4:** Ga naar Settings → API en kopieer:
+- `Project URL`
+- `anon public` key
+
+---
+
+### Je Database Schema Implementeren
+
+In Les 8 heb je een database schema ontworpen. Nu gaan we dat implementeren!
+
+**In Supabase Dashboard → Table Editor:**
+
+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
+
+**Voorbeeld: todos tabel**
+
+| 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
 ```
-Je bent een strenge code reviewer voor React/TypeScript projecten.

-Bij elke code review check je:
-1. TypeScript types correct?
-2. React best practices gevolgd?
-3. Geen hardcoded values?
-4. Error handling aanwezig?
-5. Accessibility (ARIA labels)?
-
-Geef feedback in dit format:
- ✅ Goed: [wat is goed]
- ⚠️ Verbeter: [wat kan beter]
- ❌ Fix: [wat moet gefixed worden]
-
-Wees streng maar constructief.
+**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
 ```

 ---

-### Claude Projects
+### Supabase SDK Installeren

-**Wat is een Claude Project?**
-Een Claude-omgeving met custom context voor een specifiek project.
-
-**Onderdelen:**
-1. **Project Knowledge:** Upload relevante documenten
-2. **Custom Instructions:** Hoe moet Claude zich gedragen
-3. **Conversation History:** Context blijft bewaard
-
-**Voordelen:**
- Langere context dan ChatGPT
- Betere nuance in antwoorden
- Artifacts voor code en documenten
-
-**Voorbeeld: Project voor je Todo App**
-
-*Custom Instructions:*
-```
-Dit is mijn Todo app project.
-
-Tech stack:
- Next.js 14 met App Router
- TypeScript
- Tailwind CSS
- Supabase voor database en auth
-
-Code conventies:
- Functional components
- Named exports
- Async/await (geen .then)
-
-Als je code schrijft, volg altijd deze conventies.
+```bash
+npm install @supabase/supabase-js
 ```

-*Project Knowledge:*
- Upload je belangrijkste component files
- Upload je Supabase schema
+**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!

-### Wanneer Welke Gebruiken?
-
-| Situatie | Tool |
-|----------|------|
-| Snelle code review | Custom GPT |
-| Werken aan specifiek project | Claude Project |
-| Documentatie genereren | Custom GPT |
-| Lange context nodig | Claude Project |
-| Wil delen met anderen | Custom GPT |
-| Privé project context | Claude Project |
-
---
-
-### Custom GPT Maken
-
-**Stap 1:** Ga naar chat.openai.com → "Explore GPTs" → "Create"
-
-**Stap 2:** Vul in:
- Naam: "React Code Reviewer"
- Beschrijving: "Reviews React/TypeScript code"
- Instructions: (zie voorbeeld hierboven)
-
-**Stap 3:** Test met echte code
-
-**Stap 4:** Itereer op instructions
- Wat mist hij?
- Wat doet hij verkeerd?
- Pas aan en test opnieuw
-
---
-
-### Claude Project Maken
-
-**Stap 1:** Ga naar claude.ai → "Projects" → "Create project"
-
-**Stap 2:** Geef project een naam
-
-**Stap 3:** Upload Project Knowledge
- Drag & drop je belangrijkste files
- Of kopieer/plak code snippets
-
-**Stap 4:** Schrijf Custom Instructions
- Beschrijf je tech stack
- Beschrijf je conventies
- Beschrijf wat je wilt dat Claude doet
-
-**Stap 5:** Start chatten binnen het project
-
---
-
-### Agent Instructions Schrijven
-
-**Goede instructions bevatten:**
-
-1. **Rol:** Wie is de agent?
-```
-Je bent een senior React developer die code reviewt.
-```
-
-2. **Context:** Wat is de situatie?
-```
-Je reviewt code voor een startup met strakke deadlines.
-Focus op kritieke issues, niet op style preferences.
-```
-
-3. **Gedrag:** Hoe moet hij reageren?
-```
-Wees direct maar vriendelijk.
-Geef altijd een voorbeeld van de betere oplossing.
-```
-
-4. **Format:** Hoe moet output eruitzien?
-```
-Gebruik markdown formatting.
-Groepeer feedback per categorie.
-```
-
-5. **Beperkingen:** Wat moet hij NIET doen?
-```
-Herschrijf niet de hele codebase.
-Focus op de gevraagde code, niet op andere files.
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)
 ```

 ---

-### Praktische Agent Ideeën
+### CRUD Operaties

-| Agent | Doel |
-|-------|------|
-| **Code Reviewer** | Check code op bugs en best practices |
-| **Doc Generator** | Genereer documentatie voor components |
-| **Bug Debugger** | Help bij error messages uitleggen |
-| **Refactor Helper** | Suggesties voor code verbetering |
-| **Test Writer** | Genereer unit tests |
-| **Rubber Duck** | Denk hardop mee over problemen |
+**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/**`

 ---

 ## Tools
- ChatGPT (Custom GPTs)
- Claude Desktop (Projects)
+- Supabase
+- Next.js
+- OpenCode/WebStorm
+- Vercel
+- Git

 ---

 ## Lesopdracht (2 uur)

-### Bouw Je Eerste AI Agents
+### Bouw een Todo App met Supabase

-**Deel 1: Custom GPT - Code Reviewer (45 min)**
+**Groepsdiscussie (15 min):**
+Bespreek klassikaal de database schemas uit Les 8 - wie heeft welke structuur gekozen en waarom?

-1. Ga naar ChatGPT → Create GPT
-2. Maak "Code Reviewer" met deze checklist:
-   - TypeScript types
-   - React best practices
-   - Error handling
-   - Accessibility
-   - Performance
-3. Upload sample "goede" code als knowledge
-4. Test met code uit je Todo app
-5. Itereer op de instructions
+**Deel 1: Supabase Setup (30 min)**

-**Deel 2: Claude Project - Todo App Context (45 min)**
+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`

-1. Maak nieuw Claude Project
-2. Upload je Todo app files als knowledge
-3. Schrijf custom instructions met je tech stack
-4. Test: vraag Claude om een nieuwe feature te bouwen
-5. Vergelijk: kent hij je project context?
+Test: `npm run dev` werkt zonder errors

-**Deel 3: Vergelijking (30 min)**
+**Deel 2: CRUD Interface (1 uur)**

-Test dezelfde vraag in beide:
-```
-Review deze code en geef verbeter suggesties:
-[plak je TodoList component]
-```
+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

-Documenteer:
- Welke geeft betere feedback?
- Welke voelt meer "op maat"?
- Wanneer zou je welke gebruiken?
+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

 ### Deliverable
- Werkende Custom GPT (link delen)
- Claude Project met project context
- Vergelijkings notities
+- Werkende Todo app lokaal
+- GitHub repository met code
+- Screenshot van werkende app

 ---

 ## Huiswerk (2 uur)

-### Personal Dev Assistant
+### Deploy naar Productie + Uitbreiden

-**Deel 1: Bouw Je Personal Assistant (1 uur)**
+**Deel 1: Deployment (30 min)**

-Maak een Custom GPT of Claude Project die:
- Jouw coding standards kent
- Jouw tech stack begrijpt
- Jouw workflow ondersteunt
+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!

-**Include in instructions:**
- Jouw voorkeuren (tabs vs spaces, etc.)
- Jouw tech stack details
- Typische taken die je doet
- Hoe je feedback wilt krijgen
+**Deel 2: Features Uitbreiden (1 uur)**

-**Deel 2: Test in Echt Werk (45 min)**
+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"

-Gebruik je assistant voor echte taken:
-1. Code review van een component
-2. Help bij een bug
-3. Genereer documentatie
+**Deel 3: Polish (30 min)**

-**Deel 3: Reflectie (15 min)**
-
-Schrijf korte reflectie (300 woorden):
- Hoe helpful was je agent?
- Wat zou je verbeteren?
- Ga je dit blijven gebruiken?
+1. Styling verbeteren met Tailwind
+2. Responsive design (mobile friendly)
+3. Kleine animaties (fade in/out)

 ### Deliverable
- Personal Dev Assistant (GPT link of Claude Project screenshot)
- 3 voorbeelden van gebruik
- Reflectie (300 woorden)
+- Deployed app op Vercel (werkende URL!)
+- Alle features werken in productie
+- Screenshot van productie app

 ---

 ## Leerdoelen
 Na deze les kan de student:
- Het verschil uitleggen tussen chatbots en AI agents
- Custom GPTs bouwen met instructions en knowledge base
- Claude Projects opzetten met custom instructions en context
- Effectieve agent instructions schrijven
- De juiste tool kiezen (Custom GPT vs Claude Project)
- Een personal dev assistant maken voor eigen workflow
+- 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