90 lines
3.2 KiB
Markdown
90 lines
3.2 KiB
Markdown
# 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, 8-bit quantized)
|
||
- **Photo Pre-Editor** — Filerobot integration for crop, filters, and adjustments
|
||
- **Stickers** — 140+ emoji stickers across 6 categories
|
||
- **Text Tool** — 20 Google Fonts, sizes, and colors
|
||
- **Templates** — 8 pre-designed templates across various categories
|
||
- **Undo/Redo** — Full history with keyboard shortcuts (Ctrl+Z / Ctrl+Shift+Z)
|
||
- **High-Res Export** — 4500×4500px PNG @ 300 DPI (15"×15" print size)
|
||
- **PWA Support** — Offline caching for models, fonts, and assets
|
||
|
||
## Tech Stack
|
||
|
||
| Layer | Choice |
|
||
|-------|--------|
|
||
| Frontend | React 19, Vite, react-konva 19, Konva 10 |
|
||
| Background Removal | @huggingface/transformers, RMBG-1.4 (q8) |
|
||
| Photo Editor | Filerobot Image Editor |
|
||
| PWA | Workbox via vite-plugin-pwa |
|
||
| Server | Express, Multer, Sharp |
|
||
| Export | node-canvas (4500×4500 server-side render) |
|
||
|
||
## Getting Started
|
||
|
||
```bash
|
||
# Install dependencies
|
||
npm install
|
||
|
||
# Start development (client on :3000, server on :3001)
|
||
npm run dev
|
||
|
||
# macOS Sharp fix is built into the dev script
|
||
# On Windows use:
|
||
npm run dev:win
|
||
```
|
||
|
||
## Docker
|
||
|
||
```bash
|
||
docker compose up --build
|
||
```
|
||
|
||
## Project Structure
|
||
|
||
```
|
||
apparel-designer/
|
||
├── server.js # Express API (upload, export, health)
|
||
├── vite.config.js # Vite + PWA config
|
||
├── package.json # Single package — all deps
|
||
├── index.html # Entry HTML with Google Fonts
|
||
├── src/
|
||
│ ├── main.jsx # React entry + SW registration
|
||
│ ├── App.jsx # Root layout (sidebar / canvas / properties)
|
||
│ ├── App.css
|
||
│ ├── index.css # Design tokens + layout styles
|
||
│ ├── components/
|
||
│ │ ├── canvas/ # DesignCanvas, ImageElement, TextElement, TShirtSVG, TemplateLayer, SlotPlaceholder
|
||
│ │ ├── sidebar/ # Sidebar, UploadTab, StickersTab, TextTab, TemplatesTab, BackgroundRemovalButton
|
||
│ │ ├── panels/ # LayersPanel, PropertiesPanel
|
||
│ │ ├── editor/ # PhotoPreEditor (Filerobot wrapper)
|
||
│ │ ├── PWAInstall.jsx
|
||
│ │ └── OfflineIndicator.jsx
|
||
│ ├── hooks/ # useDesignEditor, useBackgroundRemoval, useExport, useTemplate
|
||
│ └── constants/ # fonts, stickers, templates
|
||
├── public/ # Favicon, PWA icons
|
||
├── uploads/ # User uploads (gitignored)
|
||
├── exports/ # Exported PNGs (gitignored)
|
||
├── docs/ # Template JSON schema
|
||
├── Dockerfile
|
||
└── docker-compose.yml
|
||
```
|
||
|
||
## API Endpoints
|
||
|
||
| Method | Endpoint | Description |
|
||
|--------|----------|-------------|
|
||
| GET | `/api/health` | Health check |
|
||
| POST | `/api/upload` | Upload image (20MB max, JPEG/PNG/WebP) |
|
||
| POST | `/api/export` | Export design as 4500×4500 PNG |
|
||
| GET | `/api/download/:filename` | Download exported file |
|
||
|
||
## License
|
||
|
||
MIT
|