Crude Terminal — Oil Price Dashboard

A professional, dark-themed trading-style dashboard for crude oil, built with React + Vite + TypeScript + Tailwind + Recharts. It runs instantly with zero API keys thanks to a deterministic mock data layer — drop in a real data source later without touching the UI.

Features

Core (requested)

• Live-style Price Chart for WTI Crude with area/volume toggle and 1H · 4H · 1D · 1W · 1M · 1Y timeframes, OHLC strip, gradient fill colored by direction, and reference line at open.
• Market Cap (spot × circulating barrels) and FDV (spot × global proven reserves) cards alongside 24h Volume, 24h Change, Open Interest and Circulating Supply.
• Order Book with bid/ask depth bars, price grouping selector, and a spread row (abs + bps).
• News Panel with category filters (OPEC, US, Geopolitics, Inventory, Demand, Macro), per-story sentiment dot, source, and relative time.

Extras (suggested on top)

• Ticker strip marquee: WTI, Brent, Nat Gas, Gasoline, Heating Oil, XOM, CVX, DXY, Gold, SPX.
• Recent Trades tape colored by side.
• Market Sentiment: half-circle Fear & Greed gauge, RSI(14), Put/Call ratio, MA-50 / MA-200 signals, long/short positioning bar.
• Supply & Demand snapshot: global supply vs demand, balance indicator (oversupply/deficit), supply share by region (OPEC+/US/Russia/Other), inventory change, US SPR level, rig count.
• Economic Calendar for the next 72h: EIA inventories, PMIs, FOMC minutes, OPEC MOMR, China IP — with country flags and impact dots.
• Sticky header with search (⌘K), watchlist, alerts, settings, and a Connect button.

Running locally

npm install
npm run dev        # http://localhost:5173
npm run build      # production build
npm run preview    # preview the build

Project structure

src/
  components/
    Header.tsx
    TickerStrip.tsx
    PriceChart.tsx
    StatsCards.tsx
    OrderBook.tsx
    RecentTrades.tsx
    NewsPanel.tsx
    MarketSentiment.tsx
    SupplyDemand.tsx
    EconomicCalendar.tsx
  lib/
    utils.ts       # formatters + deterministic PRNG
    mock.ts        # candles, orderbook, trades, news, calendar, sentiment
  App.tsx
  main.tsx
  index.css

Swapping in real data

Each panel reads from src/lib/mock.ts. To wire real APIs, replace the functions / constants there (e.g. generateCandles, generateOrderBook, newsItems, calendarEvents) with fetchers. The UI consumes typed objects (Candle, OrderBookRow, Trade, NewsItem, CalendarEvent) so a thin adapter layer is enough.

Suggested real sources:

• Prices / candles: EIA, CME, Polygon.io, TwelveData, Alpha Vantage
• Order book / trades: broker WebSocket (IBKR, CQG) or a crypto-oil product feed
• News: NewsAPI, Benzinga, Refinitiv, or RSS (Reuters, Bloomberg, OilPrice.com)
• Fundamentals: EIA Weekly Petroleum Status Report, OPEC MOMR, Baker Hughes rig count
• Calendar: TradingEconomics, ForexFactory, Investing.com

Ideas for next iterations

• Real-time WebSocket wiring with optimistic UI and throttled repaints.
• Candlestick chart (OHLC) with volume profile, drawing tools, indicator overlays.
• Multi-symbol compare (WTI vs Brent spread, cracks, time spreads).
• Alerts engine (price/volume/news sentiment triggers) with browser notifications.
• Portfolio tracker + P&L for paper trading.
• Light theme + accessibility polish.