Initial commit: Phase 1 scaffolding complete

- Root package.json with concurrently for dev server
- Client: Vite + React 18 with design tokens and proxy config
- Server: Express with CORS, multer (20MB), Sharp resize
- Upload endpoint with preview generation
- Dockerfile (multi-stage) and docker-compose.yml
- Canvas deferred to Phase 8 (export functionality)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

server/index.js

@@ -0,0 +1,127 @@
+import express from 'express';
+import cors from 'cors';
+import multer from 'multer';
+import { v4 as uuidv4 } from 'uuid';
+import sharp from 'sharp';
+import { fileURLToPath } from 'module';
+import { dirname, join } from 'path';
+import { mkdirSync, existsSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+// Ensure upload and export directories exist
+const uploadsDir = join(__dirname, 'uploads');
+const exportsDir = join(__dirname, 'exports');
+[uploadsDir, exportsDir].forEach(dir => {
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+});
+
+// Middleware
+app.use(cors());
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));
+
+// Serve static files for uploads and exports
+app.use('/uploads', express.static(uploadsDir));
+app.use('/exports', express.static(exportsDir));
+
+// Configure multer for image uploads
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, uploadsDir);
+  },
+  filename: (req, file, cb) => {
+    const ext = file.originalname.split('.').pop();
+    const filename = `${uuidv4()}.${ext}`;
+    cb(null, filename);
+  }
+});
+
+const fileFilter = (req, file, cb) => {
+  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
+  if (allowedTypes.includes(file.mimetype)) {
+    cb(null, true);
+  } else {
+    cb(new Error('Invalid file type. Only JPEG, PNG, and WebP are allowed.'), false);
+  }
+};
+
+const upload = multer({
+  storage,
+  fileFilter,
+  limits: {
+    fileSize: 20 * 1024 * 1024 // 20MB
+  }
+});
+
+// Health check endpoint
+app.get('/api/health', (req, res) => {
+  res.json({ status: 'ok', timestamp: new Date().toISOString() });
+});
+
+// Upload endpoint
+app.post('/api/upload', upload.single('image'), async (req, res) => {
+  try {
+    if (!req.file) {
+      return res.status(400).json({ error: 'No file uploaded' });
+    }
+
+    const originalPath = req.file.path;
+    const originalUrl = `/uploads/${req.file.filename}`;
+
+    // Create preview by resizing to max 1000px
+    const previewFilename = req.file.filename.replace(/\.[^.]+$/, '.png');
+    const previewPath = join(uploadsDir, 'preview', previewFilename);
+
+    // Ensure preview directory exists
+    const previewDir = join(uploadsDir, 'preview');
+    if (!existsSync(previewDir)) mkdirSync(previewDir, { recursive: true });
+
+    await sharp(originalPath)
+      .resize({ width: 1000, height: 1000, fit: 'inside' })
+      .png()
+      .toFile(previewPath);
+
+    const previewUrl = `/uploads/preview/${previewFilename}`;
+
+    res.json({
+      success: true,
+      original: {
+        path: originalPath,
+        url: originalUrl,
+        filename: req.file.filename,
+        size: req.file.size,
+        mimetype: req.file.mimetype
+      },
+      preview: {
+        path: previewPath,
+        url: previewUrl,
+        filename: previewFilename
+      }
+    });
+  } catch (error) {
+    console.error('Upload error:', error);
+    res.status(500).json({ error: 'Failed to process upload', details: error.message });
+  }
+});
+
+// Error handling for multer
+app.use((err, req, res, next) => {
+  if (err instanceof multer.MulterError) {
+    if (err.code === 'LIMIT_FILE_SIZE') {
+      return res.status(400).json({ error: 'File too large. Maximum size is 20MB.' });
+    }
+    return res.status(400).json({ error: err.message });
+  }
+  next(err);
+});
+
+app.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+  console.log(`Health check: http://localhost:${PORT}/api/health`);
+  console.log(`Upload endpoint: POST http://localhost:${PORT}/api/upload`);
+});