Paul Anburaj

Posted on Nov 4

Why I Built a 22-in-1 Privacy-First Dev Suite (And How it Processes Everything Client-Side)

#webdev #security #javascript #showdev

Every developer relies on quick, everyday web utilities - formatting a payload, decoding a JWT, inspecting a Cron expression, or checking an API status code.

However, there’s a subtle security risk many of us overlook: where is that data actually going?

When working with production logs, client payloads, environment configs, or auth tokens, pasting unencrypted strings into third-party conversion servers poses a real security risk. Most legacy converter sites either process logic server-side or are packed with intrusive tracking scripts and ad networks.

I spent the past few weeks building Tool Lockers—a suite of 22 lightweight developer tools designed around one strict rule: zero server data leakage.

🔒 The Architecture: Pure Client-Side Execution

Instead of sending payloads across HTTP to a backend container for processing, every single tool operates inside the browser's local execution thread using native Web APIs.

Here’s a quick peek under the hood at how key operations remain strictly in-memory:

1. Base64 & Text Encoding (Zero Backend Processing)

Instead of running node microservices server-side, string transformations rely directly on native browser engine features:

// Local UTF-8 safe Base64 handling inside local thread
const safeBase64Encode = (str) => {
  try {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => 
      String.fromCharCode('0x' + p1)
    ));
  } catch (err) {
    console.error("Encoding error:", err);
    return null;
  }
};

2. High-Performance JSON & Schema Validation

Formatting large payloads shouldn't freeze your page or send tokens over the network. We process validation and formatting in local memory:

const formatJSON = (rawStr, indent = 2) => {
  try {
    const parsed = JSON.parse(rawStr);
    return { data: JSON.stringify(parsed, null, indent), valid: true };
  } catch (err) {
    return { error: err.message, valid: false };
  }
};

🛠️ The Complete 22-in-1 Toolkit Overview

Here is the breakdown of all 22 utilities currently live on tool-lockers.com:

🔑 Security, Auth & Config

JWT Decoder: Inspect headers and payloads locally without exposing authorization tokens.
Environment File Parser: Safely parse .env key-value pairs without uploading environment variables.
Hash Generator: Generate cryptographic hashes (SHA-256, MD5) directly in-browser.

📄 Data Transformation & Parsing

JSON Formatter: Clean, format, and validate complex JSON strings.
JSON Schema Validator: Test JSON payloads against target schema rules.
CSV / JSON Converter: Seamless bi-directional data conversion for exports.
SQL Formatter: Format messy SQL queries into clean, readable statements.
Markdown Previewer: Real-time side-by-side Markdown rendering.

🌐 Web & API Testing

API Tester: Lightweight HTTP endpoint testing directly from your browser.
OpenAPI Viewer: Render and inspect Swagger/OpenAPI specifications.
HTTP Status Lookup: Quick reference for status codes, headers, and specifications.
URL Encoder / Decoder: Encode or decode query parameters safely.
HTML Entity Encoder / Decoder: Sanitize or unescape special HTML characters.

⚡ Developer Productivity & Formatting

Regex Tester: Real-time regular expression pattern matching and debugging.
Cron Expression Parser: Decode cron strings into plain English schedules.
Text Diff Checker: Compare text blocks and spot line-by-line code differences.
Base64 Converter: Encode/decode binary or string data instantly.
HTML / CSS / JavaScript Minifier: Compress production assets on the fly.
Text Case Converter: Transform strings between camelCase, snake_case, PascalCase, and kebab-case.
UUID Generator: Generate collision-resistant UUID v4 identifiers.
Timestamp Converter: Convert Unix epoch timestamps to ISO date strings.
Color Converter & Contrast Checker: Ensure accessibility standards (WCAG) and convert HEX/RGB/HSL.

🚀 Feedback & Community Suggestions

Building this suite was a great exercise in modern web API performance, lightweight UI state management, and asset optimization.

I’d love to get feedback from the DEV community:

Which of these 22 utilities do you open most frequently during daily coding?
Are there any edge-case features or missing tools you'd love to see added next?

Try out the site at tool-lockers.com and let me know your thoughts in the comments below!

DEV Community