DEV Community

Bulk Barcode
Bulk Barcode

Posted on

How I Built a Client-Side Engine to Process 75,000 Excel Rows in the Browser (Without Crashing)

When building B2B SaaS tools, there is a dirty little secret in the industry: most "file processing" utilities are a data privacy nightmare.

I recently launched Bulk Barcode Generator, an enterprise tool that allows logistics managers to convert .xlsx or .csv shipping manifests into print-ready thermal barcode labels (Code-128, EAN-13, etc.).

When I analyzed my legacy competitors, I noticed they all did the same thing:

  1. User uploads a sensitive corporate spreadsheet.
  2. The file is sent via POST request to a remote server.
  3. The server runs a PHP/Python script to generate images.
  4. The server zips the files and sends them back.

The problem? Latency is terrible, server compute costs are high, and most importantly, corporate users hate uploading proprietary inventory data and customer tracking numbers to third-party servers.

So, I decided to build the entire engine 100% client-side. Here is how I approached it.

The Client-Side Architecture

To completely eliminate server uploads, the browser had to do all the heavy lifting. The workflow was broken into three distinct JS phases:

1. Parsing the Excel File (Locally)
Instead of relying on backend parsers, I utilized the browser's native File API combined with lightweight client-side parsing libraries (like SheetJS). The user drops their file, and the browser reads the buffer directly from their local RAM.


javascript
// A simplified look at local file reading
const handleFileUpload = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        // Process the workbook locally without server requests
        const workbook = XLSX.read(data, {type: 'array'});
        // Extract SKUs and Quantities...
    };
    reader.readAsArrayBuffer(file);
};
Enter fullscreen mode Exit fullscreen mode

Top comments (0)