# karanratiya123/expense_tracker architecture

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

- Interactive diagram: https://gitdiagram.com/karanratiya123/expense_tracker
- Repository: https://github.com/karanratiya123/expense_tracker

## Overview

#### Purpose and Runtime
Expense Tracker is a server-rendered personal finance dashboard for recording INR-denominated income and expenses, viewing spending analytics, and tracking category budgets. It runs as plain PHP under Apache (intended for XAMPP), with MySQL persistence and browser-side vanilla JavaScript. No framework, bundler, or application server is present.

#### Entry and Navigation
`index.php` is the public entry point and redirects into the authenticated application flow. `login.php` provides combined login/signup UI; successful authentication leads to the dashboard. Protected views use session checks supplied by `auth.php`; `logout.php` terminates the session.
Paths: `index.php`, `login.php`, `auth.php`, `logout.php`

#### Persistence and Session Boundary
`config.php` establishes database credentials/connection behavior and starts PHP session state. `database.sql` defines the core relational model: users, transactions, and budgets. PHP pages query/render user-scoped data, while mutation endpoints persist changes. Monetary values remain DECIMAL in MySQL and are formatted only in presentation.
Paths: `config.php`, `database.sql`, `auth.php`

#### Dashboard Reporting Stage
The primary post-login page assembles KPI totals, recent activity, and daily spending data for a 12-month GitHub-style heatmap. Browser logic renders the heatmap and KPI sparklines, including shared INR formatting. This is the application’s main read/reporting surface.
Paths: `dashboard.php`, `app.js`

#### Transaction Ledger and Write APIs
The ledger provides filtering, search, transaction editing/deletion UI, and an add-transaction modal. JavaScript submits AJAX requests to focused PHP API endpoints; each endpoint forms a backend trust boundary that must validate session identity and transaction ownership before database writes.
Paths: `transactions.php`, `transactions.js`, `api_add_transaction.php`, `api_update_transaction.php`, `api_delete_transaction.php`

#### Analytics and Budget Projections
Analytics presents aggregated transaction history as monthly trend and category-breakdown charts using Chart.js. Budget pages compare per-category budget amounts against spending and render progress state client-side. These are derived reporting views over the same transaction/budget data rather than separate services.
Paths: `analytics.php`, `analytics.js`, `budgets.php`, `budgets.js`

#### Profile and Presentation Layer
Profile editing is handled by a dedicated page/controller pair posting to a PHP update endpoint. `style.css` is the shared design-system boundary: it owns OKLCH theme tokens, layout, and reusable components. External browser dependencies include Chart.js, Font Awesome, and hosted typography as referenced by page views.
Paths: `profile.php`, `profile.js`, `update_profile.php`, `style.css`

