Engineering a 100% Client-Side, $0 Server-Cost Document

`

description: "How I built PasteDocs using React, Zustand, and background Web Workers to auto-resize government application documents locally with absolute privacy."
tags: react, typescript, webdev, privacy

cover_image: https://unsplash.com

PasteDocs 📄✨

The Zero-Cost, Absolute Privacy Client-Side Document Formatter

---

⚡ Instant Sizing Hub (Click to Open Tool)

Aapko jis format ya exam ke liye document resize karna hai, niche diye gaye direct layout links par click karein:

📸 Competitive Exams	🪪 Government ID Docs	🛂 Global Visa Photos
🔥 NEET Photo Formatter	🪪 Aadhaar Card Specs	🇺🇸 US Visa Photo (600x600)
🚀 SSC CGL Photo Adjuster	💳 PAN Card Standard	🇪🇺 Schengen Visa Standard
✍️ Signature Resize (< 20KB)	🎓 Marksheet Image to PDF	🇮🇳 Passport India Compliant

---

💎 Core Highlights That Drive 100% CTR & Trust

• Absolute Privacy Sandbox: Aapka sensitive document (Aadhaar, PAN, Photo) kabhi kisi server par upload nahi hota. Saari processing asynchronous background Web Workers (docWorker.ts) ke zariye aapke local device browser RAM mein hoti hai.
• Smart NLP Requirement Parser: Kisi bhi government notification text ko direct copy-paste kijiye. Hamara engine pixel bounds, dimensions, aur target maximum KB constraints (jaise Compress to 50KB/20KB) automatic detect kar leta hai.
• Modern OS Optimization: Low-end Android devices par smooth 60fps performance chalti hai, aur iPhone users ke liye in-browser HEIC to JPG local conversion supported hai.

👉 Start Formatting Now — 100% Free & Secure

Every year, millions of candidates across India apply for competitive exams like NEET, UPSC, SSC, or state-level portals like OJAS and GPSC. If you have ever filled out one of these government forms, you know the ultimate formatting nightmare:

"Upload passport photo: Must be exactly 3.5cm x 4.5cm, under 50KB, with a white background, and saved at a specific DPI/resolution."

To comply with these unforgiving constraints, desperate applicants blindly upload highly sensitive personal telemetry—Aadhaar cards, PAN cards, Passports, High School Marksheets, and Signatures—to sketchy, ad-ridden online web resizers.

What they don't realize is that most of these free utilities act as server-side collection nodes. Your files are stored on remote server databases, leaving you highly vulnerable to identity theft, tracking cookies, and severe database leaks.

As an IT student and indie software builder based in Gujarat, India, I wanted to eliminate this identity exposure entirely. So I built PasteDocs (pastedocs.vercel.app)—a privacy-first, zero-friction document utility suite engineered with React, Vite, TypeScript, and Web Workers that performs all resizing, compression, and format conversions 100% locally inside the browser's sandbox.

Here is the deep-dive engineering breakdown of how I designed this zero-overhead frontend system that costs exactly $0 in server bills.

---

🏛️ The Core Philosophy: Local Sandboxing over Cloud Compute

The absolute architectural rule of PasteDocs is simple: Zero Data Exfiltration. Files must never touch a backend server.

Instead of paying for expensive backend GPU cores or cloud databases to process images via Node.js or Python, PasteDocs shifts the entire computing workload directly onto the user's client-side device CPU using standard web assembly and browser canvas layers.

---

🚀 Deep-Dive into the Technical Architecture

1. Multithreaded Background Compression (docWorker.ts)

Running recursive scaling math, pixel rendering, and image encoder loops over high-resolution mobile camera assets will immediately choke the browser's main UI thread, dropping the layout frames to 0 and freezing the app.

To maintain a crisp 60fps experience even on low-end Android mobile devices with rural coverage, PasteDocs offloads heavy compression mathematics to asynchronous background Web Workers (docWorker.ts).

Here is a look at how the worker thread loops through quality factors recursively to hit strict maximum constraints (like Compress to 50KB or 20KB) without relying on network speed:

`typescript
// src/workers/docWorker.ts
// Offloading direct-memory calculations from the main UI thread

