How karanratiya123/expense_tracker works
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 MySQL schema · auth.php Authentication guard · dashboard.php Dashboard · transactions.php Transaction ledger
Components 20
PHP application
Apache-hosted server-rendered application.
- Public entry
index.php - Login & signup
login.php - Authentication guard · Supplies protected-view and ownership checks.
auth.php - Logout
logout.php - DB connection & session
config.php - Dashboard · Renders KPIs, activity, and daily spending data.
dashboard.php - Transaction ledger · User-scoped search, filtering, and edit UI.
transactions.php - Transaction write APIs · Validate session identity and transaction ownership before writes.
api_add_transaction.php - Analytics · Aggregates monthly and category spending data.
analytics.php - Budgets · Compares category budgets with spending.
budgets.php - Profile
profile.php - Profile update
update_profile.php
Browser UI
Vanilla JavaScript reporting and interaction layer.
- Dashboard renderer · Renders heatmap, sparklines, and INR formatting.
app.js - Ledger interactions · Submits transaction mutations by AJAX.
transactions.js - Chart renderer · Builds Chart.js trend and category charts.
analytics.js - Budget renderer · Renders client-side budget progress.
budgets.js - Profile interactions
profile.js - Shared design system · Owns OKLCH tokens, layout, and reusable components.
style.css - Browser dependencies · Chart.js, Font Awesome, and hosted typography.
Persistence
MySQL data and session boundary.
- MySQL schema · Users, transactions, and budgets; money remains DECIMAL.
database.sql
Connections 25
- 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