# sandip-1-1/reactjs_final_project architecture

> Architecture diagram of the GitHub repository sandip-1-1/reactjs_final_project, 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/sandip-1-1/reactjs_final_project
- Repository: https://github.com/sandip-1-1/reactjs_final_project

## Overview

Pennywise is a personal expense tracker: users register or sign in, then manage income and expense records and review spending. The React app keeps a session and theme in browser storage, while its data hook loads and updates transactions and categories through an authenticated API; the backend scopes records to the authenticated user. The README also documents filtering, sorting, budgets, and insights. Backend route wiring and several UI interactions are not shown in the sampled source, so those connections are kept conservative.

Main entry points: [`Expense_Tracker_frontend/src/components/Dashboard.jsx`](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/Dashboard.jsx) (Expense dashboard), [`Expense_Tracker_frontend/src/App.jsx`](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/App.jsx) (App session routing), [`Expense_Tracker_frontend/src/hooks/useExpenseData.js`](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/hooks/useExpenseData.js) (Expense data hook), [`Expense_Tracker_frontend/src/components/AuthPage.jsx`](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/AuthPage.jsx) (Sign in / register)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React application"]
  node_app["App session routing<br/>[App.jsx]"]
  node_auth["Sign in / register<br/>[AuthPage.jsx]"]
  node_dashboard["Expense dashboard<br/>[Dashboard.jsx]"]
  node_txnform["Transaction entry"]
  node_txnlist["Transaction list"]
  node_summary["Monthly insights<br/>[MonthlySummary.jsx]"]
  node_charts["Spending chart<br/>[SpendingChart.jsx]"]
  node_budget["Budget display<br/>[BudgetCard.jsx]"]
  node_datahook["Expense data hook<br/>[useExpenseData.js]"]
end

subgraph group_api["API access"]
  node_apiservice["HTTP API client<br/>[api.js]"]
end

subgraph group_backend["Django API"]
  node_django["Django API routes<br/>[urls.py]"]
  node_expenseurls["Expense routes<br/>[urls.py]"]
  node_authviews["Authentication views<br/>[views.py]"]
  node_viewsets["Expense and category API<br/>[viewsets.py]"]
  node_serializers["Data serializers<br/>[serializers.py]"]
  node_models["Expense data models<br/>[models.py]"]
end

subgraph group_state["Persistence"]
  node_browserstore[("Browser local storage<br/>[useLocalStorage.js]")]
  node_db[("SQLite database<br/>[settings.py]")]
end

node_user(("Tracker user"))

node_user -->|"uses"| node_app
node_app -->|"renders unauthenticated"| node_auth
node_auth -->|"returns session"| node_app
node_app -->|"renders authenticated"| node_dashboard
node_app -->|"stores theme and session"| node_browserstore
node_dashboard -->|"loads expense data"| node_datahook
node_txnform -->|"adds transactions"| node_datahook
node_txnlist -->|"deletes transactions"| node_datahook
node_datahook -->|"caches transactions"| node_browserstore
node_auth -->|"requests authentication"| node_apiservice
node_datahook -->|"requests data"| node_apiservice
node_apiservice -->|"HTTP requests"| node_django
node_django -->|"dispatches routes"| node_expenseurls
node_expenseurls -->|"routes authentication"| node_authviews
node_expenseurls -->|"routes resources"| node_viewsets
node_viewsets -->|"serializes records"| node_serializers
node_viewsets -->|"queries and saves"| node_models
node_models -->|"persists records"| node_db
node_dashboard -->|"presents entry"| node_txnform
node_dashboard -->|"presents records"| node_txnlist
node_dashboard -->|"presents summaries"| node_summary
node_dashboard -->|"presents spending"| node_charts
node_dashboard -->|"presents budgets"| node_budget

