Lab 3.8: End-to-End Modernization (Final Capstone)

Module: 3.8 - Final Capstone | ← SlidesDuration: 1 hour + 30 min debrief Sample Project: hackathon-starter

The Final Challenge

This is your comprehensive test. You'll apply everything from all three days to perform a complete modernization of a legacy module.

Learning Objectives

This capstone integrates ALL course skills:

Day 1 Skills:

• Codebase exploration
• CLAUDE.md context
• Dependency mapping
• Documentation generation

Day 2 Skills:

• Plan Mode analysis
• Test generation
• TDD implementation
• Safe refactoring

Day 3 Skills:

• Extended thinking
• Automation scripts
• Advanced workflows

The Scenario

You've been tasked with modernizing a module in the hackathon-starter project. The module is:

• Under-documented
• Has minimal test coverage
• Needs a new feature
• Could use refactoring

Your mission: Leave this module better than you found it.

Setup

# Navigate to the project
cd sample-projects/hackathon-starter

# Create a feature branch
git checkout -b final-capstone

# Start Claude Code
claude

The Mission (8 Phases)

Phase 1: Explore      → 8 min
Phase 2: Test         → 10 min
Phase 3: Refactor     → 10 min
Phase 4: TDD Feature  → 12 min
Phase 5: Automate     → 8 min
Phase 6: Document     → 7 min
Phase 7: Commit & PR  → 5 min
Phase 8: (Bonus)      → Remaining time

---

Phase 1: Explore (8 min)

Goal: Understand the module you'll modernize.

Choose a module (suggestion: controllers/user.js or models/User.js)

Tasks:

1. Ask Claude to explain the module's purpose
2. Identify the main functions and their responsibilities
3. Map dependencies (what uses this? what does it use?)

Prompts:

What does the [module] do? Walk me through its main functions.

What are the dependencies of this module?

Output: Brief notes on module structure and dependencies.

Success criteria:

• [ ] Understand the module's purpose
• [ ] Know the main functions
• [ ] Dependencies mapped

---

Phase 2: Test (10 min)

Goal: Add test coverage as a safety net.

Tasks:

1. Identify untested functions
2. Generate tests for critical paths
3. Run tests and verify they pass

Prompts:

What functions in this module lack test coverage?

Generate tests for [function] including happy path and edge cases.

Verify:

npm test

Success criteria:

• [ ] At least 3 new tests added
• [ ] Tests cover critical functionality
• [ ] All tests pass

---

Phase 3: Refactor (10 min)

Goal: Improve code quality with tests as safety net.

Tasks:

1. Identify one code smell
2. Refactor to fix it
3. Verify tests still pass

Prompts:

What code smells exist in this module?

Refactor [specific issue] without changing behavior.

After each change:

npm test

Success criteria:

• [ ] At least one refactoring completed
• [ ] Tests pass before and after
• [ ] Code is cleaner

---

Phase 4: TDD Feature (12 min)

Goal: Add a small feature using TDD.

Suggested features:

• Add last login tracking
• Add profile completeness score
• Add account activity logging

TDD Cycle:

# RED
Write a failing test for [feature].

# Run - should fail
npm test

# GREEN
Implement the feature to make the test pass.

# Run - should pass
npm test

# REFACTOR
Improve the implementation.

# Run - should still pass
npm test

Success criteria:

• [ ] Test written first
• [ ] Feature implemented
• [ ] All tests pass

---

Phase 5: Automate (8 min)

Goal: Create a helpful automation script.

Options:

1. Lint fixer script
2. Test runner with failure analysis
3. Pre-commit hook

Create script:

mkdir -p scripts
# Create your automation script

Success criteria:

• [ ] Script created
• [ ] Script runs successfully
• [ ] Provides value for future development

---

Phase 6: Document (7 min)

Goal: Leave documentation for the next developer.

Tasks:

1. Update CLAUDE.md with what you learned
2. Add JSDoc to any new functions
3. Create/update module README

Prompts:

Add documentation to the functions I created.

Create a README for this module explaining its purpose and usage.

Success criteria:

• [ ] CLAUDE.md updated
• [ ] New code documented
• [ ] Module is more understandable

---

Phase 7: Commit & Create PR (5 min)

Goal: Package your work for review.

Tasks:

1. Stage changes
2. Create descriptive commit
3. Prepare PR summary

Commands:

git add .
git status

Prompt:

Create a commit message for all these changes. Then create a PR summary.

Success criteria:

• [ ] Changes committed
• [ ] Descriptive commit message
• [ ] PR summary ready

---

Phase 8: Bonus - Subagent Review

If time permits: Delegate a code review.

Use a subagent to review the changes I made. Look for:
- Potential bugs
- Performance issues
- Missing test cases
- Documentation gaps

Success criteria:

• [ ] Review completed
• [ ] Feedback received
• [ ] Any critical issues addressed

---

Final Checklist

Before presenting, verify:

• [ ] Exploration - Module understood
• [ ] Tests - Coverage increased
• [ ] Refactoring - Code improved
• [ ] Feature - Added via TDD
• [ ] Automation - Script created
• [ ] Documentation - Module documented
• [ ] Git - Changes committed
• [ ] All tests pass - Safety net intact

Presentation (2 min per person)

Share with the group:

1. What module did you modernize?
2. What was the biggest improvement?
3. What was the most challenging part?
4. What would you do differently?

The Complete Modernization Workflow

You've now mastered:

EXPLORE → TEST → REFACTOR → EXTEND → AUTOMATE → DOCUMENT → SHIP
   │        │        │         │         │          │         │
   │        │        │         │         │          │         └─ Git + PR
   │        │        │         │         │          └─ CLAUDE.md + README
   │        │        │         │         └─ Headless automation
   │        │        │         └─ TDD new features
   │        │        └─ Safe incremental changes
   │        └─ Safety net first
   └─ Understand before changing

Deliverables

At the end of this capstone, you should have:

1. Updated CLAUDE.md
2. New test file(s) with coverage
3. Refactored, cleaner code
4. New feature implemented via TDD
5. Automation script
6. Updated documentation
7. Git commit ready for PR
8. Confidence to modernize any legacy codebase

---

Congratulations!

You've completed the Claude for Coders course.

What you've learned:

• Day 1: Understanding legacy codebases
• Day 2: Making safe changes
• Day 3: Advanced automation and workflows

You're now equipped to:

• Navigate any codebase quickly
• Refactor with confidence
• Add features safely using TDD
• Automate repetitive tasks
• Document as you go

Go forth and modernize!