009557c249
Phase 6 - Template System: - Add TemplateLayer component for background/overlay rendering - Add SlotPlaceholder component with visual indicators for empty slots - Add useTemplate hook with auto-crop and drag constraint functions - Update templates.js with slot definitions for team-sport template - Integrate template system into DesignCanvas and App - Add slot upload UI in TemplatesTab sidebar Phase 9 - PWA Improvements: - Add Workbox caching rules for HuggingFace LFS, templates, and API - Change registerType to 'prompt' for update notifications - Add service worker update handler in main.jsx - Add refresh prompt UI in PWAInstall component Phase 10 - Responsive and Accessibility: - Add responsive CSS media queries for tablet/mobile layouts - Add OfflineIndicator component with online/offline detection - Add focus trap and keyboard navigation to PhotoPreEditor - Add aria labels and screen reader support to modal 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