fix: implement lessons feedback
This commit is contained in:
Tim Rijkse
@@ -1,227 +1,340 @@
|
||||
# Les 16: Deployment & Production
|
||||
# Les 16: Mastering Cursor
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
**Deel 4: Advanced AI Features** (Les 13-18)
|
||||
|
||||
## Beschrijving
|
||||
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie.
|
||||
Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Vercel Deployment Flow
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de context management ervaringen uit Les 15 - welke strategieën werkten het beste?
|
||||
|
||||
**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)
|
||||
### Model Keuze
|
||||
|
||||
**Waarom Vercel voor Next.js:**
|
||||
- Gemaakt door dezelfde makers
|
||||
- Zero-config deployment
|
||||
- Gratis tier ruim voldoende
|
||||
- Automatische HTTPS
|
||||
- Global CDN
|
||||
**Wanneer welk model?**
|
||||
|
||||
| Model | Gebruik voor | Kosten |
|
||||
|-------|-------------|--------|
|
||||
| **Haiku** | Simpele taken, autocomplete | Goedkoop |
|
||||
| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
|
||||
| **Opus** | Complexe architectuur, multi-file | Duur |
|
||||
|
||||
**Vuistregels:**
|
||||
- Tab completion: Haiku (automatisch)
|
||||
- CMD+K: Sonnet (default)
|
||||
- Composer: Sonnet of Opus
|
||||
- Complexe debugging: Opus
|
||||
|
||||
---
|
||||
|
||||
### Environment Variables in Vercel
|
||||
### Composer Mode Diepgaand
|
||||
|
||||
**Lokaal (.env.local) vs Productie (Vercel Dashboard):**
|
||||
**Wat is Composer?**
|
||||
Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
|
||||
|
||||
| Waar | Bestand/Locatie | Voorbeeld |
|
||||
|------|-----------------|-----------|
|
||||
| Lokaal | `.env.local` | Development |
|
||||
| Vercel | Dashboard → Settings → Env Vars | Production |
|
||||
**Wanneer Composer gebruiken:**
|
||||
- Nieuwe feature met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate generatie
|
||||
- Complexe wijzigingen
|
||||
|
||||
**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
|
||||
**Composer Workflow:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf je doel duidelijk
|
||||
3. Voeg context toe met @ mentions
|
||||
4. Laat Cursor plannen
|
||||
5. Review het plan
|
||||
6. Accept of reject per file
|
||||
7. Itereer met feedback
|
||||
|
||||
**Let op:**
|
||||
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
|
||||
- Zonder prefix = alleen server-side (API routes)
|
||||
**Voorbeeld prompt:**
|
||||
```
|
||||
Create a user profile page with:
|
||||
- @components/ui/ style components
|
||||
- Profile header with avatar
|
||||
- Edit form with validation
|
||||
- Save to @lib/supabase.ts
|
||||
- Loading and error states
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Supabase Productie Setup
|
||||
### @ Mentions Systeem
|
||||
|
||||
**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`
|
||||
**Alle types:**
|
||||
|
||||
**Waarom:**
|
||||
- Auth redirects werken alleen naar toegestane URLs
|
||||
- Wildcards (`**`) voor sub-routes
|
||||
| Mention | Wat het doet | Voorbeeld |
|
||||
|---------|--------------|-----------|
|
||||
| `@file.tsx` | Specifieke file | `@Button.tsx` |
|
||||
| `@folder/` | Hele folder | `@components/` |
|
||||
| `@codebase` | Zoek in codebase | `@codebase auth logic` |
|
||||
| `@Docs` | Officiële docs | `@Docs Next.js routing` |
|
||||
| `@Web` | Web zoeken | `@Web Supabase auth setup` |
|
||||
|
||||
**Best practices:**
|
||||
- Wees specifiek met file mentions
|
||||
- Gebruik folder mentions voor context
|
||||
- @Docs voor up-to-date informatie
|
||||
- Combineer mentions voor betere context
|
||||
|
||||
---
|
||||
|
||||
### Deployment Checklist
|
||||
### .cursorrules Advanced
|
||||
|
||||
**Voor deployment:**
|
||||
- [ ] `npm run build` werkt lokaal
|
||||
- [ ] Geen TypeScript errors
|
||||
- [ ] Environment variables gedocumenteerd in `.env.example`
|
||||
- [ ] `.gitignore` bevat `.env*.local`
|
||||
- [ ] README up-to-date
|
||||
**Meerdere rules files:**
|
||||
|
||||
**Na deployment:**
|
||||
- [ ] App laadt correct
|
||||
- [ ] Auth werkt (login/logout)
|
||||
- [ ] Data wordt opgehaald uit Supabase
|
||||
- [ ] AI features werken (indien van toepassing)
|
||||
- [ ] Geen console errors
|
||||
```
|
||||
.cursor/
|
||||
└── rules/
|
||||
├── general.mdc # Project-brede regels
|
||||
├── components.mdc # Component conventies
|
||||
├── api.mdc # API route regels
|
||||
└── testing.mdc # Test conventies
|
||||
```
|
||||
|
||||
**Effectieve rules schrijven:**
|
||||
|
||||
```markdown
|
||||
# Component Rules
|
||||
|
||||
## Structure
|
||||
Alle components moeten volgen:
|
||||
1. Props interface bovenaan
|
||||
2. Component function
|
||||
3. Named export onderaan
|
||||
|
||||
## Example
|
||||
\`\`\`tsx
|
||||
interface ButtonProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
variant?: 'primary' | 'secondary'
|
||||
}
|
||||
|
||||
export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
|
||||
return (
|
||||
<button onClick={onClick} className={...}>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## DON'Ts
|
||||
- Geen default exports
|
||||
- Geen inline styles
|
||||
- Geen any types
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Performance Basics
|
||||
### Codebase Indexing
|
||||
|
||||
**Lighthouse Audit:**
|
||||
1. Open Chrome DevTools
|
||||
2. Tab "Lighthouse"
|
||||
3. Klik "Analyze page load"
|
||||
4. Aim for score >80 in elke categorie
|
||||
**Hoe Cursor indexeert:**
|
||||
- Scant alle files in je project
|
||||
- Bouwt semantic understanding
|
||||
- Gebruikt voor autocomplete en context
|
||||
|
||||
**Quick wins:**
|
||||
- Gebruik Next.js `Image` component (niet `<img>`)
|
||||
- Lazy load components die niet direct nodig zijn
|
||||
- Verwijder ongebruikte dependencies
|
||||
**Optimaliseren:**
|
||||
1. Goede `.cursorignore` (node_modules, .next, etc.)
|
||||
2. Semantische naming
|
||||
3. Duidelijke file structuur
|
||||
4. Comments waar nodig
|
||||
|
||||
**Re-indexeren:**
|
||||
CMD+Shift+P → "Reindex"
|
||||
|
||||
---
|
||||
|
||||
### Security Checklist
|
||||
### Cost Management
|
||||
|
||||
**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)
|
||||
**Token gebruik monitoren:**
|
||||
- Cursor toont token count in chat
|
||||
- Check monthly usage in settings
|
||||
|
||||
**Bespaartips:**
|
||||
1. Gebruik Haiku voor simpele taken
|
||||
2. Beperk context (niet hele codebase)
|
||||
3. Wees specifiek in prompts
|
||||
4. Fresh chat voor nieuwe onderwerpen
|
||||
|
||||
**Free tier strategie:**
|
||||
- Focus op Tab completion (onbeperkt)
|
||||
- Gebruik CMD+K spaarzaam
|
||||
- Composer alleen voor grote taken
|
||||
|
||||
---
|
||||
|
||||
### Monitoring Basics
|
||||
### Debugging met Cursor
|
||||
|
||||
**Vercel Dashboard toont:**
|
||||
- Deployments history
|
||||
- Function logs
|
||||
- Analytics (optioneel)
|
||||
**AI-Assisted Debugging:**
|
||||
|
||||
**Supabase Dashboard toont:**
|
||||
- Database usage
|
||||
- Auth logs
|
||||
- API requests
|
||||
**Stap 1: Error identificeren**
|
||||
```
|
||||
@file-met-error.tsx
|
||||
Ik krijg deze error: [plak error]
|
||||
Wat gaat er mis?
|
||||
```
|
||||
|
||||
**Stap 2: Context toevoegen**
|
||||
```
|
||||
@file-met-error.tsx
|
||||
@gerelateerde-file.ts
|
||||
De error treedt op wanneer ik X doe.
|
||||
Console log toont: [data]
|
||||
```
|
||||
|
||||
**Stap 3: Fix implementeren**
|
||||
- Selecteer code met error
|
||||
- CMD+K → "Fix this error: [beschrijving]"
|
||||
- Review en test
|
||||
|
||||
---
|
||||
|
||||
### Refactoring met Cursor
|
||||
|
||||
**Pattern 1: Extract Component**
|
||||
```
|
||||
Selecteer JSX block → CMD+K
|
||||
"Extract this into a separate component called ProductCard"
|
||||
```
|
||||
|
||||
**Pattern 2: Extract Hook**
|
||||
```
|
||||
Selecteer state + useEffect → CMD+K
|
||||
"Extract this into a custom hook called useProductData"
|
||||
```
|
||||
|
||||
**Pattern 3: Improve Performance**
|
||||
```
|
||||
@Component.tsx
|
||||
"Optimize this component:
|
||||
- Add memoization waar nodig
|
||||
- Fix unnecessary re-renders
|
||||
- Improve loading performance"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel
|
||||
- GitHub
|
||||
- Supabase
|
||||
- Chrome DevTools (Lighthouse)
|
||||
- Cursor
|
||||
- Claude models (Haiku/Sonnet/Opus)
|
||||
- .cursorrules
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Deploy Je Eindproject
|
||||
### Multi-Step Form Wizard
|
||||
|
||||
**Deel 1: Pre-Deployment Check (30 min)**
|
||||
**Bouw met Composer:**
|
||||
|
||||
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
|
||||
| Stap | Features |
|
||||
|------|----------|
|
||||
| 1 | Personal info (naam, email) |
|
||||
| 2 | Preferences (theme, notifications) |
|
||||
| 3 | Review & confirm |
|
||||
| 4 | Success animation |
|
||||
|
||||
**Deel 2: Vercel Deployment (30 min)**
|
||||
**Requirements:**
|
||||
- Progress indicator
|
||||
- Per-stap validatie
|
||||
- localStorage persistence
|
||||
- TypeScript strict
|
||||
- Tailwind styling
|
||||
- Mobile responsive
|
||||
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repository
|
||||
4. Voeg environment variables toe
|
||||
5. Deploy!
|
||||
**Process:**
|
||||
|
||||
**Deel 3: Supabase Config (20 min)**
|
||||
**Deel 1: Composer Setup (30 min)**
|
||||
1. Open Composer (CMD+I)
|
||||
2. Schrijf comprehensive prompt
|
||||
3. Include @ mentions naar relevante files
|
||||
4. Kies Sonnet of Opus
|
||||
|
||||
1. Voeg Vercel URL toe aan Supabase redirect URLs
|
||||
2. Test auth in productie
|
||||
3. Verifieer data access
|
||||
**Deel 2: Generatie & Review (45 min)**
|
||||
1. Laat Composer genereren
|
||||
2. Review elke file
|
||||
3. Accept wat goed is
|
||||
4. Reject wat niet past
|
||||
|
||||
**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
|
||||
**Deel 3: Refinement (45 min)**
|
||||
1. Gebruik CMD+K voor kleine fixes
|
||||
2. Chat voor vragen
|
||||
3. Itereer tot het werkt
|
||||
|
||||
### Deliverable
|
||||
- Werkende productie URL
|
||||
- Lighthouse screenshot (score >80)
|
||||
- Test rapport: wat werkt, wat niet
|
||||
- Werkende form wizard
|
||||
- Notities: welk model wanneer, hoeveel iteraties
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Polish & Documentatie
|
||||
### Perfecte .cursorrules
|
||||
|
||||
**Deel 1: Bug Fixes (1 uur)**
|
||||
**Deel 1: Research (30 min)**
|
||||
- Zoek 3-5 .cursorrules voorbeelden online
|
||||
- Analyseer wat ze effectief maakt
|
||||
|
||||
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: Write Comprehensive Rules (1 uur)**
|
||||
|
||||
**Deel 2: Performance Optimization (30 min)**
|
||||
Maak complete .cursorrules voor je eindproject:
|
||||
|
||||
1. Run Lighthouse opnieuw
|
||||
2. Fix top 3 performance issues
|
||||
3. Document wat je hebt verbeterd
|
||||
```markdown
|
||||
# [Project Naam]
|
||||
|
||||
**Deel 3: Documentatie Afronden (30 min)**
|
||||
## Tech Stack
|
||||
[Jouw stack]
|
||||
|
||||
Update je `README.md`:
|
||||
- Werkende productie URL
|
||||
- Features lijst
|
||||
- Tech stack
|
||||
- Setup instructies
|
||||
- Screenshots
|
||||
## Code Conventions
|
||||
[Jouw conventies]
|
||||
|
||||
Update `docs/`:
|
||||
- PROMPT-LOG.md (minimaal 10 entries)
|
||||
- AI-DECISIONS.md (minimaal 5 entries)
|
||||
## File Naming
|
||||
[Jouw regels]
|
||||
|
||||
## Component Structure
|
||||
[Jouw patterns]
|
||||
|
||||
## Styling
|
||||
[Tailwind regels]
|
||||
|
||||
## API Routes
|
||||
[Route conventies]
|
||||
|
||||
## Error Handling
|
||||
[Error patterns]
|
||||
|
||||
## DON'Ts
|
||||
[Wat te vermijden]
|
||||
```
|
||||
|
||||
**Deel 3: Test (30 min)**
|
||||
1. Start nieuw component
|
||||
2. Vraag Cursor om het te bouwen
|
||||
3. Check: volgt Cursor je regels?
|
||||
4. Itereer indien nodig
|
||||
|
||||
### Deliverable
|
||||
- Geoptimaliseerde productie app
|
||||
- Complete documentatie
|
||||
- Lighthouse score >85
|
||||
- Complete .cursorrules file
|
||||
- Screenshot van Cursor die regels volgt
|
||||
- Korte analyse: wat werkt goed, wat niet
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
- Productie monitoring begrijpen
|
||||
- Het juiste Claude model kiezen per taak
|
||||
- Composer Mode effectief gebruiken voor multi-file features
|
||||
- @ mentions strategisch inzetten voor context
|
||||
- Geavanceerde .cursorrules files schrijven
|
||||
- Codebase indexing optimaliseren
|
||||
- Token gebruik monitoren en kosten beheren
|
||||
- AI-assisted debugging toepassen
|
||||
- Refactoring uitvoeren met Cursor
|
||||
|
||||
Reference in New Issue
Block a user