{"slug": "i-built-31-developer-tools-in-a-weekend-here-s-what-i-learned", "title": "I built 31 developer tools in a weekend — here's what I learned", "summary": "A developer built DevKits, a single site with 31 developer tools that run 100% in the browser with no uploads, accounts, or tracking. The site is built with Next.js 15, TypeScript, and Tailwind CSS, and uses a tool registry pattern to auto-generate sitemaps, metadata, and structured data. The project is deployable to Vercel in about two minutes.", "body_md": "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.\n\nSo 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.\n\n##\nWhat's in it\n\nRight now, 31 tools across 9 categories:\n\n-\n**JSON**: formatter, validator, JSONPath tester\n-\n**Converters**: JSON ↔ TypeScript / Go / YAML / CSV / XML\n-\n**Encoding**: Base64, URL, HTML entities, image → data URL\n-\n**Security**: JWT decoder, MD5/SHA-256/SHA-512, password generator\n-\n**Text**: regex tester, diff, case converter, word counter, Lorem Ipsum\n-\n**Web**: color converter, user-agent parser\n-\n**Time**: Unix timestamp, cron expression parser\n-\n**AI**: OpenAI/Claude/Gemini token counter\n-\n**Formatting**: SQL, XML, Markdown → HTML\n\nLive at [devkits.vip](https://devkits.vip). Open source? Not yet, but the whole project is deployable to Vercel in ~2 minutes.\n\n##\nWhy not just use `it-tools.tech`\n\nor `smallpdf`\n\nor …?\n\nFair question. Existing sites have some (or all) of these problems:\n\n-\n**Bloat.** Loading 500KB of JS to format 200 characters of JSON.\n-\n**Ads.** Layout shifts on every visit.\n-\n**Privacy.** Some upload your input to a backend to \"process\" it — a red flag when your input is a JWT or an API response.\n-\n**Cluttered UX.** \"Please sign in to save your favorite tools.\" No thanks.\n\nDevKits does the opposite:\n\n-\n**Every First Load JS is under 130KB.** Most pages are 105–115KB.\n**Zero ads, zero cookies, zero cross-site tracking.**\n-\n**Everything runs client-side.** Even the MD5 implementation, the tokenizer, the cron parser — all pure functions in your browser.\n**Every tool page is a single URL you can bookmark.**\n\n##\nTech stack\n\n-\n**Next.js 15** with the App Router\n-\n**TypeScript** (strict mode)\n-\n**Tailwind CSS** (with `@tailwindcss/typography`\n\nfor the Markdown preview)\n-\n**Vercel** for hosting\n\nI picked Next.js specifically because:\n\n-\n**SSG is a first-class citizen.** All 41 pages are pre-rendered at build time. No cold starts.\n-\n**The **`metadata`\n\nAPI is a joy. Per-page `title`\n\n, `description`\n\n, `canonical`\n\n, OpenGraph, and JSON-LD structured data — all just typed objects.\n-\n**File-based routing scales beautifully.** Adding a new tool is: (1) one entry in `tools.ts`\n\n, (2) one `page.tsx`\n\n, (3) one client component. The sitemap, homepage listing, and \"related tools\" links update automatically.\n\n##\nThe tool registry pattern (my favorite part)\n\nThe whole site is driven by a single `tools.ts`\n\nconfig file:\n\nFrom this single array, four things are auto-generated:\n\n-\n`sitemap.xml`\n\n— every tool becomes a URL entry\n-\n**Homepage listing** — grouped by category\n-\n**Per-page metadata** — title / description / canonical / OG / Twitter card\n-\n**JSON-LD structured data** — `SoftwareApplication`\n\n+ `FAQPage`\n\nschema for rich Google search results\n\nThe \"related tools\" section on each page is also just `tools.filter(t => t.slug !== current.slug).slice(0, 6)`\n\n. So internal linking is automatic.\n\nAdding a new tool takes about 20 minutes.\n\n##\nThe token counter surprised me\n\nThe AI Token Counter (for GPT-4o / Claude / Gemini) was the trickiest. Real tokenization requires shipping ~1MB of tokenizer vocabulary. Way too heavy for a \"", "url": "https://wpnews.pro/news/i-built-31-developer-tools-in-a-weekend-here-s-what-i-learned", "canonical_source": "https://dev.to/chenghui_wu_1613965a032b1/i-built-31-developer-tools-in-a-weekend-heres-what-i-learned-1f3h", "published_at": "2026-07-19 08:08:27+00:00", "updated_at": "2026-07-19 08:27:29.765635+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["DevKits", "Next.js", "TypeScript", "Tailwind CSS", "Vercel", "OpenAI", "Claude", "Gemini"], "alternates": {"html": "https://wpnews.pro/news/i-built-31-developer-tools-in-a-weekend-here-s-what-i-learned", "markdown": "https://wpnews.pro/news/i-built-31-developer-tools-in-a-weekend-here-s-what-i-learned.md", "text": "https://wpnews.pro/news/i-built-31-developer-tools-in-a-weekend-here-s-what-i-learned.txt", "jsonld": "https://wpnews.pro/news/i-built-31-developer-tools-in-a-weekend-here-s-what-i-learned.jsonld"}}