Web App

Habbitto

Time-Driven Habit & Focus Tracker

Habbitto is a full-stack web app I built to track habits by focus time, not just checkmarks. Users pick a habit, run a focus timer or stopwatch, and the minutes count toward completions, streaks, and totals. It includes Supabase auth and cloud sync, plus a full offline mode with localStorage, and is deployed on Vercel.

Live Demo GitHub Repository
Role Full Stack Developer Frontend Vanilla JS, Vite Backend Supabase Deploy Vercel
Habbitto main dashboard with habits and timer

Project Overview

Role
Full Stack Developer
Frontend
Vanilla JS
HTML5
Vanilla CSS
Vite
Backend
Supabase
PostgreSQL
Auth
Supabase Auth
Deployment
Vercel

No UI frameworks. Pure CSS and JavaScript for a lightweight bundle and fast load times.

The Problem & Solution

The Problem: Traditional check-the-box habit trackers don't measure the quality or duration of effort. Spending 5 minutes reading vs. 2 hours reading both count as just one check.

The Solution: Habbitto integrates time-tracking directly into habit building. By tying focus sessions (via a timer or stopwatch) to specific habits, users get a clear view of their actual time investment, streaks, and progress.

Time Spent

Habbitto time spent per habit

Streaks

Habbitto streak counters

Key Features

  • Integrated Time Tracking: Choose between a preset focus timer (Pomodoro style with break phases) or a free-form stopwatch. Time logged is automatically credited to the selected habit.
  • Resilient State Management: The timer state persists even if the user accidentally closes the tab mid-session.
  • Offline-Ready Local Mode: Users can try the app without creating an account; data is managed via localStorage.
  • Gamification & Leaderboard: A global leaderboard ranks users by total focus minutes to encourage consistency.
  • Secure Authentication: Full email/password auth flow powered by Supabase.

Focus Timer

Habbitto focus timer interface

Authentication

Habbitto email password authentication

Technical Highlights & Architecture

  • Zero-Dependency UI: Built the entire user interface, including complex components like the icon picker and modal systems, using pure HTML, CSS, and Vanilla JavaScript. This kept the bundle light and load times fast.
  • State Persistence: Timer logic survives page reloads and tab closures using localStorage and timestamp calculations, so users never lose tracked focus time.
  • Database Security: Supabase PostgreSQL Row Level Security (RLS) keeps each user's data private and isolated on the backend.
  • Keyboard Accessibility: Global shortcuts (Space to start/pause, 1-5 for duration presets) improve workflow and accessibility.

Stopwatch Mode

Habbitto stopwatch mode

Habit Management

Habbitto habit management with icons

Future Improvements

  • Data visualization for weekly/monthly focus trends
  • Social accountability features (sharing milestones)
Live Demo GitHub Repository Back to Projects