Launch
Capstone Project 1
Capstone Project 1 is the first time everything from the earlier modules comes together into something real and deployed: your own Portfolio Web App. It's deliberately scoped smaller than Capstone Project 2 — a single-user, content-driven site rather than a full multi-user platform — so you focus on shipping the full pipeline end to end (build, deploy, automate, test) before taking on a bigger, full-stack product. It also becomes the actual portfolio you'll use in the Interview Prep module.
Topic Map
Everything in this module, at a glance
In Depth
Every topic, explained — with real-world industry context
Capstone Project 1 — Frontend (Next.js)
A polished, personal site that showcases who you are and what you've built — the first real, end-to-end Next.js application in this program, not a tutorial clone.
Core Build
- Next.js App Router — home, about, projects & contact pages
- A clean, responsive layout that works on mobile & desktop
- A projects section showcasing earlier module work & (later) Capstone Project 2
- Basic animations & polish (Framer Motion or CSS transitions)
Product Features
- Individual project case-study pages — problem, approach, stack, outcome
- A resume/CV page or downloadable PDF, kept in sync with the site
- Dark/light mode & accessible color contrast
- A working contact form connected to the backend below
Production Polish
- SEO — meta tags, Open Graph images & a sitemap
- Performance — image optimization & minimal JS for a fast first load
- Accessibility pass — keyboard navigation & screen-reader labels
- Analytics — knowing who's actually visiting the site
Real-World Industry Use Case
This is the direct, applied continuation of the Frontend Development module — and unlike a course exercise, this exact site is what a hiring manager will actually click on, which is precisely why the Resume & Portfolio section of Interview Prep treats a polished portfolio as more important than a perfect resume.
Capstone Project 1 — Content & Contact Backend
A portfolio site doesn't need a full multi-user backend — but it does need real, working server-side logic, which is exactly the lightweight, practical use case covered here.
Core Build
- A Next.js API route (or a small separate service) handling contact form submissions
- Content stored as MDX/Markdown or pulled from a headless CMS
- Structuring project & resume data as reusable, typed content
- Basic input validation & spam protection on the contact form
Product Features
- Sending a real email notification on contact form submission
- A simple blog/writing section, if you want to publish technical posts
- Environment-based configuration (API keys, email service credentials)
- Rate limiting the contact endpoint against abuse
Production Polish
- Logging & error handling on the API route
- Testing the contact flow end to end, not just trusting it works
- Keeping content updatable without redeploying code (CMS or simple admin flow)
- Documenting how to add a new project to the site
Real-World Industry Use Case
This is a deliberately small, real slice of the Backend Development module — one working API route with validation, error handling & email — so backend concepts get applied even on a frontend-heavy project, before Capstone Project 2 asks for a full NestJS backend.
Capstone Project 1 — Cloud Deployment
Taking the portfolio live on a real domain — the first time in this program you deploy something with your own name on it, publicly, for anyone to see.
Core Build
- Deploying the Next.js site to Vercel (or an equivalent static/edge host)
- Connecting a custom domain with correct DNS records
- HTTPS configured automatically & correctly
- Environment variables set up for production (email service, analytics)
Product Features
- Preview deployments for every branch/PR before merging
- Basic analytics wired up in production (privacy-respecting where possible)
- A resume PDF & OG images served correctly from production
- Verifying the contact form actually works in the live environment
Production Polish
- Monitoring uptime for your own site
- Cost awareness — staying comfortably within a free/hobby tier
- A documented process for updating content after initial launch
- Basic security headers & sensible defaults
Real-World Industry Use Case
This is the Web Fundamentals and Cloud Computing modules applied at the smallest real scale — buying/pointing a domain, configuring DNS, and deploying to a managed host — the exact skill set covered there, now producing a URL you'll actually put on your resume.
Capstone Project 1 — CI/CD Pipeline
Even a personal site benefits from the same automation discipline as production software — this is where that habit starts, on lower stakes than Capstone Project 2.
Core Build
- A GitHub Actions workflow running on every push & pull request
- Linting & type-checking as an automated check
- Automatic preview deployments for every branch
- Automatic production deployment on merge to main
Product Features
- Automated Lighthouse/performance checks in the pipeline
- Failing the build if accessibility or performance drops below a threshold
- Basic build caching to keep pipeline runs fast
- Branch protection requiring the pipeline to pass before merge
Production Polish
- Notifications on a failed build or deploy
- Documenting the pipeline so a future you (or a reviewer) understands it
- Comparing this simple pipeline to the fuller one built in Capstone Project 2
- Treating every commit to this repo like a real, reviewable change
Real-World Industry Use Case
This is a deliberately simpler, first real application of the Version Control and DevOps modules — the same GitHub Actions habit that gets built on significantly in Capstone Project 2, started here on a lower-stakes personal project first.
Capstone Project 1 — Testing & Polish
A portfolio site is small enough to fully test and polish end to end — the ideal first place to practice the Testing & Debugging module's habits before a bigger, messier project.
Core Build
- Component tests for key UI pieces (Vitest + React Testing Library)
- A basic accessibility test pass (automated + manual)
- Testing the contact form submission end to end
- Cross-browser & cross-device manual checks
Product Features
- A Playwright test covering the core "visit site → view a project → send a message" flow
- Lighthouse scores tracked & improved deliberately (performance, SEO, accessibility)
- Getting real feedback from a cohort-mate & iterating on it
- Fixing every broken link & console warning before calling it "done"
Ongoing Maintenance
- Keeping dependencies updated over the following months
- Adding new projects/case studies as you build them later in the program
- Revisiting & improving the copy as your resume story evolves
- Treating this site as a living project, not a one-time assignment
Real-World Industry Use Case
This is intentionally the first, lower-stakes place to practice the full testing pyramid from the Testing & Debugging module — a small enough surface area to actually test thoroughly, so those habits are already second nature by the time Capstone Project 2 needs them at real scale.
Ready to learn this — live?
See how this module fits into the complete curriculum.