How to Clone Coinbase

Create a Coinbase-style crypto PAPER-TRADING app called CoinDojo using Next.js (App Router), Tailwind, Prisma + Postgres. Real live prices, simulated balances - a trading simulator, not a real exchange.

## What to build
Users start with a virtual $10,000, browse coins at real market prices, and buy/sell against their virtual cash. Track holdings, profit/loss, transaction history and a leaderboard. No real money or custody anywhere.

## Screens
- Landing with a 'start with $10,000 virtual' CTA
- Portfolio dashboard: total balance + 24h change, allocation donut, value sparkline, holdings list with P/L
- Markets: searchable coin list (price, 24h %, sparkline, watchlist star)
- Asset page: price chart with timeframe toggles, stats, Buy/Sell
- Buy/Sell sheet: amount in $ or units, fee preview, confirm
- Activity: transaction history with cost basis and realized P/L
- Leaderboard ranked by return %

## Prisma schema
User (id, name, email, cashBalance @default(10000)), Asset (id, symbol, name, icon), Holding (id, userId, assetId, quantity, avgCost), Order (id, userId, assetId, side, quantity, priceAtExecution, fee, createdAt), Watchlist (userId, assetId)

## Logic (must actually work, server-side)
- Fetch live prices from a public API (CoinGecko) on the server; cache briefly; never trust client-sent prices
- Buy: cost = qty × livePrice + fee; assert cashBalance >= cost; in a transaction decrement cash, upsert Holding, recompute avgCost, insert Order
- Sell: assert qty <= holding; credit cash at livePrice - fee; realize P/L; insert Order
- Portfolio value = cash + Σ(holding.qty × livePrice) computed at request time
- Orders are append-only; balances/holdings derive consistently from them
- Leaderboard ranks users by total return % = (portfolio value - 10000) / 10000
- Block submitting against a stale quote (reject if the cached price is older than a few seconds)

## Charts & live data
- Asset pages pull historical candles from the price API for the 1H/1D/1W/1M/1Y toggles
- Stream current prices over a WebSocket so the dashboard and markets list tick in real time