self.onmessage = async (e: MessageEvent) => {
const { fileBlob, targetKB, targetWidth, targetHeight } = e.data;

try {
let quality = 0.95;
let compressedBlob: Blob | null = null;

// Recursive compression loop modulating rendering quality vectors inside local RAM
do {
  compressedBlob = await scaleAndEncodeCanvas(fileBlob, targetWidth, targetHeight, quality);
  quality -= 0.05;
} while (compressedBlob && compressedBlob.size / 1024 > targetKB && quality > 0.1);

// Posting processed data array back to the React UI thread instantly
self.postMessage({ success: true, processedBlob });

} catch (error) {
self.postMessage({ success: false, error: (error as Error).message });
}
};

async function scaleAndEncodeCanvas(blob: Blob, w: number, h: number, q: number): Promise {
// Direct pixel processing using OffscreenCanvas executing natively
// Without any backend or database compute costs.
return blob;
}
`

2. Centralized State Machine with Memory Protection

Handling large files locally can easily deplete mobile system RAM, causing the browser tab to crash. PasteDocs utilizes an unopinionated, ultra-fast Zustand store (useDocStore.ts) instead of heavy React Context layers to implement strict memory safeguards.

To guarantee high stability, the store instantly rejects files larger than 50MB and aggressively cleans up temporary binary memory using target object revocations:

`typescript
// src/store/useDocStore.ts
import { create } from 'zustand';

interface DocState {
files: File[];
isProcessing: boolean;
maxSizeLimit: number; // 50MB strict ceiling
addFilesToQueue: (incomingFiles: File[]) => void;
clearObjectMemory: (url: string) => void;
}

export const useDocStore = create((set, get) => ({
files: [],
isProcessing: false,
maxSizeLimit: 50 * 1024 * 1024,

addFilesToQueue: (incomingFiles) => {
const validFiles = incomingFiles.filter(file => {
if (file.size > get().maxSizeLimit) {
// Stateful non-blocking visual feedback overlay replaces thread-freezing window.alert()
return false;
}
return true;
});
set((state) => ({ files: [...state.files, ...validFiles] }));
},

clearObjectMemory: (url) => {
// Proactive handle cleanup preventing memory leaks during batch conversions
URL.revokeObjectURL(url);
}
}));
`

3. Dynamic NLP Requirement Parser

A key feature for non-technical users is PasteDocs’ ability to natively read government guidelines. Powered by a Dynamic RegExp parsing engine, applicants can copy text blocks directly from official notification PDFs (supporting structural parsing from English, Hindi, and Gujarati government portals).

The tool breaks down strings to detect:

• Format constraints (JPEG, PNG, PDF)
• Maximum KB weights (Max KB: 20, 50KB)
• Exact dimension targets (DPI, Resolution)
• Dynamic edits (e.g., executing structural scripts to Add White Background)

4. Dynamic Routing Engine for Seamless SEO

To make 100% client-side React code discoverable by Google and AI indexers, PasteDocs maps over 130+ configurations across static structures (toolData.ts, examData.ts, visaData.ts).

Using React Router Dom v6, these parameters are integrated into dynamic programmatic SEO routes (/exam/:slug, /tool/:slug, /visa/:slug). This feeds real-time spec criteria like DPI and aspect configurations into the processing core while exposing clean landing pages for web crawlers.

---

🛠️ Feature Catalog Breakdown

PasteDocs has scaled past simple image optimization into a massive, production-ready Document Utility Suite:

1. Image Utilities: Compress to 50KB/20KB, Passport & Stamp sizing, Signature rescaling, and forced White Background insertion.
2. Advanced Conversion Engine: Heavy browser-based iOS decoding for HEIC to JPG, standard JPG to PNG, and lossless Image to PDF packaging.
3. Pre-configured Target Catalogs: Integrated matching sets for NEET Photo, SSC CGL, IBPS PO, US Visa, Schengen Visa, and Passport India formats.
4. UI Refinements: Entirely thread-safe UX that drops synchronous legacy window.alert() interfaces in favor of Framer Motion non-blocking overlays and micro-interactions.

---

💡 Key Takeaway for Developers

Building PasteDocs proved that you do not need expensive cloud hosting, continuous server operations, or intensive API backends to launch scalable software utilities.

By taking full advantage of modern browser engines, off-screen canvas buffers, background threads, and solid front-end state management, indie developers can craft tools that prioritize absolute user security for a hosting cost of exactly zero.

Try it out yourself: pastedocs.vercel.app

Let me know your thoughts in the comments below! Have you experimented with Web Workers or local Canvas processing layers in your projects?
`