fix: implement lessons feedback
This commit is contained in:
Tim Rijkse
@@ -1,152 +1,276 @@
|
||||
# Les 18: Eindproject Werksessie
|
||||
# Les 18: Deployment & Production + Eindopdracht
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
**Deel 4: Advanced AI Features** (Les 13-18)
|
||||
|
||||
## Beschrijving
|
||||
Werksessie voor het afronden van je eindproject. Geen nieuwe theorie - focus op bouwen, vragen stellen, en hulp krijgen.
|
||||
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie. Bespreking van de eindopdracht requirements en afrondende werksessie.
|
||||
|
||||
---
|
||||
|
||||
## Opzet van de Les
|
||||
## Te Behandelen
|
||||
|
||||
### Korte Standup (15 min)
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de AI feature ervaringen uit Les 17 - welke system prompts werkten goed en welke challenges kwamen jullie tegen?
|
||||
|
||||
**Elke student deelt (max 1 minuut):**
|
||||
1. Waar sta ik?
|
||||
2. Wat is mijn grootste blocker?
|
||||
3. Wat wil ik vandaag afronden?
|
||||
### Vercel Deployment Flow
|
||||
|
||||
### Werktijd (1u 45min)
|
||||
**Hoe Vercel werkt:**
|
||||
1. Connect GitHub repository
|
||||
2. Push naar main → automatische deploy
|
||||
3. Push naar andere branch → preview URL
|
||||
4. Alles automatisch (build, SSL, CDN)
|
||||
|
||||
**Studenten werken zelfstandig:**
|
||||
- Docent loopt rond
|
||||
- Vraag hulp wanneer nodig
|
||||
- Peer support aangemoedigd
|
||||
|
||||
**Focus gebieden:**
|
||||
- Features afronden
|
||||
- Bugs fixen
|
||||
- Documentatie completeren
|
||||
- Deployment issues oplossen
|
||||
**Waarom Vercel voor Next.js:**
|
||||
- Gemaakt door dezelfde makers
|
||||
- Zero-config deployment
|
||||
- Gratis tier ruim voldoende
|
||||
- Automatische HTTPS
|
||||
- Global CDN
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende Problemen
|
||||
### Environment Variables in Vercel
|
||||
|
||||
### AI Chat Werkt Niet
|
||||
**Lokaal (.env.local) vs Productie (Vercel Dashboard):**
|
||||
|
||||
**Check:**
|
||||
| Waar | Bestand/Locatie | Voorbeeld |
|
||||
|------|-----------------|-----------|
|
||||
| Lokaal | `.env.local` | Development |
|
||||
| Vercel | Dashboard → Settings → Env Vars | Production |
|
||||
|
||||
**Stap voor stap:**
|
||||
1. Ga naar je Vercel project
|
||||
2. Settings → Environment Variables
|
||||
3. Voeg toe:
|
||||
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||
- `OPENAI_API_KEY`
|
||||
4. Selecteer environment (Production, Preview, Development)
|
||||
5. Save & Redeploy
|
||||
|
||||
**Let op:**
|
||||
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
|
||||
- Zonder prefix = alleen server-side (API routes)
|
||||
|
||||
---
|
||||
|
||||
### Supabase Productie Setup
|
||||
|
||||
**Redirect URLs configureren:**
|
||||
1. Ga naar Supabase → Authentication → URL Configuration
|
||||
2. Voeg toe bij "Redirect URLs":
|
||||
- `https://jouw-app.vercel.app/**`
|
||||
- `https://jouw-app.vercel.app`
|
||||
|
||||
**Waarom:**
|
||||
- Auth redirects werken alleen naar toegestane URLs
|
||||
- Wildcards (`**`) voor sub-routes
|
||||
|
||||
---
|
||||
|
||||
### Deployment Checklist
|
||||
|
||||
**Voor deployment:**
|
||||
- [ ] `npm run build` werkt lokaal
|
||||
- [ ] Geen TypeScript errors
|
||||
- [ ] Environment variables gedocumenteerd in `.env.example`
|
||||
- [ ] `.gitignore` bevat `.env*.local`
|
||||
- [ ] README up-to-date
|
||||
|
||||
**Na deployment:**
|
||||
- [ ] App laadt correct
|
||||
- [ ] Auth werkt (login/logout)
|
||||
- [ ] Data wordt opgehaald uit Supabase
|
||||
- [ ] AI features werken (indien van toepassing)
|
||||
- [ ] Geen console errors
|
||||
|
||||
---
|
||||
|
||||
### Performance Basics
|
||||
|
||||
**Lighthouse Audit:**
|
||||
1. Open Chrome DevTools
|
||||
2. Tab "Lighthouse"
|
||||
3. Klik "Analyze page load"
|
||||
4. Aim for score >80 in elke categorie
|
||||
|
||||
**Quick wins:**
|
||||
- Gebruik Next.js `Image` component (niet `<img>`)
|
||||
- Lazy load components die niet direct nodig zijn
|
||||
- Verwijder ongebruikte dependencies
|
||||
|
||||
---
|
||||
|
||||
### Security Checklist
|
||||
|
||||
**Belangrijk voor productie:**
|
||||
- [ ] API keys nooit in client-side code
|
||||
- [ ] Supabase RLS enabled (Row Level Security)
|
||||
- [ ] Error messages geven geen gevoelige info
|
||||
- [ ] HTTPS (automatisch via Vercel)
|
||||
|
||||
---
|
||||
|
||||
## Eindopdracht Overview
|
||||
|
||||
### Wat is de eindopdracht?
|
||||
- Bouw een AI-powered web applicatie
|
||||
- Gebruik alle tools die je hebt geleerd
|
||||
- Vrije keuze in implementatie
|
||||
|
||||
**Drie voorbeeldprojecten:**
|
||||
1. **AI Recipe Generator** - Recepten op basis van ingrediënten
|
||||
2. **Smart Budget Buddy** - Financieel overzicht met AI insights
|
||||
3. **Travel Planner AI** - Reisplanning met AI suggesties
|
||||
|
||||
**Of:** Eigen idee (met goedkeuring docent)
|
||||
|
||||
---
|
||||
|
||||
### Technische Vereisten
|
||||
|
||||
**Stack:**
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Supabase (database + auth)
|
||||
- Vercel AI SDK (chat of completion feature)
|
||||
- Deployed op Vercel
|
||||
|
||||
**Documentatie vereisten:**
|
||||
- `docs/PROJECT-BRIEF.md` - Project beschrijving
|
||||
- `docs/PROMPT-LOG.md` - Minimaal 10 prompts
|
||||
- `docs/AI-DECISIONS.md` - Minimaal 5 beslissingen
|
||||
- Complete README met setup instructies
|
||||
|
||||
---
|
||||
|
||||
### Beoordelingscriteria
|
||||
|
||||
| Criterium | Weging |
|
||||
|-----------|--------|
|
||||
| Technische uitvoering | 40% |
|
||||
| AI integratie | 25% |
|
||||
| Documentatie (PROMPT-LOG, AI-DECISIONS) | 20% |
|
||||
| Code kwaliteit & organisatie | 15% |
|
||||
|
||||
**Minimale vereisten:**
|
||||
- App werkt in productie
|
||||
- Auth + CRUD werkt
|
||||
- AI feature werkt
|
||||
- Documentatie compleet
|
||||
|
||||
---
|
||||
|
||||
### Veelvoorkomende Problemen
|
||||
|
||||
**AI Chat Werkt Niet:**
|
||||
1. API key correct in `.env.local`?
|
||||
2. API key ook in Vercel env vars?
|
||||
3. Correct model gekozen?
|
||||
4. API route syntax correct?
|
||||
|
||||
### Auth Werkt Niet in Productie
|
||||
|
||||
**Check:**
|
||||
**Auth Werkt Niet in Productie:**
|
||||
1. Redirect URLs in Supabase toegevoegd?
|
||||
2. Beide URLs: met en zonder trailing slash?
|
||||
3. Wildcard (`**`) voor sub-routes?
|
||||
|
||||
### Deployment Faalt
|
||||
|
||||
**Check:**
|
||||
**Deployment Faalt:**
|
||||
1. `npm run build` lokaal succesvol?
|
||||
2. Alle TypeScript errors gefixed?
|
||||
3. Alle env vars in Vercel?
|
||||
|
||||
### Supabase Data Toont Niet
|
||||
|
||||
**Check:**
|
||||
1. RLS policies correct?
|
||||
2. Correct env vars?
|
||||
3. Supabase client correct geïnitialiseerd?
|
||||
|
||||
---
|
||||
|
||||
## Documentatie Checklist
|
||||
|
||||
**PROMPT-LOG.md (minimaal 10 entries):**
|
||||
- [ ] Prompts die goed werkten
|
||||
- [ ] Prompts die NIET werkten (en wat je leerde)
|
||||
- [ ] Verschillende tools gebruikt
|
||||
|
||||
**AI-DECISIONS.md (minimaal 5 entries):**
|
||||
- [ ] Database schema beslissing
|
||||
- [ ] UI/UX keuzes
|
||||
- [ ] Technische trade-offs
|
||||
- [ ] Problemen en oplossingen
|
||||
|
||||
**README.md:**
|
||||
- [ ] Project beschrijving
|
||||
- [ ] Features lijst
|
||||
- [ ] Tech stack
|
||||
- [ ] Setup instructies
|
||||
- [ ] Productie URL
|
||||
|
||||
---
|
||||
|
||||
## Peer Review (optioneel)
|
||||
|
||||
**Als je klaar bent, help een klasgenoot:**
|
||||
1. Test hun app
|
||||
2. Geef feedback
|
||||
3. Help met bugs
|
||||
|
||||
---
|
||||
|
||||
## Afsluiting (laatste 10 min)
|
||||
|
||||
**Check-out:**
|
||||
- Wie is klaar?
|
||||
- Wie heeft nog vragen?
|
||||
- Deadline reminder
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel
|
||||
- GitHub
|
||||
- Supabase
|
||||
- Chrome DevTools (Lighthouse)
|
||||
- Cursor
|
||||
- Alle geleerde tools
|
||||
- Elkaar!
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Werk aan je Eindproject
|
||||
### Deploy Je Eindproject
|
||||
|
||||
**Dit is WERKTIJD.**
|
||||
**Deel 1: Pre-Deployment Check (30 min)**
|
||||
|
||||
Er is geen specifieke opdracht behalve: werk aan je eindproject.
|
||||
Run door de checklist:
|
||||
1. `npm run build` - fix eventuele errors
|
||||
2. Check TypeScript errors
|
||||
3. Maak/update `.env.example`
|
||||
4. Update README met project info
|
||||
|
||||
**Prioriteiten:**
|
||||
1. ❌ Wat werkt nog niet? → Fix het
|
||||
2. ✅ Wat werkt al? → Maak het af
|
||||
3. 📝 Documentatie → Vul aan
|
||||
**Deel 2: Vercel Deployment (30 min)**
|
||||
|
||||
**Vraag hulp:**
|
||||
- Als je langer dan 15 minuten vastloopt
|
||||
- Als je niet weet waar te beginnen
|
||||
- Als je feedback wilt op je aanpak
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repository
|
||||
4. Voeg environment variables toe
|
||||
5. Deploy!
|
||||
|
||||
**Aan het eind van de les:**
|
||||
- App werkt in productie
|
||||
- Of: je weet precies wat nog moet gebeuren
|
||||
**Deel 3: Supabase Config (20 min)**
|
||||
|
||||
1. Voeg Vercel URL toe aan Supabase redirect URLs
|
||||
2. Test auth in productie
|
||||
3. Verifieer data access
|
||||
|
||||
**Deel 4: Testing & Lighthouse (40 min)**
|
||||
|
||||
1. Test alle features in productie:
|
||||
- Login/logout
|
||||
- CRUD operaties
|
||||
- AI chat (indien aanwezig)
|
||||
2. Run Lighthouse audit
|
||||
3. Fix issues tot score >80
|
||||
4. Screenshot resultaat
|
||||
|
||||
### Deliverable
|
||||
- Voortgang op eindproject
|
||||
- Duidelijk beeld van wat nog moet
|
||||
- Werkende productie URL
|
||||
- Lighthouse screenshot (score >80)
|
||||
- Test rapport: wat werkt, wat niet
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk
|
||||
## Huiswerk (Eindopdracht Afronden)
|
||||
|
||||
### Rond Je Eindproject Af
|
||||
|
||||
**Dit is de laatste les. Alles wat nog moet, doe je zelfstandig.**
|
||||
**Dit is de laatste les. Gebruik deze tijd om je eindopdracht af te ronden.**
|
||||
|
||||
**Deel 1: Bug Fixes (1 uur)**
|
||||
|
||||
1. Test je app grondig in productie
|
||||
2. Fix gevonden bugs
|
||||
3. Test edge cases:
|
||||
- Lege states
|
||||
- Error states
|
||||
- Loading states
|
||||
4. Redeploy
|
||||
|
||||
**Deel 2: Performance Optimization (30 min)**
|
||||
|
||||
1. Run Lighthouse opnieuw
|
||||
2. Fix top 3 performance issues
|
||||
3. Document wat je hebt verbeterd
|
||||
|
||||
**Deel 3: Documentatie Afronden (30 min)**
|
||||
|
||||
Update je `README.md`:
|
||||
- Werkende productie URL
|
||||
- Features lijst
|
||||
- Tech stack
|
||||
- Setup instructies
|
||||
- Screenshots
|
||||
|
||||
Complete `docs/`:
|
||||
- PROMPT-LOG.md (minimaal 10 entries)
|
||||
- AI-DECISIONS.md (minimaal 5 entries)
|
||||
|
||||
**Checklist voor inleveren:**
|
||||
- [ ] App werkt op productie URL
|
||||
@@ -165,14 +289,20 @@ Er is geen specifieke opdracht behalve: werk aan je eindproject.
|
||||
|
||||
### Deliverable
|
||||
- Complete eindopdracht
|
||||
- Deployed en werkend
|
||||
- Alle documentatie compleet
|
||||
- Ingeleverd voor deadline
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Zelfstandig problemen oplossen
|
||||
- Hulp vragen wanneer nodig
|
||||
- Een Next.js app deployen naar Vercel
|
||||
- Environment variables configureren in Vercel
|
||||
- Supabase redirect URLs instellen voor productie
|
||||
- Een deployment checklist doorlopen
|
||||
- Lighthouse gebruiken voor performance audit
|
||||
- Basis security checks uitvoeren
|
||||
- De eindopdracht requirements begrijpen
|
||||
- Een project afronden en inleveren
|
||||
- Documentatie completeren
|
||||
- Peer feedback geven en ontvangen
|
||||
- Documentatie voltooien volgens de vereisten
|
||||
|
||||
Reference in New Issue
Block a user