# udsau/habit-tracker architecture

> Architecture diagram of the GitHub repository udsau/habit-tracker, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/udsau/habit-tracker
- Repository: https://github.com/udsau/habit-tracker

## Overview

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: [`src/App.jsx`](https://github.com/udsau/habit-tracker/blob/main/src/App.jsx) (App), [`src/components/Dashboard.jsx`](https://github.com/udsau/habit-tracker/blob/main/src/components/Dashboard.jsx) (Dashboard), [`src/hooks/useWeekHistory.js`](https://github.com/udsau/habit-tracker/blob/main/src/hooks/useWeekHistory.js) (Week history), [`src/components/AnalyticsPage.jsx`](https://github.com/udsau/habit-tracker/blob/main/src/components/AnalyticsPage.jsx) (Monthly analytics)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App flow"]
  node_app["App<br/>[App.jsx]"]
  node_onboarding["Onboarding"]
  node_navigation["Navigation<br/>[Sidebar.jsx]"]
  node_settings["Settings<br/>[SettingsPage.jsx]"]
end

subgraph group_tracking["Habit tracking"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_habit_table["Habit table<br/>[HabitTable.jsx]"]
  node_habit_row["Habit row<br/>[HabitRow.jsx]"]
  node_date_math["Habit calculations<br/>[habitMath.js]"]
end

subgraph group_progress["Progress review"]
  node_analytics["Monthly analytics<br/>[AnalyticsPage.jsx]"]
  node_monthly_stats["Monthly statistics<br/>[monthlyStats.js]"]
  node_dashboard_stats["Progress displays<br/>[StatsCard.jsx]"]
  node_progress_donut["Progress chart<br/>[ProgressDonut.jsx]"]
end

subgraph group_state["Local state"]
  node_habit_state["Habit state<br/>[useHabits.js]"]
  node_account_state["Account state<br/>[useAccount.js]"]
  node_browser_storage[("Browser storage")]
  node_week_history["Week history<br/>[useWeekHistory.js]"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"loads account"| node_account_state
node_app -->|"loads habits"| node_habit_state
node_app -->|"shows when needed"| node_onboarding
node_onboarding -->|"creates account"| node_account_state
node_app -->|"renders"| node_navigation
node_navigation -->|"selects page"| node_app
node_app -->|"renders"| node_dashboard
node_app -->|"renders"| node_analytics
node_app -->|"renders"| node_settings
node_dashboard -->|"renders"| node_habit_table
node_habit_table -->|"renders rows"| node_habit_row
node_dashboard -->|"loads past weeks"| node_week_history
node_dashboard -->|"computes week"| node_date_math
node_habit_row -->|"computes progress"| node_date_math
node_habit_state -->|"reads and writes"| node_browser_storage
node_account_state -->|"reads and writes"| node_browser_storage
node_week_history -->|"reads history"| node_browser_storage
node_habit_state -->|"archives weeks"| node_week_history
node_analytics -->|"loads history"| node_week_history
node_analytics -->|"computes monthly stats"| node_monthly_stats
node_monthly_stats -->|"computes completion"| node_date_math
node_dashboard -->|"shows summaries"| node_dashboard_stats
node_dashboard -->|"shows overall score"| node_progress_donut

click node_app "https://github.com/udsau/habit-tracker/blob/main/src/App.jsx"
click node_onboarding "https://github.com/udsau/habit-tracker/blob/main/src/components/OnboardingScreen.jsx"
click node_navigation "https://github.com/udsau/habit-tracker/blob/main/src/components/Sidebar.jsx"
click node_dashboard "https://github.com/udsau/habit-tracker/blob/main/src/components/Dashboard.jsx"
click node_habit_table "https://github.com/udsau/habit-tracker/blob/main/src/components/HabitTable.jsx"
click node_habit_row "https://github.com/udsau/habit-tracker/blob/main/src/components/HabitRow.jsx"
click node_habit_state "https://github.com/udsau/habit-tracker/blob/main/src/hooks/useHabits.js"
click node_account_state "https://github.com/udsau/habit-tracker/blob/main/src/hooks/useAccount.js"
click node_week_history "https://github.com/udsau/habit-tracker/blob/main/src/hooks/useWeekHistory.js"
click node_date_math "https://github.com/udsau/habit-tracker/blob/main/src/utils/habitMath.js"
click node_analytics "https://github.com/udsau/habit-tracker/blob/main/src/components/AnalyticsPage.jsx"
click node_monthly_stats "https://github.com/udsau/habit-tracker/blob/main/src/utils/monthlyStats.js"
click node_dashboard_stats "https://github.com/udsau/habit-tracker/blob/main/src/components/StatsCard.jsx"
click node_progress_donut "https://github.com/udsau/habit-tracker/blob/main/src/components/ProgressDonut.jsx"
click node_settings "https://github.com/udsau/habit-tracker/blob/main/src/components/SettingsPage.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_onboarding,node_navigation,node_settings,node_user toneBlue
class node_dashboard,node_habit_table,node_habit_row,node_date_math toneAmber
class node_analytics,node_monthly_stats,node_dashboard_stats,node_progress_donut toneMint
class node_habit_state,node_account_state,node_browser_storage,node_week_history toneRose
```

## Components

### App flow

- [App](https://github.com/udsau/habit-tracker/blob/main/src/App.jsx): `src/App.jsx`
- [Onboarding](https://github.com/udsau/habit-tracker/blob/main/src/components/OnboardingScreen.jsx): `src/components/OnboardingScreen.jsx`
- [Navigation](https://github.com/udsau/habit-tracker/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`
- [Settings](https://github.com/udsau/habit-tracker/blob/main/src/components/SettingsPage.jsx): `src/components/SettingsPage.jsx`

### Habit tracking

- [Dashboard](https://github.com/udsau/habit-tracker/blob/main/src/components/Dashboard.jsx): `src/components/Dashboard.jsx`
- [Habit table](https://github.com/udsau/habit-tracker/blob/main/src/components/HabitTable.jsx): `src/components/HabitTable.jsx`
- [Habit row](https://github.com/udsau/habit-tracker/blob/main/src/components/HabitRow.jsx): `src/components/HabitRow.jsx`
- [Habit calculations](https://github.com/udsau/habit-tracker/blob/main/src/utils/habitMath.js): `src/utils/habitMath.js`

### Progress review

- [Monthly analytics](https://github.com/udsau/habit-tracker/blob/main/src/components/AnalyticsPage.jsx): `src/components/AnalyticsPage.jsx`
- [Monthly statistics](https://github.com/udsau/habit-tracker/blob/main/src/utils/monthlyStats.js): `src/utils/monthlyStats.js`
- [Progress displays](https://github.com/udsau/habit-tracker/blob/main/src/components/StatsCard.jsx): `src/components/StatsCard.jsx`
- [Progress chart](https://github.com/udsau/habit-tracker/blob/main/src/components/ProgressDonut.jsx): `src/components/ProgressDonut.jsx`

### Local state

- [Habit state](https://github.com/udsau/habit-tracker/blob/main/src/hooks/useHabits.js): `src/hooks/useHabits.js`
- [Account state](https://github.com/udsau/habit-tracker/blob/main/src/hooks/useAccount.js): `src/hooks/useAccount.js`
- **Browser storage**
- [Week history](https://github.com/udsau/habit-tracker/blob/main/src/hooks/useWeekHistory.js): `src/hooks/useWeekHistory.js`

### Other components

- **User**

## Connections

- 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