# humayun121/finance-tracker architecture

> Architecture diagram of the GitHub repository humayun121/finance-tracker, 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/humayun121/finance-tracker
- Repository: https://github.com/humayun121/finance-tracker
- Video tour (about a minute): https://gitdiagram.com/humayun121/finance-tracker/video

## Overview

Finance Tracker is a web app for tracking expenses, categories, shifts, and dashboard summaries. The main user flow is to enter through the frontend, authenticate for protected pages, and use the app’s finance views; the frontend API client sends requests to a Django backend. The tree identifies the domain modules, but the README and sampled sources do not show the page-to-API or backend URL wiring, so those links are left out. The sampled client does show JWT refresh and browser token storage.

Main entry points: [`frontend/src/App.tsx`](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/App.tsx) (Routes), [`frontend/src/api/client.ts`](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/client.ts) (API client), [`frontend/src/pages/LoginPage.tsx`](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/LoginPage.tsx) (Login), [`frontend/src/pages/SignupPage.tsx`](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/SignupPage.tsx) (Sign up)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Frontend app"]
  node_app["Routes<br/>[App.tsx]"]
  node_login["Login<br/>[LoginPage.tsx]"]
  node_signup["Sign up<br/>[SignupPage.tsx]"]
  node_dashboard["Dashboard<br/>[DashboardPage.tsx]"]
  node_expenses["Expenses<br/>[ExpensesPage.tsx]"]
  node_categories["Categories<br/>[CategoriesPage.tsx]"]
  node_shifts["Shifts<br/>[ShiftsPage.tsx]"]
end

subgraph group_auth["Authentication"]
  node_authprovider["Auth provider<br/>[AuthContext.tsx]"]
  node_protected["Route guard<br/>[ProtectedRoute.tsx]"]
  node_tokens["Token storage<br/>[tokenStorage.ts]"]
end

subgraph group_api["API client"]
  node_client["API client<br/>[client.ts]"]
  node_authapi["Auth API<br/>[auth.ts]"]
  node_expenseapi["Expense API<br/>[expenses.ts]"]
  node_categoryapi["Category API<br/>[categories.ts]"]
  node_shiftapi["Shift API<br/>[shifts.ts]"]
end

subgraph group_backend["Django backend"]
  node_account_views["Account views<br/>[views.py]"]
  node_expense_views["Expense views<br/>[views.py]"]
  node_shift_views["Shift views<br/>[views.py]"]
  node_account_models[("Account models<br/>[models.py]")]
  node_expense_models[("Expense models<br/>[models.py]")]
  node_shift_models[("Shift models<br/>[models.py]")]
  node_config_urls["URL config<br/>[urls.py]"]
end

node_user(("User"))
node_api_service{{"Finance API"}}

node_user -->|"opens"| node_app
node_app -->|"routes"| node_login
node_app -->|"routes"| node_signup
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_expenses
node_app -->|"routes"| node_categories
node_app -->|"routes"| node_shifts
node_app -->|"guards"| node_protected
node_client -->|"reads and updates"| node_tokens
node_client -->|"HTTP requests"| node_api_service

