How to Clone Wish

Create a Wish-style discovery-feed marketplace called DealDrift using Next.js (App Router), Tailwind, Prisma + SQLite. Category: cheap gadgets and home goods.

## What to build
An infinite personalized product feed where users impulse-buy cheap items, merchants list products, and the platform takes a commission. The recommendation-ranked feed is the core feature.

## Screens
- Landing page: hero, bargain-card preview strip, signup
- Discovery feed: infinite-scroll masonry grid of product cards (image, slashed price + % off, rating, urgency cue) with category filter chips
- Product page: gallery, slashed price, variant picker, stock urgency, photo reviews, merchant card, Add to Cart / Buy Now
- Cart & checkout: cart, address, payment, order summary with delivery estimate, confirmation
- Orders: buyer history with status and tracking
- Merchant dashboard: product CRUD with variants/stock, order queue with mark-shipped, sales totals
- Admin: product/merchant moderation, featured-category curation

## Prisma schema
User (id, name, email, role, walletCents), Merchant (userId, storeName, rating, isVerified), Product (id, merchantId, title, description, priceCents, compareAtCents, category, stock, imageUrls Json, rating, soldCount), Variant (id, productId, name, priceDeltaCents, stock), Order (id, buyerId, status, totalCents, address, createdAt), OrderItem (id, orderId, productId, variantId, qty, priceCents), Review (id, productId, userId, stars, text, photoUrl), FeedEvent (id, userId, productId, action)

