Drum Practice Book

A Chrome Extension + Web Dashboard for Tracking Drumming Progress

The Problem

I play drums and learn from Drumeo, one of the most comprehensive online drumming platforms available. Drumeo is excellent at teaching — but it has no way to track your own progress.

Every time I found an exercise I wanted to master, I would practice it, close the tab, and lose it. No record of where I left off.

No way to see if I was actually improving. The gap between "learning platform" and "practice tracker" was costing me momentum.

The Solution

Drum Practice Book is two tools working together: a Chrome Extension that lives inside Drumeo, and a web dashboard where I see everything.

The extension adds a button directly inside Drumeo's interface. When I open a practice drill, it's there — I can save the exercise and log the BPM I played without ever leaving the page. The dashboard gives me the full picture: every saved exercise, my BPM history across sessions, progress toward goal tempos, and a graph showing improvement over time. It auto-refreshes every 15 seconds, so it stays live during a practice session.

The extension handles two types of entries: Exercises (drills I am working toward a specific goal BPM) and Warm Ups (daily speed drills where I track improvement without a fixed target).

How It Was Built

This project was built entirely with Claude Code, Anthropic's AI-powered development environment. I am a product thinker, not a trained engineer — and Claude Code was the bridge between a clear problem and working software.

The process was genuinely collaborative. I described behavior in plain language; Claude Code translated it into working code and explained the tradeoffs behind each decision. When the extension's injected UI stopped responding to clicks (Drumeo's own JavaScript was intercepting them), Claude Code diagnosed the root cause and proposed the fix. When the database needed structure, we designed the schema together — I shaped it around how I actually think about practice data, Claude Code made it technically sound.

What I brought was product clarity: the ability to define the problem precisely, evaluate whether the output matched the intent, and direct the next iteration. The AI handled the implementation. Every feature traces back to a behavior I described, not a line of code I wrote.

Product thinking drives technical decisions. Every feature exists because there was a real problem behind it. The goal BPM field gives exercises a finish line. The Warm Ups tab exists because not all practice has a fixed target. The architecture decisions were made to solve user experience problems, not to show off engineering.

AI fluency as a multiplier. I built a Chrome extension, a real-time web dashboard, and a PostgreSQL-backed database — none of which I could have written before working with AI tools. What AI cannot replace is knowing what to build, why it matters, and whether it actually works.

Shipping over perfecting. The tool is live, I use it every practice session, and it has measurably changed how I approach the drums. The backlog is long. That is a sign of a real product, not an unfinished one.

The Tech

The stack is intentionally lean — no framework, no bundler, no build step. Fewer moving parts means faster iteration and a codebase that is fully transparent.

  • Chrome Extension: Vanilla JS, Manifest V3, Shadow DOM

  • Web Dashboard: Single-file HTML/CSS/JS, Chart.js

  • Database: Supabase (PostgreSQL)

  • Hosting: Vercel (GitHub auto-deploy)

  • AI Development: Claude Code (Anthropic)

Shadow DOM is used in the extension to isolate the injected UI from Drumeo's JavaScript. All database operations run through a background service worker — the content script never calls Supabase directly. The dashboard deploys automatically on every GitHub push.

GitHub🔗

Results

  • Persistent record of every exercise saved from Drumeo

  • BPM progress visible across all sessions for every drill

  • Warm-up routine documented and measurable for the first time

  • No more losing track of what I was working on between sessions

The problem was real. The solution is in production. And building it changed how I think about what product people can ship when AI removes the engineering bottleneck.

Status: Live and in personal use · Public release planned