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

Yahia Hammadieh — Wed, 26 Aug 2026 16:22:18 +0000

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.

🌐 Explore the Workstation

Live Web Tools: https://compare-value.com
Android App: https://play.google.com/store/apps/details?id=com.valuecompare.value_compare

Try the in-browser SQLite studio or cURL generator, and let me know what utilities you would like to see next!

Social Link Vault AI (Mobile & Architecture Focus)

Yahia Hammadieh — Wed, 26 Aug 2026 16:16:55 +0000

Most bookmark and read-it-later tools suffer from the same pattern: bloated web dashboards, heavy cloud dependencies, and subscriptions for basic search features.

I wanted a mobile solution that prioritizes capture speed, offline performance, and complete local privacy. Here is how I designed and built Social Link Vault AI using Flutter and SQLite FTS5.

🏗️ Technical Architecture

The app is built on clean architecture principles, separating presentation, domain, and local data persistence:

Core Storage: Local SQLite database via sqflite.
Search Engine: Full-Text Search 5 (FTS5) virtual tables for real-time, zero-latency queries across thousands of items.
State Management: BLoC / Cubit for deterministic reactive UI states.
AI Layer: Google Gemini API (google_generative_ai) for automated summarization, topic tagging, and category routing.

// SQLite FTS5 Virtual Table Configuration
await db.execute('''
  CREATE VIRTUAL TABLE IF NOT EXISTS links_fts USING fts5(
    title,
    url,
    description,
    ai_summary,
    notes,
    tags,
    content='links',
    content_rowid='id'
  );
''');

⚡ Key Engineering Challenges

1. Zero-Friction Capture & URL Sanitization

When sharing a URL from social apps, links are often bloated with tracking parameters such as utm_*, fbclid, igshid, and ref.

The ingestion router automatically strips this query noise before writing the URL to the database:

String sanitizeUrl(String rawUrl) {
  final uri = Uri.parse(rawUrl);

  final cleanParams = Map<String, String>.from(uri.queryParameters)
    ..removeWhere(
      (key, _) =>
          key.startsWith('utm_') ||
          {'fbclid', 'igshid', 'si', 'ref'}.contains(key),
    );

  return uri.replace(queryParameters: cleanParams).toString();
}

2. Zero-Permission Storage Compliance

Instead of requesting broad Android media storage permissions such as READ_MEDIA_IMAGES, the app relies strictly on:

The native Android System Photo Picker.
The Storage Access Framework (SAF) for exports.

This keeps the app's permission footprint minimal while still supporting backup and media-related workflows.

3. Biometrics & On-Device Security

Sensitive text snippets, such as API keys, recovery phrases, and confidential notes, are encrypted and masked with •••••••••••• by default.

Unmasking requires biometric authentication, such as Fingerprint or PIN, backed by hardware keystores through flutter_secure_storage.

🚀 Try the Open Beta

The app is currently in Open Beta on Google Play:

👉 Download / Test on Google Play

I'd love feedback from fellow Flutter developers on the capture UX, local search indexing speed, and offline backup flow

DEV Community: Yahia Hammadieh