3d412600d5
Phase 5 - Photo Pre-Editor: - Add Filerobot integration for image editing (crop, filters, adjustments) - Add BG removal prompt modal after Filerobot edit completes - Add 'Edit Photo' button in PropertiesPanel for re-editing images - Support re-edit flow with editingElementId state tracking Phase 6 - Template System: - Add confirmation dialog when switching templates with existing work - Add layers.background and layers.overlay to all 8 templates - Implement auto-crop for slotted images using object-fit: cover logic - Add Transformer boundBoxFunc to respect slot boundaries during resize - Pass elements prop to TemplatesTab for detecting existing canvas work Files modified: - App.jsx: BG removal prompt, photo edit handlers - ImageElement.jsx: crop property, slot-aware Transformer constraints - PropertiesPanel.jsx: Edit Photo button - TemplatesTab.jsx: confirmation dialog for template switch - templates.js: layers.background/overlay for all templates - Sidebar.jsx: pass elements prop to TemplatesTab - DesignCanvas.jsx: pass slot prop to ImageElement Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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