DEV Community

Anurag Kashyap
Anurag Kashyap

Posted on

I Built a Suite of 6 Financial Tools in My Browser Stack — Here's the Architecture

#architecture #showdev #sideprojects #webdev

I Built a Suite of 6 Financial Tools in My Browser Stack — Here's the Architecture

KashVector is live. Six free, client-side financial tools at kashvector.com. No login, no backend database, no data leaving your device. Everything runs in the browser.

I came back to coding after 15 years away — last time I wrote software was mobile apps before the iPhone. I used Claude Code as my development partner throughout. This is a writeup of the architecture, the key decisions, and the AI-assisted workflow I built around it.

The Tools

  • Stock Evaluator — scores any ticker against Buffett, Dalio, and Graham frameworks using live Yahoo Finance data
  • Budget Planner — six-step wizard with payslip parsing, waterfall spending chart, and savings benchmarks
  • Debt Recycling / Investment Property Calculator — models converting home loan debt to tax-deductible investment debt
  • Portfolio Health Check — concentration risk analysis across sector, region, and individual stocks
  • FIRE Calculator — Financial Independence number, time-to-retire, and Coast FIRE target
  • Mortgage Calculator — repayments, total interest, and offset/extra repayment impact modelling

Architecture: Deliberately Boring

The hosting stack is as simple as it gets:

GitHub → Cloudflare Pages (auto-deploy on push)
         ↑
         Cloudflare Worker (Yahoo Finance proxy only)
Enter fullscreen mode Exit fullscreen mode

Cloudflare Pages serves all static assets. Every git push triggers an automatic redeploy — no dashboard clicks, no manual steps.

One Cloudflare Worker handles the only piece that couldn't be client-side: Yahoo Finance data. Yahoo requires a valid cookie and crumb authentication token on every request — you can't call it directly from a browser due to CORS and the auth handshake. The Worker (~150 lines of JavaScript) manages that handshake, fetches the financial data, and returns clean JSON with the right CORS headers. Every other tool — Budget Planner, Debt Recycling, Portfolio Health Check, FIRE, Mortgage — fetches zero external data. They compute entirely from what you type in.

The One Architecture Decision That Paid Off Twice

During planning for the Stock Evaluator, we made a rule: all financial logic must be pure functions with no browser dependencies.

No document, no window, no DOM manipulation inside calculation code. Scoring functions take numbers in, return numbers out. At the time it felt like unnecessary discipline for a browser app.

It paid off in two ways:

1. Android in a weekend. Capacitor wraps a web app in a native Android WebView. Because the calculation logic had zero browser coupling, npx cap sync pulled the web code into the Android project cleanly. No Kotlin. No Java. No rewrite. The same JavaScript that runs in Chrome runs inside the native app. Android Studio handled the signing keystore and AAB generation — the actual build-and-sign cycle took an afternoon to learn and became routine quickly.

2. Consistent logic across the suite. As I added more tools, the same discipline applied. Every calculator's core logic is independently testable and portable.

The Budget Planner: A Different Beast

Five of the six tools are vanilla JavaScript — single HTML files or minimal multi-file setups. The Budget Planner is the outlier: React + Vite + Tailwind, a full build pipeline.

That complexity was earned. The tool has:

  • A six-step wizard with conditional branching based on income type (gross vs net, PAYG vs self-employed)
  • Australian superannuation calculated separately from take-home pay
  • A waterfall chart (Chart.js) showing exactly where money goes
  • Savings rate benchmarked against Australian demographic data by age bracket

The feature I'm most proud of is drag-and-drop payslip parsing. Drop a PDF, Excel, or CSV payslip onto the income step and it auto-fills your income and pay frequency. Everything runs in the browser using pdf-parse and xlsx — the file is never uploaded anywhere.

Getting parsing right required handling a surprising variety of real payslip formats:

  • Fields in reversed order ("$4,200.00 — TOTAL NET PAY")
  • Labels like "TOTAL NET PAY - Bank Credit" as a single string
  • Date ranges written as "1 March – 31 March" for frequency detection instead of numbers
  • Superannuation listed as a deduction rather than a separate line

Key Bugs Worth Documenting

Dividend double-counting (Debt Recycling Calculator). The total loan balance wasn't decreasing year-over-year — it stayed nearly flat. The bug: dividends were being added to the investment portfolio value and counted in the cash flow used to pay down debt. Money was being recycled twice. The fix was a one-line deletion once I understood the mechanic, but diagnosing it required tracing the cash flow model step by step.

Chart.js resize loop (Debt Recycling Calculator). Charts were resizing every time the user expanded the year-by-year breakdown table, because Chart.js was recalculating dimensions after each layout shift. Fix: pin the Y-axis width via afterFit callback and call chart.resize() explicitly on the table toggle event.

CSS grid blowout (Budget Planner). The expense breakdown table was blowing past its container on narrow screens. Root cause: CSS grid columns default to min-width: auto, which means a long text string expands the column indefinitely. Fix: min-width: 0 on the column definition.

The AI Workflow I Built Around Claude

Using Claude Code as a coding partner is table stakes now. The more interesting thing is the structured workflow I built around it.

Superpowers Plugin

A set of workflow skills that enforce a sequence before any feature starts:

brainstorm → plan → implement → verify
Enter fullscreen mode Exit fullscreen mode

The planning phase is where the pure-functions decision came from. Having a structured moment to think about architecture — before writing any code — consistently surfaces decisions that would be painful to retrofit later.

Peer-Review Sub-Agent (I Built This)

After finishing a feature, I trigger an isolated Claude agent that has zero context of how the code was written. It receives only the output — the files, the diff, the feature description. It reviews cold, like a senior engineer picking up someone else's PR.

It returns a prioritised issue list ranked by criticality:

  1. Breaking bugs
  2. Logic errors
  3. Edge cases
  4. Style / code quality

No anchoring to my decisions. No "we did it this way because." Just an independent read. It catches things I miss — usually edge cases around input validation and boundary conditions.

Lessons Learned File

After every project, Claude updates a running markdown file with things worth remembering. Before starting anything new, Claude reads it. This is how I stopped making the same debugging mistakes twice. The dividend double-counting bug went into that file. So did the Chart.js resize behaviour. Compounding knowledge across projects, not just within them.

What's Next

The stock evaluator Android app goes public once the Play Store closed testing completes (Google requires 12 testers for 14 consecutive days for new personal accounts before production access). More tools are planned — retirement modelling, property vs rent comparison.

All tools are free at kashvector.com. No sign-up, no tracking, no subscriptions.

Top comments (0)