Lab 2.7: Modernization Mini-Project

Day 2 Capstone | ← SlidesDuration: 1 hour Sample Project: hackathon-starter

The Scenario

Your team has decided to modernize a legacy module. Using everything you learned today, you'll:

1. Plan the changes (Plan Mode)
2. Add safety nets (Test Generation)
3. Implement a small feature (TDD)
4. Refactor existing code (Safe Refactoring)
5. Commit your work (Git Integration)

Learning Objectives

This capstone integrates all Day 2 skills:

• Plan Mode for analysis
• Test Generation for safety
• TDD for new features
• Safe Refactoring for improvements
• Git for versioning

Prerequisites

• Completed all Day 2 labs (2.1, 2.2, 2.3, 2.4)
• hackathon-starter project set up

Setup

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

# Create a new branch for this work
git checkout -b day2-capstone

# Start Claude Code
claude

The Mission

Complete these 6 phases within 1 hour:

Phase	Task	Time
1	Plan	10 min
2	Test	15 min
3	TDD Feature	15 min
4	Refactor	12 min
5	(Bonus) Hook	5 min
6	Commit	3 min

---

Phase 1: Create a Plan

Time: 10 minutes

Use Plan Mode to analyze a module.

claude --permission-mode plan

Task: Create a refactoring plan for a controller or service.

Create a plan to improve the user controller. Identify:
1. Code smells
2. Missing test coverage
3. Refactoring opportunities
4. Risk assessment

Output: Save your plan to REFACTORING_PLAN.md

Success criteria:

• [ ] Plan Mode used
• [ ] 3+ improvements identified
• [ ] Risks documented

---

Phase 2: Generate Tests

Time: 15 minutes

Add tests for the code you plan to modify.

Exit Plan Mode first:

/exit

Generate tests:

Generate tests for the [function you plan to refactor]. Include:
- Happy path tests
- Edge cases
- Error scenarios

Run tests:

npm test

Success criteria:

• [ ] Test file created
• [ ] At least 5 tests written
• [ ] All tests pass

---

Phase 3: TDD a Small Feature

Time: 15 minutes

Add a small feature using TDD.

Suggested features:

• Add a "last login" timestamp to user
• Add profile picture URL validation
• Add password strength indicator

TDD Cycle:

# RED: Write failing test
Write a test for [feature]. The test should fail because the feature doesn't exist.

# Run tests - should fail
npm test

# GREEN: Implement
Implement the minimum code to make the test pass.

# Run tests - should pass
npm test

# REFACTOR: Improve
Improve the implementation without changing behavior.

# Run tests - should still pass
npm test

Success criteria:

• [ ] Started with failing test (RED)
• [ ] Made it pass (GREEN)
• [ ] Improved the code (REFACTOR)
• [ ] All tests pass

---

Phase 4: Refactor Existing Code

Time: 12 minutes

Improve existing code using your safety net.

Target: Pick something from your Phase 1 plan.

Refactoring steps:

# Step 1: Verify baseline
npm test

# Step 2: Make one improvement
Refactor [specific thing] to improve [readability/maintainability].

# Step 3: Verify
npm test

# Step 4: Repeat

Success criteria:

• [ ] At least 2 refactorings completed
• [ ] Tests pass after each change
• [ ] Code is cleaner

---

Phase 5: (Bonus) Set Up a Hook

Time: 5 minutes

Configure an auto-linting hook.

Create hook configuration:

Help me set up a PostToolUse hook that runs the linter after any file edit.

This ensures code style is maintained automatically.

Success criteria:

• [ ] Hook configured in settings
• [ ] Hook fires on file edit
• [ ] Linting runs automatically

---

Phase 6: Commit Your Work

Time: 3 minutes

Create a clean commit with your changes.

Create a commit for all the changes we made. Include:
- What was added
- What was refactored
- Test coverage added

Verify:

git log -1
git diff HEAD~1 --stat

Success criteria:

• [ ] All changes committed
• [ ] Descriptive commit message
• [ ] Branch is clean

---

Summary Checklist

Before finishing, verify:

• [ ] Plan created - Documented in REFACTORING_PLAN.md
• [ ] Tests added - Coverage increased
• [ ] Feature implemented - Using TDD cycle
• [ ] Code refactored - Cleaner than before
• [ ] Changes committed - Clean git history
• [ ] All tests pass - Safety net intact

---

The Day 2 Workflow

You've now practiced the complete modernization workflow:

PLAN → TEST → IMPLEMENT → REFACTOR → COMMIT
  │      │        │           │         │
  │      │        │           │         └─ Version control
  │      │        │           └─ Improve quality
  │      │        └─ Add features safely (TDD)
  │      └─ Build safety net
  └─ Think before acting

---

Reflection Questions

After completing the capstone:

1. Which phase was most valuable?
2. What would you do differently next time?
3. How much faster was this with Claude?
4. What did you learn about safe code changes?

---

Deliverables

At the end of this capstone, you should have:

1. REFACTORING_PLAN.md with analysis
2. New test file(s) with coverage
3. New feature implemented via TDD
4. Refactored code (cleaner than before)
5. Git commit with all changes
6. Confidence to modernize legacy code safely

---

Congratulations!

You've completed Day 2 of Claude for Coders.

What's Next

Tomorrow (Day 3): You'll learn advanced workflows:

• Extended Thinking for complex problems
• Custom slash commands
• MCP integration
• Multi-Claude workflows
• CI/CD automation

Rest up - Day 3 is where you level up!