# krushnamajhi/mindyourmoney-front architecture

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

- Interactive diagram: https://gitdiagram.com/krushnamajhi/mindyourmoney-front
- Repository: https://github.com/krushnamajhi/mindyourmoney-front

## Overview

MindYourMoney is a React expense-sharing frontend. Users authenticate, enter the protected app, and can review expenses, create or edit shared expenses with member splits, and record settlements; the app also exposes groups, categories, dashboard, and settings. The graph follows route wiring and the sampled hook-to-service-to-API calls. Other feature areas are represented from the source tree, but their internal wiring is not inferred because their source was not sampled.

Main entry points: [`src/App.tsx`](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/App.tsx) (Router and providers), [`src/api/axiosClient.ts`](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/api/axiosClient.ts) (HTTP client), [`src/services/AuthService.ts`](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/services/AuthService.ts) (Authentication API), [`src/pages/ExpenseEntryPage.tsx`](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseEntryPage.tsx) (Expense entry and edit)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_app["Router and providers<br/>[App.tsx]"]
end

subgraph group_identity["Identity"]
  node_authguard["Protected routes<br/>[ProtectedRoute.tsx]"]
  node_login["Login and signup<br/>[LoginPage.tsx]"]
  node_authcontext["Auth state<br/>[AuthContext.tsx]"]
  node_authservice["Authentication API<br/>[AuthService.ts]"]
end

subgraph group_expenses["Expense management"]
  node_expensepages["Expense pages<br/>[ExpensesPage.tsx]"]
  node_expenseforms["Expense entry and edit"]
  node_expenseview["Expense details"]
  node_settlement["Settlement"]
  node_splitlogic["Split strategies<br/>[SplitStrategy.ts]"]
end

subgraph group_sharing["Sharing and insights"]
  node_dashboard["Dashboard<br/>[Dashboard.tsx]"]
  node_groups["Group management<br/>[GroupsPage.tsx]"]
  node_groupdetails["Group details and settings"]
  node_categories["Expense categories"]
  node_settings["User settings<br/>[SettingsPage.tsx]"]
end

subgraph group_data["Data access"]
  node_expensehooks["Expense queries<br/>[useExpenses.ts]"]
  node_expenseservice["Expense service<br/>[ExpenseService.ts]"]
  node_grouphooks["Group queries<br/>[useGroups.ts]"]
  node_groupservice["Group service<br/>[GroupService.ts]"]
  node_api["HTTP client<br/>[axiosClient.ts]"]
end

node_user(("User"))
node_backend{{"Backend API"}}

node_user -->|"opens"| node_app
node_app -->|"guards routes"| node_authguard
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_dashboard
node_app -->|"routes to"| node_expensepages
node_app -->|"routes to"| node_expenseforms
node_app -->|"routes to"| node_expenseview
node_app -->|"routes to"| node_settlement
node_app -->|"routes to"| node_groups
node_app -->|"routes to"| node_groupdetails
node_app -->|"routes to"| node_categories
node_app -->|"routes to"| node_settings
node_authcontext -->|"uses"| node_authservice
node_authservice -->|"sends requests"| node_api
node_expensehooks -->|"calls"| node_expenseservice
node_expenseservice -->|"sends requests"| node_api
node_grouphooks -->|"calls"| node_groupservice
node_groupservice -->|"sends requests"| node_api
node_api -->|"sends HTTP"| node_backend
node_expenseforms -.->|"split behavior"| node_splitlogic

