Personal Finances

Personal Finances is the mobile-first PWA I built to turn my Firefly III data into a focused view of accounts, budgets, debts, recurring obligations, and transaction details. I keep the upstream credential on the server and the browser-facing experience deliberately narrow.

Problem

I wanted one fast place to understand my financial position and upcoming obligations without navigating several dense finance screens from my phone.

Constraints

I needed the Firefly access credential to remain server-side
I wanted the interface to stay useful on a phone and install as a PWA
I had to separate spending from transfers and card reserves so my summaries would not double count them
I kept the current product focused on my single-user workflow behind an authenticated session

Technical decisions

I built the application with Next.js, React, TypeScript, and Tailwind CSS
I use Firefly III as my source of truth and read it through server-side helpers
I route selected Firefly requests through an allowlisted server boundary and use a signed HTTP-only session cookie
I separated debts, recurring obligations, budgets, and transaction splits so each view keeps its accounting meaning

Evidence

I verified the current source with lint, the transaction-split regression test, and a production build
I built dedicated views for transactions, accounts, budgets, debts and credit, recurring obligations, categories, and savings goals
I keep live finance values, account names, and authenticated deployment details out of this case study

What I learned

Building this has made me treat financial UI as an interpretation problem: I need every number to have a clear source, every transfer to keep its accounting meaning, and every access boundary to stay explicit.