fix: update supabase lessons to make them a bit simpler

This commit is contained in:
Tim Rijkse
2026-01-29 14:14:14 +01:00
parent e048abf724
commit f5ed2f7f31
5 changed files with 630 additions and 409 deletions

101
readme.md
View File

@@ -16,14 +16,14 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 2 | 📋 Samenvatting |
| 05 | [AI voor Content en Asset Generation](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
| 06 | [MCP & Component Libraries](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
| 07 | [Backend Made Easy met Supabase + AI](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
| 07 | [Backend Basics met Supabase](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
| 08 | [Claude Code - Agentic Coding Mode](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
| 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
| 10 | [Supabase Automation - Cron Jobs & Webhooks](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
| 10 | [Project Setup & Repository Structure](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
| 11 | [Introduction to Cursor](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
| 12 | [Advanced Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
| 13 | [Mastering Cursor met Claude Opus](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
| 14 | [Supabase Advanced - Realtime & Edge Functions](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
| 14 | [Debugging & Code Review met AI](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
| 15 | [AI-Driven Testing & Quality Assurance](Samenvattingen/Les15-Samenvatting.md) | 3 | 📋 Samenvatting |
| 16 | [Building AI-Powered Features](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
| 17 | [Advanced Deployment & Production](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
@@ -102,7 +102,7 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
**6 lessen · 10 EC**
Verdieping in prompt engineering, backend development met Supabase, en introductie tot AI agents en MCP.
Verdieping in prompt engineering, Supabase basics, en introductie tot AI agents en MCP.
---
@@ -148,7 +148,7 @@ Verdieping in prompt engineering, backend development met Supabase, en introduct
---
## 2.2 Backend & Database
## 2.2 MCP & Supabase
### Les 6: MCP & Component Libraries
@@ -170,21 +170,22 @@ Verdieping in prompt engineering, backend development met Supabase, en introduct
---
### Les 7: Backend Made Easy met Supabase + AI + Skills
### Les 7: Backend Basics met Supabase
**Tools:** OpenCode/WebStorm, Supabase, supabase-postgres-best-practices skill, Next.js
**Tools:** Supabase, Next.js, Cursor/OpenCode
**Theorie/Uitleg:**
- Supabase overview: Postgres, Auth, Storage, Realtime, Edge Functions
- Waarom Supabase + AI perfect combo
- Database design met AI + Skills
- Row Level Security (RLS) policies
- TypeScript types auto-genereren
- Supabase client setup en CRUD operaties
- Wat is Supabase: open-source Firebase alternative
- Supabase UI Tour: Table Editor, tabellen maken zonder SQL
- Database basics: tabellen, kolommen, rijen (geen SQL kennis nodig)
- Supabase client setup in Next.js
- CRUD operaties: create, read, update, delete
- Simpele authenticatie met Auth UI component
- Environment variables correct gebruiken
**Lesopdracht:** Bouw Todo App backend: database schema met AI, RLS policies, Next.js integratie met CRUD.
**Lesopdracht:** Bouw Todo App met Supabase: maak tabel via UI, setup client, bouw CRUD interface, voeg login toe met Auth UI.
**Huiswerk:** Extend Todo app met categories, user profile (avatar upload), stats dashboard. Deploy naar Vercel.
**Huiswerk:** Extend Todo app met filtering, user-specifieke todos, loading/error states. Deploy naar Vercel.
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
@@ -242,21 +243,22 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
## 3.1 Advanced AI Tools
### Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
### Les 10: Project Setup & Repository Structure
**Tools:** Supabase (Edge Functions, pg_cron), Claude/OpenAI API, Resend/SendGrid
**Tools:** Cursor, Git & GitHub, Next.js
**Theorie/Uitleg:**
- Types van automation: scheduled tasks, event-driven, AI-powered
- Supabase Edge Functions (Deno, TypeScript, serverless)
- Scheduled Edge Functions (cron jobs)
- Webhook Edge Functions
- AI integratie in Edge Functions
- AI Automation workflow patterns
- Waarom goede project structuur belangrijk is voor AI tools
- Ideale folder structuur voor Next.js projecten
- .cursorrules files: project-specifieke instructies voor Cursor
- docs/ folder: PROMPT-LOG.md, AI-DECISIONS.md, PROJECT-BRIEF.md
- Environment variables beheren (.env.local vs .env.example)
- README.md best practices
- Git best practices: commits, branches, .gitignore
**Lesopdracht:** Bouw 2 automations: Daily Summary Email (cron → AI samenvatting → email), AI Content Moderation (webhook bij nieuwe todo → AI check → enrich/flag).
**Lesopdracht:** Richt je eindproject repository in: GitHub repo, folder structuur, .cursorrules, docs/ files, environment setup, complete README.
**Huiswerk:** Bouw intelligente notificaties (gepersonaliseerd AI bericht), AI Task Breakdown Agent (complex todo → auto subtaken). 4 werkende automations + reflectie.
**Huiswerk:** Verfijn setup: uitgebreide .cursorrules (meerdere files), volledig ingevulde PROJECT-BRIEF.md, basis UI components bouwen met Cursor.
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
@@ -321,22 +323,25 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
---
## 3.2 Testing & Advanced Supabase
## 3.2 Debugging & Testing
### Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
### Les 14: Debugging & Code Review met AI
**Tools:** Supabase (Realtime, Storage, Edge Functions), Cursor, OpenAI/Anthropic API
**Tools:** Cursor, Browser DevTools, React DevTools
**Theorie/Uitleg:**
- Realtime Subscriptions: table changes, channels, presence
- Supabase Storage: uploads, buckets, transformations, signed URLs
- Edge Functions Deep Dive: Deno runtime, AI integratie
- Advanced Authentication: social logins, magic links
- Error handling & debugging
- Waarom AI effectief is voor debugging
- Error messages begrijpen (TypeError, ReferenceError, Hydration errors)
- Debugging workflow met AI: isoleer → verzamel context → vraag AI → begrijp
- Console.log debugging strategieën
- Browser DevTools basics (Console, Network, Elements)
- Code review met AI: kwaliteit, bugs, performance, security
- Refactoring met AI hulp
- Wanneer AI niet te vertrouwen
**Lesopdracht:** Level up Todo app met 3 features: Realtime Collaboration, File Attachments met Storage, AI-Powered Task Suggestions via Edge Function.
**Lesopdracht:** Debugging Challenge: los 6 opzettelijke bugs op in een project met AI hulp, documenteer wat je leert in PROMPT-LOG.md.
**Huiswerk:** Bouw Production-Ready Supabase Starter Template met complete auth, database examples, realtime demo, storage demo, Edge Function, documentatie.
**Huiswerk:** Code review je eigen eindproject met AI (3 files), refactor 1 complex component, maak persoonlijke debugging checklist.
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
@@ -364,21 +369,24 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
## 3.3 AI Features & Deployment
### Les 16: Building AI-Powered Features & Workflow Automation
### Les 16: Vercel AI SDK - AI Features in je App
**Tools:** Supabase Edge Functions, OpenAI/Anthropic API, n8n/Pipedream, Cursor
**Tools:** Vercel AI SDK, Next.js API Routes, OpenAI/Anthropic API, Cursor
**Theorie/Uitleg:**
- AI APIs overzicht: OpenAI, Anthropic, pricing, rate limits
- Veel voorkomende AI features: tekst generatie, samenvatting, chatbots
- API integratie patterns: streaming, error handling, caching
- API keys verbergen via Edge Functions
- Streaming UI implementeren
- Workflow automation met n8n/Pipedream
- Vercel AI SDK introductie: waarom een SDK vs raw API calls
- Installatie en configuratie (`ai` package)
- Core hooks: `useChat` voor conversaties, `useCompletion` voor single completions
- Streaming responses: hoe het werkt, waarom het UX verbetert
- API Routes opzetten voor AI (OpenAI/Anthropic providers)
- Chat UI bouwen met `useChat` hook (messages, input, handleSubmit)
- Conversation history opslaan in Supabase
- Error handling en loading states
- Rate limiting en cost management
**Lesopdracht:** Bouw 1 AI-powered feature (Blog Generator/Summarizer/Writing Assistant) + 1 workflow automation (Smart Form Processor/Daily AI Summary).
**Lesopdracht:** Bouw een AI Chat component met Vercel AI SDK: setup API route, implementeer `useChat` hook, style met Tailwind, sla chat history op in Supabase.
**Huiswerk:** Polish AI feature (streaming, history, rate limiting), bouw 2 automations voor eindopdracht, documentatie.
**Huiswerk:** Extend naar volledige AI feature voor je eindproject (Recipe Generator / Budget Advisor / Travel Planner), voeg streaming UI toe, implementeer conversation history, documenteer je implementatie.
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
@@ -431,8 +439,9 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
## Tech Stack
- **Frontend:** React, Next.js, Tailwind CSS
- **Backend:** Supabase (Postgres, Auth, Storage, Realtime, Edge Functions)
- **Backend:** Supabase (Postgres database, Auth)
- **AI Tools:** ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
- **AI SDK:** Vercel AI SDK (`ai` package) voor AI features in apps
- **Testing:** Vitest, React Testing Library, Playwright
- **Deployment:** Vercel, GitHub Actions