I built 21 small web tools in one app, and a few things finally clicked

This started as one annoying afternoon.

I needed to format a messy JSON blob. Quick thing. So I searched "json formatter online", clicked the first result, and got hit with a cookie banner, two ads, and a popup asking me to subscribe before I'd even pasted anything. I closed it, tried the next one, same story.

At some point I thought, you know what, I'll just build my own. How hard can a JSON formatter be.

That one tool turned into 21. It's a small app called UtilityBox now ( https://www.utilitybox.shop/ ) and it has the usual suspects: calculator, QR code generator, password generator, regex tester, EMI calculator, currency converter, a split-expense thing for trips, SQL formatter, and a bunch more. No account, no ads in your face, everything runs in your browser.

I'm not going to pretend it's some big engineering achievement. But building this many tiny tools back to back taught me a few things I wish I'd known on day one.

Most of these tools don't need a server at all

This sounds obvious now but it wasn't to me when I started. My first plan had a backend, an API, the whole thing.

Then I sat down and actually thought about it. A password generator that sends your password to my server? That's a worse product, not a better one. A JSON formatter doesn't need a database. A cron expression builder is just string logic.

So I made one rule: if it can run in the browser, it runs in the browser. Nothing leaves your machine.

Turns out this fixed three problems at once. The tools feel instant because there's no network call. Privacy is actually real instead of a line in a privacy policy. And hosting is basically free because it's just static files.

For the stuff that needs to remember things, like the quick notes tool and the budget tracker, localStorage does everything:

function saveNotes(notes) {
  localStorage.setItem("ub_notes", JSON.stringify(notes));
}

function loadNotes() {
  const raw = localStorage.getItem("ub_notes");
  return raw ? JSON.parse(raw) : [];
}

That's the entire "database" for half the app. No auth, no sync, no server bill.

My CSS was a disaster until I forced myself to stop

Honestly the first 4 or 5 tools each looked slightly different. Different button sizes, different spacing, slightly off colors. Stitched together it looked like 5 separate websites.

I stopped adding tools and spent a day pulling everything into shared variables, colors, spacing, font sizes, card style. Then I built a theme switcher on top (Corporate Light, Midnight, Emerald, a few others). Now every new tool just inherits all of it.

If I could give past me one piece of advice it would be this: build the system before you build the content. That one boring day saved me from rewriting CSS twenty separate times.

Each tool loads on its own

Early version loaded every tool's logic up front. Slow first load for no reason. Now it's set up like a workspace, you click a tool card and only that tool opens. The calculator doesn't care that the regex tester exists. Way lighter, and I can break one without breaking the rest.

The part nobody warns you about: nobody finds it

I genuinely believed if the tools were good, people would show up. They did not.

What actually helped:

• Writing real page titles and descriptions the way people actually search ("json formatter online", not "JSON Tool 3000")
• Making it fast on mobile, because that's where most people land
• Posts like this one, honestly. Getting a few links out there is half the battle and I kept treating it as optional.

A good tool that nobody can find is just a hobby. Took me a while to accept that.

Making it installable was suspiciously easy

Added a manifest and a service worker, and now it's a PWA. People can add it to their home screen and it opens like an app, even works offline for the tools that don't need the internet. Tiny bit of code for a feature that feels way bigger than it is.

Stuff I'd do differently

Write tests for anything that does math. An EMI calculator quietly returning a wrong number is the worst kind of bug, because nobody reports it, they just stop trusting you.

Ship sooner. I waited way too long trying to have "enough" tools before launching. Should've put up 5 good ones and gone from there.

That's it

If you want to poke at it, it's live and free here: https://www.utilitybox.shop/ . No signup, takes two seconds.

Real question for the comments though: what's a tool you keep needing but can never find a clean, ad-free version of? I'm picking the next few to build based on whatever you all say.