Back to projects

SuperDTF

A digital platform for a DTF (Direct to Film) printing business, managing orders, designs, and customer interactions end-to-end.

Shopify GraphQL APILaravelNode.jsReactRemixMySQLS3 / CloudinaryWebhooks

Overview

SuperDTF is a DTF (Direct To Film) printing business platform where customers can upload artwork, configure print settings, and place fully customized print orders directly through a Shopify store.

I worked on EZ-Uploader, a Shopify application built from scratch that powers both the customer-facing upload experience and the merchant admin system.

The app is currently in production.


Project Snapshot

ScopeDetails
TypeShopify Custom App
Duration~4 Months
ArchitectureAdmin Panel + Storefront Widget
Core ProblemDynamic custom print orders
IntegrationsShopify GraphQL APIs
StorageS3 / Cloudinary

Key Responsibilities

  • Built the Shopify application from scratch
  • Developed merchant admin panel for configuration and pricing control
  • Built storefront widget embedded inside Shopify product pages
  • Implemented full custom order workflow for print products
  • Integrated Shopify GraphQL APIs for product, cart, and order management
  • Designed high-resolution image upload and validation pipeline
  • Worked on production deployment and client onboarding setup

System Flow

Customer Upload

Artwork Validation

Print Configuration (size, DPI, scaling, etc.)

Dynamic Price Calculation

Hidden Shopify Product Creation (GraphQL)

Add to Cart

Checkout via Shopify

Order sent to production system


Interesting Engineering Problem

Shopify assumes products are predefined before checkout.

In this system, every order is unique and generated at runtime based on user-uploaded artwork and print configurations.

Approach

Instead of static products:

  • Generate a hidden product dynamically via Shopify GraphQL API
  • Attach print configuration metadata to the product
  • Immediately inject it into the cart
  • Let Shopify handle checkout normally

This allowed fully custom print orders to work within Shopify’s constraints without modifying the core checkout system.


File Upload Pipeline

  • High-resolution image upload support for print production
  • Validation for file type, resolution, and print suitability
  • Cloud storage integration using S3 / Cloudinary
  • Secure handling of large artwork files

Architecture Notes

  • Frontend widget embedded inside Shopify stores
  • Separate admin panel for merchant configuration
  • Node.js backend handling Shopify API communication
  • Decoupled upload and order processing flow for scalability

Stack

  • React
  • Node.js
  • Express
  • Remix
  • Shopify GraphQL API
  • AWS S3
  • Cloudinary

Outcome

The system replaced a manual order-taking process with an automated Shopify-native workflow, enabling customers to place fully customized print orders directly from the storefront while keeping fulfillment aligned with internal production systems.