Personal Finance Dashboard

TLDR

Built a personal finance dashboard from scratch using HTML, CSS, and JavaScript to track income, spending categories, savings rate, and net worth over time. Everything lives in one clean, interactive view.

Context

I wanted a single place to see the full picture of my finances without juggling multiple apps or spreadsheets. Most budgeting tools either lock key features behind a paywall or present data in ways that don't match how I actually think about money. Building my own meant I could design it exactly around my own financial categories, goals, and visual preferences.

I also saw it as an opportunity to get comfortable building interactive data visualizations with vanilla JavaScript. No chart library, just math and SVG.

Process

I started by mapping out the key metrics I actually care about: net worth, monthly income vs. spending, savings rate, and a breakdown of where money goes each month. I built the layout in HTML and CSS first, establishing a card based structure that felt clean and readable at a glance.

For the charts, I wrote custom SVG bar and line chart renderers in JavaScript, driven by a simple data object I update manually. This kept dependencies at zero and the code easy to read. I used Claude Code extensively throughout to accelerate implementation, debug edge cases, and iterate on the visual design quickly.

The dashboard includes a spending by category bar chart, a net worth trend line over six months, and stat cards for top level figures. All styling follows a dark, monospace terminal aesthetic that I enjoy working in.

Outcome

The dashboard gives me an honest, at a glance view of my finances that no off the shelf product quite matched. The process also deepened my comfort with building data driven UIs from scratch, and showed me how useful AI assisted coding tools like Claude Code can be for solo projects where speed and iteration matter most.