fix: lessons
This commit is contained in:
@@ -1,207 +1,77 @@
|
||||
# Les 17: Eindproject Polish & Code Review
|
||||
# Les 17: AI Production Polish — Observability, Evals, Security, Cost
|
||||
|
||||
> ✅ **Deze les is volledig uitgewerkt**
|
||||
|
||||
## Lesmateriaal
|
||||
|
||||
- [Slide Overzicht](../Les17-Production-Polish/Les17-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les17-Production-Polish/Les17-Docenttekst.md)
|
||||
- [Lesstof](../Les17-Production-Polish/Les17-Lesstof.md)
|
||||
- [Lesopdracht](../Les17-Production-Polish/Les17-Lesopdracht.md)
|
||||
- [Huiswerk](../Les17-Production-Polish/Les17-Huiswerk.md)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 4: Advanced AI & Deployment** (Les 13-18)
|
||||
## Deel
|
||||
**Deel 4 — Production & Advanced** (Les 17-18)
|
||||
|
||||
## Beschrijving
|
||||
Finale polish fase van je eindproject. Focus op code review, peer feedback, en laatste verbeteringen voor inlevering. Voorbereiding op presentatie.
|
||||
Van "het werkt op mijn laptop" naar productie-klaar. We behandelen de vier pillaren: observability (Langfuse), evals (LLM-as-judge), security (prompt injection + guardrails) en cost (monitoring + model routing).
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de werkdag voortgang uit Les 16 - wat hebben jullie afgekregen, wat bleek moeilijker dan verwacht?
|
||||
### Theorie
|
||||
- De vier pillaren: observability, evals, security, cost
|
||||
- Waarom logs alleen niet genoeg zijn voor AI
|
||||
- Evals als unit tests voor LLM-output
|
||||
- Prompt injection — een echte demo
|
||||
- Cost-monitoring: per user, per route, per model
|
||||
|
||||
### Code Review Checklist
|
||||
|
||||
**TypeScript & Code Quality:**
|
||||
- [ ] No TypeScript errors
|
||||
- [ ] No `any` types
|
||||
- [ ] Props properly typed
|
||||
- [ ] Error handling complete
|
||||
- [ ] No console.logs in production
|
||||
|
||||
**React Best Practices:**
|
||||
- [ ] No unnecessary re-renders
|
||||
- [ ] Keys properly set in lists
|
||||
- [ ] Hooks rules followed
|
||||
- [ ] Components split logically
|
||||
- [ ] Prop drilling minimized
|
||||
|
||||
**Styling & UX:**
|
||||
- [ ] Responsive design working
|
||||
- [ ] Mobile friendly
|
||||
- [ ] Consistent styling
|
||||
- [ ] Accessible (alt text, labels, etc.)
|
||||
- [ ] No visual bugs
|
||||
|
||||
**Performance:**
|
||||
- [ ] Lighthouse > 80
|
||||
- [ ] Lazy load images
|
||||
- [ ] Optimize bundles
|
||||
- [ ] Fast interactions
|
||||
- [ ] Minimal flickering
|
||||
|
||||
---
|
||||
|
||||
### Peer Review Process
|
||||
|
||||
**Hoe peer review doen:**
|
||||
|
||||
1. **Voorbereiding (10 min)**
|
||||
- Share productie URL of GitHub link
|
||||
- List main features
|
||||
- Highlight AI features
|
||||
|
||||
2. **Review (15 min)**
|
||||
- Reviewer tests alle features
|
||||
- Takes notes
|
||||
- Looks at code (if applicable)
|
||||
|
||||
3. **Feedback (10 min)**
|
||||
- ✅ Wat werkt goed
|
||||
- ⚠️ What could improve
|
||||
- ❌ Any bugs found
|
||||
|
||||
4. **Discussion (5 min)**
|
||||
- Q&A
|
||||
- Discuss suggestions
|
||||
- Agree on priorities
|
||||
|
||||
---
|
||||
|
||||
### Final Checklist for Submission
|
||||
|
||||
**Functionality:**
|
||||
- [ ] All features work in production
|
||||
- [ ] Auth flows complete
|
||||
- [ ] CRUD operations complete
|
||||
- [ ] AI feature functional
|
||||
- [ ] No console errors
|
||||
|
||||
**Documentation:**
|
||||
- [ ] README.md complete
|
||||
- [ ] PROMPT-LOG.md has 10+ entries
|
||||
- [ ] AI-DECISIONS.md has 5+ entries
|
||||
- [ ] .env.example up to date
|
||||
- [ ] Setup instructions clear
|
||||
|
||||
**Code Quality:**
|
||||
- [ ] Code is clean and organized
|
||||
- [ ] Comments where needed
|
||||
- [ ] Consistent naming
|
||||
- [ ] No dead code
|
||||
- [ ] .cursorrules present
|
||||
|
||||
**Performance & UX:**
|
||||
- [ ] Lighthouse score > 80
|
||||
- [ ] Loading states visible
|
||||
- [ ] Error states handled
|
||||
- [ ] Mobile responsive
|
||||
- [ ] Fast load times
|
||||
|
||||
**Deployment:**
|
||||
- [ ] Deployed on Vercel
|
||||
- [ ] Working on production URL
|
||||
- [ ] Supabase configured
|
||||
- [ ] Environment variables secure
|
||||
- [ ] No errors in production
|
||||
### Live demo's
|
||||
1. Langfuse trace-integratie in Polderfest-chat
|
||||
2. Eval-suite met LLM-as-judge (Vitest + AI SDK)
|
||||
3. Prompt injection: aanvallen + guardrails (Lakera-style)
|
||||
4. Cost-tracking middleware + automatic model routing
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- GitHub
|
||||
- Vercel
|
||||
- Chrome DevTools
|
||||
- Cursor
|
||||
- Peer reviewers
|
||||
- Langfuse (self-hosted of cloud)
|
||||
- Vitest voor evals
|
||||
- Vercel AI SDK middleware
|
||||
- Lakera AI / prompt-shield patterns
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (3 uur)
|
||||
## Lesopdracht (in-class, 30 min)
|
||||
|
||||
### Code Review & Polish Session
|
||||
Studenten kijken klassikaal mee. In-class oefening:
|
||||
- Activeer Langfuse-tracing in je eigen Polderfest-fork
|
||||
- Bekijk je eerste trace
|
||||
- Voeg één eval-test toe en run hem
|
||||
|
||||
**Deel 1: Peer Review (1 uur)**
|
||||
|
||||
Work in pairs or small groups:
|
||||
1. Exchange project URLs/repos
|
||||
2. Each person reviews another's work
|
||||
3. Take detailed notes
|
||||
4. Provide constructive feedback
|
||||
5. Discuss improvements
|
||||
|
||||
**Deel 2: Final Polish (1.5 uur)**
|
||||
|
||||
Based on feedback:
|
||||
1. Fix identified bugs
|
||||
2. Implement suggested improvements
|
||||
3. Code cleanup
|
||||
4. Update documentation
|
||||
5. Final test in production
|
||||
|
||||
**Deel 3: Final Checks (30 min)**
|
||||
|
||||
Go through the submission checklist:
|
||||
1. Verify all items are done
|
||||
2. Test everything once more
|
||||
3. Make final commits
|
||||
4. Push to GitHub
|
||||
5. Screenshot for documentation
|
||||
|
||||
### Deliverable
|
||||
- Peer review feedback received
|
||||
- All feedback items addressed
|
||||
- Final production-ready code
|
||||
- Complete documentation
|
||||
- Screenshot of final app
|
||||
**Inleveren:** Screenshot Langfuse-trace + 1 passing eval.
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk
|
||||
## Huiswerk (take-home)
|
||||
|
||||
**Final submission preparation:**
|
||||
In je eigen project uit Les 11-15:
|
||||
- Volledige eval-suite (min. 5 tests)
|
||||
- Security-laag tegen prompt injection
|
||||
- Cost-dashboard (Langfuse of eigen middleware)
|
||||
- `POLISH.md` in repo-root: wat heb je toegevoegd en waarom?
|
||||
|
||||
1. **Complete ALL documentation:**
|
||||
- README with features and setup
|
||||
- PROMPT-LOG.md with 10+ prompts
|
||||
- AI-DECISIONS.md with 5+ decisions
|
||||
- Project state documented
|
||||
|
||||
2. **Final testing:**
|
||||
- Test all features in production
|
||||
- Check Lighthouse score
|
||||
- Verify mobile responsiveness
|
||||
- Check load times
|
||||
|
||||
3. **Code review:**
|
||||
- Ask classmates to review code
|
||||
- Ask docent for feedback
|
||||
- Fix any issues found
|
||||
- Final cleanup
|
||||
|
||||
4. **Prepare for submission:**
|
||||
- Ensure Git history is clean
|
||||
- All commits have good messages
|
||||
- GitHub repo is public/accessible
|
||||
- Production URL is stable
|
||||
|
||||
### Deliverable
|
||||
- Final, polished application
|
||||
- All documentation complete
|
||||
- Code review completed
|
||||
- Ready for submission
|
||||
**Inleveren:** GitHub URL via Teams.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Code review uitvoeren volgens best practices
|
||||
- Peer feedback ontvangen en implementeren
|
||||
- Final polish toepassen op projecten
|
||||
- Production checklist doorlopen
|
||||
- Professional quality deliverables opleveren
|
||||
- Zelfstandig werk evalueren en verbeteren
|
||||
- De vier productie-pillaren benoemen en uitleggen
|
||||
- Een AI-app instrumenteren met Langfuse-traces
|
||||
- Een LLM-as-judge eval-suite opzetten met Vitest
|
||||
- Een prompt injection herkennen en bescherming inbouwen
|
||||
- Cost-per-user meten en model-routing inrichten
|
||||
|
||||
Reference in New Issue
Block a user