How to Clone Robinhood

Create a Robinhood-style paper-trading app called StackUp using Next.js (App Router), Tailwind, Prisma + SQLite. SIMULATED trading only - no real money, no brokerage license needed.

## What to build
Search stocks, manage watchlists, place simulated market orders against (mock or delayed) live quotes with a virtual cash balance, and track a portfolio with a hero value chart.

## Screens
- Landing: hero with portfolio-chart mockup, feature cards, disclaimer that this is a simulation
- Home: big portfolio value + area chart with timeframe toggle, holdings list, watchlist below
- Stock detail: price header, interactive chart, stats grid, About text, sticky Buy/Sell bar
- Trade sheet: quantity OR dollar input, estimated cost, buying-power check, confirm + success state
- Search: typeahead with trending tickers
- Account: cash, buying power, total return, reset-portfolio, Gold subscription upsell

## Prisma schema
User (id, name, email, cashBalance default 10000, isGold), Holding (id, userId, symbol, quantity, avgCost), Order (id, userId, symbol, side, quantity, price, status, createdAt), WatchlistItem (id, userId, symbol, position), Alert (id, userId, symbol, direction, targetPrice, triggeredAt), PortfolioSnapshot (id, userId, totalValue, capturedAt)

## Market data
- Wrap a provider (Finnhub/Polygon/Alpaca data) behind /api/quote/[symbol] and /api/candles/[symbol]
- If no API key is configured, fall back to deterministic seeded mock prices so the app always runs
- Cache quotes briefly (a few seconds) to avoid hammering the provider on a busy feed

## Trading logic (must actually work, server-side)
- Buy: reject if cashBalance < qty × price; else debit cash, upsert holding, recompute avgCost = (oldQty×oldAvg + newQty×price)/(oldQty+newQty)
- Sell: reject if qty > held; else credit cash, reduce holding, delete row at zero
- Support both share-quantity and dollar-amount buys (convert dollars → fractional qty at the live price)
- Portfolio value = cash + sum(qty × livePrice); write a PortfolioSnapshot after each trade
- Total return = (portfolio value minus total deposited) shown as $ and %
- Use integer cents (or a decimal type) for cash; store fractional share quantities to 6 decimals
- Never trust client-sent prices - fetch the quote server-side at execution time
- Alerts: a small checker compares each alert's target to the live price and marks it triggered