## Feed & marketplace logic (must actually work)
- Feed ranking: score each product by category affinity (from the user's FeedEvents) + popularity (soldCount, rating), paginate with a cursor; new users get trending; compute server-side
- Every view/tap/buy writes a FeedEvent so the feed personalizes over the session, not just at login
- compareAtCents must exceed priceCents; render the percentage off
- Checkout: in a transaction, decrement variant/product stock, create Order + OrderItems, and record a merchant credit minus commission (mock Stripe Connect split)
- No overselling: locking the last unit during two concurrent checkouts must let only one succeed
- Reviews gated to buyers with a delivered order for that product

## Acceptance
- The feed reorders for a user who has tapped mostly one category vs a fresh user
- Buying the last unit of a product makes it sold out; a second concurrent buy fails
- The percentage-off badge always derives from compareAt vs price, never a free-typed number
- A non-buyer cannot post a review; a delivered buyer can

## Style
Bargain-energetic but trustworthy: vivid blue/violet accents, dense clean product cards, bold slashed-price type, photo-forward feed, verified-merchant badges. Mobile-first social-scroll feed.

Seed: 40 products across 5 categories, 6 merchants with ratings, photo reviews, a demo buyer with order history, and some FeedEvents so personalization has signal from the first scroll.

Build a production-quality Wish-style discovery marketplace. The feed ranking, marketplace ledger and checkout must be server-authoritative; assume merchants and buyers both try to game prices and reviews.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui
- PostgreSQL via Prisma; Redis for cached ranked feeds and rate limiting; Typesense for faceted search
- NextAuth (email + Google); Stripe Connect for the marketplace split and merchant payouts
- Zod schemas shared between product listing forms and stored validation

## Core design: the feed is the product
Define lib/feed/rank.ts: scoreProduct(user, product) = wAffinity*categoryAffinity(user) + wPopularity*normalize(soldCount, rating) + wBoost*activePromotion(product) - wRecency penalty for already-seen. Build the ranked feed server-side, cache per-user pages in Redis with a short TTL, and paginate with an opaque cursor. FeedEvents (view/tap/buy) stream in and update affinity. Adding a new ranking signal must be one term in the scorer, not a feed rewrite.

## Marketplace integrity (server-authoritative)
- Prices: compareAtCents must exceed priceCents (validate on write); percentage off is derived, never client-set
- Checkout in one transaction: lock variant rows, decrement stock, create Order + OrderItems at the price captured at purchase time, write a marketplace ledger entry (gross, commission, merchant net). Capture payment via Stripe Connect with commission as the application fee; release payout on delivery
- Reviews: only buyers with a delivered OrderItem for that product; one review per item; store photo separately
- Promotions (ProductBoost): a merchant pays into a boost; the boost term in the scorer is capped so paid placement can't fully crowd out relevance

## Schema
users, merchants, products (compare_at_cents, category, sold_count, rating), variants (stock), orders, order_items (price_cents captured), reviews, feed_events, promotions (budget, spend), ledger (append-only: gross/commission/net per order). Indexes on products(category, sold_count desc), feed_events(user_id, created_at), order_items(product_id).

## Implementation order
1. Schema + auth + seed (40 products, 6 merchants, FeedEvents) + the feed scorer with unit tests
2. Discovery feed: cursor pagination, Redis cache, category chips, infinite scroll
3. Product page + variant pricing + reviews (gated to delivered buyers)
4. Checkout transaction + stock locking + ledger + mock Stripe Connect split
5. Merchant dashboard: product CRUD, order queue, sales/ledger view
6. Promotions/boost auction wired into the scorer (capped)
7. Admin moderation + Typesense faceted search

## Quality bar
- No overselling: concurrent checkouts of the last unit can't both succeed (write the test)
- Feed pages are stable under scroll (cursor, not offset) and personalize from real events
- Commission and prices computed only server-side; the captured price is immutable on the order

Start with step 1; show me the feed scorer, its types, and the no-oversell checkout test before continuing.

Design the complete UI for a Wish-style discovery-feed bargain marketplace called DealDrift. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: energetic bargain-hunting but cleaner and more trustworthy than Wish - vivid blue/violet accents, dense-yet-tidy product cards, bold slashed-price typography, photo-forward, verified-merchant trust badges.

## Screens

### 1. Discovery feed (main screen)
- Sticky top: logo, a search bar, and horizontally scrollable category chips (Gadgets, Home, Fashion, Hobby, Auto)
- Infinite-scroll masonry grid of product cards: image, short title, a big current price with a struck-through compare-at price and a red '-72%' badge, star rating, sold count, and a subtle 'Almost gone' urgency tag on some
- Mobile: bottom tab bar (Feed, Search, Cart, Orders, Account)

### 2. Product page
- Swipeable image gallery with thumbnails
- Price block: large current price, struck compare-at price, percentage-off badge, and a countdown 'deal ends in' chip
- Variant picker (color swatches, size pills), a low-stock urgency line, quantity stepper
- Merchant card: store name, rating, verified badge
- Photo reviews carousel with star summary
- Sticky bottom bar: Add to Cart and Buy Now

### 3. Cart & checkout
- Cart: line items with thumbnails, variant, quantity steppers, per-item and total savings highlighted
- Checkout: address form, payment method, an order summary with estimated delivery window and a clear 'You saved $X' line, place-order button, then a celebratory confirmation

### 4. Orders
- List of orders with status pills (Processing / Shipped / Delivered) and thumbnails; a detail view with a tracking progress bar and reorder button

### 5. Merchant dashboard
- Stats row (sales, orders, rating)
- Product table with images, price, stock, status and an add/edit product drawer (images, variants, price, compare-at, stock)
- Order queue with mark-as-shipped actions

### 6. Empty & loading states
- A skeleton-card shimmer for the feed while products load
- An empty-cart state with a 'Back to deals' CTA, and an empty-orders state
- A write-a-review modal (star rating, photo upload, text) shown after delivery

Fully responsive, mobile-first - the feed must feel like a social scroll. Fill everything with realistic bargain content: 40 products across 5 categories, slashed prices, photo reviews, 6 merchants with ratings, and a demo buyer with order history.

Build a discovery-feed bargain marketplace (Wish model) called DealDrift for cheap gadgets and home goods.

## Entities
- Merchant: user reference, storeName, rating, isVerified
- Product: merchant reference, title, description, priceCents, compareAtCents, category, stock, imageUrls (JSON), rating, soldCount
- Variant: product reference, name, priceDeltaCents, stock
- Order: buyer reference, status (processing/shipped/delivered), totalCents, address, createdAt
- OrderItem: order reference, product reference, variant reference, qty, priceCents
- Review: product reference, user reference, stars, text, photoUrl
- FeedEvent: user reference, product reference, action (view/tap/buy)

## Roles
- Buyer: scrolls the personalized feed, buys products, tracks orders, leaves photo reviews
- Merchant: lists and edits products with variants and stock, fulfills orders, sees sales
- Admin: moderates products and merchants, curates featured categories, dashboard of sales and signups

## Pages
1. Discovery feed home: infinite-scroll grid of product cards (image, slashed price with % off, rating, urgency cue) with category filter chips, personalized to the user
2. Product page: image gallery, slashed price, variant picker, stock urgency, photo reviews, merchant card, Add to Cart / Buy Now
3. Cart & checkout: cart, address, payment, order summary with savings and delivery estimate, confirmation
4. Orders: buyer history with status and a tracking view
5. Merchant dashboard: product management, order queue with mark-shipped, sales totals
6. Admin: product/merchant moderation and category curation

## Rules
- The feed is personalized: rank products by the user's category affinity (from FeedEvents) blended with popularity (soldCount, rating); new users see trending items
- compareAtCents must be higher than priceCents; show the percentage off
- On purchase, decrement stock, create the order, and credit the merchant minus a platform commission
- A sold-out product shows a disabled buy button rather than failing at checkout
- Only buyers with a delivered order for a product can review it

## Look & feel
Energetic bargain style but trustworthy: vivid blue/violet accents, dense clean product cards, bold slashed-price typography, photo-forward feed, verified-merchant badges. Mobile-first social-scroll feed.

Seed: 40 products across 5 categories with slashed prices, 6 merchants with ratings, photo reviews, a demo buyer with order history, and some feed events so personalization has signal.