I built 125+ free calculators with React + TanStack Router on Cloudflare Pages — here's what I learned

Arafat — Mon, 06 Jul 2026 08:33:43 +0000

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?

I Built a Free All-in-One Tool Website with 70+ Tools — Here's the Story

Arafat — Wed, 11 Mar 2026 05:50:32 +0000

Why I Built FixFlowHub

I was constantly frustrated switching between different websites
for simple tasks:

Compress an image → TinyPNG
Merge a PDF → SmallPDF (with watermark 😤)
Check grammar → Grammarly (paid)
Generate a QR code → some random sketchy site

Most tools either require sign-up, add watermarks, or lock
basic features behind a paywall.

So I decided to build one place where everything is actually free.

What I Built

FixFlowHub — a free all-in-one
online toolbox with 70+ tools across 5 categories.

🖼️ Image Tools (23 tools)

Compress images without quality loss
Convert between JPG, PNG, WebP, HEIC, AVIF, SVG, BMP, TIFF, ICO
Resize, crop, rotate, flip, watermark
Grayscale converter, image editor
Image to Base64 encoder

📄 PDF Tools (8 tools)

Merge multiple PDFs into one
Split PDF into pages
Compress PDF size
Convert PDF to image & image to PDF
Lock/unlock PDF with password
Reorder PDF pages

🤖 AI Text Tools (11 tools)

Resume builder
Cover letter generator
Grammar checker
Text rewriter & paraphraser
Email writer
LinkedIn profile generator
YouTube SEO generator
SEO tag generator
AI text summarizer
Business slogan generator
Product description generator

🧮 Calculator Tools (15 tools)

Loan EMI calculator
BMI calculator
Age calculator
Compound interest calculator
GPA calculator
Calorie calculator
Pregnancy due date calculator
Currency converter
Salary calculator
And more...

🛠️ Utility Tools (10 tools)

QR code generator
Password generator
JSON formatter & validator
Lorem ipsum generator
Color picker (HEX, RGB, HSL)
Time zone converter
Case converter
Text cleaner
HTML entities encoder
YouTube thumbnail downloader

Tech Stack

Frontend: React + Vite
Styling: Tailwind CSS
Image Processing: HTML5 Canvas API (client-side)
PDF Processing: PDF.js
AI Tools: Anthropic Claude API
Hosting: Lovable + Custom domain

Key Design Decisions

Privacy First: All image and PDF processing happens
in the browser. Files are never uploaded to any server.

No Sign-Up: I wanted zero friction. Open the tool,
use it, done.

No Watermarks: Every tool is fully functional for free.

What I Learned

Building is the easy part — getting traffic is hard 😅
SEO takes time — don't expect results overnight
People appreciate simplicity — no popups, no forced sign-ups, just working tools
Free tools attract users — but monetization needs thought

Try It Out

👉 fixflowhub.com

Would love your feedback! What tools should I add next?
Drop a comment below 👇

DEV Community: Arafat