Initial marketplace implementation

Full-stack marketplace for buying/selling second-hand items.
React 19 + TypeScript + Tailwind CSS v4 frontend with 17 screens,
Express + Prisma + Socket.io backend, Stripe payments, JWT auth.

Deployed at https://marketplace.173.212.212.157.sslip.io/

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

docs/README.md

@@ -0,0 +1,81 @@
+# Color Wheel Palette Generator
+
+An interactive color palette generator built with React, TypeScript, and Tailwind CSS v4. Pick a base color on a color wheel, choose a harmony type, adjust tint/shade, and export palettes in multiple formats.
+
+## Features
+
+- **Interactive Color Wheel** — Canvas-based HSL wheel with drag-to-select hue and saturation. Touch support for mobile.
+- **7 Harmony Types** — Complementary, Split-Complementary, Analogous, Triadic, Tetradic, Square, Monochromatic.
+- **Tint & Shade Slider** — Adjust lightness in real-time.
+- **Color Input** — Enter HEX values directly, view RGB/HSL, adjust via RGB sliders.
+- **Click-to-Copy** — Copy any color value (HEX, RGB, HSL) to clipboard.
+- **Export** — CSS variables, JSON, Tailwind config snippet, or PNG image.
+- **Dark / Light Theme** — Toggle between dark and light modes.
+- **Responsive** — Mobile-first layout with horizontal scroll palette on small screens.
+
+## Setup
+
+```bash
+npm install
+npm run dev
+```
+
+Open `http://localhost:5173` in your browser.
+
+## Build
+
+```bash
+npm run build
+npm run preview
+```
+
+## Architecture
+
+```
+src/
+├── components/          # UI components
+│   ├── ColorWheel/      # Canvas-based color wheel with pointer events
+│   ├── PaletteDisplay/  # Generated swatch grid
+│   ├── HarmonySelector/ # Dropdown for harmony type
+│   ├── ColorInput/      # HEX/RGB/HSL inputs and sliders
+│   ├── TintShadeSlider/ # Lightness adjustment
+│   ├── ExportPanel/     # CSS/JSON/Tailwind/PNG export
+│   ├── Header/          # App header with theme toggle
+│   └── MobileNav/       # Bottom sheet navigation for mobile
+├── hooks/
+│   ├── useColorWheel.ts    # Wheel interaction (drag, position calculation)
+│   └── useColorHarmony.ts  # Harmony palette generation
+├── utils/
+│   ├── colorConversions.ts # HEX <-> RGB <-> HSL converters
+│   └── harmonies.ts        # Harmony algorithms
+├── App.tsx                 # Main layout
+├── main.tsx                # Entry point
+└── index.css               # Tailwind directives + theme variables
+```
+
+## Harmony Algorithms
+
+| Type | Colors Generated |
+|---|---|
+| Complementary | Base + 180° |
+| Split-Complementary | Base, +150°, +210° |
+| Analogous | -30°, Base, +30° |
+| Triadic | Base, +120°, +240° |
+| Tetradic | Base, +90°, +180°, +270° |
+| Square | Base, +90°, +180°, +270° |
+| Monochromatic | Same hue, varied S/L |
+
+## MCP Integration
+
+The project includes MCP server configuration in `.claude/settings.json`:
+
+- **Figma MCP** — Connect to Figma to read design files and create new frames.
+- **Chrome DevTools MCP** — Debug the running app, inspect elements, and validate layouts.
+
+## Tech Stack
+
+- React 19 + TypeScript
+- Vite
+- Tailwind CSS v4
+- HTML5 Canvas API
+- Clipboard API