# git-x0/habit_tracker architecture

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

- Interactive diagram: https://gitdiagram.com/git-x0/habit_tracker
- Repository: https://github.com/git-x0/habit_tracker

## Overview

Habit_Tracker is a single-page habit manager for creating and organizing positive and negative habits, recording daily completions, and reviewing history as calendars, charts, and streaks. The main flow is user interaction through the app shell and habit tabs, with habit updates handled by shared data state and persisted in browser local storage. The app also supports JSON import and export. The README documents the product capabilities; component composition beyond explicit imports is inferred only where noted with unverified edges.

Main entry points: [`Habit_Tracker/src/app/app.ts`](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/app.ts) (App shell), [`Habit_Tracker/src/app/data.service.ts`](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/data.service.ts) (Habit data service), [`Habit_Tracker/src/app/habits-tab/habits-tab.ts`](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habits-tab/habits-tab.ts) (Habit type tabs), [`Habit_Tracker/src/app/habit/habit.ts`](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit/habit.ts) (Habit card)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_bootstrap["Application bootstrap<br/>[main.ts]"]
  node_config["App configuration<br/>[app.config.ts]"]
  node_routes["Router setup<br/>[app.routes.ts]"]
  node_shell["App shell<br/>[app.ts]"]
end

subgraph group_habits["Habit management"]
  node_tabs["Habit type tabs<br/>[habits-tab.ts]"]
  node_list["Habit list<br/>[habits-list.ts]"]
  node_habit["Habit card<br/>[habit.ts]"]
  node_form["Habit form<br/>[habit-form.ts]"]
end

subgraph group_insights["Progress insights"]
  node_calendar["History calendar<br/>[habit-calendar.ts]"]
  node_graph["Progress graph<br/>[habit-graph.ts]"]
end

subgraph group_state["Habit state and persistence"]
  node_data["Habit data service<br/>[data.service.ts]"]
  node_model["Habit model<br/>[habit.model.ts]"]
  node_storage[("Browser local storage")]
end

subgraph group_transfer["Data transfer"]
  node_stepper["Import stepper<br/>[import-stepper.ts]"]
end

node_user(("User"))

node_user -->|"uses"| node_shell
node_bootstrap -->|"bootstraps"| node_shell
node_bootstrap -->|"configures"| node_config
node_config -->|"provides router"| node_routes
node_shell -->|"includes"| node_tabs
node_shell -->|"includes"| node_form
node_shell -->|"includes"| node_stepper
node_shell -->|"exports and imports"| node_data
node_tabs -->|"reads and updates"| node_data
node_tabs -->|"uses"| node_list
node_list -->|"renders"| node_habit
node_form -->|"adds habit"| node_data
node_habit -.->|"uses"| node_calendar
node_habit -.->|"uses"| node_graph
node_stepper -->|"updates habits"| node_data
node_data -->|"reads and writes"| node_storage
node_data -->|"uses"| node_model
node_tabs -->|"uses"| node_model
node_habit -->|"uses"| node_model

click node_bootstrap "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/main.ts"
click node_config "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/app.config.ts"
click node_routes "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/app.routes.ts"
click node_shell "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/app.ts"
click node_tabs "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habits-tab/habits-tab.ts"
click node_list "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habits-list/habits-list.ts"
click node_habit "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit/habit.ts"
click node_form "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit-form/habit-form.ts"
click node_calendar "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit-calendar/habit-calendar.ts"
click node_graph "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit-graph/habit-graph.ts"
click node_data "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/data.service.ts"
click node_model "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit.model.ts"
click node_stepper "https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/import-stepper/import-stepper.ts"

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_bootstrap,node_config,node_routes,node_shell,node_user toneBlue
class node_tabs,node_list,node_habit,node_form toneAmber
class node_calendar,node_graph toneMint
class node_data,node_model,node_storage toneRose
class node_stepper toneIndigo
```

## Components

### Application shell

- [Application bootstrap](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/main.ts): `Habit_Tracker/src/main.ts`
- [App configuration](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/app.config.ts): `Habit_Tracker/src/app/app.config.ts`
- [Router setup](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/app.routes.ts): `Habit_Tracker/src/app/app.routes.ts`
- [App shell](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/app.ts): `Habit_Tracker/src/app/app.ts`

### Habit management

- [Habit type tabs](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habits-tab/habits-tab.ts): `Habit_Tracker/src/app/habits-tab/habits-tab.ts`
- [Habit list](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habits-list/habits-list.ts): `Habit_Tracker/src/app/habits-list/habits-list.ts`
- [Habit card](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit/habit.ts): `Habit_Tracker/src/app/habit/habit.ts`
- [Habit form](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit-form/habit-form.ts): `Habit_Tracker/src/app/habit-form/habit-form.ts`

### Progress insights

- [History calendar](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit-calendar/habit-calendar.ts): `Habit_Tracker/src/app/habit-calendar/habit-calendar.ts`
- [Progress graph](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit-graph/habit-graph.ts): `Habit_Tracker/src/app/habit-graph/habit-graph.ts`

### Habit state and persistence

- [Habit data service](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/data.service.ts): `Habit_Tracker/src/app/data.service.ts`
- [Habit model](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/habit.model.ts): `Habit_Tracker/src/app/habit.model.ts`
- **Browser local storage**

### Data transfer

- [Import stepper](https://github.com/git-x0/habit_tracker/blob/main/Habit_Tracker/src/app/import-stepper/import-stepper.ts): `Habit_Tracker/src/app/import-stepper/import-stepper.ts`

### Other components

- **User**

## Connections

- User → App shell: uses (evidence: `README.md`)
- Application bootstrap → App shell: bootstraps (evidence: `Habit_Tracker/src/main.ts`)
- Application bootstrap → App configuration: configures (evidence: `Habit_Tracker/src/main.ts`)
- App configuration → Router setup: provides router (evidence: `Habit_Tracker/src/app/app.config.ts`)
- App shell → Habit type tabs: includes (evidence: `Habit_Tracker/src/app/app.ts`)
- App shell → Habit form: includes (evidence: `Habit_Tracker/src/app/app.ts`)
- App shell → Import stepper: includes (evidence: `Habit_Tracker/src/app/app.ts`)
- App shell → Habit data service: exports and imports (evidence: `Habit_Tracker/src/app/app.ts`)
- Habit type tabs → Habit data service: reads and updates (evidence: `Habit_Tracker/src/app/habits-tab/habits-tab.ts`)
- Habit type tabs → Habit list: uses (evidence: `Habit_Tracker/src/app/habits-tab/habits-tab.ts`)
- Habit list → Habit card: renders (evidence: `Habit_Tracker/src/app/habits-list/habits-list.ts`)
- Habit form → Habit data service: adds habit (evidence: `Habit_Tracker/src/app/habit-form/habit-form.ts`)
- Habit card → History calendar: uses (evidence: `Habit_Tracker/src/app/habit/habit.ts`)
- Habit card → Progress graph: uses (evidence: `Habit_Tracker/src/app/habit/habit.ts`)
- Import stepper → Habit data service: updates habits (evidence: `Habit_Tracker/src/app/import-stepper/import-stepper.ts`)
- Habit data service → Browser local storage: reads and writes (evidence: `Habit_Tracker/src/app/data.service.ts`)
- Habit data service → Habit model: uses (evidence: `Habit_Tracker/src/app/data.service.ts`)
- Habit type tabs → Habit model: uses (evidence: `Habit_Tracker/src/app/habits-tab/habits-tab.ts`)
- Habit card → Habit model: uses (evidence: `Habit_Tracker/src/app/habit/habit.ts`)