Buổi 16: Capstone — Production Full-Stack Application 🎓

Thành quả: Ship 1 production app hoàn chỉnh: backend + frontend + CI/CD + monitoring

---

🎯 Mục Tiêu

1. Tổng hợp tất cả 15 buổi học vào 1 sản phẩm thật
2. Demo app chạy trên production URL
3. Code review peer-to-peer
4. Tạo engineering portfolio
5. Roadmap cho career path tiếp theo

---

📖 Phần 1: Capstone Requirements

Yêu Cầu Tối Thiểu

## ✅ Backend (Buổi 09)
- [ ] REST API: 5+ endpoints (CRUD + auth)
- [ ] JWT Authentication (access + refresh)
- [ ] Database: PostgreSQL + Prisma
- [ ] Input validation (Zod)
- [ ] Error handling (centralized AppError)
- [ ] Rate limiting on auth endpoints

## ✅ Frontend (Buổi 10)
- [ ] React/Vue + TypeScript
- [ ] State management (Zustand/Pinia)
- [ ] Data fetching (TanStack Query)
- [ ] Form validation (react-hook-form + Zod)
- [ ] Responsive design (mobile + desktop)
- [ ] Loading, error, empty states

## ✅ Integration (Buổi 11)
- [ ] Frontend ↔ Backend connected via CORS
- [ ] Environment variables managed
- [ ] File upload (bonus)

## ✅ Performance (Buổi 12)
- [ ] No N+1 queries (verified with logging)
- [ ] Database indexes on frequently queried columns
- [ ] Caching strategy (Redis or in-memory)

## ✅ CI/CD (Buổi 13)
- [ ] GitHub Actions: lint → test → build → deploy
- [ ] Preview deploys on PR
- [ ] Production deploy on merge to main

## ✅ Security (Buổi 14)
- [ ] OWASP checklist completed
- [ ] Secret scanning
- [ ] npm audit clean
- [ ] Rate limiting active

## ✅ Testing (Buổi 08)
- [ ] Unit tests: 80%+ coverage on business logic
- [ ] Integration tests: all API endpoints
- [ ] Test gate in CI pipeline

## ✅ Documentation
- [ ] README.md with setup instructions
- [ ] API documentation
- [ ] Architecture diagram
- [ ] AGENTS.md with project conventions

---

📖 Phần 2: Capstone Ideas

Tier 1: Blog/CMS Platform

• Full CRUD for posts, comments, tags
• User roles (admin, author, reader)
• Rich text editor
• SEO optimization

Tier 2: Task Management App

• Projects, tasks, subtasks
• Kanban board view
• Assignees, due dates, priority
• Real-time updates (WebSocket bonus)

Tier 3: E-Commerce Store (Advanced)

• Product catalog with search/filter
• Shopping cart + checkout
• Payment integration (mock)
• Order history + tracking
• Admin dashboard

---

📖 Phần 3: Execution Plan

Day-by-Day Schedule

Day 1 (3h): Planning
├── cm-planning: Create full spec
├── Database schema design
├── API endpoint list
└── UI wireframes (rough)

Day 2 (3h): Backend Core
├── Prisma schema + migrations
├── Auth endpoints (TDD)
├── Core CRUD endpoints (TDD)
└── Error handling middleware

Day 3 (3h): Frontend Core
├── Project setup + routing
├── Auth flow (login/register)
├── Main CRUD views
└── Form validation

Day 4 (3h): Integration + Polish
├── Connect frontend ↔ backend
├── Loading/error states
├── Responsive design
├── File upload (bonus)

Day 5 (2h): Testing + Security
├── Fill test gaps to 80%+
├── Security audit
├── Performance check
└── Fix critical issues

Day 6 (1h): CI/CD + Deploy
├── GitHub Actions pipeline
├── Deploy to Cloudflare/Vercel
├── Smoke test
└── Documentation

---

📖 Phần 4: Evaluation Rubric

Scoring (100 points)

