Project Documentation · Web Champ

Momentum

Build better habits, one day at a time — a calm, private, local-first habit tracker.

Live demo: https://zhenyuanpan-momentum.surge.sh
Source code: github.com/ZhenyuanPAN822/momentum-habit-tracker

1. Project Overview

Momentum is a fully-functional web application that helps people build and keep habits. It is designed around a single insight: what keeps people going is visible, day-by-day consistency. Instead of accounts, feeds and heavy gamification, Momentum shows your current streak front and centre, lets you check in with one tap, and renders your history as a GitHub-style consistency heatmap.

It is local-first: everything is stored in the browser via localStorage, so it works offline, needs no sign-up, and never sends your data anywhere.

2. Key Features

Daily check-ins — tap a habit to mark it done for today; streaks and stats recompute instantly.
Per-habit streaks with current and personal-best counts, each habit colour-coded.
Consistency heatmap — a 20-week GitHub-style grid showing how consistently you've shown up.
Live dashboard — 30-day completion rate, total check-ins, and active-habit count.
Add / manage habits with emoji and colour.
Local-first & private — no backend, no account, fully offline-capable.

3. Technologies Used

Area	Tech
UI framework	React 19
Build tooling	Vite 8
Styling / design system	Tailwind CSS 3, Bricolage Grotesque + Inter
Data viz	Hand-built CSS/SVG heatmap (no chart libraries)
Persistence	Browser localStorage
Hosting	Static deploy (surge.sh / GitHub Pages)

4. Installation / Setup Instructions

The app is static and runs entirely in the browser. To run locally:

git clone https://github.com/ZhenyuanPAN822/momentum-habit-tracker.git
cd momentum-habit-tracker
npm install
npm run dev      # open the printed http://localhost:5173 URL

# production build
npm run build    # outputs static files to dist/
npm run preview  # serve the built site

No environment variables, API keys, or backend services are required.

5. Usage

Open the live demo — a few sample habits are seeded so you can explore immediately.
Tap a habit in Today to check it in; watch the streak, stats and heatmap update.
Use + Add a habit to create your own (name, emoji, colour).
Review your Consistency heatmap and per-habit cards to keep your streak alive.

6. Team Member Details

Solo submission.

Name	Role	Contact
Zhenyuan Pan	Design & development (solo)	github.com/ZhenyuanPAN822

(Update the name/contact above if needed before submitting.)

7. References & Resources Used

React — react.dev
Vite — vite.dev
Tailwind CSS — tailwindcss.com
Fonts: Bricolage Grotesque & Inter via Google Fonts
Heatmap concept inspired by the GitHub contribution graph (implemented from scratch, no third-party chart library)