A visual habit operating system that turns daily actions into measurable momentum.
Momentum is a data-dense, dark-themed habit tracker designed for self-discipline and reflection. Unlike typical habit apps with playful UI, Momentum uses a professional "bento dashboard" layout with tables, matrices, and visual progress tracking.
- What gets visualized gets improved
- No gamification or streaks that "break"
- Cumulative progress tracking (never resets)
- Observational insights, not prescriptive advice
- Single-page dashboard experience
| Feature | Description |
|---|---|
| Week Table | 7-day matrix with checkable cells and per-row progress bars |
| Month Table | Full 30-31 day log with scrollable container |
| Month Cards | Jan-Dec year overview with completion percentages |
| Milestones | Cumulative streak tiers (20, 30, 50, 60, 75, 90, 100+ days) |
| Pattern Insights | Weekly/monthly analysis with observational language |
| Daily Motivation | Stoic quotes with month countdown |
- Frontend: React 18, TypeScript, Vite
- Backend: Supabase (PostgreSQL + Auth + RLS)
- Styling: Vanilla CSS with CSS Variables
- State: TanStack Query (React Query)
- Icons: Lucide React
- Node.js 18+
- Supabase account
# Clone repository
git clone <repo-url>
cd havit-tracker
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Edit .env with your Supabase credentials
# Run development server
npm run dev- Create a new Supabase project
- Run the migration SQL in
supabase/migration.sql - Copy your project URL and anon key to
.env
src/
├── components/
│ └── dashboard/ # Bento dashboard modules
│ ├── HabitManager.tsx
│ ├── WeekTable.tsx
│ ├── MonthTable.tsx
│ ├── MonthCards.tsx
│ ├── MilestoneTable.tsx
│ ├── PatternInsights.tsx
│ └── MotivationModule.tsx
├── hooks/
│ ├── useAuth.tsx # Authentication hook
│ ├── useHabits.ts # Habit CRUD operations
│ └── useCheckIns.ts # Check-in operations
├── pages/
│ ├── Dashboard.tsx # Main bento dashboard
│ ├── Landing.tsx # Public landing page
│ ├── Login.tsx # Authentication
│ ├── Signup.tsx
│ └── Settings.tsx
├── lib/
│ ├── supabase.ts # Supabase client
│ └── utils.ts # Utility functions
├── data/
│ └── motivations.ts # Daily quotes
└── types/
└── database.ts # TypeScript types
| Token | Value | Usage |
|---|---|---|
--bg-base |
#0D0D0F |
Page background |
--bg-surface |
#141418 |
Card backgrounds |
--accent-primary |
#4ADE80 |
Primary actions, success |
--text-primary |
#F5F5F7 |
Main text |
--text-muted |
#6E6E73 |
Secondary text |
- Bento Cards: 12-column grid with
bento-xstobento-xlsizes - Data Tables: Sticky headers, hover states, per-row progress
- Check Cells: Checkable habit cells with animations
- Progress Bars: Horizontal bars with partial/complete states
profiles: User profile datahabits: Habit definitions (name, icon, frequency, custom_days)check_ins: Daily habit completions (habit_id, date)
All tables enforce RLS policies ensuring users can only access their own data.
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLintMIT