novi-lessons/Samenvattingen/Les18-Samenvatting.md

Les 18: Deployment & Production + Eindopdracht

---

Hoofdstuk

Deel 4: Advanced AI Features (Les 13-18)

Beschrijving

Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie. Bespreking van de eindopdracht requirements en afrondende werksessie.

---

Te Behandelen

Groepsdiscussie (15 min)

Bespreek klassikaal de AI feature ervaringen uit Les 17 - welke system prompts werkten goed en welke challenges kwamen jullie tegen?

Vercel Deployment Flow

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)

Waarom Vercel voor Next.js:

• Gemaakt door dezelfde makers
• Zero-config deployment
• Gratis tier ruim voldoende
• Automatische HTTPS
• Global CDN

---

Environment Variables in Vercel

Lokaal (.env.local) vs Productie (Vercel Dashboard):

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:

1. Redirect URLs in Supabase toegevoegd?
2. Beide URLs: met en zonder trailing slash?
3. Wildcard (**) voor sub-routes?

Deployment Faalt:

1. npm run build lokaal succesvol?
2. Alle TypeScript errors gefixed?
3. Alle env vars in Vercel?

---

Tools

• Vercel
• GitHub
• Supabase
• Chrome DevTools (Lighthouse)
• Cursor

---

Lesopdracht (2 uur)

Deploy Je Eindproject

Deel 1: Pre-Deployment Check (30 min)

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

Deel 2: Vercel Deployment (30 min)

1. Ga naar vercel.com
2. "Add New Project"
3. Import je GitHub repository
4. Voeg environment variables toe
5. Deploy!

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

• Werkende productie URL
• Lighthouse screenshot (score >80)
• Test rapport: wat werkt, wat niet

---

Huiswerk (Eindopdracht Afronden)

Rond Je Eindproject Af

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
• Login/logout werkt
• CRUD operaties werken
• AI feature werkt
• PROMPT-LOG.md heeft 10+ entries
• AI-DECISIONS.md heeft 5+ entries
• README is compleet
• Code is opgeruimd

Tips:

• Test alles als "nieuwe gebruiker"
• Vraag iemand anders om te testen
• Check of alles in productie werkt (niet alleen lokaal)

Deliverable

• Complete eindopdracht
• Deployed en werkend
• Alle documentatie compleet
• Ingeleverd voor deadline

---

Leerdoelen

Na deze les kan de student:

• 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 voltooien volgens de vereisten