1. Project Overview
DYD-Cloths (Design Your Dream Cloths) is a fully-featured, full-stack custom T-shirt e-commerce platform. At its heart lies a Fabric.js-powered interactive design studio that lets users place text, upload images, and manipulate design elements directly on a virtual canvas before purchasing.
The platform covers the entire product lifecycle — from browsing a product catalog and building a custom design, to adding items to a localStorage-backed cart, completing secure checkout via Razorpay, and tracking order status. Sellers and admins are served by a dedicated dashboard for inventory and order management.
Design Studio
Fabric.js canvas with real-time T-shirt customization
Cart & Checkout
localStorage-backed cart with Razorpay secure payments
Auth & Roles
User authentication with role-based access control
Admin Dashboard
Inventory management and order tracking for admins
Wishlist Sharing
Share curated wishlists with friends and family
Order Tracking
Real-time order status and delivery updates
2. Problem Statement
Standard e-commerce platforms offer limited product personalization — customers choose from pre-designed variants with no meaningful way to express their own creativity. Custom merchandise platforms, on the other hand, tend to be either prohibitively expensive tools or desktop-only applications with steep learning curves.
There was a clear gap for a web-first, intuitive platform that made T-shirt customization genuinely accessible, while also delivering a polished, end-to-end e-commerce experience with secure payments and robust order management.
3. My Approach
I chose Fabric.js as the core of the design studio due to its powerful vector canvas API — it enabled drag-and-drop design elements, image uploads, text layers, and serialization of designs into JSON for order processing. The design state is preserved in localStorage so users never lose their work mid-session.
On the backend, a Node.js / Express.js REST API manages authentication (JWT), product catalog (MongoDB), and order lifecycle. Razorpay's payment SDK was integrated server-side with webhook verification to ensure no order is marked complete without confirmed payment. The admin dashboard uses role-based middleware to strictly partition management controls from customer views.
4. Key Results & Impact
- Delivered a fully functional design-to-checkout pipeline in a single web application — no external tools needed
- Fabric.js integration enabled a rich, intuitive design experience accessible directly in the browser without plugins
- Razorpay webhook verification ensured payment integrity with zero false order confirmations
- Admin dashboard streamlined inventory visibility and order resolution, reducing manual tracking overhead significantly
- Wishlist sharing feature increased average session depth as users collaborated on design choices