A few months ago I set out to build something simple: a collection of free, useful calculators that anyone could use without signing up or dealing with ads.
That turned into freefixo.com — 125+ calculators covering finance, health, legal, and travel. Here's the stack I used and what surprised me along the way.
The Stack
- React (Vite) — component-per-calculator approach kept things modular
- TanStack Router — file-based routing made adding new calculators trivially easy. Each new tool = one new file.
-
Cloudflare Pages — free tier, global CDN, deploys in ~30 seconds from a
git push. Zero config for a CSR SPA. - Tailwind CSS — rapid styling without a separate stylesheet per component
No backend. No database. Everything runs client-side.
Why TanStack Router over React Router?
I wanted type-safe routes from day one. TanStack Router's file-based routing + full TypeScript inference meant I never had a mistyped route string again. The tradeoff: slightly steeper learning curve for the search param handling, but worth it.
Cloudflare Pages for a CSR SPA
One gotcha: Cloudflare Pages serves a 404 for direct URL hits on client-side routes unless you add a _redirects file:
/* /index.html 200
That one line fixes SPA routing entirely. Took me embarrassingly long to figure out.
Scaling to 125+ calculators without losing my mind
The key was a consistent pattern: every calculator is a self-contained React component that receives no props from outside — all state is local. This meant I could build, test, and ship each one independently without touching anything else.
I also built a simple JSON config file that drives the homepage grid, search, and category filters. Adding a new calculator = add the component + one line in the config.
What I'd do differently
-
Add meta tags earlier. I retrofitted per-page
<title>and<description>tags after launch. Should've done this from calculator #1. - Build the search first. Users immediately want to search. I built it as an afterthought.
- Don't wait for perfection. I had 40 calculators ready weeks before I launched. Ship earlier, iterate publicly.
The result
Live at https://freefixo.com — no signup, no ads, just tools.
Would love feedback from the DEV community, especially on the tech choices. Anyone else using TanStack Router in production? How are you handling SEO for CSR apps on Cloudflare Pages?
Top comments (1)
How did you handle state management across so many calculators with TanStack Router? I'm following your work for more insights on scaling React apps.