The latest articles on DEV Community by RSTrstech (@rstrstech). https://dev.to/rstrstech https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4008590%2F74be948c-b668-4237-8b4d-dd993f8b665e.png https://dev.to/rstrstech en RSTrstech Mon, 29 Jun 2026 17:25:17 +0000 https://dev.to/rstrstech/how-we-built-130-browser-based-tools-with-zero-server-uploads-52lh https://dev.to/rstrstech/how-we-built-130-browser-based-tools-with-zero-server-uploads-52lh <p>We recently launched <a href="https://filehubtools.com" rel="noopener noreferrer">FileHubTools</a>, a suite of 130+ free tools for resizing photos, compressing PDFs, and formatting documents — all running entirely in the browser.</p> <h2> The Problem </h2> <p>Indian government exam portals (SSC, UPSC, NEET) have strict photo upload requirements:</p> <ul> <li>Exact pixel dimensions (e.g., 100×120px for SSC)</li> <li>Strict file size limits (e.g., 20-50KB) </li> <li>Specific formats (JPG only)</li> </ul> <p>Students typically use random online tools that upload sensitive documents (Aadhaar, PAN) to unknown servers.</p> <h2> Our Approach </h2> <p>We built everything to run client-side:</p> <ul> <li> <strong>Image processing</strong>: Canvas API + quality binary search for exact KB targeting</li> <li> <strong>PDF manipulation</strong>: WebAssembly-compiled pdf-lib</li> <li> <strong>Zero network requests</strong>: Files never leave the device</li> </ul> <h2> How the KB Compression Works </h2> <p>Most tools just reduce quality until the file is small enough. We use a binary search algorithm:</p> <ol> <li>Set quality range: 0.1 to 1.0</li> <li>Compress at midpoint quality</li> <li>Check resulting size vs target KB</li> <li>Narrow range and repeat</li> <li>Stop when within 1KB of target</li> </ol> <p>This gives exact results like "49.8KB for a 50KB target" without destroying image quality.</p> <h2> Architecture </h2> <ul> <li> <strong>Framework</strong>: Next.js 15 with App Router</li> <li> <strong>Rendering</strong>: Server-rendered SEO content + client-side tool logic</li> <li> <strong>PDF Engine</strong>: pdf-lib compiled to WebAssembly</li> <li> <strong>Image Processing</strong>: Native Canvas API</li> <li> <strong>15 exam presets</strong>: Auto-configured dimensions &amp; size limits</li> </ul> <h2> Tools We Built </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Category</th> <th>Count</th> <th>Examples</th> </tr> </thead> <tbody> <tr> <td>Photo</td> <td>40+</td> <td>Resize to KB, crop, rotate, background change</td> </tr> <tr> <td>PDF</td> <td>15+</td> <td>Compress, merge, split, watermark, protect</td> </tr> <tr> <td>Signature</td> <td>6</td> <td>Draw, crop, clean BG, resize, enhance</td> </tr> <tr> <td>Calculators</td> <td>20+</td> <td>EMI, SIP, BMI, age calculator</td> </tr> <tr> <td>Converters</td> <td>15+</td> <td>HEIC→JPG, WebP→JPG, PDF→Image</td> </tr> </tbody> </table></div> <h2> Privacy First </h2> <p>Every tool runs 100% in the browser. We don't even have a file upload endpoint on our server. When a user processes their Aadhaar card photo, it never touches the network.</p> <p>Check it out at <a href="https://filehubtools.com" rel="noopener noreferrer">filehubtools.com</a> — feedback welcome!</p> ai programming javascript webdev