How I Built a PWA Habit Tracker in One Session

RingTrack was born out of a midnight itch. I was scrolling through Twitter late at night when I saw a 10-second video clip showing a minimal radial habit tracker. It wasn't an app—it was just a prototype motion graphic. But the visual feedback of completing concentric circles felt infinitely more satisfying than clicking a standard checkbox or filling a boring daily grid.

I decided right then: I wanted this on my phone before I went to sleep. Six hours later, RingTrack was live on Vercel as a fully functional Progressive Web App (PWA). Here is the exact breakdown of how to build a PWA habit tracker in a single focused session.

1. The Stack: Zero Dependencies, Maximum Speed

When you are shipping in a single 6-hour sprint, every npm package you install is a liability. I chose vanilla HTML, Tailwind CSS via CDN, inline SVG rendering, Framer Motion for clean micro-interactions, and standard browser localStorage for state persistence.

By using a PWA service worker wrapper, the app installs directly to iOS and Android home screens without requiring App Store approval or complex mobile build pipelines.

2. The Hardest Part: SVG Circular Grid Math

Drawing concentric progress rings programmatically required getting intimate with SVG stroke-dasharray and stroke-dashoffset.

For a circle with radius r, the circumference is 2 * π * r. When a user marks a habit complete, we calculate the completion fraction p (from 0 to 1) and update the dashoffset:

const radius = 40 + index * 12;
const circumference = 2 * Math.PI * radius;
const strokeDashoffset = circumference - (progress * circumference);

3. Lessons for Solo Builders

If you want to ship fast: limit scope brutally, pick tools with zero setup overhead, and focus on one delightful core interaction. For RingTrack, that interaction was watching the SVG ring snap closed with a subtle haptic vibrate on complete.