A minimal, dark-mode habit tracker with streaks, weekly charts, and completion stats — built with React + Vite.
- Habit Cards — Track each habit with a 7-day dot grid you can click to log past days
- Streak Counter — Live streaks that reset if you miss a day
- Stats Sidebar — Weekly bar chart (Recharts), 30-day completion rates, leaderboard
- Header Pill — Today's done/total count always visible
- Add Habit Modal — Custom name, emoji, and colour per habit
- Persistent Storage — Everything lives in
localStorage, no backend required - Responsive — Adapts to mobile with a stacked layout
| Tool | Purpose |
|---|---|
| React 18 | UI & state |
| Vite 5 | Dev server & bundler |
| Recharts | Weekly bar chart |
| date-fns | Date arithmetic |
| lucide-react | Icons |
| CSS Modules | Scoped component styles |
- Node.js ≥ 18
git clone https://github.com/YOUR_USERNAME/habitflow.git
cd habitflow
npm install
npm run devOpen http://localhost:5173 in your browser.
npm run build
# Static output in /dist — deploy to Vercel, Netlify, or GitHub Pageshabitflow/
├── src/
│ ├── components/
│ │ ├── Header.jsx # Logo, date, today's progress pill
│ │ ├── HabitCard.jsx # Per-habit card with dots + streak
│ │ ├── StatsPanel.jsx # Sidebar: chart, rates, leaderboard
│ │ └── AddHabitModal.jsx # Create habit modal (emoji + colour)
│ ├── hooks/
│ │ └── useHabits.js # All state, localStorage, derived data
│ ├── styles/
│ │ └── globals.css # CSS variables, resets, animations
│ ├── App.jsx # Root layout
│ └── main.jsx # Entry point
├── index.html
├── vite.config.js
└── package.json
- Monthly heatmap view (GitHub-style)
- Habit categories / tags
- Export to CSV
- PWA + push reminders
- Cloud sync (Supabase)
- Drag to reorder habits
- Fork the repo
git checkout -b feature/my-feature- Commit & push
- Open a Pull Request
MIT