Back to Portfolio

Personal Finance Dashboard

Full-stack personal finance manager built with Next.js, MongoDB, and Tailwind CSS

Project Overview

Embedded live demo (opens inline). Use the buttons above for a full-page experience.

ERD: a user owns many accounts and transactions; accounts post many transactions; users track budgets (categories), recurring bills, and savings goals; notifications link back to the user. All entities carry timestamps and optional metadata like bankName, limits, and categories.

How This Dashboard Works

Accounts & balancesTransactions importBudgets & goalsRecurring billsNotificationsGuided onboarding

The Personal Finance Dashboard is a modern Next.js 16 application for consolidating everyday money management. Users can track accounts, import transactions, manage budgets, set savings goals, schedule recurring bills, and receive notifications—powered by MongoDB persistence and a responsive, accessible UI.

Core Capabilities

Accounts & Balances

Track checking, savings, cards, and cash with aggregate balance views.

Transaction Import

List, filter, and categorize transactions for spending insights.

Budgets & Goals

Monitor category budgets and savings goals with visual progress.

Recurring Bills

Manage due dates, amounts, and reminders for subscriptions and bills.

Notification Center

Centralized alerts for budgets, bills, and account activity.

MongoDB Persistence

Mongoose models for accounts, transactions, budgets, goals, and bills.

Technical Highlights

  • Framework: Next.js App Router (v16) with React 19 and TypeScript.
  • Styling: Tailwind CSS + Radix UI components for accessible theming.
  • Database: MongoDB with Mongoose schemas for transactional data.
  • UX: Responsive layout, dashboard cards, and intuitive navigation.
  • Deployment: Vercel-hosted frontend connecting to MongoDB Atlas/local.
  • AI Import: Bank-statement PDF ingestion powered by an OpenAI GPT-4 class model for extraction, category suggestions, and duplicate detection before commit.

Quick Start

  1. Install dependencies: npm install
  2. Configure env: MONGODB_URI, DB_NAME
  3. Run locally: npm run devhttp://localhost:3000

AI-Powered Import

Upload a PDF bank statement and the pipeline extracts text locally, sends it to `/api/transactions/parse`, and runs GPT-4 class parsing with Mistral → HF router → OpenAI → regex fallbacks to normalize amounts/dates and propose categories. You review flagged duplicates and suggestions before saving.

  • LLM-assisted statement parsing (text/OCR-friendly PDFs)
  • Category recommendations with confidence cues
  • Duplicate detection across prior imports
  • Human-in-the-loop confirmation flow

Project Details

Technologies Used

Next.js 16React 19TypeScriptTailwind CSSRadix UIMongoDBMongoose
Role-based data powered by MongoDB + Mongoose models

Product Walkthrough

Key screens across accounts, transactions, budgets, recurring bills, categorization, imports, and analytics.

Onboarding Tour

Guided tour overlay introduces key areas—dashboard, navigation, and help entry point. Runs when the user clicks the Help button above Logout (and on first visit) so onboarding stays user-triggered.

Accounts & Balances

Aggregates account balances (credit, checking) with real-time totals and CRUD on accounts. Data flows from MongoDB models; optimistic UI keeps the list responsive.

Recurring Bills

Manages scheduled bills with due dates, amounts, and status chips. Reminders and statuses are computed server-side; UI highlights overdue items for quick triage.

Budgets & Spending

Shows budget envelopes, spend progress, and monthly trends with Fabric-style charts. Budget utilization is derived from categorized transactions; components are Tailwind + Radix primitives.

Categorize Transactions

Lists unique merchants with batch category assignment and sample transactions. Category mapping updates are applied to all matching records server-side to keep analytics aligned.

Analytics Dashboard

Presents KPIs, recent activity, and donut breakdowns for expenses. Uses pre-aggregated queries for totals and category splits to keep charts snappy.

AI Import from Bank Statements

AI-assisted PDF ingestion: client extracts text and posts to `/api/transactions/parse`, which prefers Mistral (if key) → HF router (Mistral-7B) → OpenAI GPT-4 class (if key) → regex fallback, then returns parsed JSON and summary for human review. Suggests categories, flags duplicates, and only saves after approval.

Transactions Ledger

Full ledger with filters, categories, statuses, and export controls. Column-level filters and server-backed pagination keep large datasets fast.