How I built a free financial planner as a single HTML file — no React, no backend, no build process
I've been working on Keyfinio (keyfinio.com) — a free financial planning dashboard for professionals and families making big money decisions: buying a home, managing RSU compensation, tracking savings goals, and planning for childcare costs.
The whole app is a single HTML file. No React, no Vue, no Webpack, no npm install. Just vanilla JS, Firebase Auth + Firestore for persistence, and Chart.js for visualizations. The entire codebase is one file you can open in a text editor and read top to bottom.
What used to take a team months, I was able to ship solo in weeks — AI as a coding partner genuinely changes what's possible for a non-traditional founder. Happy to talk about that workflow if anyone's curious.
Why I built it
I kept running into the same problem — spreadsheets weren't cutting it for modeling "can I actually afford this house given my RSUs, childcare costs, and savings goals all at once?" Every calculator I found solved one piece in isolation. I wanted something that showed the full picture.
What it does
- 🏠 Mortgage affordability with PMI, property tax, HOA
- 📊 Buy vs. Rent comparison with equity growth over time
- 💰 RSU vesting tracker and tax estimator
- 👶 Childcare cost modeling
- 🎓 529 education fund progress tracker
- 📈 Wealth projection chart (401k, brokerage, home equity, 529)
- 🏘️ Additional owned properties with rental income tracking
- 📄 PDF export of your full financial plan
- 💾 Everything saves automatically to Firestore — no re-entering data every visit
Standalone tool — no login required
I also built a separate Buy vs. Rent calculator that requires zero login:
👉 keyfinio.com/buy-vs-rent
Just enter your numbers and instantly see which option saves you more money. Drag a slider to explore how the math shifts over any timeframe from 1 to 15 years. The "true cost" framing shows total spent minus equity you'd own — so the numbers are always positive and directly comparable.
The technical decision — why single file?
I went single-file partly as a constraint to keep things simple, partly because Firebase Hosting deploys are then trivially fast, and partly as an experiment to see how far vanilla JS can go before it becomes unmanageable.
Answer so far: pretty far. The app is around 8,000 lines now and still manageable, though the lack of component structure is starting to show. I haven't hit a hard wall yet but I can see it from here.
The upside: zero build tooling, zero dependency hell, zero "npm audit fix" rabbit holes. The downside: no reusable components, global state everywhere, and find-and-replace is doing a lot of heavy lifting.
Where things stand
✅ Live at keyfinio.com — fully deployed on Firebase Hosting with custom domain
✅ Google Search Console set up, sitemap submitted, indexing requested
✅ Affiliate applications submitted (LendingTree via CJ Affiliate, Credible, Clever Real Estate)
✅ Standalone Buy vs. Rent calculator live at keyfinio.com/buy-vs-rent
✅ Launched on Product Hunt today — 6 upvotes, 3 genuine comments, 14 followers on day one
✅ 4 real non-founder users signed up independently
🔄 Traffic — this is my current bottleneck, actively working on it
🔄 SEO — targeting "buy vs rent calculator," "RSU vesting calculator," "mortgage affordability calculator"
What I'm figuring out
- How to drive traffic to a brand new domain with zero authority
- Whether single-file architecture will become a real performance problem as features grow
- Whether free + affiliate monetization is the right model or if a freemium tier makes more sense long term
Would love to hear from you
- If you've built finance tools — what drove your first real traffic?
- If you've hit the single-file JS wall — what made you switch to a framework?
- If you're a professional navigating home buying + RSUs + childcare — try it and tell me what's missing: keyfinio.com
- And if you want to try the Buy vs. Rent calculator with zero signup: keyfinio.com/buy-vs-rent
Happy to answer any questions about the build, the architecture, or the AI-assisted workflow.
The interesting part to me isn't that you've combined multiple financial tools.
It's that most major financial decisions aren't made in isolation. Buying a house changes retirement planning, RSUs affect affordability, childcare changes cash flow. If Keyfinio becomes the place where those decisions are evaluated together instead of separately, that's a much stronger story than adding more calculators over time.
That's exactly the framing I kept coming back to while building it. The "can I afford this house" question sounds simple but it's actually five questions at once — what does it do to my monthly cash flow, my retirement timeline, my childcare budget, my RSU liquidity, and my emergency fund?
Most tools answer one of those. The insight behind Keyfinio is that the answer to any one of them changes depending on the answers to all the others. A $1.2M house is affordable if your RSUs vest $200k next year and unaffordable if they don't.
That interconnectedness is what I'm trying to make visible — not just "here's your mortgage payment" but "here's what this decision costs you across your whole financial picture."
Thanks for articulating it more clearly than I did in the post itself — might steal that framing!
Glad it resonated.
Your reply made me think there's one strategic decision sitting underneath that interconnected model which becomes much more significant as Keyfinio grows, but I don't think I can explain the reasoning properly in a thread without oversimplifying it.
If you're interested, what's the best email to reach you on?
Really appreciate that — genuinely curious what you're seeing.
You can reach me at [email protected]. Looking forward to hearing your thinking.
Just sent it over.