208 lines
4.4 KiB
Markdown
208 lines
4.4 KiB
Markdown
# Les 17: Eindproject Polish & Code Review
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 4: Advanced AI & Deployment** (Les 13-18)
|
|
|
|
## Beschrijving
|
|
Finale polish fase van je eindproject. Focus op code review, peer feedback, en laatste verbeteringen voor inlevering. Voorbereiding op presentatie.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Groepsdiscussie (15 min)
|
|
Bespreek klassikaal de werkdag voortgang uit Les 16 - wat hebben jullie afgekregen, wat bleek moeilijker dan verwacht?
|
|
|
|
### 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
|
|
|
|
---
|
|
|
|
## Tools
|
|
- GitHub
|
|
- Vercel
|
|
- Chrome DevTools
|
|
- Cursor
|
|
- Peer reviewers
|
|
|
|
---
|
|
|
|
## Lesopdracht (3 uur)
|
|
|
|
### Code Review & Polish Session
|
|
|
|
**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
|
|
|
|
---
|
|
|
|
## Huiswerk
|
|
|
|
**Final submission preparation:**
|
|
|
|
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
|
|
|
|
---
|
|
|
|
## 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
|