# vishh-t/spendsmart architecture

> Architecture diagram of the GitHub repository vishh-t/spendsmart, 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/vishh-t/spendsmart
- Repository: https://github.com/vishh-t/spendsmart

## Overview

Expenzo’s frontend supports a user workflow from login through protected finance views: users manage expenses and categories, review budgets and summaries, import statements, and explore spending insights. The statement-import UI starts a background parse, polls for results, then lets users save expenses and category mappings. The README describes backend processing and security, but backend source is not in the supplied tree; the API is therefore shown as an external service, without modeling its internals. Some page implementations were not sampled, so uncertain calls are omitted.

Main entry points: [`expense_manager_frontend/src/App.jsx`](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/App.jsx) (App routes), [`expense_manager_frontend/src/services/api.js`](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/api.js) (API client), [`expense_manager_frontend/src/services/expenseService.js`](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/expenseService.js) (Expense service), [`expense_manager_frontend/src/pages/InsightsPage.jsx`](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/InsightsPage.jsx) (Insights page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and Shell"]
  node_app["App routes<br/>[App.jsx]"]
  node_login["Login page<br/>[LoginPage.jsx]"]
  node_auth["Auth context<br/>[AuthContext.jsx]"]
  node_authsvc["Auth service<br/>[authService.js]"]
  node_layout["App layout<br/>[Layout.jsx]"]
end

subgraph group_finance["Expense Management"]
  node_dashboard["Dashboard<br/>[DashBoard.jsx]"]
  node_expenses["Expenses page<br/>[ExpensesPage.jsx]"]
  node_categories["Categories page<br/>[CategoriesPage.jsx]"]
  node_expensemodal["Expense editor"]
  node_expensesvc["Expense service<br/>[expenseService.js]"]
  node_categorysvc["Category service<br/>[categoryService.js]"]
end

subgraph group_import["Statement Import"]
  node_importmodal["Import workflow"]
  node_importsvc["Import service<br/>[importService.js]"]
end

subgraph group_insights["Analytics and State"]
  node_insightpage["Insights page<br/>[InsightsPage.jsx]"]
  node_insightssvc["Insights service<br/>[insightsService.js]"]
  node_data["Shared data context<br/>[DataContext.jsx]"]
  node_api["API client<br/>[api.js]"]
end

node_user(("Finance user"))
node_backend["Backend API"]

node_user -->|"opens app"| node_app
node_app -->|"routes login"| node_login
node_app -->|"wraps protected views"| node_layout
node_app -->|"routes dashboard"| node_dashboard
node_app -->|"routes expenses"| node_expenses
node_app -->|"routes categories"| node_categories
node_app -->|"routes insights"| node_insightpage
node_login -->|"submits credentials"| node_authsvc
node_authsvc -->|"sends auth requests"| node_api
node_api -->|"calls API"| node_backend
node_login -->|"sets session"| node_auth
node_layout -->|"opens editor"| node_expensemodal
node_layout -->|"opens import"| node_importmodal
node_dashboard -->|"loads summaries"| node_expensesvc
node_expenses -->|"manages expenses"| node_expensesvc
node_categories -->|"manages categories"| node_categorysvc
node_expensemodal -->|"saves expense"| node_expensesvc
node_expensesvc -->|"sends requests"| node_api
node_categorysvc -->|"sends requests"| node_api
node_importmodal -->|"parses and saves"| node_importsvc
node_importmodal -->|"loads categories"| node_categorysvc
node_importsvc -->|"uploads and polls"| node_api
node_insightpage -->|"loads analytics"| node_insightssvc
node_insightpage -->|"renames keywords"| node_expensesvc
node_insightpage -->|"reads refresh state"| node_data
node_insightssvc -->|"sends requests"| node_api

click node_app "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/App.jsx"
click node_login "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/LoginPage.jsx"
click node_auth "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/context/AuthContext.jsx"
click node_authsvc "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/authService.js"
click node_layout "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/components/layout/Layout.jsx"
click node_dashboard "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/DashBoard.jsx"
click node_expenses "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/ExpensesPage.jsx"
click node_categories "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/CategoriesPage.jsx"
click node_expensemodal "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/components/modals/AddExpenseModal.jsx"
click node_expensesvc "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/expenseService.js"
click node_categorysvc "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/categoryService.js"
click node_importmodal "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/components/modals/ImportStatementModal.jsx"
click node_importsvc "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/importService.js"
click node_insightpage "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/InsightsPage.jsx"
click node_insightssvc "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/insightsService.js"
click node_data "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/context/DataContext.jsx"
click node_api "https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/api.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_login,node_auth,node_authsvc,node_layout,node_user toneBlue
class node_dashboard,node_expenses,node_categories,node_expensemodal,node_expensesvc,node_categorysvc toneAmber
class node_importmodal,node_importsvc,node_backend toneMint
class node_insightpage,node_insightssvc,node_data,node_api toneRose
```

## Components

### Access and Shell

- [App routes](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/App.jsx): `expense_manager_frontend/src/App.jsx`
- [Login page](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/LoginPage.jsx): `expense_manager_frontend/src/pages/LoginPage.jsx`
- [Auth context](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/context/AuthContext.jsx): `expense_manager_frontend/src/context/AuthContext.jsx`
- [Auth service](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/authService.js): `expense_manager_frontend/src/services/authService.js`
- [App layout](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/components/layout/Layout.jsx): `expense_manager_frontend/src/components/layout/Layout.jsx`

### Expense Management

- [Dashboard](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/DashBoard.jsx): `expense_manager_frontend/src/pages/DashBoard.jsx`
- [Expenses page](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/ExpensesPage.jsx): `expense_manager_frontend/src/pages/ExpensesPage.jsx`
- [Categories page](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/CategoriesPage.jsx): `expense_manager_frontend/src/pages/CategoriesPage.jsx`
- [Expense editor](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/components/modals/AddExpenseModal.jsx): `expense_manager_frontend/src/components/modals/AddExpenseModal.jsx`
- [Expense service](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/expenseService.js): `expense_manager_frontend/src/services/expenseService.js`
- [Category service](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/categoryService.js): `expense_manager_frontend/src/services/categoryService.js`

### Statement Import

- [Import workflow](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/components/modals/ImportStatementModal.jsx): `expense_manager_frontend/src/components/modals/ImportStatementModal.jsx`
- [Import service](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/importService.js): `expense_manager_frontend/src/services/importService.js`

### Analytics and State

- [Insights page](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/pages/InsightsPage.jsx): `expense_manager_frontend/src/pages/InsightsPage.jsx`
- [Insights service](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/insightsService.js): `expense_manager_frontend/src/services/insightsService.js`
- [Shared data context](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/context/DataContext.jsx): `expense_manager_frontend/src/context/DataContext.jsx`
- [API client](https://github.com/vishh-t/spendsmart/blob/main/expense_manager_frontend/src/services/api.js): `expense_manager_frontend/src/services/api.js`

### Other components

- **Finance user**
- **Backend API**

## Connections

- Finance user → App routes: opens app
- App routes → Login page: routes login
- App routes → App layout: wraps protected views
- App routes → Dashboard: routes dashboard
- App routes → Expenses page: routes expenses
- App routes → Categories page: routes categories
- App routes → Insights page: routes insights
- Login page → Auth service: submits credentials
- Auth service → API client: sends auth requests
- API client → Backend API: calls API
- Login page → Auth context: sets session
- App layout → Expense editor: opens editor
- App layout → Import workflow: opens import
- Dashboard → Expense service: loads summaries
- Expenses page → Expense service: manages expenses
- Categories page → Category service: manages categories
- Expense editor → Expense service: saves expense
- Expense service → API client: sends requests
- Category service → API client: sends requests
- Import workflow → Import service: parses and saves
- Import workflow → Category service: loads categories
- Import service → API client: uploads and polls
- Insights page → Insights service: loads analytics
- Insights page → Expense service: renames keywords
- Insights page → Shared data context: reads refresh state
- Insights service → API client: sends requests