The 3 Studio
WorkPortfolioServicesInsights
BACK TO PORTFOLIO
Shopify Private Full-Stack App

D2C Operations Tool

ROLE: Full-Stack EngineerAutomation & Assets Optimization
PROJECT OVERVIEW

An automated image pipeline tool built to reduce store media bloat. The app hooks into Shopify product creation webhooks, pulls raw product images, compiles them into a batch worker pool, compresses them using Sharp, converts them to WebP, and updates the Shopify Media CDN resources.

THE CHALLENGE

Processing huge batches of high-resolution clothing images in-memory during peak upload times caused Node.js process crashes due to memory leaks.

THE SOLUTION

We implemented a queue-based stream-to-disk worker using a temporary directory, processing only 5 files simultaneously while garbage collecting after every processed batch.

DELIVERABLES & FEATURES
  • Webhook receiver capturing new product uploads automatically.
  • Sharp compression system reducing file sizes by up to 75% without visual loss.
  • Automatic conversion of PNG/JPEG files into modern WebP structures.
  • Background worker queue handling multi-threaded batch processes.
DEV HIGHLIGHT & CODE QUALITY

A backend service module that handles asynchronous file compression streams using the high-performance Sharp package.

Sharp WebP Compression Stream Workertypescript
import sharp from "sharp";
import fs from "fs";
import { promisify } from "util";
const pipeline = promisify(require("stream").pipeline);

interface ImageJob {
  inputPath: string;
  outputPath: string;
  quality: number;
}

export async function compressImageJob({ inputPath, outputPath, quality = 80 }: ImageJob): Promise<boolean> {
  try {
    // Read stream, transform to WebP, write to output stream
    const transformer = sharp()
      .webp({ quality, effort: 4 })
      .resize({ width: 2000, withoutEnlargement: true }); // Prevent stretching

    await pipeline(
      fs.createReadStream(inputPath),
      transformer,
      fs.createWriteStream(outputPath)
    );
    
    return true;
  } catch (error) {
    console.error("Compression processing failed:", error);
    return false;
  }
}
PERFORMANCE STATS
MOBILE PAGESPEED
97/100
DESKTOP PAGESPEED99/100
AVG. LOAD TIME0.9s
TECH STACK USED
ReactNext.jsNode.jsSharpShopify Admin APIPostgreSQL

READY TO SELL MORE?