DevToolbox
Build in Public

I built 22 developer tools in 3 days. Here's what I learned.

A real account of going from zero to a fully deployed, SEO-optimized, 22-tool site in one weekend — using AI-assisted coding.

22
tools
3
days
0
backend deps
100%
browser-based

The problem

I kept a browser tab graveyard of random utility sites. One for JSON formatting. Another for Base64. A third for regex testing. Every single one was a different level of bad — cluttered with ads, slow to load, or requiring a signup just to paste some text.

The good ones (transform.tools, for instance) were too opinionated. The comprehensive ones were ugly. None of them felt like they were built by someone who actually uses these tools daily.

I wanted something specific: a clean, fast, privacy-first toolbox where everything runs in the browser. No data leaving your machine. No accounts. No friction between you and the output.

The experiment

The obvious path was to spend a few weekends building it tool by tool. But I wanted to test a different hypothesis: how fast can you ship a real product with AI-assisted coding?

Not vibe-coded prototypes. An actual deployed site with proper SEO metadata, a coherent design system, and 20+ working tools. I used Claude Code as the primary coding partner and set a hard constraint: one weekend, starting from an empty directory.

The goal wasn't to prove AI can replace developers. It was to understand what the new ceiling looks like when a developer uses AI as a force multiplier instead of a shortcut.

How the three days actually went

1
Day 1

Foundation + first 6 tools

The first day was about establishing the right architecture. Next.js App Router, Tailwind CSS, and a tool registry pattern that made every new tool a self-contained page with its own SEO metadata. By end of day, six tools were live and the pattern was clear: each tool is an island — no shared state, no backend, everything computed in the browser.

JSON FormatterBase64 EncoderURL EncoderUUID GeneratorMarkdown PreviewHash Generator
2
Day 2

Scale to 17 tools + SEO infrastructure

With the pattern proven, day two was about velocity. Eleven more tools shipped. But the bigger work was the SEO layer — sitemap.xml, robots.txt, JSON-LD structured data, FAQ sections on high-traffic tool pages. The insight: most developer tool sites have mediocre on-page SEO. Beating them doesn't require tricks, just doing the fundamentals properly.

Regex TesterTimestamp ConverterColor ConverterJWT DecoderDiff CheckerPassword GeneratorCase ConverterLorem IpsumSlug GeneratorCron ParserHTML to Markdown
3
Day 3

22 tools + design system + deploy

The final five tools filled in conversion gaps that competitors handle poorly. Then came the design system pass — a deliberate choice of burnt orange (#ea580c) as the primary color, Satoshi as the display font, JetBrains Mono for UI accents. The goal was to make the site 'smell like code' without looking like every other dev tool clone. Deployed to Vercel. Done.

CSV to JSONYAML to JSONSQL FormatterHTML EntitiesText to Binary

What surprised me

The hardest part wasn't coding. It was making decisions.

Which tools to build first? What color scheme signals "serious dev tool" without looking corporate? How to structure an FAQ section that helps SEO without feeling fake? When does a tool need a dual-pane layout versus a single column?

AI handles implementation extremely well. It does not have taste. It does not know that burnt orange is unoccupied territory in the dev tools color space, or that JetBrains Mono in UI labels makes a site feel "code-native" in a way that Inter doesn't. Those calls are still entirely human.

The workflow that worked: make a decision, express it with precision, let AI execute, review the output, iterate. The bottleneck shifted from "can I write this code?" to "can I think clearly enough to direct it well?"

What's next

The baseline is done. Now it's about depth over breadth.

  • Cmd+K command palette — keyboard-first navigation across all tools
  • PWA offline support — the site should work with zero connectivity
  • JSON tree view — visual explorer instead of a flat text output
  • Regex visual debugger — match explanation with step-by-step group analysis
  • Community feedback — what tools are people actually searching for that aren't here?

Try it yourself

Every tool runs in your browser. No signup, no tracking, no data leaves your machine.

If this experiment is useful to you — building your own tools, exploring AI-assisted development, or just curious about the indie approach — share it.