Flatted and issues fixed with Claude Desktop.

2026-04-22 06:21:02 -05:00
parent 66bd69efe7
commit 4d19363d58
86 changed files with 1561 additions and 9232 deletions
--- a/README.md
+++ b/README.md
@@ -4,80 +4,75 @@ T-shirt customization editor with drag-and-drop design, background removal, and

 ## 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
+- **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

-**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)
+| 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

-### Prerequisites
-
- Node.js 18+
- npm or yarn
- Docker (optional, for containerized deployment)
-
-### Installation
-
 ```bash
-# 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)
+# 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
+## Docker

 ```bash
-docker-compose up --build
+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
+├── 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
@@ -85,21 +80,9 @@ apparel-designer/
 | 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
-
- [x] Phase 1: Project Setup & Upload API
- [x] Phase 2: Canvas Editor Core (react-konva)
- [x] Phase 3: Sidebar & Properties Panel
- [x] Phase 4: Background Removal (Transformers.js)
- [x] Phase 5: Photo Pre-Editor (Filerobot)
- [x] Phase 6: Template System
- [x] Phase 7: Undo/Redo
- [x] Phase 8: High-Resolution Export
- [x] Phase 9: PWA & Workbox Caching
- [x] Phase 10: Polish & QA
+| 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