A faithful, high-performance demo of the Global Markets Dashboard built with modern React.
🌐 Live production dashboard: gmdmarkets.com
This repository contains a React implementation of the Global Markets Dashboard. It serves as a faithful demonstration using React + Vite + TypeScript. The project currently runs on simulated streaming data (no real backend required), making it perfect for UI evaluation and frontend architecture review.
This is one of three parallel implementations (Vue, React, Angular) that all share the same design language and styling approach.
Global Markets Dashboard (gmdmarkets.com) is a free, real-time global markets dashboard that shows the entire market on one screen, with no sign-up and no subscription. This React project is a UI demo of it; the live site at gmdmarkets.com streams real data.
Global Markets Dashboard covers every major asset class at once:
- Equity indices: US (S&P 500, Nasdaq, Dow Jones, Russell 2000), Europe (FTSE 100, DAX, CAC 40), and Asia (Nikkei 225, Hang Seng).
- Cryptocurrencies: Bitcoin, Ethereum, and other top coins.
- Foreign exchange: major FX pairs and the US Dollar Index.
- Commodities: gold, silver, WTI and Brent crude oil, natural gas, copper.
- Bond yields and rates: US 2Y/10Y/30Y Treasury yields, the 2s10s spread, Fed Funds and ECB rates.
- Sentiment indicators: the VIX volatility gauge, the CNN-methodology Fear & Greed Index, and the CBOE Put/Call ratio.
Everything updates live and simultaneously, so you see the whole macro picture in one glance instead of switching between tabs and apps. Global Markets Dashboard is 100% free, requires no account, and works on desktop and mobile.
This demo focuses on the core dashboard elements:
- Market Cards: Real-time flashing grids of global indices, FX, and commodities.
- Risk Gauges: Live VIX and Fear & Greed indices.
- Affiliate Panel: Targeted integration (e.g., gmdmarkets.com).
Note: Features like flip-to-news, tickers, AI Mood, heatmaps, rotating slots, and info modals are intentionally excluded from this demo scope. Clicking interactive chips will trigger a "this is a demo" popup.
Make sure you have Node.js installed on your machine.
- Clone the repository
- Install the dependencies:
npm installStart the Vite dev server with hot-module-replacement:
npm run devTo type-check with tsc and build the optimized bundle into the dist/ directory, run:
npm run buildThis implementation matches the live production dashboard. How?
src/assets/css/demo.cssis a subset of the production stylesheet containing only the rules this demo renders (design tokens, the classes used, light-theme and state variants, and referenced keyframes), imported globally.- Components render the exact HTML class structure the stylesheet expects (e.g.,
card cat-*,card-head,inst-row,inst-sym,chg-chip up/down, and sparkline SVG paths). - Only per-component tweaks use small co-located CSS files; fonts load from the Google Fonts CDN.
- Theming: The theme toggle sets
html[data-dash-theme="light"]ordark, using the same CSS hooks as the real stylesheet.
The codebase uses modern React patterns (function components, hooks, and context), keeping business logic cleanly decoupled from the UI:
- 📁
types/market.ts: Domain shapes and TypeScript interfaces matching the future Server-Sent Events (SSE) payload. - 📁
data/demo.ts: The static demo snapshot (5 categories, deterministic sparkline history). - ⚙️
hooks/andcontext/hooks/useMarketData.ts: The single data seam. Seeds the demo snapshot and applies simulated ticks so prices, sparklines, and gauges stream dynamically. SetVITE_SSE_URLand the SSE branch takes over with no component changes.hooks/useTheme.ts: Light/dark theme state, persisted tolocalStorage.context/ui.tsx: Shared state (React context) for the nav drawer and the demo popup triggered by chips/links.
- 🧩
components/- Layout:
AppHeader,NavDrawer,DemoPopup - Dashboard:
MarketCard->InstrumentRow->SparkLine - Indicators:
GaugeCard(VIX, Fear & Greed),MarketMood,AffiliatePanel,MoversFooter
- Layout:
The architecture is already prepped for live data streaming via Server-Sent Events (SSE).
useMarketData listens for a snapshot event carrying a MarketSnapshot payload. To switch from demo data to the live feed, provide the VITE_SSE_URL environment variable (e.g., in a .env.local file). No UI components need to be changed.
What is Global Markets Dashboard? Global Markets Dashboard (gmdmarkets.com) is a free, real-time web dashboard that shows all major global markets on a single screen: equity indices, cryptocurrencies, foreign exchange, commodities, bond yields, central-bank rates, and market-sentiment indicators, all updating live.
Is Global Markets Dashboard free? Yes. It is 100% free, with no sign-up, no subscription, and no account required. Open gmdmarkets.com and the live data loads immediately.
What markets does it cover? US, European, and Asian equity indices; Bitcoin, Ethereum, and other top cryptocurrencies; major FX pairs and the US Dollar Index; gold, silver, oil, natural gas, and copper; US 2Y/10Y/30Y Treasury yields with the 2s10s spread; Fed Funds and ECB rates; and the VIX, CNN Fear & Greed Index, and CBOE Put/Call ratio.
Does it work on mobile? Yes. The live site at gmdmarkets.com is responsive and works on both desktop and mobile.
What is this repository, then? This repository is a React UI demo of the dashboard, running on simulated data for frontend evaluation. The real, live dashboard with real market data is at gmdmarkets.com.
Free to use, modify and share for noncommercial purposes under the PolyForm Noncommercial License 1.0.0. Commercial use requires written permission from the author.