Why I Built 89+ Client-Side Developer Tools with Astro and Vanilla JS

How many times have you needed to format a JSON payload, test a regex string, inspect a JWT, or run a quick SQL query, only to land on an ad-heavy website that sends your data to a backend server?

I built Compare Value Web — a suite of 89+ developer sandboxes, sysadmin generators, and price calculators running 100% in-memory in your browser.

🌐 https://compare-value.com

🛠️ What's Inside the Workstation?

Interactive Sandboxes: In-browser SQLite query studio, MongoDB document runner, WebSocket tester, and REST API playground.
DevOps & SysAdmin: Multi-stage Dockerfile builders, Nginx reverse proxy generators, systemd unit generators, and IPv4 subnet calculators.
Code Generation: cURL-to-multilanguage converters, JSON to TypeScript/Zod/Pydantic/Go structs, and SVG-to-JSX optimizers.
Global Command Palette: Ctrl + K provides instant keyboard navigation across all 89+ tools, with starred tools persisted locally.

⚡ Performance & Privacy Architecture

┌─────────────────────────────────────────────────────────┐
│              COMPARE VALUE WEB ARCHITECTURE              │
│                                                         │
│  [Astro 5 SSG] ──► [Cloudflare Edge CDN] ──► [Browser] │
│                                                   │     │
│                       ┌───────────────────────────┴──┐  │
│                       ▼                              ▼  │
│              [Vanilla JS Engines]            [localStorage]
│              • WebAssembly SQLite            • Pinned Tools
│              • In-Memory Parsers             • Recent Tray
└─────────────────────────────────────────────────────────┘

1. Zero Server Overhead

The static site is generated with Astro and served through Cloudflare Pages edge infrastructure.

2. Client-Side Privacy

Tools execute within Web Workers or directly in browser memory.

Sensitive data such as API tokens, API payloads, and SQL queries are processed locally and are not sent to a backend server.

3. No Heavy Framework Overhead

The tools are built with lightweight, modular Vanilla JavaScript, keeping the client-side footprint small without unnecessary framework overhead.

There is also no tracking analytics.

📱 The Mobile Companion

Alongside the web platform, I built an offline-first Flutter companion app for physical price normalization and supermarket budget management.

Key features include:

Real-Time Cost-Per-Unit: Compare prices across volume, mass, and unit counts.
On-Device OCR: Uses Google ML Kit to scan supermarket shelf price tags directly with the camera.