Skip to content
← All Work

Balance

2024FrontendDesign System

Balance is a personal finance dashboard that turns raw transaction data into clear, actionable insights. Built with D3.js for custom visualizations and a Node.js backend for data aggregation.

Balance

The Problem

Most budgeting apps either oversimplify (pie charts that tell you nothing new) or overwhelm (spreadsheets with 40 columns). There's a gap for people who want meaningful insight into their spending patterns without needing a finance degree to interpret the data.

The Solution

A dashboard that automatically categorizes transactions and surfaces trends through purposeful visualizations. Instead of showing everything at once, it highlights what's changed -- unusual spending, recurring charges, and progress toward savings goals.

The Approach

I built custom D3.js visualizations rather than using a charting library, because the interactions needed to be specific: brushable time ranges, drill-down by category, and animated transitions between views. The backend aggregates transactions from a mock banking API, categorizes them using rule-based matching with a fallback ML classifier, and exposes a REST API consumed by the React frontend. MongoDB stores transactions and user preferences, chosen for its flexible schema when dealing with varied transaction formats.


Technology
React
TypeScript
D3.js
Node.js
MongoDB

Key Features
  1. 01Custom D3.js visualizations with brushable time ranges
  2. 02Automatic transaction categorization with manual override
  3. 03Monthly spending trend analysis with anomaly detection
  4. 04Savings goal tracker with projected completion dates
  5. 05Responsive design that adapts charts for mobile viewports
  6. 06Dark mode with accessible color palettes for all charts

Interested in working together?