aibot777/marketplace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add rental system: listings, bookings, payments, payouts, reviews

Browse Source 
Full rental marketplace with 6 categories (apartment, house, car, motorcycle, bicycle, ebike).
Booking workflow: create → confirm → pay → active → complete → payout.
Landlord dashboard, admin moderation, availability calendar, Stripe Connect payouts.
14 QA bugs found and fixed including validator schemas, API response types, HTTP methods.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
delta-lynx-89e8
2026-02-22 15:33:29 -08:00
parent 8961fa701a
commit dbbbbd26f4
90 changed files with 11052 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
docs/README.md
View File

@@ -1,81 +1,214 @@
# Color Wheel Palette Generator
# Marketplace
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.
A full-stack online marketplace and rental platform where users can buy, sell, and rent items ranging from electronics and furniture to apartments, cars, and bicycles. The platform includes real-time chat, an offer/negotiation system, Stripe-powered payments, and a multi-role admin panel with content moderation.
## Tech Stack
- React 19 + TypeScript
- Vite
- Tailwind CSS v4
- HTML5 Canvas API
- Clipboard API
| Layer | Technology |
|----------------|------------------------------------------------------|
| **Client** | React 19, TypeScript, Tailwind CSS 4, Vite 6 |
| **Routing** | React Router 7 |
| **Server** | Express 4, TypeScript, tsx (dev runner) |
| **Database** | PostgreSQL 17 (Docker), Prisma ORM 6 |
| **Auth** | JWT (access + refresh tokens), bcryptjs |
| **Payments** | Stripe (PaymentIntents, Connect, Webhooks) |
| **Real-time** | Socket.io 4 (notifications, chat) |
| **File Upload**| Multer (local storage) |
| **Validation** | Zod |
| **Charts** | Recharts 3 (admin dashboard) |
| **Icons** | Lucide React |
## Features
- **Listings** -- Create, browse, search, and filter buy/sell listings across categories (Electronics, Furniture, Clothing, Vehicles, etc.)
- **Offers & Negotiation** -- Make offers, counter, accept, or decline with real-time notifications
- **Rentals** -- Full rental system for apartments, houses, cars, motorcycles, bicycles, and e-bikes with daily/monthly pricing, booking management, deposits, and cancellation policies
- **Chat** -- Real-time messaging between buyers/sellers and tenants/landlords via Socket.io
- **Payments** -- Stripe integration for listing fees, commissions, rental bookings, deposits, and landlord payouts via Stripe Connect
- **Subscriptions & Promotions** -- Tiered seller subscriptions (Basic, Pro, Business) and listing promotion/boosting
- **Notifications** -- Real-time in-app notifications for offers, messages, bookings, payouts, and moderation actions
- **Moderation** -- Content reporting, review queue, user banning, and moderation logs
- **Admin Panel** -- Dashboard with analytics, user management, listing management, and moderation tools
- **Auth & Roles** -- JWT authentication with four roles: `USER`, `MODERATOR`, `ADMIN`, `SUPER_ADMIN`
- **Location** -- Google Maps autocomplete for listing and rental locations
## Prerequisites
- **Node.js** >= 18
- **npm** >= 9 (uses npm workspaces)
- **Docker** (for PostgreSQL)
## Getting Started
### 1. Start the Database
If the Docker container already exists:
```bash
docker start marketplace-postgres
```
If you need to create it from scratch:
```bash
docker run -d \
--name marketplace-postgres \
-e POSTGRES_USER=marketplace \
-e POSTGRES_PASSWORD=marketplace_dev \
-e POSTGRES_DB=marketplace \
-p 5432:5432 \
-v marketplace-pgdata:/var/lib/postgresql/data \
--restart unless-stopped \
postgres:17-alpine
```
Verify it is running:
```bash
docker ps -f name=marketplace-postgres
```
### 2. Install Dependencies
From the project root:
```bash
npm install
```
This installs dependencies for both the `client` and `server` workspaces.
### 3. Configure Environment Variables
Create `server/.env`:
```env
DATABASE_URL=postgresql://marketplace:marketplace_dev@localhost:5432/marketplace
JWT_SECRET=your-secret-key
JWT_REFRESH_SECRET=your-refresh-secret-key
STRIPE_SECRET_KEY=sk_test_...
STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
GOOGLE_MAPS_API_KEY=your-google-maps-key
CLIENT_URL=http://localhost:5173
UPLOAD_DIR=./uploads
PORT=3000
```
For local development, only `DATABASE_URL` is strictly required. Stripe keys are optional (payment features will be disabled). The server provides sensible defaults for all other values.
### 4. Set Up the Database Schema
```bash
cd server
npx prisma db push
```
Or use migrations:
```bash
cd server
npx prisma migrate dev
```
### 5. Seed the Database (Optional)
```bash
cd server
npx tsx prisma/seed.ts
```
### 6. Run the Application
Start both client and server simultaneously:
```bash
npm run dev
```
Or run them separately:
```bash
npm run dev:server # Express API on http://localhost:3000
npm run dev:client # React app on http://localhost:5173
```
## Seed Data
After seeding, the following test users are available (all use password `password123`):
| Email | Name |
|----------------------------|----------------|
| alice.chen@example.com | Alice Chen |
| bob.smith@example.com | Bob Smith |
| carol.jones@example.com | Carol Jones |
| david.wilson@example.com | David Wilson |
| eva.martinez@example.com | Eva Martinez |
## Project Structure
```
marketplace/
├── package.json # Root workspace config
├── CLAUDE.md # Dev notes (DB setup, commands)
├── docs/ # Documentation
│ ├── README.md # This file
│ └── architecture.md # Architecture overview
├── client/ # React frontend
│ ├── package.json
│ └── src/
│ ├── api/ # API client functions
│ ├── components/ # Reusable UI components
│ ├── context/ # React context providers
│ ├── pages/ # Route page components
│ ├── router.tsx # Route definitions
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ ├── App.tsx # App root component
│ └── main.tsx # Entry point
└── server/ # Express backend
├── package.json
├── prisma/
│ ├── schema.prisma # Database schema
│ └── seed.ts # Seed script
└── src/
├── config/ # Environment config
├── middleware/ # Auth, upload, validation, error handling
├── routes/ # API route handlers
│ └── admin/ # Admin-specific routes
├── socket/ # Socket.io setup and handlers
├── utils/ # Shared utilities
├── validators/ # Zod validation schemas
└── index.ts # Server entry point
```
## Environment Variables Reference
| Variable | Required | Default | Description |
|---------------------------|----------|----------------------------------|------------------------------------|
| `DATABASE_URL` | Yes | localhost connection string | PostgreSQL connection URL |
| `PORT` | No | `3000` | Server port |
| `JWT_SECRET` | No* | Dev fallback | Access token signing secret |
| `JWT_REFRESH_SECRET` | No* | Dev fallback | Refresh token signing secret |
| `CLIENT_URL` | No | `http://localhost:5173` | CORS allowed origin |
| `UPLOAD_DIR` | No | `./uploads` | File upload directory |
| `STRIPE_SECRET_KEY` | No | Empty (payments disabled) | Stripe secret key |
| `STRIPE_PUBLISHABLE_KEY` | No | Empty (payments disabled) | Stripe publishable key |
| `STRIPE_WEBHOOK_SECRET` | No | Empty | Stripe webhook signing secret |
| `GOOGLE_MAPS_API_KEY` | No | Dev key | Google Maps API key |
*Must be set to secure values in production.
## Useful Commands
| Command | Description |
|---------------------------|------------------------------------------|
| `npm run dev` | Start client + server concurrently |
| `npm run dev:client` | Start React dev server (port 5173) |
| `npm run dev:server` | Start Express dev server (port 3000) |
| `npm run build` | Build client and server for production |
| `npm run lint` | Lint client code |
| `npx prisma studio` | Open Prisma Studio (DB browser) |
| `npx prisma db push` | Push schema changes to database |
| `npx prisma migrate dev` | Create and apply a migration |
| `npx tsx prisma/seed.ts` | Seed the database |