Main entry points: [`database.sql`](https://github.com/karanratiya123/expense_tracker/blob/main/database.sql) (MySQL schema), [`auth.php`](https://github.com/karanratiya123/expense_tracker/blob/main/auth.php) (Authentication guard), [`dashboard.php`](https://github.com/karanratiya123/expense_tracker/blob/main/dashboard.php) (Dashboard), [`transactions.php`](https://github.com/karanratiya123/expense_tracker/blob/main/transactions.php) (Transaction ledger)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_server["PHP application"]
  node_entry["Public entry<br/>PHP entry<br/>[index.php]"]
  node_login["Login &amp; signup<br/>PHP page<br/>[login.php]"]
  node_auth["Authentication guard<br/>PHP auth<br/>[auth.php]"]
  node_logout["Logout<br/>PHP endpoint<br/>[logout.php]"]
  node_runtime["DB connection &amp; session<br/>PHP bootstrap<br/>[config.php]"]
  node_dashboard["Dashboard<br/>PHP report page<br/>[dashboard.php]"]
  node_ledger["Transaction ledger<br/>PHP page<br/>[transactions.php]"]
  node_transaction_api{{"Transaction write APIs<br/>PHP API endpoints"}}
  node_analytics["Analytics<br/>PHP report page<br/>[analytics.php]"]
  node_budgets["Budgets<br/>PHP report page<br/>[budgets.php]"]
  node_profile["Profile<br/>PHP page<br/>[profile.php]"]
  node_profile_update{{"Profile update<br/>PHP endpoint<br/>[update_profile.php]"}}
end

subgraph group_browser["Browser UI"]
  node_app_js["Dashboard renderer<br/>Browser JavaScript<br/>[app.js]"]
  node_transactions_js["Ledger interactions<br/>Browser JavaScript<br/>[transactions.js]"]
  node_analytics_js["Chart renderer<br/>Browser JavaScript<br/>[analytics.js]"]
  node_budgets_js["Budget renderer<br/>Browser JavaScript<br/>[budgets.js]"]
  node_profile_js["Profile interactions<br/>Browser JavaScript<br/>[profile.js]"]
  node_styles["Shared design system<br/>CSS<br/>[style.css]"]
  node_external_ui["Browser dependencies<br/>External libraries"]
end

subgraph group_data["Persistence"]
  node_mysql[("MySQL schema<br/>Relational database<br/>[database.sql]")]
end

node_entry -->|"redirects to"| node_login
node_login -->|"authenticates through"| node_auth
node_auth -->|"permits protected flow"| node_dashboard
node_logout -->|"ends session"| node_runtime
node_runtime -->|"connects to"| node_mysql
node_auth -->|"uses session"| node_runtime
node_dashboard -->|"requires"| node_auth
node_dashboard -->|"reads user data"| node_mysql
node_dashboard -->|"supplies report data to"| node_app_js
node_ledger -->|"requires"| node_auth
node_ledger -->|"reads ledger"| node_mysql
node_ledger -->|"loads"| node_transactions_js
node_transactions_js -->|"AJAX mutations"| node_transaction_api
node_transaction_api -->|"validates identity &amp; ownership"| node_auth
node_transaction_api -->|"writes transactions"| node_mysql
node_analytics -->|"aggregates transactions"| node_mysql
node_analytics -->|"supplies chart data to"| node_analytics_js
node_budgets -->|"reads budgets and spending"| node_mysql
node_budgets -->|"supplies progress data to"| node_budgets_js
node_profile -->|"loads"| node_profile_js
node_profile_js -->|"posts changes"| node_profile_update
node_profile_update -->|"updates user"| node_mysql
node_analytics_js -->|"uses Chart.js"| node_external_ui
node_dashboard -.->|"uses"| node_styles
node_ledger -.->|"uses"| node_styles

click node_entry "https://github.com/karanratiya123/expense_tracker/blob/main/index.php"
click node_login "https://github.com/karanratiya123/expense_tracker/blob/main/login.php"
click node_auth "https://github.com/karanratiya123/expense_tracker/blob/main/auth.php"
click node_logout "https://github.com/karanratiya123/expense_tracker/blob/main/logout.php"
click node_runtime "https://github.com/karanratiya123/expense_tracker/blob/main/config.php"
click node_dashboard "https://github.com/karanratiya123/expense_tracker/blob/main/dashboard.php"
click node_ledger "https://github.com/karanratiya123/expense_tracker/blob/main/transactions.php"
click node_transaction_api "https://github.com/karanratiya123/expense_tracker/blob/main/api_add_transaction.php"
click node_analytics "https://github.com/karanratiya123/expense_tracker/blob/main/analytics.php"
click node_budgets "https://github.com/karanratiya123/expense_tracker/blob/main/budgets.php"
click node_profile "https://github.com/karanratiya123/expense_tracker/blob/main/profile.php"
click node_profile_update "https://github.com/karanratiya123/expense_tracker/blob/main/update_profile.php"
click node_app_js "https://github.com/karanratiya123/expense_tracker/blob/main/app.js"
click node_transactions_js "https://github.com/karanratiya123/expense_tracker/blob/main/transactions.js"
click node_analytics_js "https://github.com/karanratiya123/expense_tracker/blob/main/analytics.js"
click node_budgets_js "https://github.com/karanratiya123/expense_tracker/blob/main/budgets.js"
click node_profile_js "https://github.com/karanratiya123/expense_tracker/blob/main/profile.js"
click node_styles "https://github.com/karanratiya123/expense_tracker/blob/main/style.css"
click node_mysql "https://github.com/karanratiya123/expense_tracker/blob/main/database.sql"

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_entry,node_login,node_auth,node_logout,node_runtime,node_dashboard,node_ledger,node_transaction_api,node_analytics,node_budgets,node_profile,node_profile_update toneBlue
class node_app_js,node_transactions_js,node_analytics_js,node_budgets_js,node_profile_js,node_styles,node_external_ui toneAmber
class node_mysql toneMint
```

## Components

### PHP application

Apache-hosted server-rendered application.

- [Public entry](https://github.com/karanratiya123/expense_tracker/blob/main/index.php): PHP entry · `index.php`
- [Login & signup](https://github.com/karanratiya123/expense_tracker/blob/main/login.php): PHP page · `login.php`
- [Authentication guard](https://github.com/karanratiya123/expense_tracker/blob/main/auth.php): PHP auth · Supplies protected-view and ownership checks. · `auth.php`
- [Logout](https://github.com/karanratiya123/expense_tracker/blob/main/logout.php): PHP endpoint · `logout.php`
- [DB connection & session](https://github.com/karanratiya123/expense_tracker/blob/main/config.php): PHP bootstrap · `config.php`
- [Dashboard](https://github.com/karanratiya123/expense_tracker/blob/main/dashboard.php): PHP report page · Renders KPIs, activity, and daily spending data. · `dashboard.php`
- [Transaction ledger](https://github.com/karanratiya123/expense_tracker/blob/main/transactions.php): PHP page · User-scoped search, filtering, and edit UI. · `transactions.php`
- [Transaction write APIs](https://github.com/karanratiya123/expense_tracker/blob/main/api_add_transaction.php): PHP API endpoints · Validate session identity and transaction ownership before writes. · `api_add_transaction.php`
- [Analytics](https://github.com/karanratiya123/expense_tracker/blob/main/analytics.php): PHP report page · Aggregates monthly and category spending data. · `analytics.php`
- [Budgets](https://github.com/karanratiya123/expense_tracker/blob/main/budgets.php): PHP report page · Compares category budgets with spending. · `budgets.php`
- [Profile](https://github.com/karanratiya123/expense_tracker/blob/main/profile.php): PHP page · `profile.php`
- [Profile update](https://github.com/karanratiya123/expense_tracker/blob/main/update_profile.php): PHP endpoint · `update_profile.php`

### Browser UI

Vanilla JavaScript reporting and interaction layer.

- [Dashboard renderer](https://github.com/karanratiya123/expense_tracker/blob/main/app.js): Browser JavaScript · Renders heatmap, sparklines, and INR formatting. · `app.js`
- [Ledger interactions](https://github.com/karanratiya123/expense_tracker/blob/main/transactions.js): Browser JavaScript · Submits transaction mutations by AJAX. · `transactions.js`
- [Chart renderer](https://github.com/karanratiya123/expense_tracker/blob/main/analytics.js): Browser JavaScript · Builds Chart.js trend and category charts. · `analytics.js`
- [Budget renderer](https://github.com/karanratiya123/expense_tracker/blob/main/budgets.js): Browser JavaScript · Renders client-side budget progress. · `budgets.js`
- [Profile interactions](https://github.com/karanratiya123/expense_tracker/blob/main/profile.js): Browser JavaScript · `profile.js`
- [Shared design system](https://github.com/karanratiya123/expense_tracker/blob/main/style.css): CSS · Owns OKLCH tokens, layout, and reusable components. · `style.css`
- **Browser dependencies**: External libraries · Chart.js, Font Awesome, and hosted typography.

### Persistence

MySQL data and session boundary.

- [MySQL schema](https://github.com/karanratiya123/expense_tracker/blob/main/database.sql): Relational database · Users, transactions, and budgets; money remains DECIMAL. · `database.sql`

## Connections

- Public entry → Login & signup: redirects to
- Login & signup → Authentication guard: authenticates through
- Authentication guard → Dashboard: permits protected flow
- Logout → DB connection & session: ends session
- DB connection & session → MySQL schema: connects to
- Authentication guard → DB connection & session: uses session
- Dashboard → Authentication guard: requires
- Dashboard → MySQL schema: reads user data
- Dashboard → Dashboard renderer: supplies report data to
- Transaction ledger → Authentication guard: requires
- Transaction ledger → MySQL schema: reads ledger
- Transaction ledger → Ledger interactions: loads
- Ledger interactions → Transaction write APIs: AJAX mutations
- Transaction write APIs → Authentication guard: validates identity & ownership
- Transaction write APIs → MySQL schema: writes transactions
- Analytics → MySQL schema: aggregates transactions
- Analytics → Chart renderer: supplies chart data to
- Budgets → MySQL schema: reads budgets and spending
- Budgets → Budget renderer: supplies progress data to
- Profile → Profile interactions: loads
- Profile interactions → Profile update: posts changes
- Profile update → MySQL schema: updates user
- Chart renderer → Browser dependencies: uses Chart.js
- Dashboard → Shared design system: uses
- Transaction ledger → Shared design system: uses