## Style
Sleek and minimal: dark theme by default, one accent (mint #00C805 for up, coral #FF5000 for down), oversized portfolio number, smooth Recharts/SVG area charts, generous spacing, mobile-first. Add a persistent simulation disclaimer.

Seed: ~20 tickers with 90 days of mock OHLC history, one demo user holding 4 positions with realistic cost basis, a 6-symbol watchlist, a couple of price alerts, and a few portfolio snapshots so the hero chart and alerts render immediately.

Build a production-quality Robinhood-style paper-trading platform. Trading is SIMULATED (no license, no real funds), but the order engine, ledger and balances must be server-authoritative and auditable - assume hostile clients trying to mint free buying power.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; lightweight charting (lightweight-charts or Recharts) for price/portfolio charts
- PostgreSQL via Prisma; NextAuth (email + Google); a market-data adapter interface with Finnhub/Polygon implementations and a deterministic mock for tests
- Zod for request validation; a background worker (or Vercel cron) for alert evaluation and daily snapshots

## Core design: an append-only ledger
- Do NOT store a mutable cash balance as the source of truth. Model a LedgerEntry table (userId, type: DEPOSIT|BUY|SELL, symbol?, qty?, price?, cashDelta, createdAt). Cash balance and buying power are DERIVED by summing entries
- Holdings are derived from BUY/SELL entries too; expose a materialized/ cached projection for fast reads, but the ledger is truth
- This makes every balance explainable and prevents the classic 'double-spend on concurrent buys' bug

## Order execution (server-authoritative)
- POST /api/orders: { symbol, side, quantity|dollars }. Server fetches a fresh quote, validates buying power for buys / held qty for sells, writes the ledger entry inside a single Postgres transaction, returns the executed price
- Fractional support: allow dollar-based buys, store quantity to 6 dp, round cash to cents
- Idempotency: accept a client idempotency key to prevent double-submits

## Schema
users, ledger_entries (append-only), holdings_projection, watchlist_items, alerts, portfolio_snapshots, quote_cache. Indexes on ledger_entries(user_id, created_at) and alerts(symbol) for the evaluator.

## Implementation order
1. Schema + auth + market-data adapter (mock impl + one real provider) + seed tickers
2. Ledger + balance/holdings projections with unit tests (concurrent-buy test must pass)
3. Order endpoint + trade sheet UI + success states
4. Stock detail page: chart, stats, Buy/Sell; home portfolio hero + timeframe chart from snapshots
5. Watchlists + search (typeahead, trending)
6. Alerts worker + push/email; daily snapshot job
7. Gold subscription gate (real-time data, advanced charts) via Stripe

## Quality bar
- A persistent, unmissable 'Simulation - not real trading' disclaimer; never imply real brokerage
- Money math in integer cents (or a decimal lib), never floats; property-test that ledger sum == derived balance
- Charts respect reduced-motion; full keyboard nav on the trade sheet

Start with step 1; show me the market-data adapter interface and the LedgerEntry model + the concurrent-buy test before continuing.

Design the complete UI for a Robinhood-style paper-trading app called StackUp. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: sleek, calm, premium fintech - near-black background (with a clean light mode), a single energetic accent (mint #00C805 for gains, coral #FF5000 for losses), oversized numbers, lots of whitespace, smooth chart line animations, tactile button presses. Mobile-first.

## Screens

### 1. Home / portfolio
- Top: greeting + avatar; HUGE portfolio value number with today's $ and % change in accent color
- Smooth area/line chart filling the upper third; timeframe segmented control 1D · 1W · 1M · 3M · 1Y · ALL; scrubbing the chart updates the number
- 'Buying power' chip; Holdings section (rows: symbol, name, mini sparkline, price, % change); Watchlist section below; small 'Simulation' badge
- Mobile bottom tab bar: Home, Search, Trade, Alerts, Account

### 2. Stock detail
- Header: symbol, company name, live price, day change pill
- Large interactive line chart with timeframe toggle and a draggable crosshair
- Stats grid (Open, High, Low, Volume, Mkt Cap, P/E, 52wk range), About paragraph, news list placeholder
- Sticky bottom bar: green Buy and outlined Sell buttons

### 3. Trade sheet (slide-up modal)
- Toggle Buy/Sell; toggle Shares/Dollars; big numeric keypad-style input
- Live 'Estimated cost' and 'Buying power after' lines; Review → Confirm with a satisfying checkmark animation and order summary card

### 4. Search & discovery
- Search bar with typeahead results (symbol + name + tiny sparkline); 'Trending', 'Top movers', 'Recently viewed' chips/lists

### 5. Alerts
- List of price alerts (symbol, 'above/below $X', toggle); 'New alert' form sheet; empty state illustration
- A triggered-alert toast/notification mock so the re-engagement loop is visible

### 6. Account & paywall
- Cash, total return (all-time), individual stat cards; 'Reset portfolio' button
- 'StackUp Gold' hero card: gradient, benefits checklist (real-time data, Level II-style depth, advanced charts, bigger instant transfers), $5/mo CTA, disclaimer note

## Components to design once and reuse
- Ticker row (symbol, mini sparkline, price, % change pill) used in holdings, watchlist and search
- Timeframe segmented control and the area-chart shell
- Up/down change pill that flips color and arrow on sign

Fully responsive, mobile-first. Fill every screen with realistic tickers, prices, % changes and chart data, and include a clear 'Paper trading simulation - not a real brokerage' disclaimer in the footer and onboarding.

Build a Robinhood-style paper-trading app called StackUp. Trading is SIMULATED only - no real money moves and no brokerage license is involved. Make that disclaimer visible.

## Entities
- Holding: user, symbol, quantity, avgCost
- Order: user, symbol, side (buy/sell), quantity, price, status, createdAt
- WatchlistItem: user, symbol, position
- Alert: user, symbol, direction (above/below), targetPrice, triggeredAt
- PortfolioSnapshot: user, totalValue, capturedAt
- UserAccount: user, cashBalance (start 10000), isGold

## Roles
- Investor: searches stocks, manages watchlists, places simulated orders, sets alerts, views portfolio
- Admin: manages the ticker universe and seed prices, dashboard with user count and trades per day

## Pages
1. Home / portfolio: large portfolio value with an area chart and timeframe toggle, holdings list, watchlist; small 'simulation' badge
2. Stock detail: price header, interactive chart, key-stats grid, About text, Buy/Sell buttons
3. Trade sheet: choose shares or dollars, see estimated cost and remaining buying power, confirm with a success screen
4. Search: typeahead ticker search with trending and recently viewed
5. Alerts: list and create price alerts; a triggered alert shows as a notification
6. Account: cash balance, total return, reset portfolio, Gold upsell (real-time data, advanced charts, $5/mo - mock checkout)
7. Admin: manage the ticker universe and seed prices; dashboard of user count and trades per day

## Rules
- Buy: requires cashBalance >= quantity × price; debits cash, updates holding, recomputes avgCost
- Sell: requires enough shares held; credits cash, reduces or removes the holding
- Support dollar-based (fractional) buys as well as whole-share orders
- Portfolio value = cash + sum(quantity × current price); snapshot after each trade and daily for the chart
- Total return = portfolio value minus total deposited, shown as $ and %
- Alerts fire when the current price crosses the target; quotes come from a market-data API or seeded mock prices

## Look & feel
Sleek premium fintech: dark theme, one accent color (mint for gains, coral for losses), oversized numbers, smooth chart animations, generous whitespace, mobile-first. Persistent 'paper trading simulation' disclaimer.

Seed: ~20 tickers with mock price history, a demo investor holding 4 positions with realistic cost basis, a 6-symbol watchlist, and several portfolio snapshots so the hero chart shows immediately.