Personal Budget Tracker

Personal Budget Tracker is a full-featured web application for people who want to understand their money without fighting a spreadsheet. Users sign in, record income and expenses, and land on a summary dashboard that turns raw entries into percentages, averages, and balances.

The product is split cleanly: a Next.js frontend with React components delivers a responsive, fast experience, while a Node.js and Express.js API persists budget, expense, and user records in MongoDB. The goal is a small surface area with strong defaults: add and edit what matters, delete mistakes safely, and always see whether spending is drifting from plan.

Informal budgeting often lives in notes apps or shared sheets. That breaks down when you need reliable totals, category insight, and history you trust. Subscription tools solve the UX but not everyone wants another monthly bill or a vendor holding their ledger.

This project solves that gap with a self-contained stack: your data lives behind authentication and session management, CRUD is explicit for both income and expenses, and the dashboard answers the questions people actually ask: what share of spending goes where, what does an average day cost, and how much income is left after recorded expenses.

• User authentication with session management so ledgers stay private to the signed-in account.
• CRUD for income: add, edit, and delete income entries as circumstances change.
• CRUD for expenses: add and remove spending lines with clear validation.
• Summary dashboard for financial tracking:
  • Pie chart showing expense share by category (percent view of where money goes).
  • Average expense per day for a grounded sense of burn rate.
  • Total income, total expenses, and remaining income after recorded outflows.
• Responsive UI built with Next.js and React, suitable for daily check-ins on phone or desktop.
• REST-style backend on Express and Node.js with routes aligned to dashboard and form flows.
• MongoDB collections for users, budget context, and expense lines so the schema can grow without brittle migrations for early iterations.

Frontend: Next.js (React) for routing, layouts, and a production-minded client bundle with strong developer experience and fast iteration on UI.

Backend: Node.js with Express.js for HTTP APIs, middleware, and clear separation between transport and persistence.

Data: MongoDB with structured documents for users, budgets, and expenses; the document model fits nested or evolving fields (categories, notes, timestamps) without slowing early delivery.

Cross-cutting: session-aware auth on protected routes, input validation at the API boundary, and chart-friendly aggregation endpoints so the Next.js dashboard stays thin and declarative.

Finance UIs fail quietly when math drifts between list screens and charts. Keeping pie chart percentages, daily averages, and running totals consistent required agreement on a single definition of "a day" and which expenses belong in each window.

Sessions had to survive refreshes without exposing tokens in places they should not live. As lists grew, pagination or sensible limits became important so the dashboard did not refetch unbounded history on every visit.

I pushed aggregations to the server: dedicated endpoints return chart-ready buckets and headline numbers so the Next.js layer renders one coherent snapshot per load instead of recomputing totals differently in multiple components.

Dates are normalized at the API (for example UTC boundaries) before grouping, so averages and month-to-date views do not shift with the client clock.

Auth uses established session patterns on Express with protected routes; the client only calls authenticated APIs after a verified session exists. For performance, list views use bounded queries or paging so MongoDB always works against an indexed, limited slice.

Personal Budget Tracker is a practical full-stack case study: Next.js and React on the surface, Express and MongoDB underneath, and a dashboard that prioritizes clarity over novelty. It demonstrates how I ship CRUD you can trust, charts that match the database, and an architecture that can grow toward budgets, goals, or multi-account support without rewriting the core idea.