Agent Code Academy
Home/Phase 3: Mastery
Week 12 of 12

Capstone & Portfolio

Putting it all together

Objective

Build a production-quality project showcasing everything you've learned.

Deliverable

A production-deployed capstone project with full documentation, CI/CD, and a portfolio page linking all 12 weeks of work.

Topics

  • Capstone project planning and architecture
  • Professional Git workflow: feature branches, PRs, code review
  • CI/CD: automated testing and deployment
  • Production readiness: error handling, logging, monitoring
  • Portfolio presentation: GitHub profile, README, live demos
  • CLAUDE.md mastery: comprehensive project documentation

Activities

  • Plan your capstone project architecture
  • Build using agent teams and MCP integrations
  • Implement full Git workflow with feature branches
  • Set up CI/CD pipeline
  • Write professional documentation
  • Deploy production version
  • Create portfolio page showcasing all projects

Skills You'll Gain

Full-stack development, professional workflows, CI/CD, portfolio presentation

Learning Objectives

By the end of this week, you will be able to:

  1. Plan and architect a production-quality application from scratch
  2. Use a professional Git workflow with feature branches, PRs, and code review
  3. Set up a CI/CD pipeline that automatically tests and deploys your code
  4. Prepare a capstone project that demonstrates everything you have learned
  5. Present your work in a professional portfolio

Lesson

The Capstone: Your Graduation Project

This week is different. There is no new technology to learn. Instead, you combine everything from the past 11 weeks into one impressive project. Think of it as your graduation thesis — proof that you can build real software with Claude Code.

Your capstone should demonstrate:

  • Terminal and Git proficiency (Weeks 1-2)
  • Claude Code mastery (Week 3)
  • Full-stack web development (Weeks 4-6)
  • Testing and quality (Week 7)
  • Independent project scoping (Week 8)
  • Skills and hooks (Week 9)
  • MCP integration (Week 10)
  • Agent teams (Week 11)

You do not need to use every single technology. Choose the ones that make sense for your project. A great capstone showcases depth over breadth.

Planning Your Capstone

Spend significant time planning before writing any code. Use Claude Code in Plan mode:

I want to build [your idea]. Help me plan the architecture:
1. What pages/features does it need?
2. What database tables are required?
3. What external APIs or MCP servers would be useful?
4. What should the Git branching strategy look like?
5. What tests should I write?
6. What hooks or skills would improve the workflow?

Write the plan in a docs/architecture.md file. Include:

  • System diagram (you can use ASCII art)
  • Database schema
  • API endpoints
  • Page/route list
  • Technology choices and reasoning

Professional Git Workflow

For the capstone, use a professional branching strategy:

main (production — always deployable)
  └── develop (integration branch)
       ├── feature/auth (authentication feature)
       ├── feature/dashboard (dashboard feature)
       ├── feature/api-routes (API routes)
       └── bugfix/search-filter (search bug fix)

The workflow:

  1. Create a feature branch from develop: git checkout -b feature/auth develop
  2. Build the feature with Claude Code
  3. Push and open a PR to develop
  4. Review the PR (use /code-review)
  5. Merge to develop
  6. When all features are ready, merge develop to main
  7. Deploy from main

CI/CD: Automated Testing and Deployment

CI/CD stands for Continuous Integration / Continuous Deployment. It means:

  • CI — Every time you push code, tests run automatically. If tests fail, the PR is blocked.
  • CD — Every time code is merged to main, it deploys automatically.

With GitHub Actions, you create a workflow file:

# .github/workflows/ci.yml
name: CI

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm install
      - run: npm test
      - run: npm run build

Ask Claude Code: "Set up a GitHub Actions CI pipeline that runs tests and builds on every PR."

Vercel handles CD automatically. When you connect your GitHub repo to Vercel, every push to main triggers a deployment. Every PR gets a preview deployment with its own URL.

Production Readiness

Before calling your project "production ready," check:

  1. Error handling — Does the app show helpful error messages instead of crashing?
  2. Loading states — Does the user see a spinner while data loads?
  3. Empty states — What does the user see when there is no data yet?
  4. Input validation — Can users break the app with unexpected input?
  5. Responsive design — Does it work on mobile, tablet, and desktop?
  6. Performance — Does the app load in under 3 seconds?
  7. Security — Are API keys hidden? Is authentication required? Is data validated server-side?

