I Built 22 Free Browser-Based Tools — Here's What I Learned published: true tags: webdev, nextjs, typescript, javascript

#showdev #sideprojects #tooling #webdev

Why I Built This

I kept the same dozen browser tabs pinned: a JSON formatter here, a regex tester there, a Base64 encoder on some ad-ridden site that tried to install a browser extension. One day I thought: what if I just built all of these myself under one roof?

The result is ToolboxHub — a free collection of 22 browser-based utilities organized into four categories.

The Tool List

Developer Tools (9)

JSON Formatter — validate, beautify, minify
Base64 Encoder/Decoder
URL Encoder/Decoder
UUID Generator (v1 and v4)
Hash Generator (MD5, SHA-1, SHA-256, SHA-512)
Regex Tester with real-time match highlighting
JWT Decoder (inspect header and payload)
CSS Minifier
Markdown Preview (live side-by-side editor)

Text Tools (2)

Word Counter (words, characters, sentences, reading time)
Lorem Ipsum Generator

Calculators (5)

Percentage Calculator
BMI Calculator
Tip Calculator with bill splitting
Age Calculator
Mortgage Calculator with amortization

Converters (6)

Unit Converter (length, weight, area, volume)
Temperature Converter (C/F/K)
Base Number Converter (binary, octal, decimal, hex)
Timestamp Converter (Unix epoch to date and back)
Color Converter (HEX, RGB, HSL, HSV)
Color Picker with palette generation

Tech Stack

Next.js 15 with the App Router and Server Components
TypeScript end-to-end
Tailwind CSS with a custom design token system using CSS variables
Vercel for deployment
Google AdSense for monetization (non-intrusive)

Key Decisions

Client-side only processing

Every tool runs entirely in the browser. No data is sent to any server. This was a deliberate choice: users trust tools more when they know their data stays local. It also means zero server costs for computation.

CSS variable theming

Instead of juggling Tailwind dark mode classes everywhere, I created a set of design tokens as CSS variables (--bg-card, --text-primary, --accent, etc.) that swap between light and dark values. Every component references these tokens. Adding a theme is just defining new variable values.

Single source of truth for tools

All 22 tools are defined in one TypeScript configuration file. Each entry has a name, slug, description, category, icon, and keywords. The homepage, navigation, sitemap, and search all read from this single array. Adding a new tool means adding one config object and one route.

SEO from day one

Each tool has its own route (/tools/json-formatter, /tools/regex-tester, etc.), unique meta tags, structured data (JSON-LD), and a canonical URL. The sitemap is generated automatically from the tools config.

Lessons Learned

Design tokens save enormous time. Defining your color system once in CSS variables and referencing them everywhere makes theming, dark mode, and design consistency almost automatic.
AdSense approval is its own project. It took longer to get approved than to build several of the tools. Having quality content, a privacy policy, an about page, and a contact page all helped.
People care about privacy in tools. Mentioning that everything is client-side and no data is collected resonates with users. It is a real differentiator.
Each tool page is a potential landing page. Someone searching for "free JSON formatter online" can land directly on that tool. Each tool route is optimized as its own entry point.
Keep the scope small and ship. 22 tools sounds like a lot, but most browser-based utilities are 200-400 lines of TypeScript. The hardest part was consistent UI, not the tool logic.