How udsau/habit-tracker works
Habit Tracker is a browser-only React app for recording weekly habit check-ins and reviewing progress. The main workflow is onboarding, managing habits and today/yesterday check-ins on the dashboard, saving state locally, then reviewing archived weeks or monthly analytics. The graph includes the documented drag-and-drop, custom-goal, and history capabilities; unsampled page implementations are represented by their exact component paths, with only documented or evident wiring shown.
Main entry points: App.jsx App · Dashboard.jsx Dashboard · useWeekHistory.js Week history · AnalyticsPage.jsx Monthly analytics
Components 17
App flow
- App
src/App.jsx - Onboarding
src/components/OnboardingScreen.jsx - Navigation
src/components/Sidebar.jsx - Settings
src/components/SettingsPage.jsx
Habit tracking
- Dashboard
src/components/Dashboard.jsx - Habit table
src/components/HabitTable.jsx - Habit row
src/components/HabitRow.jsx - Habit calculations
src/utils/habitMath.js
Progress review
- Monthly analytics
src/components/AnalyticsPage.jsx - Monthly statistics
src/utils/monthlyStats.js - Progress displays
src/components/StatsCard.jsx - Progress chart
src/components/ProgressDonut.jsx
Local state
- Habit state
src/hooks/useHabits.js - Account state
src/hooks/useAccount.js - Browser storage
- Week history
src/hooks/useWeekHistory.js
Other components
- User
Connections 24
- User → App: uses
- App → Account state: loads account
- App → Habit state: loads habits
- App → Onboarding: shows when needed
- Onboarding → Account state: creates account
- App → Navigation: renders
- Navigation → App: selects page
- App → Dashboard: renders
- App → Monthly analytics: renders
- App → Settings: renders
- Dashboard → Habit table: renders
- Habit table → Habit row: renders rows
- Dashboard → Week history: loads past weeks
- Dashboard → Habit calculations: computes week
- Habit row → Habit calculations: computes progress
- Habit state → Browser storage: reads and writes
- Account state → Browser storage: reads and writes
- Week history → Browser storage: reads history
- Habit state → Week history: archives weeks
- Monthly analytics → Week history: loads history
- Monthly analytics → Monthly statistics: computes monthly stats
- Monthly statistics → Habit calculations: computes completion
- Dashboard → Progress displays: shows summaries
- Dashboard → Progress chart: shows overall score