DevOps Peach

Claude Code in Practice · Long projects – Context, progress and shipping · Lesson 3 of 3

Verify, then ship: checks, screenshots and deploy

"Done" from an AI is a claim. Before anything goes live we run the validator, look at screenshots, and follow a short commit and deploy routine, including the step people forget when the server code changed.

Practice interactively →

Claude is good at saying a task is finished. Our job is to make that sentence come with evidence. Everything below is cheap compared with fixing a broken page that learners have already seen.

The layers of checking

Layer Command or method Catches
Syntax node --check worker/api.js, a script that compiles the inline JS A missing bracket that blanks the whole site
Content rules python3 tools/check_content.py content/<track>/<module> Broken YAML, duplicate ids, lessons over the word limit, invalid build steps
Data build python3 tools/preview/build_site_data.py Modules that fail to render
Behaviour Headless browser: open the page, click, read the result A button that does nothing, a 404 from the API
Looks Screenshots at 1440, 1024 and 390 px, light and dark Overflow, unreadable text, the wrong theme
Independent review tech-reviewer agent for graded content Wrong answers, ambiguous questions

Ask for the check in the request itself: "…then run check_content and send me screenshots at desktop and phone width." When Claude cannot run something (no network to the real API, for example), the honest answer is "not verified", and you test that part yourself.

Mocks for the parts you cannot reach

The profile pages call a server API that does not exist on a laptop. We tested them two ways: the Worker code with an in-memory fake database in Node, and the page with the API calls intercepted in the browser and answered with sample data. Neither proves production works, but both catch most mistakes before deploy.

The commit routine

Our rules, all in CLAUDE.md:

  1. Commit only when the owner asks.
  2. On the default branch, create a branch first.
  3. Add only the files you changed. Our Windows checkout shows hundreds of files as modified just because of line endings; committing those would bury the real change.
  4. Write a commit message that says what changed and why.

Deploy: know which part changed

DevOps Peach is static files plus a small Cloudflare Worker for accounts and the leaderboard.

Put the follow-up commands into the work log entry, so whoever pushes does not forget them. Then open the live site and look at the change yourself. It takes thirty seconds and it is the only check that proves the thing your learners will see.

Use case: The bug the screenshot caught

The situation

The first version of the profile page was finished. Every automated check was green: the inline JavaScript compiled, the content validator had nothing to say, a headless browser loaded the page without console errors.

What the screenshots showed

Claude took screenshots at three widths with sample progress data and looked at them:

Problem Why no check caught it
The "Dashboard › Profile" breadcrumb was invisible on the light background It used a colour meant for the dark hero area; valid CSS, wrong context
The top menu highlighted "Roadmap" on the profile page Unknown routes fell back to the roadmap highlight; no error, just wrong
On a phone the badges were a single long column The layout was correct, just tiring to scroll
Changing the avatar replayed every badge animation Correct code, annoying behaviour

Four fixes, one message, a second set of screenshots.

The rule we took from it

"No errors" means the code runs. It does not mean the page is right. For anything a learner will look at, the request now always ends with: "Look at it at desktop and phone width, light and dark, and tell me what you would change."

And the deploy step

The same feature added two Worker routes. The work log entry ended with "Needs npx wrangler deploy." When the owner asked whether pushing was enough, the answer was in the log: the static part, yes; the leaderboard links, not until the Worker is deployed.

What we took away

Practice interactively →