Drummer Stats Tracker

Project Overview

The Drummer Stats Tracker is a lightweight, browser-based journal designed to motivate and document my journey to 10,000 hours of drumming mastery. Built in a single lunch break, the tracker provides an intuitive interface for logging daily practice hours, band rehearsals, and live performances. It visualizes progress toward the 10,000-hour goal with a dynamic progress bar, tracks songs learned versus those in progress, and organizes 40 essential drum rudiments by difficulty tier.

By leveraging plain HTML, CSS, and JavaScript, the application requires no backend and works seamlessly across devices. Within minutes of completing the prototype, I deployed the app to GitHub Pages under a custom domain, enabling instant, secure access to my personal stats and reinforcing consistent practice habits through immediate feedback.

Key Features

• Progress bar showing journey to 10,000 hours of mastery
• Track practice hours, band practices, and live performances
• Monitor songs learned and currently learning
• List of 40 essential drum rudiements categorized into tiers of difficulty
• Drum Kit section with information about what I'm currently using
• Responsive design that works on all devices
• Data persistence using localStorage

Implementation Details

I kickstarted the Drummer Stats Tracker during a single lunch break by researching similar tools, discovering surferdiary.com, and then hand-coding a quick prototype in plain HTML, CSS, and JavaScript. In roughly 20 minutes, I had the core UI in place: a dynamic progress bar, input fields for logging practice hours, performances, and song statuses, plus a static list of 40 rudiments organized by difficulty and a section displaying my current drum kit. To polish the look and feel, I briefly experimented with Cursor AI suggestions but ultimately refined the CSS and JavaScript by hand to ensure clean, efficient code and full responsive support across mobile and desktop.

Once the alpha version met my criteria, I pushed the code to a new GitHub repository, turned on GitHub Pages hosting, and linked my Namecheap domain via custom DNS records. I enabled SSL in the Pages settings and pointed everything at the main branch, so that within ten minutes of finishing development the tracker was live and secure. The result is a lightweight, browser-based journal that tracks every facet of my drumming journey toward 10,000 hours with zero backend dependencies.

Challenges and Solutions

Working within the confines of a single lunch break demanded rapid prototyping without sacrificing usability. To meet this tight deadline, I skipped elaborate mockups and dived straight into hand-coding the core functionality in plain HTML, CSS, and JavaScript. This approach let me flesh out the progress bar, statistics cards, achievements,song list, rudiment list, and drum kit showcase section in under twenty minutes, ensuring a working alpha by the end of the break.

Early experiments with Cursor AI for styling and code suggestions introduced unexpected inefficiencies and hallucinated snippets that didn’t align with the project’s lightweight goals. Recognizing this, I selectively applied only the AI’s most reliable recommendations and reverted the rest, refining the UI and JavaScript manually to maintain clean, performant code.

Delivering a seamless experience across phones, tablets, and desktops meant tackling responsive styling challenges on the fly. I adopted a mobile-first CSS strategy, used flexible layouts and media queries, and tested the tracker in multiple browsers to guarantee that all components — from the progress bar to the drum kit section — remained functional and visually coherent.

Finally, taking the app live in under ten minutes demanded a frictionless deployment. I pushed the repository to GitHub, enabled Pages hosting, configured custom DNS records through Namecheap, and activated SSL with a single toggle in the Pages settings. This streamlined release process ensured that the tracker was both instantly accessible and secure, reinforcing its role as a reliable practice companion.

Results

This project is still in early alpha. I'm using it to track my progress and to help me stay motivated.

I will post improvement metrics and updates here as I develop the project.

← Back to Projects