Overview
Habbitto helps you build habits by tying them to focused work blocks. Instead of only checking "done," you track how long you spent on each habit. A focus timer (30–90 min or custom) and a stopwatch both log time to the habit you choose. Habits can be marked done for the day, and the app shows streaks and total time spent so progress is visible and motivating.
Type
Web App
Platform
Browser
Stack
Vanilla JS, Vite, Supabase, CSS
Team
Solo Developer
Design Goal
Problem: How to make habit tracking feel simple and motivating instead of overwhelming, by focusing on time spent rather than just checking tasks off.
Approach: I designed Habbitto around two simple tools: a focus timer and a stopwatch, both connected to the habit the user selects. Instead of adding too many features, I kept the app centered on logging time, showing streaks, and making progress easy to understand. I also used Supabase for login and secure user data, while keeping a local mode so the app still works without an account.
Result: The final app gives users a clean and practical way to build habits by seeing the real time they invest. It feels lightweight, personal, and easy to return to, which supports the goal of building consistency without the clutter of larger habit-tracking apps.
Features
| Feature | Description |
|---|---|
| Auth | Email/password sign-up and login via Supabase |
| Habit Tracker | Custom habits, icon picker, edit/delete |
| Focus Timer | Preset durations (30, 45, 60, 75, 90 min), custom duration, circular progress, optional break phase |
| Stopwatch | Free-form timing with save to habit |
| Time & Streaks | Time spent per habit, daily completions, consecutive-day streak counter |
| Session-End Flow | Congratulatory dialog and optional sound when the focus timer finishes |
| Guide | In-app "How it works" section with simple steps and icons |
| Shortcuts | Space to start/pause/resume; keys 1–5 for duration presets when idle |
| Offline / Local Mode | Works without Supabase using localStorage |
Auth
Email/password sign up and login via Supabase.
Habits
Custom habits, icon picker, edit/delete.
Focus Timer
Preset durations (30, 45, 60, 75, 90 min), custom duration, circular progress, optional break phase.
Stopwatch
Free-form timing with save to habit.
Time & Streaks
Time spent per habit, daily completions, consecutive-day streak counter.
Tech Stack
| Layer | Tech |
|---|---|
| Frontend | Vanilla JavaScript (ES modules), Vite |
| Backend | Supabase (Auth, Postgres with RLS) |
| Storage | Supabase when signed in; localStorage when not |
| Styling | CSS (custom properties, no framework) |
Design & UX
- Dark-themed UI with clear typography and accent color
- Circular progress ring for the timer with a subtle pulse when running
- Full-width Start button, habit picker with streak badges, empty state ("Create your first habit")
- Modals for account, guide, and session-end; tab title shows remaining time when the timer is running
Challenges & Learnings
- Supabase RLS — Policies so users only see and edit their own habits, completions, and sessions
- Timer state — Keeping phase (idle / work / break / stopwatch), intervals, and UI in sync; handling tab visibility for re-renders
- Sound and dialog — Looping completion sound until the user dismisses the session-end dialog, then cleaning up audio and state