📊 Quant Order Book

A professional-grade cryptocurrency order book visualization platform with real-time heatmaps, advanced analytics, and mobile-first design. Built for traders who need institutional-level tools in a clean, responsive interface.

🇷🇺 Русская версия | 🇬🇧 English

---

🎯 Why OrderBook Pro?

Traditional order book tools either:

• Require expensive subscriptions (TradingView Premium, Bookmap)
• Lack real-time heatmap visualization
• Have poor mobile experience
• Don't show cumulative volume delta (CVD)

Quant Order Book solves these problems by providing:

✅ Real-Time Heatmap — 5000 order book levels visualized on chart
✅ Advanced Drawing Tools — Trend lines, Fibonacci, Channels, Rectangles, Text, etc. ✅ Technical Indicators — MA, EMA, BOLL, MACD, KDJ, RSI, and 20+ more ✅ Multi-Exchange — Binance, OKX, Bybit support
✅ Quant Metrics — Index α, Delta, CVD, Imbalance, Spread
✅ Mobile-First — TradingView-like experience on phone with bottom navigation ✅ Zero Cost — Free, open-source, no subscriptions

---

🖼️ Screenshots

Desktop	Mobile
Heatmap + Drawing Tools	Bottom Navigation + Indicators
CVD Chart	Compact Metrics

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone repository
git clone https://github.com/nssanta/quant-order-book.git
cd quant-order-book

# Install dependencies
npm install

# Start dev server
npm run dev

Open http://localhost:5173 in your browser.

Production Build

npm run build
npm run preview

---

📖 Features

🌡️ Order Book Heatmap

Real-time visualization of order book depth overlaid on candlestick chart:

• Green zones = Bid orders (buyers)
• Red zones = Ask orders (sellers)
• Brightness = Volume intensity
• Auto-Scroll = Heatmap follows the chart view

✏️ Professional Drawing Tools

Full suite of technical analysis tools powered by KLineChart:

• Lines: Trend Line, Ray, Straight Line
• Levels: Horizontal Ray, Segment, Price Line
• Shapes: Rectangle, Circle, Channels, Fibonacci
• Annotations: Text Notes, Tags

📊 Indicators

Comprehensive library of technical indicators:

• Trend: MA, EMA, SMA, BOLL, SAR, BBI
• Oscillators: MACD, KDJ, RSI, CCI, AO, ROC
• Volume: VOL, OBV, MFI, PVT
• Others: WR, MTM, CR, DMA, TRIX

📊 Advanced Analytics

Metric	Description
Index α	Buyer vs seller strength ratio. >1 = buyers stronger
Delta	Buy volume minus sell volume
CVD	Cumulative Volume Delta over time
Imbalance	Order book bid/ask imbalance percentage
Spread	Best ask - best bid price

📱 Mobile Experience

• Bottom Navigation — 5 tabs: Chart, Draw, Book, Info, Settings
• Compact Header — Exchange, Symbol, Timeframe in one row
• Touch-Optimized — Swipe, pinch-zoom, responsive layout
• Optimized Order Book — Full-screen sidebar view

🏦 Multi-Exchange Support

Exchange	Status	Features
Binance	✅ Full	Klines, Order Book, Trades
OKX	✅ Full	Klines, Order Book
Bybit	✅ Full	Klines, Order Book
Coinbase	⚠️ Basic	Klines only

---

🏗️ Project Structure

orderbook-pro/
├── index.html              # Entry point
├── src/
│   ├── main.js             # App initialization & UI Logic
│   ├── charts/
│   │   ├── CandlestickChart.js    # KLineChart wrapper
│   │   ├── OrderBookHeatmap.js    # KLineChart Overlay Heatmap
│   │   ├── CVDChart.js            # D3.js CVD visualization
│   │   ├── DepthChart.js          # Order book depth
│   │   └── DOMLadder.js           # DOM ladder view
│   ├── components/
│   │   ├── SettingsPanel.js       # User preferences
│   │   └── LevelsSummary.js       # Key price levels
│   ├── exchanges/
│   │   ├── BinanceAdapter.js      # Binance WebSocket
│   │   ├── OKXAdapter.js          # OKX WebSocket
│   │   ├── BybitAdapter.js        # Bybit WebSocket
│   │   └── CoinbaseAdapter.js     # Coinbase WebSocket
│   ├── analytics/
│   │   ├── IndexAlpha.js          # Quant metrics
│   │   └── LevelAnalyzer.js       # Level detection
│   ├── core/
│   │   ├── WebSocketManager.js    # Multi-WS manager
│   │   └── StorageManager.js      # LocalStorage
│   └── styles/
│       └── main.css               # TradingView-like theme

---

⚙️ Configuration

Settings panel allows customization:

Setting	Options	Default
Candle Up Color	Any HEX	#00c853
Candle Down Color	Any HEX	#ff1744
Heatmap Opacity	0.1 - 1.0	0.7
Heatmap Levels	50-500	100
Order Book Depth	5-100	20

Color presets: Classic, TradingView, Binance, Monochrome

---

🔧 Technical Details

Key Technologies

• KLineChart — Professional financial charting engine
• D3.js — CVD chart visualization
• WebSocket — Real-time data streaming
• Vite — Fast dev server and bundler

Performance

• Overlay-based heatmap rendering
• Efficient WebSocket message handling
• Debounced re-renders on settings change

---

📄 License

MIT License — free for personal and commercial use.