Tools

Overview 🔗

tools.sznm.dev is a unified web application that consolidates multiple browser-based utilities into a single, fast, privacy-focused platform. Instead of maintaining half a dozen separate micro-apps, everything lives in one codebase with shared UI primitives and a consistent user experience.

The app includes six tools:

• WA Link Helper — Generate WhatsApp links with pre-filled messages and international phone number support
• Zippy Image — Compress images client-side with no server upload
• UA Check — Inspect browser and device user agent information
• QR Code Generator — Create QR codes for URLs and vCard contacts
• JS Perf Comparator — Benchmark JavaScript snippets in a sandboxed QuickJS runtime
• Add to Calendar — Build Google Calendar event links with timezone handling

Why I Built This 🔗

I had several standalone utility apps (WA Link Helper, QRcodeGen, Add to Calendar Generator, etc.) that were each their own Next.js projects. Maintaining them separately meant duplicated dependencies, inconsistent UI, and fragmented deployment pipelines. When I wanted to add new tools, the overhead of spinning up another repo was discouraging.

Consolidating everything into a single Vite + React app with a modular package architecture solved this. Each tool’s core logic lives in its own workspace package, while the web UI shares a single design system. New tools can be added by creating a new package and a route file — no new repo, no new deployment pipeline.

Key Features 🔗

Unified Tool Directory 🔗

A clean web aoo with quick access to all six tools. No navigation complexity — find what you need and start using it immediately.

Privacy-First Architecture 🔗

All processing happens in the browser. Image compression, QR code generation, JavaScript benchmarking, and calendar link building — none of your data leaves your device. No analytics, no tracking, no server-side processing.

Modular Package Design 🔗

Each tool’s business logic is extracted into a separate workspace package (@toolbox/calendar-core, @toolbox/qrcode-core, etc.). This keeps the web app thin and makes the core logic testable and reusable.

Sandboxed JavaScript Benchmarking 🔗

The JS Perf Comparator runs code inside QuickJS via Web Workers, providing isolated execution for fair comparisons. No eval(), no global scope pollution — just controlled sandboxed runs with statistical aggregation.

PWA Support 🔗

Installable as a Progressive Web App for offline access to tools that don’t require network connectivity.

Build Notes 🔗

Monorepo with pnpm Workspaces 🔗

Built as a pnpm workspace monorepo with Turborepo for task orchestration. The apps/toolbox-web directory contains the Vite + React frontend, while packages/* houses each tool’s core logic and shared configuration.

Vite+ Toolchain 🔗

Uses Vite+ (a unified toolchain wrapping Vite, Vitest, Rolldown, and Oxlint) for development, building, and testing. This replaces separate tool installations with a single vp CLI.

Design System on React Aria Components 🔗

UI primitives are built on react-aria-components with Tailwind CSS 4 for styling. This provides accessible, keyboard-navigable components out of the box without heavy component library dependencies.

File-Based Routing 🔗

TanStack Router’s file-based routing organizes tools under the /_tools layout route. Adding a new tool is as simple as creating a new route file — the router handles code splitting automatically.

Current Status 🔗

Actively maintained. New tools are added as needs arise, and existing ones are refined based on usage. The consolidated architecture makes iteration significantly faster than the previous micro-app approach.