Inside Merch Factory | Technical Architecture

Helping creators sell merchandise sounds straightforward until you account for customization, store integrations, and fulfillment logic. Building Merch Factory taught me that the real challenge isn't just the UI—it's the systems architecture that keeps everything running at scale.

In this article, I’ll pull back the curtain on the technical decisions behind Merch Factory 3.0, from our choice of UI libraries to the operational logic that handles thousands of orders every day.

The Architectural Vision

When we set out to build the 3.0 iteration, we had several core requirements:

Multi-Platform Syncing: Creators needed to manage their Merch Factory products from within their own stores (Wix, Shopify, WooCommerce).
High-Fidelity Designer: A design tool that felt professional and exported print-ready assets at 300 DPI.
Operational Visibility: Internal tools that allowed our operators to track every single item from the print queue to the delivery truck.

1. UI Architecture with MUI v7

Unlike standard Tailwind-only setups, Merch Factory uses MUI (Material UI) v7. This was a deliberate choice for several reasons.

Why MUI over Shadcn or Custom Tailwind?

While I love Tailwind CSS for its utility-first speed, a complex dashboard requires a level of component consistency and state management that can be difficult to maintain with pure utility classes. MUI provides a mature, theme-driven ecosystem that is built for operational tools.

Enterprise Data Management: Our internal dashboard uses @mui/x-data-grid extensively. This allows our team to filter through thousands of orders, sort by delivery status, and handle bulk actions without writing complex table logic from scratch.
Consistent DX: MUI’s styling engine, powered by Emotion, allows us to pass a unified theme through the entire application. This means a merchant’s brand colors can be reflected in their dashboard with a single configuration change.
Accessibility: When you're building tools that people use for 8 hours a day, accessibility and keyboard navigation are not optional. MUI handles this out of the box, letting us focus on the business logic.

2. The Designer: Konva.js and Canvas Performance

The heart of Merch Factory is the product designer. This is where creators bring their vision to life. For a long time, we used a DOM-based approach for our early prototypes, but we quickly hit a performance ceiling.

The Shift to Canvas

Rendering dozens of high-resolution images, text layers, and transformation handles in the DOM is computationally expensive. It leads to layout thrashing and a laggy user experience. We moved to Konva.js, a 2D canvas library that treats the canvas like a scene graph.

Scene Graph Architecture: Konva allows us to treat every design element as a persistent object. We can group elements, apply filters, and handle events (click, drag, transform) just like we would with React components.
Performance: Canvas-based rendering is significantly faster for complex visual manipulation. It offloads a lot of the work to the GPU, ensuring that even on lower-end devices, the designer feels snappy.
High-Res Export: The most critical feature was the ability to export high-resolution (300 DPI) print files. By managing the canvas state directly, we can generate a pixel-perfect image that matches what the creator saw on their screen.

If you’re interested in a deeper look at this, read my article on Why Konva.js is an Underrated Tool for Building Interactive Web Apps.

3. The Integration Hub: Wix SDK and E-commerce Syncing

A platform is only as good as its integrations. Most of our creators already have an existing audience on platforms like Wix. We used the Wix SDK to provide deep, bi-directional syncing.

Store Discovery: Merchants can "install" the Merch Factory app on their Wix site, which triggers an OAuth flow to connect their stores.
Product Syncing: When a creator publishes a design in Merch Factory, our system uses the Wix E-commerce API to create a product, upload its mockups, and set its variants (size, color, price) automatically.
Webhook Management: We listen for ORDER_PLACED events from Wix Stores. Every time a customer buys a Merch Factory product on a creator’s site, we receive a webhook, validate the payment, and automatically move the order into our print queue.

Building these types of cross-platform integrations requires a defensive engineering mindset. You have to account for rate limits, API failures, and inconsistent data states across platforms. Our Next.js server handled these through a robust queueing system.

4. Scaling the Backend with Firebase and Cloud Functions

The operational logic of Merch Factory lives in Firebase. We chose this stack because it allowed us to scale without managing servers.

Firestore: Our real-time database stores everything from merchant profiles to order history. The serverless nature of Firestore means we don't have to worry about database scaling as we add more creators.
Cloud Functions: Every time an order status changes—say, from "Processing" to "Shipped"—a Cloud Function is triggered. It updates the external store (Wix), sends an automated WhatsApp message to the customer, and generates an invoice via our Razorpay integration.
Firebase Auth: Managing identity for thousands of merchants and internal operators is handled securely by Firebase, including multi-factor authentication for our administrators.

5. Lessons in Operational Engineering

Beyond the tech stack, building Merch Factory taught me a lot about what shipping products actually looks like in the real world.

Observability is Everything: You can't fix what you can't see. We implemented detailed logging for every step of the order lifecycle. When an order fails to sync with Wix, we know exactly why, and our system automatically retries the operation.
User Trust is Fragile: In e-commerce, money is on the line. If a creator’s store doesn't sync perfectly, it’s not just a bug—it’s a business risk. We prioritized data consistency over almost everything else.
Continuous Iteration: The transition from building a portfolio to building a real POD engine is one of constant learning. We're continuously refining our Next.js architecture to support even more creators and more complex product types.

The Path Forward

Merch Factory 3.0 is a milestone, but it’s not the destination. Our roadmap involves even deeper AI-driven design tools, more platform integrations (Shopify and WooCommerce), and even faster fulfillment logic for the Indian market guide we are building.

If you’re a builder looking to understand the product strategy behind these decisions, check out my thoughts on why the next-gen web needs better products. For creators ready to launch their brand, you can explore my step-by-step guide for India.

You can see the live platform at merchfactory.in.

Inside Merch Factory: Building a Scalable POD Engine