## Style
Sleek fintech: deep-navy/near-black UI, mint-green gains (#16C784), coral losses (#EA3943), crisp candlestick/line charts, big confident numbers, count-up animations, a persistent 'Simulated - no real money' banner. Mobile-first.

Seed: top ~15 coins by market cap (live prices), a demo user holding 3–4 coins with some P/L, and ~10 leaderboard users with varied returns.

Build a production-quality crypto paper-trading platform (Coinbase UX, simulated money). Treat it like a real money app even though balances are virtual: the order ledger must be exact, append-only and server-authoritative. Be explicit that this is NOT a real exchange - no custody, no fiat rails, no licensing.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; lightweight charting (lightweight-charts / Recharts)
- PostgreSQL via Prisma; NextAuth (email + Google, 2FA-ready)
- Market data: server-side fetch from a crypto price API + a WebSocket price stream fanned out to clients; never let the browser dictate execution price

## Core design: the ledger is the source of truth
Orders are append-only. cashBalance and holdings are DERIVED by folding the order history, not mutable columns you race against. Every buy/sell runs in one Postgres transaction that: locks the user row, recomputes available cash/holding from current state, validates the trade against the server's live price, inserts the Order, and updates derived snapshots. A retry must be idempotent (client-supplied order id). This is the whole correctness story - build and test it before any UI.

## Pricing integrity
The execution price is whatever the server reads at submit time from the market-data service - the client sends a side and an amount, never a price. Add a small slippage/staleness guard (reject if the quote is older than N seconds).

## Schema
users, assets (symbol, metadata), holdings (qty, avg_cost - derived snapshot), orders (append-only: side, qty, price_at_execution, fee, idempotency_key unique), watchlist, price_alerts. Indexes on orders(user_id, created_at), holdings(user_id).

## Implementation order
1. Schema + auth; seed assets and a live price service (server fetch + cache)
2. Order engine: buy/sell transaction with idempotency, derived cash/holdings, vitest unit tests for over-spend, over-sell, retry, P/L
3. Portfolio dashboard computing live value from holdings × current prices
4. Markets + asset pages with charts; WebSocket price ticking
5. Activity/history with cost basis and realized/unrealized P/L
6. Price alerts + recurring (DCA) simulated buys
7. Leaderboard + a subscription tier (Stripe) for the real revenue

## Quality bar
- Impossible to spend cash you don't have or sell coins you don't hold - covered by tests
- Execution always uses the server's price; stale quotes are rejected
- Order submission is idempotent (double-tap can't double-trade)
- A permanent, honest 'simulated - not financial advice, no real money' disclosure

Start with step 1; before any UI, show me the Order Prisma model and the buy/sell transaction with its idempotency handling.

Design the complete UI for a Coinbase-style crypto app called CoinDojo (paper trading - simulated money, real prices). React + Tailwind + shadcn/ui + lucide-react + a charting lib. Aesthetic: sleek modern fintech - deep-navy/near-black surfaces, mint-green for gains (#16C784), coral for losses (#EA3943), crisp charts, big confident numerals, subtle count-up animations.

## Screens

### 1. Portfolio dashboard (home)
- Hero: total balance in large type with a 24h change pill (green/red) and a portfolio-value area chart with timeframe toggles
- Allocation donut by asset, then a holdings list: coin icon, name, amount, current value, and a P/L badge
- A persistent thin banner: 'Simulated trading · no real money'
- Mobile: bottom tabs (Portfolio, Markets, Trade, Activity, Profile)

### 2. Markets
- Search bar, then a coin list: rank, icon + name, price, 24h % (color-coded), a tiny sparkline, and a watchlist star; sortable headers

### 3. Asset page
- Big current price + 24h change, a full candlestick/line chart with 1H/1D/1W/1M/1Y/All toggles
- Stat tiles (market cap, 24h volume, circulating supply), a short 'About' blurb
- Sticky bottom Buy / Sell buttons

### 4. Buy / Sell sheet
- A numeric keypad-style amount entry, a dollars-vs-coin-units toggle, a live quote that updates, a fee line and an estimated-result summary, then a confirm slider/button and a success state

### 5. Activity
- Filterable transaction list grouped by date: buy/sell badges, amount, price, fee, and running P/L

### 6. Leaderboard
- Ranked list of traders by return %, podium for the top 3, the current user's row highlighted

### 7. Watchlist & alerts
- A watchlist screen of starred coins with price and 24h change, swipe-to-remove
- A price-alert composer: pick a coin, a target price, and above/below; list active alerts

### 8. Empty & disclosure states
- A pre-first-trade empty dashboard with a 'make your first trade' CTA
- A prominent, non-dismissable 'Simulated - not financial advice, no real money' disclosure on the profile/settings screen

Fully responsive, mobile-first (it should feel like a native trading app). Fill everything with realistic top-coin names, prices, percentages and chart shapes, and a demo portfolio with a few holdings showing mixed gains and losses.

Build a crypto paper-trading app (Coinbase model) called CoinDojo - real live prices, simulated balances. It is a trading simulator and learning tool, NOT a real exchange: no custody, no fiat, no licensing.

## Entities
- User: name, email, cashBalance (starts at 10000 virtual dollars)
- Asset: symbol, name, icon (cached coin metadata)
- Holding: user reference, asset reference, quantity, avgCost
- Order: user reference, asset reference, side (buy/sell), quantity, priceAtExecution, fee, createdAt
- Watchlist: user reference, asset reference
- PriceAlert: user reference, asset reference, targetPrice, direction

## Roles
- Trader: browses markets, buys/sells with virtual cash, tracks portfolio and P/L, sets alerts, joins the leaderboard
- Admin: manages the asset list and competitions, sees usage metrics

## Pages
1. Portfolio dashboard: total balance + 24h change, allocation donut, value chart, holdings list with profit/loss
2. Markets: searchable coin list with price, 24h %, sparkline and watchlist star
3. Asset page: price chart with timeframe toggles, stats, Buy/Sell buttons
4. Buy/Sell sheet: amount in dollars or units, fee preview, confirm - updates the virtual ledger
5. Activity: transaction history with cost basis and realized profit/loss
6. Leaderboard: traders ranked by portfolio return %

## Rules
- Use REAL live prices from a public crypto price API; never invent or trust client-sent prices
- Buy: cost = quantity × live price + fee; block if virtual cash is insufficient; update cash, holding and average cost
- Sell: block if quantity exceeds the holding; credit cash at the live price minus fee; realize profit/loss
- Portfolio value = cash + sum of each holding's quantity × live price, computed on the fly
- Always show a clear 'Simulated - no real money, not financial advice' disclosure

## Look & feel
Sleek fintech: deep-navy/near-black UI, mint-green gains (#16C784), coral losses (#EA3943), crisp charts, big confident numbers. Mobile-first.

Seed: top ~15 coins by market cap (live prices), a demo trader holding 3–4 coins with mixed P/L, and ~10 leaderboard users with varied returns.