# natbabi/expense-tracker-cli architecture

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

- Interactive diagram: https://gitdiagram.com/natbabi/expense-tracker-cli
- Repository: https://github.com/natbabi/expense-tracker-cli

## Overview

The repository contains two expense-management products: a local-storage React web app and a Node CLI backed by JSON files. The web flow moves from landing/authentication into expense entry and recurring generation, then dashboards, analytics and budgets; settings provide account and data management, while MelaAI answers questions from local financial context with optional Gemini integration. The CLI independently handles expense and budget commands and CSV export. Several pages and their internal wiring are represented from README capabilities and tree paths; those unsampled details are not asserted as direct calls.

Main entry points: [`web-app/src/App.jsx`](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/App.jsx) (App Router), [`web-app/src/store/expenseStore.jsx`](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/expenseStore.jsx) (Expense Store), [`web-app/src/store/authStore.jsx`](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/authStore.jsx) (Auth Store), [`web-app/src/components/AIChatBot.jsx`](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/components/AIChatBot.jsx) (MelaAI Chat)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["MelaFlow Web"]
  node_app["App Router<br/>[App.jsx]"]
  node_landing["Landing<br/>[LandingPage.jsx]"]
  node_authpage["Authentication<br/>[Auth.jsx]"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_expensespage["Expenses<br/>[Expenses.jsx]"]
  node_table["Expense Table<br/>[ExpenseTable.jsx]"]
  node_form["Expense Form<br/>[ExpenseForm.jsx]"]
  node_analytics["Analytics<br/>[Analytics.jsx]"]
  node_budgetpage["Budgeting<br/>[Budget.jsx]"]
  node_recurringpage["Recurring<br/>[Recurring.jsx]"]
  node_settings["Settings &amp; Export<br/>[Settings.jsx]"]
  node_chatbot["MelaAI Chat<br/>[AIChatBot.jsx]"]
end

subgraph group_domain["Expense Domain"]
  node_helpers["Date &amp; Finance Helpers<br/>[helpers.js]"]
end

subgraph group_cli["CLI Tracker"]
  node_cli["CLI Commands<br/>[Expense-tracker.js]"]
  node_jsonfiles[("Expense &amp; Budget JSON")]
  node_csvfile["CSV Export File"]
end

subgraph group_state["Local State"]
  node_authstore["Auth Store<br/>[authStore.jsx]"]
  node_expensestore["Expense Store<br/>[expenseStore.jsx]"]
  node_theme["Theme Store<br/>[themeStore.jsx]"]
  node_localstorage[("Browser Storage")]
end

node_person(("User"))
node_gemini["Gemini API"]

node_person -->|"opens"| node_app
node_app -->|"renders"| node_landing
node_app -->|"renders"| node_authpage
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_expensespage
node_app -->|"routes"| node_analytics
node_app -->|"routes"| node_budgetpage
node_app -->|"routes"| node_recurringpage
node_app -->|"routes"| node_settings
node_landing -->|"requests navigation"| node_app
node_authpage -->|"authenticates"| node_authstore
node_app -->|"provides context"| node_authstore
node_app -->|"provides context"| node_expensestore
node_app -->|"provides context"| node_theme
node_authstore -->|"reads/writes"| node_localstorage
node_expensestore -->|"reads/writes"| node_localstorage
node_expensespage -->|"renders"| node_form
node_expensespage -->|"renders"| node_table
node_form -->|"dispatches changes"| node_expensestore
node_table -->|"deletes expenses"| node_expensestore
node_dashboard -->|"reads financial state"| node_expensestore
node_analytics -->|"reads financial state"| node_expensestore
node_budgetpage -->|"reads/sets budgets"| node_expensestore
node_recurringpage -->|"manages templates"| node_expensestore
node_expensestore -->|"uses schedules"| node_helpers
node_chatbot -->|"reads financial state"| node_expensestore
node_chatbot -->|"reads user"| node_authstore
node_chatbot -.->|"sends prompts"| node_gemini
node_settings -->|"exports/imports/resets"| node_expensestore
node_settings -->|"manages account"| node_authstore
node_person -->|"runs commands"| node_cli
node_cli -->|"reads/writes"| node_jsonfiles
node_cli -->|"exports CSV"| node_csvfile

click node_app "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/App.jsx"
click node_landing "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/LandingPage.jsx"
click node_authpage "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Auth.jsx"
click node_dashboard "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Dashboard.jsx"
click node_expensespage "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Expenses.jsx"
click node_table "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/components/ExpenseTable.jsx"
click node_form "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/components/ExpenseForm.jsx"
click node_analytics "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Analytics.jsx"
click node_budgetpage "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Budget.jsx"
click node_recurringpage "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Recurring.jsx"
click node_settings "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Settings.jsx"
click node_chatbot "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/components/AIChatBot.jsx"
click node_authstore "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/authStore.jsx"
click node_expensestore "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/expenseStore.jsx"
click node_theme "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/themeStore.jsx"
click node_helpers "https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/utils/helpers.js"
click node_cli "https://github.com/natbabi/expense-tracker-cli/blob/main/Expense-tracker.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_app,node_landing,node_authpage,node_dashboard,node_expensespage,node_table,node_form,node_analytics,node_budgetpage,node_recurringpage,node_settings,node_chatbot,node_person toneBlue
class node_helpers toneAmber
class node_cli,node_jsonfiles,node_csvfile,node_gemini toneMint
class node_authstore,node_expensestore,node_theme,node_localstorage toneRose
```

## Components

### MelaFlow Web

- [App Router](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/App.jsx): `web-app/src/App.jsx`
- [Landing](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/LandingPage.jsx): `web-app/src/pages/LandingPage.jsx`
- [Authentication](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Auth.jsx): `web-app/src/pages/Auth.jsx`
- [Dashboard](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Dashboard.jsx): `web-app/src/pages/Dashboard.jsx`
- [Expenses](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Expenses.jsx): `web-app/src/pages/Expenses.jsx`
- [Expense Table](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/components/ExpenseTable.jsx): `web-app/src/components/ExpenseTable.jsx`
- [Expense Form](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/components/ExpenseForm.jsx): `web-app/src/components/ExpenseForm.jsx`
- [Analytics](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Analytics.jsx): `web-app/src/pages/Analytics.jsx`
- [Budgeting](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Budget.jsx): `web-app/src/pages/Budget.jsx`
- [Recurring](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Recurring.jsx): `web-app/src/pages/Recurring.jsx`
- [Settings & Export](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/pages/Settings.jsx): `web-app/src/pages/Settings.jsx`
- [MelaAI Chat](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/components/AIChatBot.jsx): `web-app/src/components/AIChatBot.jsx`

### Expense Domain

- [Date & Finance Helpers](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/utils/helpers.js): `web-app/src/utils/helpers.js`

### CLI Tracker

- [CLI Commands](https://github.com/natbabi/expense-tracker-cli/blob/main/Expense-tracker.js): `Expense-tracker.js`
- **Expense & Budget JSON**
- **CSV Export File**

### Local State

- [Auth Store](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/authStore.jsx): `web-app/src/store/authStore.jsx`
- [Expense Store](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/expenseStore.jsx): `web-app/src/store/expenseStore.jsx`
- [Theme Store](https://github.com/natbabi/expense-tracker-cli/blob/main/web-app/src/store/themeStore.jsx): `web-app/src/store/themeStore.jsx`
- **Browser Storage**

### Other components

- **User**
- **Gemini API**

## Connections

- User → App Router: opens
- App Router → Landing: renders
- App Router → Authentication: renders
- App Router → Dashboard: routes
- App Router → Expenses: routes
- App Router → Analytics: routes
- App Router → Budgeting: routes
- App Router → Recurring: routes
- App Router → Settings & Export: routes
- Landing → App Router: requests navigation
- Authentication → Auth Store: authenticates
- App Router → Auth Store: provides context
- App Router → Expense Store: provides context
- App Router → Theme Store: provides context
- Auth Store → Browser Storage: reads/writes
- Expense Store → Browser Storage: reads/writes
- Expenses → Expense Form: renders
- Expenses → Expense Table: renders
- Expense Form → Expense Store: dispatches changes
- Expense Table → Expense Store: deletes expenses
- Dashboard → Expense Store: reads financial state
- Analytics → Expense Store: reads financial state
- Budgeting → Expense Store: reads/sets budgets
- Recurring → Expense Store: manages templates
- Expense Store → Date & Finance Helpers: uses schedules
- MelaAI Chat → Expense Store: reads financial state
- MelaAI Chat → Auth Store: reads user
- MelaAI Chat → Gemini API: sends prompts
- Settings & Export → Expense Store: exports/imports/resets
- Settings & Export → Auth Store: manages account
- User → CLI Commands: runs commands
- CLI Commands → Expense & Budget JSON: reads/writes
- CLI Commands → CSV Export File: exports CSV