Habits & Progress
HabitFlow
A habit tracker that runs entirely in the browser: create habits, tick them off each day, and follow your progress through streaks, statistics and a calendar. No account, and the data stays on your own device.
At a glance
- 4views: dashboard, statistics, calendar and settings
- 2charts for weekly and monthly completion
- 39automated tests for data, schedules and statistics
- JSONexport and import, with the data kept in the browser
Overview
HabitFlow is a habit tracker with four views: a dashboard for the day, a statistics page, a monthly calendar and settings. The application is released and runs entirely in the browser.
Features
Dashboard
- Create, edit and delete habits, each with a category and an icon
- Flexible schedules: every day or on selected weekdays
- Daily progress with a week overview
Statistics & streaks
- Current and best streak for each habit, counting only scheduled days
- Weekly and monthly completion rates
- Two charts with Chart.js, loaded only when the page is opened
Calendar
- A month view that shows every day as done, partly done or missed
- Past days can be corrected afterwards
Data & interface
- Data stored locally in the browser, with no account
- JSON export and import
- Dark and light themes
- Responsive layout for desktop and phones
Screenshots
Problem
New habits are built on the side of everyday life, which is exactly where they are easy to lose sight of. Many habit trackers mostly show a row of check marks. That makes it hard to see how consistently you are really keeping up, especially with habits that aren't due every day.
Solution
HabitFlow combines a simple daily log with a view over longer periods: a streak for each habit, weekly and monthly completion rates, two charts, and a calendar that shows every day as done, partly done or missed. Only the days a habit was scheduled for are counted.
Technical implementation
The application is written in JavaScript with ES modules, without a framework, and built with Vite. The logic for dates, schedules and statistics is kept separate from the interface and is checked by 39 automated tests on Node's test runner. Chart.js is only loaded when the statistics page is opened. Data is stored in the browser's localStorage and can be exported and imported as JSON.
Challenges
The date logic and the schedules needed the most care. Days follow the local calendar instead of UTC, so an entry doesn't shift around midnight. And changing a habit's weekdays must not rewrite the past, so each habit keeps a history of its schedules.
Lessons learned
Statistics are only as good as the rules behind them. Deciding clearly what counts as scheduled, done or missed, and then securing those rules with tests, was worth more than any additional feature.