a02f020d4c
- Added comprehensive README.md with: - Feature list and tech stack - Installation and Docker instructions - Project structure documentation - API endpoint reference - Build plan status checklist - Verified all 10 phases complete - Code review passed - no security vulnerabilities found - Ready for production deployment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
107 lines
3.0 KiB
Markdown
107 lines
3.0 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 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
|