Overview

Finance Management App is a full-stack personal fintech platform engineered to help users track cash flows, organize budgets, visualize spending trends, and reach long-term savings goals. Decoupled across a responsive React Single Page Application and an Express REST API, the system empowers users with real-time financial telemetry.

The application provides end-to-end transaction categorization, interactive income vs expense analytics via Recharts, automated monthly budget alerts, multi-currency support, and instant CSV/PDF export pipelines for tax reporting and fiscal auditing.

Decoupled Multi-Repository Architecture

Finance Management App is split into two independent codebases: Finance-Management-App (Frontend React SPA) and FM-Backend (Node.js & Express REST API with MongoDB).

Finance Management App Dashboard — Analytics, Cash Flow, and Budget Goals

Interactive Personal Finance Dashboard — Real-time cash flow telemetry, monthly trends, and budget goal progress.

Tech Stack

•React 18 / 19
•Vite
•TypeScript
•Tailwind CSS
•Recharts
•Lucide React
•Axios
•React Router

Feature Breakdown

Cash Flow & Trend Analytics

Interactive monthly income vs expense line graphs, category-wise spending donut charts, and daily net cash flow visualization powered by Recharts.

Dynamic Budget & Goal Tracker

Set customized monthly spending limits per category with progress rings, threshold warning badges, and savings milestone tracking.

Multi-Account Transaction Engine

Log, filter, and categorize transactions across Bank Accounts, Credit Cards, Cash, and Digital Wallets with date range and search indices.

Automated Data Export & Reports

Export detailed financial summaries and monthly transaction logs to CSV and formatted PDF reports for audit readiness and tax filing.

Finance Management App Analytics and Recent Transactions

Real-time transaction filtering, category breakdowns, and interactive financial charts.

Architecture

User Journey

Secure Authentication & Session Issuance

User signs up or logs in via email and bcrypt-hashed password. The backend issues a signed JWT token used in subsequent authorization headers.

Income & Expense Transaction Entry

Transactions are recorded with amount, type (income/expense), category, account source, and timestamp with instant optimistic list updates.

Category Budgets & Threshold Calculation

Users set budget ceilings. The system recalculates total expenditure in real-time and updates color-coded progress indicators.

Monthly Cash Flow & Report Export

Interactive graphs display spending patterns across time, allowing one-click export of filtered transactions to CSV.

Transaction Aggregation & Analytics Lifecycle

Finance Management App separates client visualization from server financial calculations. The React SPA communicates with the Express REST API via authenticated JWT tokens, querying MongoDB aggregation pipelines for instant sub-second balance calculations.

System Architecture & Data Flow

Rendering architecture diagram...

When transactions are submitted, Express validates schemas via Zod/Joi, commits records to MongoDB, and triggers aggregation pipelines that update cached category totals and cash flow metrics.

Personal Financial Management Workflow

Complete transaction lifecycle from data ingestion to visual aggregation.

Stage 01

React FormsValidationREST API

Transaction Ingestion & Tagging

Expenses and revenues are categorized into dining, utilities, salary, and investments with currency formatting.

const { data } = await api.post("/transactions", { title, amount, type, category, date });

Stage 02

MongoDB$group$aggregate

Serverless MongoDB Aggregation

MongoDB aggregation pipelines compute monthly totals, net cash flow, and category percentages in a single database roundtrip.

const summary = await Transaction.aggregate([{ $match: { userId } }, { $group: { _id: "$type", total: { $sum: "$amount" } } }]);

Stage 03

RechartsResponsiveContainerTailwind

Interactive Recharts Visual Rendering

Dynamic area graphs and donut charts render monthly balance evolutions and expense distributions smoothly.

<AreaChart data={cashFlowData}><Area type="monotone" dataKey="netFlow" stroke="#10b981" fill="#10b98120" /></AreaChart>

Stage 04

Budget AlertsCSV ParserData Export

Budget Goal Monitoring & Export

Budget limits trigger warning alerts when spending exceeds 80%, with instant CSV data generation for external review.

const csv = generateCsvReport(transactions); downloadFile(csv, "monthly-report.csv");

Financial Data Protection & Isolation

Finance Management App implements rigorous tenant-level data segregation to ensure users only access their personal accounts.

JWT Token

JWT Authorization Middleware

Every backend route validates cryptographically signed JWT tokens and extracts verified user credentials before database execution.

Tenant Isolation

Strict User-Scoped Queries

All Mongoose find, update, and aggregation queries explicitly include { userId } to prevent Cross-Tenant Data Access.

Bcrypt 10-Rounds

Bcrypt Hash Credential Storage

User passwords are salted with 10 rounds of bcrypt hashing before persistence, ensuring zero plaintext credential exposure.

Fintech Platform Telemetry & Benchmarks

Real-world operational speed across financial analytics and calculations.

<35ms

Chart Render Time

Client-side Recharts canvas draw latency on dataset update.

18ms

Aggregation Query Speed

MongoDB compound indexed aggregation across thousands of transactions.

<120ms

CSV Summary Generation

Instant in-memory parsing and downloadable file stream issuance.

100%

Mobile Responsiveness

Tailwind CSS responsive design optimized for mobile and desktop screens.

42ms

API Response Latency

Average Express REST roundtrip over secure HTTPS connections.

99.9%

Uptime Reliability

Hosted on high-availability serverless and container infrastructure.

Architecture Comparison: MongoDB Aggregations vs Client-Side Filtering

Why Finance Management computes financial summaries at the database layer.

Dimension / Feature	MongoDB Aggregation Pipeline	Client-Side In-Browser Filtering
Network Payload	Tiny JSON summary (<2 KB)	Transfers entire raw history (MBs)
Computation Speed	Indexed server execution (18ms)	UI thread blocking on large datasets
Battery & Device Footprint	Zero mobile CPU overhead	High mobile CPU and RAM consumption
Multi-Device Consistency	Identical balance across all clients	Prone to stale client-state discrepancies

API Endpoints

Resource	Mount point	Purpose
Auth	`/api/auth`	User registration, login authentication, and JWT session token generation.
Transactions	`/api/transactions`	Paginated transaction retrieval, transaction entry, and category updates.
Budgets & Analytics	`/api/budgets & /api/analytics`	Budget threshold allocations, goal progress calculations, and aggregate cash flow summaries.

Project Structure

Navbar.tsx

Sidebar.tsx

TransactionModal.tsx

BudgetTracker.tsx

CashFlowChart.tsx

Dashboard.tsx

Transactions.tsx

Budgets.tsx

Analytics.tsx

Settings.tsx

api.ts

authService.ts

exportService.ts

App.tsx

main.tsx

package.json

vite.config.ts

authController.js

transactionController.js

budgetController.js

analyticsController.js

User.js

Transaction.js

Budget.js

Goal.js

authMiddleware.js

errorMiddleware.js

authRoutes.js

transactionRoutes.js

budgetRoutes.js

analyticsRoutes.js

server.js

package.json

Getting Started

Environment Variables

VITE_API_BASE_URL="http://localhost:5000/api"

Running Locally

Finance Management App uses decoupled frontend and backend repositories. Both services must be configured and run simultaneously.

git clone https://github.com/AH-Muzahid/FM-Backend.git
cd FM-Backend
npm install
npm run dev

Deployment

Frontend: Deployed on Vercel with automated continuous deployment on git push.
Backend: Deployed on Render Node.js web service connected to MongoDB Atlas.

Frequently Asked Questions

Personal Financial Mastery

Experience intelligent budget tracking and cash flow telemetry with Finance Management App.