# iamsandeep-sm/expense_tracker architecture

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

- Interactive diagram: https://gitdiagram.com/iamsandeep-sm/expense_tracker
- Repository: https://github.com/iamsandeep-sm/expense_tracker

## Overview

Expense Tracker is a browser-only, day-by-day expense app: users enter and manage expenses, browse monthly and daily records, and view category summaries; data is saved locally without an account or backend. The main runtime is concentrated in js/script.js, with index.html providing the page and css/style.css its presentation. The source excerpts are partial, so the graph omits uncertain details of view wiring and does not infer connections between individual rendering helpers.

Main entry points: [`js/script.js`](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js) (App logic), [`index.html`](https://github.com/iamsandeep-sm/expense_tracker/blob/main/index.html) (Page markup), [`css/style.css`](https://github.com/iamsandeep-sm/expense_tracker/blob/main/css/style.css) (Themes and styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_page["Page markup<br/>[index.html]"]
  node_app["App logic<br/>[script.js]"]
end

subgraph group_expenses["Expense workflows"]
  node_expense_entry["Expense entry<br/>[script.js]"]
  node_expense_management["Expense management<br/>[script.js]"]
  node_month_browsing["Month browsing<br/>[script.js]"]
  node_expense_views["Expense views<br/>[script.js]"]
  node_category_summary["Category summary<br/>[script.js]"]
end

subgraph group_state["State and presentation"]
  node_state_storage["State and storage<br/>[script.js]"]
  node_local_storage[("Browser storage")]
  node_styling["Themes and styling<br/>[style.css]"]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_page -->|"loads app"| node_app
node_user -->|"triggers events"| node_app
node_app -->|"handles entry"| node_expense_entry
node_app -->|"handles actions"| node_expense_management
node_app -->|"handles navigation"| node_month_browsing
node_app -->|"renders records"| node_expense_views
node_app -->|"renders summary"| node_category_summary
node_app -->|"loads and saves"| node_state_storage
node_state_storage -->|"reads and writes"| node_local_storage
node_page -->|"uses styles"| node_styling

click node_page "https://github.com/iamsandeep-sm/expense_tracker/blob/main/index.html"
click node_app "https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js"
click node_expense_entry "https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js"
click node_expense_management "https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js"
click node_month_browsing "https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js"
click node_expense_views "https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js"
click node_category_summary "https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js"
click node_state_storage "https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js"
click node_styling "https://github.com/iamsandeep-sm/expense_tracker/blob/main/css/style.css"

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_page,node_app,node_user toneBlue
class node_expense_entry,node_expense_management,node_month_browsing,node_expense_views,node_category_summary toneAmber
class node_state_storage,node_local_storage,node_styling toneMint
```

## Components

### App entry

- [Page markup](https://github.com/iamsandeep-sm/expense_tracker/blob/main/index.html): `index.html`
- [App logic](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js): `js/script.js`

### Expense workflows

- [Expense entry](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js): `js/script.js`
- [Expense management](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js): `js/script.js`
- [Month browsing](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js): `js/script.js`
- [Expense views](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js): `js/script.js`
- [Category summary](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js): `js/script.js`

### State and presentation

- [State and storage](https://github.com/iamsandeep-sm/expense_tracker/blob/main/js/script.js): `js/script.js`
- **Browser storage**
- [Themes and styling](https://github.com/iamsandeep-sm/expense_tracker/blob/main/css/style.css): `css/style.css`

### Other components

- **User**

## Connections

- User → Page markup: uses
- Page markup → App logic: loads app
- User → App logic: triggers events
- App logic → Expense entry: handles entry
- App logic → Expense management: handles actions
- App logic → Month browsing: handles navigation
- App logic → Expense views: renders records
- App logic → Category summary: renders summary
- App logic → State and storage: loads and saves
- State and storage → Browser storage: reads and writes
- Page markup → Themes and styling: uses styles