Momentum

• 

  Example

• 

  Example

Inspiration

I built Momentum because most habit trackers lose the feeling that makes habits work in the first place: visible progress.

When people try to build a habit, the hardest part is usually not understanding what to do. The hard part is showing up again tomorrow. Many habit apps add accounts, feeds, notifications, social pressure, and heavy gamification. Those features can easily turn a personal routine into another noisy system to manage.

I wanted Momentum to feel lighter. It should open quickly, show what matters, and help the user protect the small chain of progress they already started. The core idea is simple: when consistency becomes visible, it becomes easier to continue.

What Momentum does

Momentum is a calm, private habit tracker built around daily momentum.

Users can add habits with an emoji and color, check them in for the day, and immediately see their streaks and dashboard stats update. Each habit has its own current streak and personal best, while the main dashboard shows a 30 day completion rate, total check ins, active habits, and a GitHub style consistency heatmap.

The heatmap is the emotional center of the product. It turns small daily actions into a visual history. A single check in may feel minor, but over time those cells become proof that the user is building something real.

Momentum also follows a local first design. There is no account system, no backend, and no cloud database. Habit data stays in the browser through localStorage, which makes the app fast, private, and usable without setup.

How it works

Under the simple interface, Momentum uses a small habit engine that treats every check in as a dated habit event.

The app keeps a local habit store in the browser. When the user marks a habit complete, the engine updates the saved records, normalizes the date, and recomputes the derived values used by the interface. This includes each habit streak, the personal best, the 30 day completion rate, total check ins, and the heatmap intensity for each day.

A simplified version of the logic is:

[ completion\ ratio = \frac{completed\ habits}{active\ habits} ]

That ratio is calculated across days and then mapped into the heatmap. Lighter cells show lower consistency and darker cells show stronger completion. The result is a dashboard that feels alive without needing a server or a charting library.

The streak mechanism is also date based. For each habit, the app checks whether the habit was completed today, then walks backward through previous dates until it finds a gap. This creates a current streak that reflects real continuity instead of a manually entered number.

How I built it

Momentum was built as a static React web application.

I used React 19 for the interface, Vite 8 for fast development and production builds, and Tailwind CSS 3 for the design system. The app state is handled on the client, and persistence is managed with browser localStorage. The consistency heatmap was implemented by hand with CSS and SVG, which kept the project lightweight and gave me full control over the visual language.

The product structure follows a simple flow:

User action enters the habit engine. The habit engine updates the browser store. Derived metrics are recalculated. The interface renders the updated streaks, stats, and heatmap.

This architecture allowed Momentum to stay fast and private while still feeling like a complete product.

Challenges

The biggest challenge was making the app feel simple while keeping the logic reliable.

Habit tracking seems easy from the outside, but the details matter. Dates need to be normalized. Today needs to be treated consistently. A check in should not be counted twice. Streaks must break correctly when there is a gap. The heatmap needs to reflect daily completion in a way that feels intuitive at a glance.

Another challenge was product design. I did not want the interface to shame the user or overload them with metrics. Momentum needed to feel motivating without becoming loud. That meant choosing a smaller set of meaningful signals: today, streak, completion rate, total check ins, and long term consistency.

The final challenge was making a local first product feel trustworthy. Since there is no login or backend, the app needs to communicate clearly that the data lives in the browser. Privacy is not an extra feature in Momentum. It is part of the product architecture.

What I learned

I learned that a small product can still have meaningful engineering behind it.

A habit tracker is not just a checklist. It needs a data model, date logic, derived metrics, state synchronization, persistent storage, and a visual feedback system. Building Momentum helped me think more carefully about how product decisions and technical decisions shape each other.

I also learned that good software does not always need more infrastructure. For a personal tool like this, running fully in the browser creates a better user experience. It removes friction, protects privacy, and keeps the product focused.

What is next

The next version of Momentum could add optional on device reminders, PWA support, weekly and monthly goals, flexible schedules such as three times per week, deeper insights like best day and longest streak, improved accessibility, dark mode, and optional encrypted sync across devices.

My goal is to keep the product calm while making the habit engine more powerful. Momentum should continue to help users build habits through one clear promise: show up today, see your progress, and keep going tomorrow.

Built With

• css
• github
• html
• javascript
• localstorage
• react-19
• svg
• tailwind-css-3
• vite-8