HabitMaster Pro

Build better habits. Track smarter. Stay consistent.

Comment

⚡ HabitMaster Pro — Project Story

Inspiration

Most habit trackers are either too simple or too bloated. We were inspired by the 1% rule from Atomic Habits — the idea that tiny daily improvements compound into massive results:

$$ P(365) = 1.01^{365} \approx 37.78\times $$

We wanted to make that compounding visible, in a tool that's fast, private, and lives entirely in your browser.

What It Does

HabitMaster Pro is a Multi files habit tracking dashboard with:

  • ✅ Full CRUD for habits and tasks
  • 📋 Kanban board with drag-and-drop
  • 📊 Charts & analytics (weekly progress, category breakdown, streak heatmap)
  • 🔔 Notifications and streak alerts
  • 🖥️ Live activity console logging every action
  • 🎤 Voice search via Web Speech API
  • 🌍 3 languages: English, French, German
  • 💾 100% local — all data stored in localStorage, nothing sent to any server

How We Built It

One HTML file. No framework. No build step.

habitmaster-pro.html ├── <style> → CSS variables, Grid/Flexbox layout, responsive rules ├── <body> → Sidebar, topbar, 7 page sections, modals └── <script> → CRUD, charts, drag-and-drop, i18n, voice search, settings

The SVG progress ring is driven by a simple circumference formula:

$$ \text{offset} = 2\pi r \cdot \left(1 - \frac{\text{rate}}{100}\right), \quad r = 64 $$

Theming is handled entirely through CSS custom properties — switching dark/light mode or accent color updates the whole UI instantly with zero re-renders.

Challenges We Ran Into

  • Single-file constraint — keeping ~2,000 lines readable without modules or imports
  • Native drag-and-drop — implementing Kanban DnD without a library, avoiding ghost artifacts
  • Chart.js + dark mode — charts don't read CSS variables natively; we destroy and re-render on every theme switch
  • Voice search compatibility — graceful fallback when SpeechRecognition isn't available
  • localStorage limits — capped logs at 200 entries and notifications at 50 to avoid silent write failures

Accomplishments That We're Proud Of

  • 🚀 Zero runtime dependencies — works offline after first load
  • 🎨 A full design system in pure CSS variables
  • 🖥️ A terminal console that makes every state change transparent
  • 📐 Real math behind every stat — no fake or hardcoded values

What We Learned

  • CSS custom properties alone can power a complete theming system
  • Chart.js instance lifecycle management is critical to avoid memory leaks
  • Shipping with realistic sample data is a feature, not a shortcut
  • Constraints (single file) produce leaner, more intentional code

What's Next for HabitMaster Pro

  • 📱 PWA support — installable on mobile, full offline mode
  • ⏱️ Pomodoro timer — auto-complete habits after a focus session
  • 🔗 Optional cloud sync — end-to-end encrypted, self-hostable
  • 🤖 AI habit suggestions — recommend new habits based on existing patterns using correlation:

$$ r = \frac{\sum (x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum(x_i-\bar{x})^2 \cdot \sum(y_i-\bar{y})^2}} $$

"We are what we repeatedly do. Excellence is not an act, but a habit." — Aristotle

Share this project:

Updates