Ask Claude: "Run /code-review and check for production readiness issues."

Portfolio Presentation

Your portfolio is how you show the world what you can build. Create a portfolio that includes:

  1. GitHub Profile README — A special README.md in a repository named after your username that appears on your GitHub profile page. Include a brief bio, your tech stack, and links to your projects.

  2. Project READMEs — Each project should have a professional README with screenshots, a live demo link, and setup instructions.

  3. Portfolio Page — A simple website listing all your projects. This can be one of your Vercel deployments. Include:

    • Your name and a brief introduction
    • Cards for each project with title, description, screenshot, and links
    • Tech stack used in each project
    • Links to GitHub repos and live demos

CLAUDE.md Mastery

By now, your CLAUDE.md should be comprehensive. A great CLAUDE.md for the capstone includes:

# CLAUDE.md

## Project Overview
[1-2 sentence description]

## Tech Stack
- Next.js 16 with TypeScript
- Tailwind CSS for styling
- Supabase for database and auth
- Vitest for testing
- Vercel for deployment

## Commands
- npm run dev — Start development server
- npm test — Run all tests
- npm run build — Production build
- npm run lint — Check code quality
- npx vercel deploy --prod — Deploy to production

## Architecture
- app/ — Next.js app router pages
- components/ — Reusable React components
- lib/ — Utility functions and database client
- app/api/ — API routes
- __tests__/ — Test files

## Git Workflow
- main: production (auto-deploys to Vercel)
- develop: integration branch
- feature/*: feature branches

## Conventions
- Use TypeScript strict mode
- Components use PascalCase, utilities use camelCase
- Every API route has input validation
- Tests follow AAA pattern (Arrange, Act, Assert)
- Commit messages follow conventional commits format

Practice Exercises

Exercise 1 (Guided): Plan Your Capstone

  1. Choose your capstone idea (or enhance your Week 8 project)
  2. Use Claude in Plan mode to design the architecture
  3. Create docs/architecture.md with the full plan
  4. Set up the Git branching strategy: create develop branch, create your first feature branch
  5. Write a comprehensive CLAUDE.md

Verification: docs/architecture.md exists with system diagram, schema, and API list. Git has a develop branch and at least one feature branch. CLAUDE.md covers all sections.

Exercise 2 (Independent): Build and Ship

Goal: Build your capstone in phases using feature branches:

  1. Phase 1: Database schema and API routes (feature branch → PR → merge)
  2. Phase 2: Core UI and functionality (feature branch → PR → merge)
  3. Phase 3: Authentication and security (feature branch → PR → merge)
  4. Phase 4: Testing and polish (feature branch → PR → merge)

Use agent teams if your project is complex enough. Run /code-review after each phase.

Verification: At least 4 merged PRs. All tests pass. The app is deployed and working.

Exercise 3 (Challenge): CI/CD and Portfolio

  1. Set up GitHub Actions CI (tests + build on every PR)
  2. Connect your repo to Vercel for automatic deployments
  3. Create a portfolio page showcasing all your projects from Weeks 4, 8, and 12
  4. Write a GitHub Profile README
  5. Share your portfolio URL

Run at least one PR through the full pipeline: push → CI passes → preview deploy → review → merge → production deploy.

Self-Assessment Quiz

1. What is the professional Git workflow for feature development?

2. What does CI/CD stand for, and what does each part do?

3. Name three things to check for "production readiness."

4. What should a comprehensive CLAUDE.md include?

Answers:

  1. Create a feature branch from develop, build the feature, push and open a PR, review the code, merge to develop. When all features are ready, merge develop to main and deploy. This keeps main always deployable and lets multiple features develop in parallel.

  2. CI = Continuous Integration — automatically runs tests every time you push code, blocking PRs if tests fail. CD = Continuous Deployment — automatically deploys code when it is merged to the main branch. Together, they ensure quality and speed.

  3. Any three of: error handling (helpful messages instead of crashes), loading states (spinners while data loads), empty states (what users see with no data), input validation (preventing broken input), responsive design (mobile + desktop), performance (fast load times), security (hidden keys, authentication, server-side validation).

  4. A comprehensive CLAUDE.md includes: project overview, tech stack, commands (dev, test, build, deploy), architecture (file structure), Git workflow, and conventions (naming, patterns, testing approach).