# 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

```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)
npm run dev
```

### Docker

```bash
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

- [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

## License

MIT