click node_app "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/App.jsx"
click node_auth "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/AuthPage.jsx"
click node_dashboard "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/Dashboard.jsx"
click node_txnform "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/TransactionForm.jsx"
click node_txnlist "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/TransactionList.jsx"
click node_summary "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/MonthlySummary.jsx"
click node_charts "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/SpendingChart.jsx"
click node_budget "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/BudgetCard.jsx"
click node_datahook "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/hooks/useExpenseData.js"
click node_browserstore "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/hooks/useLocalStorage.js"
click node_apiservice "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/services/api.js"
click node_django "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/config/urls.py"
click node_expenseurls "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/urls.py"
click node_authviews "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/views.py"
click node_viewsets "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/viewsets.py"
click node_serializers "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/serializers.py"
click node_models "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/models.py"
click node_db "https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/config/settings.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_auth,node_dashboard,node_txnform,node_txnlist,node_summary,node_charts,node_budget,node_datahook,node_user toneBlue
class node_apiservice toneAmber
class node_django,node_expenseurls,node_authviews,node_viewsets,node_serializers,node_models toneMint
class node_browserstore,node_db toneRose
```

## Components

### React application

- [App session routing](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/App.jsx): `Expense_Tracker_frontend/src/App.jsx`
- [Sign in / register](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/AuthPage.jsx): `Expense_Tracker_frontend/src/components/AuthPage.jsx`
- [Expense dashboard](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/Dashboard.jsx): `Expense_Tracker_frontend/src/components/Dashboard.jsx`
- [Transaction entry](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/TransactionForm.jsx): `Expense_Tracker_frontend/src/components/TransactionForm.jsx`
- [Transaction list](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/TransactionList.jsx): `Expense_Tracker_frontend/src/components/TransactionList.jsx`
- [Monthly insights](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/MonthlySummary.jsx): `Expense_Tracker_frontend/src/components/MonthlySummary.jsx`
- [Spending chart](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/SpendingChart.jsx): `Expense_Tracker_frontend/src/components/SpendingChart.jsx`
- [Budget display](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/components/BudgetCard.jsx): `Expense_Tracker_frontend/src/components/BudgetCard.jsx`
- [Expense data hook](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/hooks/useExpenseData.js): `Expense_Tracker_frontend/src/hooks/useExpenseData.js`

### API access

- [HTTP API client](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/services/api.js): `Expense_Tracker_frontend/src/services/api.js`

### Django API

- [Django API routes](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/config/urls.py): `Expense_Tracker_backend/config/urls.py`
- [Expense routes](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/urls.py): `Expense_Tracker_backend/expenses/urls.py`
- [Authentication views](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/views.py): `Expense_Tracker_backend/expenses/views.py`
- [Expense and category API](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/viewsets.py): `Expense_Tracker_backend/expenses/viewsets.py`
- [Data serializers](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/serializers.py): `Expense_Tracker_backend/expenses/serializers.py`
- [Expense data models](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/expenses/models.py): `Expense_Tracker_backend/expenses/models.py`

### Persistence

- [Browser local storage](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_frontend/src/hooks/useLocalStorage.js): `Expense_Tracker_frontend/src/hooks/useLocalStorage.js`
- [SQLite database](https://github.com/sandip-1-1/reactjs_final_project/blob/main/Expense_Tracker_backend/config/settings.py): `Expense_Tracker_backend/config/settings.py`

### Other components

- **Tracker user**

## Connections

- Tracker user → App session routing: uses
- App session routing → Sign in / register: renders unauthenticated
- Sign in / register → App session routing: returns session
- App session routing → Expense dashboard: renders authenticated
- App session routing → Browser local storage: stores theme and session
- Expense dashboard → Expense data hook: loads expense data
- Transaction entry → Expense data hook: adds transactions
- Transaction list → Expense data hook: deletes transactions
- Expense data hook → Browser local storage: caches transactions
- Sign in / register → HTTP API client: requests authentication
- Expense data hook → HTTP API client: requests data
- HTTP API client → Django API routes: HTTP requests
- Django API routes → Expense routes: dispatches routes
- Expense routes → Authentication views: routes authentication
- Expense routes → Expense and category API: routes resources
- Expense and category API → Data serializers: serializes records
- Expense and category API → Expense data models: queries and saves
- Expense data models → SQLite database: persists records
- Expense dashboard → Transaction entry: presents entry
- Expense dashboard → Transaction list: presents records
- Expense dashboard → Monthly insights: presents summaries
- Expense dashboard → Spending chart: presents spending
- Expense dashboard → Budget display: presents budgets