4ca7910465
Phase 7.2 - Debounce undo/redo history: - Add 300ms debounce timer for rapid drag/transform changes - Commit history on dragEnd/transformEnd events only - Prevents history bloat during continuous interactions Phase 8.3 - Template-aware export: - Render template background layer first - Apply slot crop regions for image elements - Render template overlay layer last - Support nonPrintable flag for guides/watermarks Phase 9 - PWA icons: - Add pwa-192x192.svg and pwa-512x512.svg icons - Update vite.config.js manifest configuration Phase 10.3 - Performance optimizations: - Add React.memo to canvas components (ImageElement, TextElement, DesignCanvas) - Add React.memo to panel components (LayersPanel, PropertiesPanel) - Prevent unnecessary re-renders during canvas interactions Phase 10.6 - Template documentation: - Document template JSON schema in docs/template-schema.md - Include element properties, slot definitions, and examples - Describe background/overlay layer structure
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