Skip to content

Repository files navigation

AI Personal Finance Intelligence Dashboard

Project Screenshot

Product Overview

A modern, AI-powered personal finance intelligence platform that provides users with deep insights into their financial health. It goes beyond simple budgeting by employing automated categorization, detecting recurring subscriptions, providing forward-looking cash-flow analysis, and surfacing actionable AI-driven insights to help users save money and make informed decisions.

Why I Built This

Personal finance tools often suffer from manual entry fatigue and backward-looking reporting. I built this to demonstrate how intelligent automation and smart heuristics can transition a personal finance app from a static record-keeper into a proactive financial assistant.

Problem Statement

Users struggle to keep track of their spending across multiple accounts, leading to missed subscriptions, overspending in specific categories, and lack of visibility into future cash-flow crunches. Traditional tools require too much manual intervention and don't provide actionable insights.

Target Users

  • Young Professionals: Looking to build wealth and track spending without spending hours on spreadsheets.
  • Budget-Conscious Families: Needing to manage shared expenses and optimize household cash flow.
  • Freelancers/Gig Workers: Experiencing variable income and needing tight control over cash flow and tax-deductible expenses.

User Personas

  1. "Busy Professional" Brian (28): High income, high expenses, low time. Wants alerts when subscriptions increase or when he's overspending on dining out, but won't categorize transactions manually.
  2. "Diligent Saver" Sarah (34): Meticulously tracks every penny. Wants granular category breakdowns and predictive cash-flow insights to maximize her monthly investments.

Product Goals

  • Reduce the time users spend categorizing transactions to zero.
  • Proactively identify at least $50/month in unnecessary subscriptions or overspending for the average user.
  • Provide a clean, intuitive, anxiety-free view of a user's financial health.

Hypothesis

By using AI to automatically categorize transactions and surface proactive alerts (like subscription price hikes), users will engage more frequently with their finances and save more money compared to using static budgeting tools.

Key Features

  • Intelligent Transaction Feed: Automatically enriched and categorized transactions with recurring expense detection.
  • AI-Generated Insights: Smart alerts for "Subscription spending increased", "Dining exceeded budget", "Recurring expense detected", and "Cash-flow pressure approaching".
  • Spending Trends & Category Breakdown: Visual analytics using interactive Recharts components.
  • Budget Tracking: Real-time progress against monthly targets.
  • Cash-Flow Insights: Predictive balances based on historical recurring transactions.

User Journey

  1. Onboarding: User links accounts (simulated in this prototype).
  2. Dashboard Review: User logs in and immediately sees top-level KPIs (Total Balance, Monthly Spending, Left to Budget).
  3. Insight Action: User notices an AI alert about a new gym subscription and decides to cancel it.
  4. Deep Dive: User explores the Spending Trends chart to see how their expenses have fluctuated over the past 6 months.

Workflow

  • Transactions are ingested and passed through the categorization engine.
  • AI heuristics evaluate the new data against historical patterns.
  • Alerts and insights are generated and cached.
  • The UI fetches the latest insights and renders the dashboard.

Requirements

  • Must display total balance, monthly spending, and budget remaining.
  • Must include a minimum of 4 AI-generated insights.
  • Must visualize spending trends via a line chart.
  • Must visualize category breakdown via a pie chart.
  • Must show a list of recent transactions with visual indicators for recurring items.

User Stories

  • As a user, I want to see my total balance at a glance so I know my current financial standing.
  • As a user, I want AI to alert me if a subscription price increases so I can cancel it if needed.
  • As a user, I want my transactions automatically categorized so I don't have to do it manually.
  • As a user, I want to see a visual breakdown of my spending by category to understand where my money goes.

Acceptance Criteria

  • The dashboard loads within 2 seconds.
  • AI insights correctly map to predefined heuristic triggers (e.g., >10% increase in subscription).
  • The transaction table displays at least 5 transactions with dates, amounts, categories, and recurring badges.
  • Charts render correctly on both desktop and mobile viewports.

