惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

宝玉的分享
宝玉的分享
小众软件
小众软件
J
Java Code Geeks
I
InfoQ
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
腾讯CDC
L
LangChain Blog
博客园 - 司徒正美
量子位
Y
Y Combinator Blog
C
Check Point Blog
T
Tailwind CSS Blog
D
DataBreaches.Net
Blog — PlanetScale
Blog — PlanetScale
N
Netflix TechBlog - Medium
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
F
Fortinet All Blogs
云风的 BLOG
云风的 BLOG
A
About on SuperTechFans
B
Blog RSS Feed
酷 壳 – CoolShell
酷 壳 – CoolShell
大猫的无限游戏
大猫的无限游戏
V
V2EX
阮一峰的网络日志
阮一峰的网络日志

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
I built a free online toolbox with 260+ tools — here's th...
Anirudha Sonwane · 2026-06-26 · via DEV Community

Every small task used to mean a new tab. JSON formatter on one site, GST calculator on another, PDF merger somewhere that wanted my email before it would merge two pages. Ads everywhere, slow UIs, and that low-grade worry about uploading a payslip or invoice to a server I do not control. I got tired of juggling twenty bookmarks for work that should take thirty seconds — so I started building one place for all of it.

What ToolReign is

ToolReign is a free online toolbox: 260+ utilities across 15 categories, all running in your browser. Developer tools (JSON formatter, JWT decoder, API client), text utilities, SEO helpers, PDF and image tools, spreadsheets, and a finance section I built with India in mind — GST with CGST/SGST/IGST splits, EMI and SIP calculators, HRA exemption, gratuity, income tax estimates, and more.

The idea is straightforward: open a tool, do the work, leave. No signup wall, no file uploads to a backend, no account to manage. I am Anirudha Sonwane, a Senior Software Engineer at Giant Leap Systems in Pune. ToolReign is a side project I build around my day job — not a pitch deck, just something I wished existed.

The tech stack decisions

Next.js 14 App Router and static export

Each tool lives at its own route under src/app/{category}/{tool-slug}/. That maps cleanly to SEO: one URL, one search intent, one page of metadata. The site exports statically (output: 'export'), so production deployment is uploading an out/ folder to static hosting — no Node server to babysit.

The App Router made this scale. Add a page component, register the slug in tool-registry.json, and the sitemap, category hubs, and search index pick it up automatically. At 260+ tools, hand-maintaining URLs would have broken within a month.

100% client-side — the decision that shaped everything

This was the core architectural bet, and it is also the privacy story: your data never leaves the browser. Finance calculators are plain TypeScript math with useMemo. PDF merge and split use pdf-lib and pdfjs-dist in-tab. Images go through the Canvas API. Audio through the Web Audio API.

The engineering is harder than the marketing. A five-file PDF merge on a mid-range phone can freeze the main thread if you are careless. I had to think about memory when combining multi-megabyte documents, show progress where it matters, and avoid loading entire files when a page-range operation would do. Getting "merge these PDFs" to feel instant without a server was more interesting than wiring another REST endpoint.

The supporting cast

  • Tailwind CSS and next-themes for light, dark, and system mode — calculators get used late at night more than I expected.
  • Recharts for finance visualisations: EMI principal-vs-interest donuts, SIP growth curves.
  • DOMPurify anywhere user-adjacent HTML might render — small surface area, non-negotiable.
  • Security headers in next.config.js — CSP, HSTS, X-Frame-Options, a tight Permissions-Policy. Static sites still get scanned.
  • PWA via next-pwa so repeat visitors can install the toolbox like an app.

One scaling problem: metadata without drift

Early on I realised I could not hand-write Open Graph tags for hundreds of tools. Everything funnels through a shared helper:

// src/lib/seo.ts (simplified)
export function buildMetadata({ title, description, path }: {
  title: string
  description: string
  path: string
}): Metadata {
  const canonical = `${SITE.url}${path}`.replace(/([^/])$/, '$1/')
  return {
    title: { default: `${title} | ${SITE.name}`, template: `%s | ${SITE.name}` },
    description,
    keywords: extractKeywords(title, description),
    openGraph: { type: 'website', url: canonical, title, description, locale: 'en_IN' },
    twitter: { card: 'summary_large_image', title, description },
    alternates: { canonical },
  }
}

Each tool page calls buildMetadata() once. Canonical URLs, Twitter cards, and en_IN locale stay consistent. The sitemap reads from the same tool-registry.json, so search indexing and on-site navigation never disagree about what exists.

What surprised me

SEO is half the product. I assumed I would spend ninety percent of my time on calculator logic. Reality: JSON-LD per tool (WebApplication, FAQ schema, HowTo steps), breadcrumb markup, related-tool links, synonym keywords for long-tail queries, collapsible formula explainers on finance pages. Google's AI overviews love "how is EMI calculated?" — a tool site competes on clarity as much as code.

India-specific finance tools punched above their weight. Global EMI calculators are everywhere. Adding GST split logic, HRA exemption rules, and lakh/crore formatting with en-IN locale matched how people actually search here. Locale is not polish — it is a product decision.

Client-side PWAs are more capable than I assumed. Installable shell, offline-friendly caching, no account — it fits the "I just need to convert this PDF" use case better than a bloated web app.

What I would do differently: invest in a stricter component scaffold earlier — shared input toolbars, validation helpers, result placeholders, WhatsApp share buttons, formula explainers — before the finance silo grew past twenty calculators. Copy-paste refactors across similar tools cost more time than the shared abstractions saved later.

What's next

I am continuing down the long tail: more text and developer utilities, deeper finance coverage, and better mobile UX on canvas-heavy tools like handwriting generators. AdSense is on the horizon, but the constraint stays the same — do not interrupt the work surface.

If you try a tool and something feels off, I genuinely want to hear it. Comment here or use the contact form on the site. Broken on Safari? Confusing GST inclusive vs exclusive? Tell me.

Closing

ToolReign started as "one bookmark instead of twenty" and turned into a lesson in static SEO at scale, in-browser media processing, and building for a specific audience without locking everyone else out. It is a side project built after hours in Pune, alongside my work at Giant Leap Systems.

Happy to answer questions about the stack, static export tradeoffs, or how to structure a registry when your tool count stops being cute.

Check it out at toolreign.com — completely free, no account needed.