# mim-2001/budgetbuddy architecture

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

- Interactive diagram: https://gitdiagram.com/mim-2001/budgetbuddy
- Repository: https://github.com/mim-2001/budgetbuddy

## Overview

BudgetBuddy is a lightweight budgeting app for tracking income, category envelopes, and expenses, with financial insights derived from that data. The user enters or edits budget items in the UI; the UI reads and updates shared state, which persists locally or in the signed-in user’s Google Drive. The repository also includes profile/account handling and a reusable donut-chart renderer. The excerpts show UI-to-store and store-to-storage behavior; they do not establish how the UI wires authentication or invokes chart rendering.

Main entry points: [`store.js`](https://github.com/mim-2001/budgetbuddy/blob/main/store.js) (Budget state), [`ui.js`](https://github.com/mim-2001/budgetbuddy/blob/main/ui.js) (Budget UI), [`auth.js`](https://github.com/mim-2001/budgetbuddy/blob/main/auth.js) (Google sign-in)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_budget["Budget workflow"]
  node_budget_ui["Budget UI<br/>[ui.js]"]
  node_insights["Budget calculations<br/>[ui.js]"]
  node_income["Income tracking<br/>[ui.js]"]
  node_envelopes["Category envelopes<br/>[ui.js]"]
  node_expenses["Expense tracking<br/>[ui.js]"]
end

subgraph group_state["State and persistence"]
  node_store["Budget state<br/>[store.js]"]
  node_device_storage[("Device storage<br/>[store.js]")]
  node_drive_storage[("Google Drive storage<br/>[store.js]")]
end

subgraph group_account["Account and visualization"]
  node_profile["Profile settings<br/>[ui.js]"]
  node_auth["Google sign-in<br/>[auth.js]"]
  node_charts["Donut charts<br/>[charts.js]"]
end

node_user(("Budget user"))
node_google_identity["Google Identity Services"]

node_user -->|"enters budget"| node_budget_ui
node_budget_ui -->|"shows insights"| node_insights
node_budget_ui -->|"edits income"| node_income
node_budget_ui -->|"edits categories"| node_envelopes
node_budget_ui -->|"edits expenses"| node_expenses
node_budget_ui -->|"reads and updates"| node_store
node_insights -->|"reads budget data"| node_store
node_income -->|"writes income"| node_store
node_envelopes -->|"writes envelopes"| node_store
node_expenses -->|"writes expenses"| node_store
node_profile -->|"updates profile"| node_store
node_store -->|"reads and writes"| node_device_storage
node_store -->|"reads and writes"| node_drive_storage
node_auth -->|"requests tokens"| node_google_identity

click node_budget_ui "https://github.com/mim-2001/budgetbuddy/blob/main/ui.js"
click node_insights "https://github.com/mim-2001/budgetbuddy/blob/main/ui.js"
click node_income "https://github.com/mim-2001/budgetbuddy/blob/main/ui.js"
click node_envelopes "https://github.com/mim-2001/budgetbuddy/blob/main/ui.js"
click node_expenses "https://github.com/mim-2001/budgetbuddy/blob/main/ui.js"
click node_store "https://github.com/mim-2001/budgetbuddy/blob/main/store.js"
click node_device_storage "https://github.com/mim-2001/budgetbuddy/blob/main/store.js"
click node_drive_storage "https://github.com/mim-2001/budgetbuddy/blob/main/store.js"
click node_profile "https://github.com/mim-2001/budgetbuddy/blob/main/ui.js"
click node_auth "https://github.com/mim-2001/budgetbuddy/blob/main/auth.js"
click node_charts "https://github.com/mim-2001/budgetbuddy/blob/main/charts.js"

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_budget_ui,node_insights,node_income,node_envelopes,node_expenses,node_user toneBlue
class node_store,node_device_storage,node_drive_storage toneAmber
class node_profile,node_auth,node_charts toneMint
class node_google_identity toneIndigo
```

## Components

### Budget workflow

- [Budget UI](https://github.com/mim-2001/budgetbuddy/blob/main/ui.js): `ui.js`
- [Budget calculations](https://github.com/mim-2001/budgetbuddy/blob/main/ui.js): `ui.js`
- [Income tracking](https://github.com/mim-2001/budgetbuddy/blob/main/ui.js): `ui.js`
- [Category envelopes](https://github.com/mim-2001/budgetbuddy/blob/main/ui.js): `ui.js`
- [Expense tracking](https://github.com/mim-2001/budgetbuddy/blob/main/ui.js): `ui.js`

### State and persistence

- [Budget state](https://github.com/mim-2001/budgetbuddy/blob/main/store.js): `store.js`
- [Device storage](https://github.com/mim-2001/budgetbuddy/blob/main/store.js): `store.js`
- [Google Drive storage](https://github.com/mim-2001/budgetbuddy/blob/main/store.js): `store.js`

### Account and visualization

- [Profile settings](https://github.com/mim-2001/budgetbuddy/blob/main/ui.js): `ui.js`
- [Google sign-in](https://github.com/mim-2001/budgetbuddy/blob/main/auth.js): `auth.js`
- [Donut charts](https://github.com/mim-2001/budgetbuddy/blob/main/charts.js): `charts.js`

### Other components

- **Budget user**
- **Google Identity Services**

## Connections

- Budget user → Budget UI: enters budget (evidence: `README.md`)
- Budget UI → Budget calculations: shows insights (evidence: `ui.js`)
- Budget UI → Income tracking: edits income (evidence: `ui.js`)
- Budget UI → Category envelopes: edits categories (evidence: `ui.js`)
- Budget UI → Expense tracking: edits expenses (evidence: `ui.js`)
- Budget UI → Budget state: reads and updates (evidence: `ui.js`)
- Budget calculations → Budget state: reads budget data (evidence: `ui.js`)
- Income tracking → Budget state: writes income (evidence: `ui.js`)
- Category envelopes → Budget state: writes envelopes (evidence: `ui.js`)
- Expense tracking → Budget state: writes expenses (evidence: `ui.js`)
- Profile settings → Budget state: updates profile (evidence: `ui.js`)
- Budget state → Device storage: reads and writes (evidence: `store.js`)
- Budget state → Google Drive storage: reads and writes (evidence: `store.js`)
- Google sign-in → Google Identity Services: requests tokens (evidence: `auth.js`)