Tradeoffs

  • Client-Side vs. Server-Side Analytics: For this prototype, analytics and AI insights are hardcoded/computed on the client side to simplify deployment and showcase the UI, trading off the complexity of a real backend ML pipeline.
  • Accuracy vs. Speed in Categorization: In a production app, LLM calls for categorization can be slow; this prototype simulates instantaneous rule-based categorization.

AI/Automation Approach

The system uses a simulated AI engine to analyze transaction patterns. It looks for:

  • Frequency patterns (recurring detection).
  • Variance from historical averages (anomaly detection, e.g., dining exceeded budget).
  • Semantic matching on merchant names to assign categories. Note: This prototype uses synthetic data and simulated insights to demonstrate the UI/UX.

Data/Assumptions

  • Transactions are processed daily.
  • The user has a primary checking account where most activity occurs.
  • "AI Insights" are generated via batch processing heuristics in the background (simulated).

Architecture

  • Frontend: React 19, TypeScript, Vite
  • Styling: Tailwind CSS, PostCSS
  • Icons & Visualization: Lucide React, Recharts
  • State Management: React local state (simulated global state)

Tech Stack

  • React & TypeScript: For robust, type-safe UI components.
  • Vite: For extremely fast HMR and optimized builds.
  • Tailwind CSS: For rapid, utility-first styling.
  • Recharts: For composable, responsive data visualization.

UX Decisions

  • Anxiety-Free Colors: Used a clean, light color palette with soft blues and indigos to reduce the anxiety often associated with financial tracking.
  • Card-Based Layout: Information is compartmentalized into cards (KPIs, Insights, Charts) for easier scanning.
  • Sticky Header: Keeps search and notifications accessible while scrolling through long transaction lists.

KPI Framework

  • Engagement: Daily Active Users (DAU), average session length.
  • Monetization/Value: Total dollars saved by users taking action on AI alerts.
  • Performance: App load time, time to interactive.

MVP

The MVP includes the static dashboard UI, synthetic transaction data, hardcoded charts, and simulated AI insights. It serves as a comprehensive visual prototype for stakeholder approval and user testing.

Roadmap

  1. Phase 1 (Current): Static prototype with synthetic data.
  2. Phase 2: Connect to Plaid API for real bank data ingestion.
  3. Phase 3: Integrate an LLM (e.g., OpenAI) for dynamic natural language categorization and custom insights.
  4. Phase 4: Add budgeting tools and goal-setting features.

Future Opportunities

  • Predictive cash-flow forecasting using ARIMA or Prophet models.
  • Peer comparison ("You spend 20% more on dining than similar users").
  • Automated subscription cancellation services.

Getting Started

Environment Variables

Currently, no environment variables are required for this prototype. Future versions will require:

VITE_PLAID_CLIENT_ID=your_plaid_client_id
VITE_PLAID_SECRET=your_plaid_secret
VITE_OPENAI_API_KEY=your_openai_api_key

Running Locally

  1. Clone the repository:
    git clone https://github.com/adishuklaa/ai-personal-finance-intelligence.git
  2. Navigate to the directory:
    cd ai-personal-finance-intelligence
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm run dev

Project Structure

ai-personal-finance-intelligence/
├── src/
│   ├── App.tsx          # Main application component and layout
│   ├── index.css        # Global Tailwind styles
│   └── main.tsx         # Application entry point
├── screenshots/         # Product screenshots
├── package.json
├── tailwind.config.js
└── vite.config.ts

Limitations

  • This is a UI prototype; no real financial data is used.
  • Do not use this application for actual financial advice.
  • Authentication and backend services are not implemented.

Future Improvements

  • Add dark mode support.
  • Implement responsive drawer navigation for mobile devices.
  • Add real-time data fetching with React Query or SWR.

About

An AI-powered personal financial management (PFM) dashboard that automatically categorizes transactions and surfaces actionable spending insights.

Topics

Resources

Stars

18 stars

Watchers

0 watching

Forks

Contributors

Languages