Apparel Designer

T-shirt customization editor with drag-and-drop design, background removal, and high-resolution export.

Features

• Canvas Editor - React-Konva based drag/drop/resize/rotate for images and text
• Background Removal - Client-side AI using Transformers.js (RMBG-1.4 model)
• Photo Pre-Editor - Filerobot integration for crop, filters, and adjustments
• Stickers - 40+ emoji stickers across 6 categories
• Text Tool - Multiple fonts, sizes, and colors
• Templates - 8 pre-designed templates across various categories
• Undo/Redo - Full history with 50-state limit
• High-Res Export - 4500x4500px PNG @ 300 DPI (15"x15" print size)
• PWA Support - Offline caching for models, fonts, and assets

Tech Stack

Frontend:

• React 19 + Vite
• React-Konva (canvas)
• Transformers.js (background removal)
• Filerobot Image Editor
• Workbox (PWA caching)

Backend:

• Express.js
• Multer (file uploads)
• Sharp (image processing)
• Node-Canvas (high-res export)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Docker (optional, for containerized deployment)

Installation

# Clone the repository
git clone https://git.kadil.dev/khalidadil/apparel-designer.git
cd apparel-designer

# Install dependencies
npm install

# Start development servers (client on :3000, server on :3001)
npm run dev

Docker

docker-compose up --build

Project Structure

apparel-designer/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/    # UI components
│   │   │   ├── canvas/    # DesignCanvas, ImageElement, TextElement
│   │   │   ├── sidebar/   # Tabs: Upload, Stickers, Text, Templates
│   │   │   ├── panels/    # LayersPanel, PropertiesPanel
│   │   │   └── editor/    # PhotoPreEditor (Filerobot)
│   │   ├── hooks/         # useDesignEditor, useExport, useBackgroundRemoval
│   │   └── constants/     # Templates, stickers data
│   ├── vite.config.js     # Vite + PWA config
│   └── package.json
├── server/
│   ├── index.js           # Express server
│   ├── uploads/           # Uploaded files
│   └── exports/           # Exported designs
├── docker-compose.yml
└── package.json

API Endpoints

Method	Endpoint	Description
GET	/api/health	Health check
POST	/api/upload	Upload image (20MB max)
POST	/api/export	Export design as PNG

Build Plan Status

• Phase 1: Project Setup & Upload API
• Phase 2: Canvas Editor Core (react-konva)
• Phase 3: Sidebar & Properties Panel
• Phase 4: Background Removal (Transformers.js)
• Phase 5: Photo Pre-Editor (Filerobot)
• Phase 6: Template System
• Phase 7: Undo/Redo
• Phase 8: High-Resolution Export
• Phase 9: PWA & Workbox Caching
• Phase 10: Polish & QA

License

MIT