click node_app "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/App.tsx"
click node_authguard "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/components/Auth/ProtectedRoute.tsx"
click node_login "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/LoginPage.tsx"
click node_authcontext "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/context/AuthContext.tsx"
click node_authservice "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/services/AuthService.ts"
click node_dashboard "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/Dashboard.tsx"
click node_expensepages "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpensesPage.tsx"
click node_expenseforms "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseEntryPage.tsx"
click node_expenseview "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseViewPage.tsx"
click node_settlement "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseSettledPage.tsx"
click node_splitlogic "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/domain/split/SplitStrategy.ts"
click node_expensehooks "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/hooks/useExpenses.ts"
click node_expenseservice "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/services/ExpenseService.ts"
click node_groups "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/GroupsPage.tsx"
click node_groupdetails "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/GroupDetailsPage.tsx"
click node_grouphooks "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/hooks/useGroups.ts"
click node_groupservice "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/services/GroupService.ts"
click node_categories "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseCategoriesPage.tsx"
click node_settings "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/SettingsPage.tsx"
click node_api "https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/api/axiosClient.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_app,node_user toneBlue
class node_authguard,node_login,node_authcontext,node_authservice toneAmber
class node_expensepages,node_expenseforms,node_expenseview,node_settlement,node_splitlogic,node_backend toneMint
class node_dashboard,node_groups,node_groupdetails,node_categories,node_settings toneRose
class node_expensehooks,node_expenseservice,node_grouphooks,node_groupservice,node_api toneIndigo
```

## Components

### App entry

- [Router and providers](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/App.tsx): `src/App.tsx`

### Identity

- [Protected routes](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/components/Auth/ProtectedRoute.tsx): `src/components/Auth/ProtectedRoute.tsx`
- [Login and signup](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/LoginPage.tsx): `src/pages/LoginPage.tsx`
- [Auth state](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Authentication API](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/services/AuthService.ts): `src/services/AuthService.ts`

### Expense management

- [Expense pages](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpensesPage.tsx): `src/pages/ExpensesPage.tsx`
- [Expense entry and edit](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseEntryPage.tsx): `src/pages/ExpenseEntryPage.tsx`
- [Expense details](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseViewPage.tsx): `src/pages/ExpenseViewPage.tsx`
- [Settlement](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseSettledPage.tsx): `src/pages/ExpenseSettledPage.tsx`
- [Split strategies](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/domain/split/SplitStrategy.ts): `src/domain/split/SplitStrategy.ts`

### Sharing and insights

- [Dashboard](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/Dashboard.tsx): `src/pages/Dashboard.tsx`
- [Group management](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/GroupsPage.tsx): `src/pages/GroupsPage.tsx`
- [Group details and settings](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/GroupDetailsPage.tsx): `src/pages/GroupDetailsPage.tsx`
- [Expense categories](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/ExpenseCategoriesPage.tsx): `src/pages/ExpenseCategoriesPage.tsx`
- [User settings](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/pages/SettingsPage.tsx): `src/pages/SettingsPage.tsx`

### Data access

- [Expense queries](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/hooks/useExpenses.ts): `src/hooks/useExpenses.ts`
- [Expense service](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/services/ExpenseService.ts): `src/services/ExpenseService.ts`
- [Group queries](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/hooks/useGroups.ts): `src/hooks/useGroups.ts`
- [Group service](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/services/GroupService.ts): `src/services/GroupService.ts`
- [HTTP client](https://github.com/krushnamajhi/mindyourmoney-front/blob/main/src/api/axiosClient.ts): `src/api/axiosClient.ts`

### Other components

- **User**
- **Backend API**

## Connections

- User → Router and providers: opens
- Router and providers → Protected routes: guards routes
- Router and providers → Login and signup: routes to
- Router and providers → Dashboard: routes to
- Router and providers → Expense pages: routes to
- Router and providers → Expense entry and edit: routes to
- Router and providers → Expense details: routes to
- Router and providers → Settlement: routes to
- Router and providers → Group management: routes to
- Router and providers → Group details and settings: routes to
- Router and providers → Expense categories: routes to
- Router and providers → User settings: routes to
- Auth state → Authentication API: uses
- Authentication API → HTTP client: sends requests
- Expense queries → Expense service: calls
- Expense service → HTTP client: sends requests
- Group queries → Group service: calls
- Group service → HTTP client: sends requests
- HTTP client → Backend API: sends HTTP
- Expense entry and edit → Split strategies: split behavior