fix: update supabase lessons to make them a bit simpler
This commit is contained in:
101
readme.md
101
readme.md
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user