Independent project

BudgetWise

A full-stack personal finance application connecting expense tracking, budgets, bank accounts, and analytics behind authenticated APIs.

Visit live product View source code ↗

01 Project overview

BudgetWise replaces disconnected expense records and budget spreadsheets with a focused finance dashboard. Users can organize expenses, track category budgets, manage bank accounts, handle recurring expenses, and understand spending through interactive charts.

My role

I built the React dashboard and Node.js / Express backend, including the account journey, expense and budget APIs, finance data handling, and responsive analytics interface.

02 Problems solved

  • Expenses and bank account balances are difficult to understand when records live in separate tools.
  • Recurring transactions and category budgets need consistent data handling rather than repeated manual entry.
  • Personal finance records require an authenticated, user-specific API boundary.

03 Technical implementation

Authenticated finance workflows

Implemented JWT authentication, password hashing, OTP email verification, and protected API access for finance records.

Expenses, budgets & accounts

Developed CRUD workflows for expenses, categories, monthly budgets, and bank accounts, including recurring expenses and multi-currency support.

Dashboard & analytics

Built responsive React views with interactive spending charts, recent transactions, and category-level budget utilization. The interface consumes the same backend records used by the operational finance screens.

API boundaries

Added request validation, rate limiting, and security headers around the Express API, keeping data access behind authenticated application routes.

04 Technologies used

  • React
  • JavaScript
  • Tailwind CSS
  • Node.js
  • Express.js
  • MongoDB
  • Mongoose
  • JWT
  • Recharts

05 Challenges & solutions

Challenge 01

Keeping dashboard summaries useful across categories, accounts, and recurring transactions.

Solution

Organized finance workflows around shared API-backed records and category budgets, with charts and summaries presenting the data used by transaction screens.

Challenge 02

Protecting financial records while keeping sign-up and sign-in straightforward.

Solution

Used JWT-protected routes, password hashing, and OTP email verification to connect the account journey to authorized data access.

06 Product in focus

BudgetWise dashboard with spending analytics
The BudgetWise application dashboard, using the original project screenshot supplied in this portfolio.

07 Architecture & technical details

A React application consumes an authenticated Express REST API backed by MongoDB. Finance resources and account access are handled in the backend, while the frontend provides entry, management, and analytics views.

  1. Finance interface

    React screens for dashboard analytics, expenses, budgets, accounts, and preferences.

  2. Authenticated REST API

    Express routes coordinate account verification, access control, validation, and finance operations.

  3. Finance persistence

    MongoDB stores users, expenses, categories, budgets, and accounts for the finance workflows.