# 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](https://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