Swiss Shop Studio

The Challenge

Swiss Shop Studio wanted to offer a highly personalized, custom merchandise shopping experience. The main challenge lay in creating a responsive, lag-free online editor where customers could import photos, add text, select custom fonts, and arrange elements dynamically inside a designated print zone. Traditional site builders fell short: they were slow on mobile devices, did not offer real-time text manipulation, and failed to generate high-resolution print-ready files suitable for professional textile output.

Our Strategic Approach

Code Peacock designed and engineered a fast, user-friendly designer tool integrated within a Next.js single-page application. We deployed Fabric.js as our primary visual canvas engine, providing custom rotation, resizing, and alignment controls inside standard print aspect ratios. By offloading calculations onto client-side JavaScript, we achieved instant rendering updates. For storage, we set up Supabase to save unfinished drafts directly to the cloud, giving customers the flexibility to complete orders across multiple sessions.

Key Technical Achievements

• Interactive Canvas Engine (Fabric.js)

  Built custom toolbar utilities for fonts, colors, stroke lines, and alignment. The system processes custom image uploads, performs light filtering, and generates print-ready high-density SVGs directly from the client browser.

• Draft Caching & Autosave

  Implemented an active state synchronization listener that autosaves canvas representations as JSON strings in Supabase Database. Customers can exit the tab and retrieve their designs in their personal design library.

• Seamless E-commerce & Checkout

  Combined Stripe API with custom database webhooks. Upon success, Stripe transmits transaction data and metadata (design ID), triggering a backend worker that bundles the SVG file and forwards it to print production automatically.