click node_app "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/App.tsx"
click node_login "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/LoginPage.tsx"
click node_signup "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/SignupPage.tsx"
click node_dashboard "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/DashboardPage.tsx"
click node_expenses "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/ExpensesPage.tsx"
click node_categories "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/CategoriesPage.tsx"
click node_shifts "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/ShiftsPage.tsx"
click node_authprovider "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/auth/AuthContext.tsx"
click node_protected "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/auth/ProtectedRoute.tsx"
click node_tokens "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/auth/tokenStorage.ts"
click node_client "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/client.ts"
click node_authapi "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/auth.ts"
click node_expenseapi "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/expenses.ts"
click node_categoryapi "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/categories.ts"
click node_shiftapi "https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/shifts.ts"
click node_account_views "https://github.com/humayun121/finance-tracker/blob/master/backend/accounts/views.py"
click node_expense_views "https://github.com/humayun121/finance-tracker/blob/master/backend/expenses/views.py"
click node_shift_views "https://github.com/humayun121/finance-tracker/blob/master/backend/shifts/views.py"
click node_account_models "https://github.com/humayun121/finance-tracker/blob/master/backend/accounts/models.py"
click node_expense_models "https://github.com/humayun121/finance-tracker/blob/master/backend/expenses/models.py"
click node_shift_models "https://github.com/humayun121/finance-tracker/blob/master/backend/shifts/models.py"
click node_config_urls "https://github.com/humayun121/finance-tracker/blob/master/backend/config/urls.py"

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_signup,node_dashboard,node_expenses,node_categories,node_shifts,node_user toneBlue
class node_authprovider,node_protected,node_tokens toneAmber
class node_client,node_authapi,node_expenseapi,node_categoryapi,node_shiftapi,node_api_service toneMint
class node_account_views,node_expense_views,node_shift_views,node_account_models,node_expense_models,node_shift_models,node_config_urls toneRose
```

## Components

### Frontend app

- [Routes](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Login](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/LoginPage.tsx): `frontend/src/pages/LoginPage.tsx`
- [Sign up](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/SignupPage.tsx): `frontend/src/pages/SignupPage.tsx`
- [Dashboard](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/DashboardPage.tsx): `frontend/src/pages/DashboardPage.tsx`
- [Expenses](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/ExpensesPage.tsx): `frontend/src/pages/ExpensesPage.tsx`
- [Categories](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/CategoriesPage.tsx): `frontend/src/pages/CategoriesPage.tsx`
- [Shifts](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/pages/ShiftsPage.tsx): `frontend/src/pages/ShiftsPage.tsx`

### Authentication

- [Auth provider](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/auth/AuthContext.tsx): `frontend/src/auth/AuthContext.tsx`
- [Route guard](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/auth/ProtectedRoute.tsx): `frontend/src/auth/ProtectedRoute.tsx`
- [Token storage](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/auth/tokenStorage.ts): `frontend/src/auth/tokenStorage.ts`

### API client

- [API client](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/client.ts): `frontend/src/api/client.ts`
- [Auth API](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/auth.ts): `frontend/src/api/auth.ts`
- [Expense API](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/expenses.ts): `frontend/src/api/expenses.ts`
- [Category API](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/categories.ts): `frontend/src/api/categories.ts`
- [Shift API](https://github.com/humayun121/finance-tracker/blob/master/frontend/src/api/shifts.ts): `frontend/src/api/shifts.ts`

### Django backend

- [Account views](https://github.com/humayun121/finance-tracker/blob/master/backend/accounts/views.py): `backend/accounts/views.py`
- [Expense views](https://github.com/humayun121/finance-tracker/blob/master/backend/expenses/views.py): `backend/expenses/views.py`
- [Shift views](https://github.com/humayun121/finance-tracker/blob/master/backend/shifts/views.py): `backend/shifts/views.py`
- [Account models](https://github.com/humayun121/finance-tracker/blob/master/backend/accounts/models.py): `backend/accounts/models.py`
- [Expense models](https://github.com/humayun121/finance-tracker/blob/master/backend/expenses/models.py): `backend/expenses/models.py`
- [Shift models](https://github.com/humayun121/finance-tracker/blob/master/backend/shifts/models.py): `backend/shifts/models.py`
- [URL config](https://github.com/humayun121/finance-tracker/blob/master/backend/config/urls.py): `backend/config/urls.py`

### Other components

- **User**
- **Finance API**

## Connections

- User → Routes: opens
- Routes → Login: routes
- Routes → Sign up: routes
- Routes → Dashboard: routes
- Routes → Expenses: routes
- Routes → Categories: routes
- Routes → Shifts: routes
- Routes → Route guard: guards
- API client → Token storage: reads and updates
- API client → Finance API: HTTP requests