How I Built 30+ Free Browser Tools with Next.js & Supabase

I recently added 30+ free, in-browser tools to this site — from a background remover to a regex tester. Here is how, and why it was a fun engineering problem.

The goal

Build a growing library of genuinely useful tools that are fast, free, and private — no sign-ups, no uploads, no server bills that scale with traffic. The trick: run everything client-side.

The stack

• Next.js (App Router) for routing and server-rendered, SEO-friendly pages.
• Supabase for the admin CMS — each tool is a row I can publish, feature, or hide.
• A code registry that maps each tool to a lazily-loaded React component, so heavy libraries only download when you open that tool.

Keeping it fast

Tools like the background remover (an on-device AI model) and the image-to-text OCR tool are large. By importing them only on demand, the rest of the site stays light.

Privacy by default

Because the work happens in your browser, your files never touch a server. That is not just a nice feature — it is the whole architecture.

SEO as a side effect

Every tool gets its own page, structured data, and helpful content, which turns the toolbox into an engine for discovery. You can read more about my approach on the about page.

Explore the result on the tools page — and if there is a tool you wish existed, tell me.