I built 31 developer tools in a weekend — here's what I learned

Every time I want to format a JSON blob, decode a JWT, or convert a Unix timestamp, I end up on a different random site — each covered in ads, popups, and "click here to install our extension" banners. Half of them upload my data to their server for no reason. So this weekend I built DevKits — a single site with 31 developer tools that all run 100% in the browser. No uploads, no accounts, no tracking. Right now, 31 tools across 9 categories: JSON: formatter, validator, JSONPath tester Converters: JSON ↔ TypeScript / Go / YAML / CSV / XML Encoding: Base64, URL, HTML entities, image → data URL Security: JWT decoder, MD5/SHA-256/SHA-512, password generator Text: regex tester, diff, case converter, word counter, Lorem Ipsum Web: color converter, user-agent parser Time: Unix timestamp, cron expression parser AI: OpenAI/Claude/Gemini token counter Formatting: SQL, XML, Markdown → HTML Live at devkits.vip. Open source? Not yet, but the whole project is deployable to Vercel in ~2 minutes. it-tools.tech or smallpdf or …? Fair question. Existing sites have some (or all) of these problems: Bloat. Loading 500KB of JS to format 200 characters of JSON. Ads. Layout shifts on every visit. Privacy. Some upload your input to a backend to "process" it — a red flag when your input is a JWT or an API response. Cluttered UX. "Please sign in to save your favorite tools." No thanks. DevKits does the opposite: Every First Load JS is under 130KB. Most pages are 105–115KB. Zero ads, zero cookies, zero cross-site tracking. Everything runs client-side. Even the MD5 implementation, the tokenizer, the cron parser — all pure functions in your browser. Every tool page is a single URL you can bookmark. Next.js 15 with the App Router TypeScript (strict mode) Tailwind CSS (with @tailwindcss/typography for the Markdown preview) Vercel for hosting I picked Next.js specifically because: SSG is a first-class citizen. All 41 pages are pre-rendered at build time. No cold starts. The metadata API is a joy. Per-page title, description, canonical, OpenGraph, and JSON-LD structured data — all just typed objects. File-based routing scales beautifully. Adding a new tool is: (1) one entry in tools.ts, (2) one page.tsx, (3) one client component. The sitemap, homepage listing, and "related tools" links update automatically. The whole site is driven by a single tools.ts config file: export interface Tool { slug: string; title: string; shortName: string; description: string; category: ToolCategory; keywords: string[]; faq: { question: string; answer: string }[]; } export const tools: Tool[] = [ { slug: "json-formatter", title: "JSON Formatter & Validator", shortName: "JSON Formatter", description: "Format, beautify, and validate JSON online. Free, fast, and 100% local...", category: "json", keywords: ["json formatter", "json beautifier", "json validator"], faq: [ { question: "Is my data uploaded?", answer: "No..." }, // ... ], }, // 30 more tools... ]; From this single array, four things are auto-generated: sitemap.xml — every tool becomes a URL entry Homepage listing — grouped by category Per-page metadata — title / description / canonical / OG / Twitter card JSON-LD structured data — SoftwareApplication + FAQPage schema for rich Google search results The "related tools" section on each page is also just tools.filter(t => t.slug !== current.slug).slice(0, 6). So internal linking is automatic. Adding a new tool takes about 20 minutes. The AI Token Counter (for GPT-4o / Claude / Gemini) was the trickiest. Real tokenization requires shipping ~1MB of tokenizer vocabulary. Way too heavy for a "