Writer’s Brief

The Hook

Built a full-stack student progress tracker (database, APIs, two dashboards, live deployment) in a single Claude Code session, including debugging it live in the browser.

Main Points to Cover

  1. The system: students get a personalized checklist per week, checkboxes save instantly, instructor sees everyone’s progress
  2. The build: plan mode -> 7 new files -> Supabase tables -> Cloudflare deploy -> stress test, all in one sitting
  3. The debugging: three bugs found during stress testing, all fixed and redeployed without leaving the conversation

The Angle

This is a “here’s what vibe-coding a real feature looks like end-to-end” story. Not a toy demo. Real students will use this. The interesting part is how many things went wrong (missing env vars, email typos, schema mismatches) and how the debugging loop worked.

Target Reader

Anyone teaching a course or cohort who wants to add progress tracking without learning a new platform. Also: Claude Code users who want to see what a multi-file, full-stack build actually looks like.

Tone Notes

Practical, not breathless. Show the messiness. The three bugs found during testing are more interesting than the code that worked first try.

Raw Material / Moments to Write From

These are notes for Alex to write from. Not prose.

  • The plan was thorough (10 sections, SQL schema, file list, build order) but three things were still wrong: missing env var, email with period not matching, entitlements table having type not tier. Planning doesn’t eliminate debugging.
  • Stress testing by clicking all 7 checkboxes at once via JavaScript injection. All saved. Progress bar jumped to 100% instantly. Reloaded - still 100%. That moment when persistence just works.
  • The course picker bug: click “cohort 1” (doesn’t exist), error page shows, but the picker disappears so you can’t switch back. Classic “the happy path works, the error path is broken.” Fixed by moving the picker outside the content container.
  • Gmail ignoring periods: [email protected] and [email protected] are the same inbox but fail a === check. Had to add the dotted version to 6 different files. The kind of bug that’s obvious in retrospect and invisible in planning.
  • The admin view showing “1 enrolled student, 86% completion, ON TRACK” with the per-week mini bar charts. That was satisfying - the instructor dashboard working on first load after fixing the email issue.
  • The curriculum is just a JSON file. No CMS, no admin UI for editing content. Claude edits the JSON, syncs to Supabase, done. The simplest thing that works.
  • Step descriptions in markdown rendered client-side. Code blocks with dark background, clickable links, proper paragraphs. Looks good without any custom editor.