Category	Max Points	Criteria
Functionality	25	All CRUD works, auth works, no crashes
Code Quality	20	Clean architecture, TypeScript strict, no smells
Testing	15	80%+ coverage, TDD workflow evidence
Security	10	OWASP checklist, no leaked secrets
CI/CD	10	Automated pipeline, all gates pass
Performance	5	No N+1, proper indexing, caching
UI/UX	5	Responsive, loading states, accessibility
Documentation	5	README, API docs, architecture diagram
Demo	5	Clear presentation, handles live questions

Grade Scale

Grade	Points	Meaning
🏆 Distinction	90-100	Production-ready, hire-able quality
⭐ Excellence	80-89	Strong junior dev, ready for team projects
✅ Pass	65-79	Solid foundation, needs practice
🔄 Needs Work	50-64	Core gaps, revise specific sessions
❌ Not Ready	<50	Start from Phase 2, more practice needed

---

📖 Phần 5: Demo Day Format

Presentation Structure (10 min)

1. Problem statement (1 min)
   "What real problem does your app solve?"

2. Live demo (3 min)
   - Show full user flow: register → login → CRUD → logout
   - Show responsive design (mobile + desktop)
   - Show 1 error handling scenario

3. Technical deep dive (3 min)
   - Show architecture diagram
   - Show 1 key code pattern you're proud of
   - Show test coverage report
   - Show CI/CD pipeline running

4. Challenges & learnings (2 min)
   - Biggest challenge and how you solved it
   - What you'd do differently next time
   - Key VibeCoding takeaway

5. Q&A (1 min)

---

📖 Phần 6: Career Roadmap

After This Course

Level 1: VibeCoding Junior (You are here ✅)
├── Can build full-stack apps
├── Can refactor legacy code
├── Can setup CI/CD
└── Can join any team and contribute

Level 2: VibeCoding Mid (Next 6 months)
├── Microservices architecture
├── Cloud platform mastery (AWS/GCP)
├── DevOps: Docker, Kubernetes basics
├── Team lead on small projects
└── Mentor juniors in VibeCoding

Level 3: VibeCoding Senior (1-2 years)
├── System design for scale
├── Multi-team architecture decisions
├── Custom AI agent workflows
├── Open-source skill contributions
└── Tech talks and content creation

Level 4: VibeCoding Architect (2+ years)
├── Design complex distributed systems
├── AI-native engineering standards
├── Build company-wide skill libraries
├── Lead engineering transformation
└── Define industry best practices

Portfolio Checklist

## Developer Portfolio

- [ ] Personal website (Buổi 15 from Kids course)
- [ ] Blog/CMS app (Capstone)
- [ ] GitHub profile with pinned repos
- [ ] README.md with architecture diagrams
- [ ] Contribution to open-source skills
- [ ] Technical blog posts
- [ ] LinkedIn profile updated

---

🧪 Lab: Capstone Kickoff

Task: Start building! (Full day)

Step 1: cm-planning
→ Choose project from Tier 1/2/3
→ Write full spec in implementation_plan.md
→ Get approval

Step 2: cm-start
→ Begin execution
→ Use skill chains for each phase
→ Track progress in task.md

Step 3: Deploy
→ Ship to production URL
→ Run all 8 deploy gates
→ Share URL for review

---

🎓 Course Summary

16 Sessions = Full-Stack AI-Native Developer

Phase 1: Foundation      (Sessions 01-04)
→ VibeCoding mindset, prompting, tools, skill system

Phase 2: Onboard & Fix   (Sessions 05-08)
→ Read any codebase, analyze, refactor, test

Phase 3: Build           (Sessions 09-12)
→ Backend API, Frontend React, Integration, Performance

Phase 4: Ship & Scale    (Sessions 13-16)
→ CI/CD, Security, Automation, Production App

Key Habits to Maintain

Daily:   Read CONTINUITY.md → Work → Update CONTINUITY.md
Weekly:  Review cm-skill-health → Fix degraded skills
Monthly: Evolve skills → Create new skills from patterns
Always:  RARV Loop → Test before code → Evidence over claims

🎉 Congratulations!

You are now a VibeCoding Professional.

Remember: The goal isn't to let AI replace you — it's to make you 10x more productive while maintaining professional engineering standards.

Welcome to the future of software development. 🚀