Track #2 - Orderbook Visualizer - Dan Cross

Kraken Orderbook Visualizer & SDK

🏆 Built for the Kraken Developer Platform Hackathon
🚀 Live Demo: https://orderbook-ochre.vercel.app/
Repo: https://github.com/Daniel-Cross/orderbook

💡 What I Built

The Kraken Orderbook Visualizer is both a complete React application and a modular SDK for integrating real-time Kraken orderbook data into any project. At its core, it's a headless state management system (powered by Zustand) that handles WebSocket connectivity, orderbook state updates, and historical snapshot capture—completely separated from the UI. The included visualizer demonstrates the power of this architecture with a professional trading interface featuring real-time price levels, depth visualization, a unique time-travel feature for replaying historical market data, and a live mid-price chart.

What makes this unique is its dual nature: use it as a complete application out of the box, or extract just the core modules to build custom trading tools. The architecture prioritizes reusability, performance, and production-readiness.

✨ Key Features

• 🔴 Real-time Orderbook: Live bid/ask updates via Kraken WebSocket API v2 with automatic reconnection and error recovery

• ⏰ Time-Travel Debugging: Navigate through up to 1 hour of historical snapshots (~1800 data points) with a slider—perfect for analyzing market movements or debugging trading strategies

• 📊 Live Mid-Price Chart: Dynamic candlestick-style chart powered by lightweight-charts, auto-scaling with historical data

• 🎨 Visual Depth Bars: CSS-based liquidity visualization with color-coded bid/ask sides and real-time update highlights

• 🔌 Headless Core Architecture: Pure TypeScript logic separated from UI—use the orderbook engine in Node.js, React, Vue, or any JavaScript environment

• ⚡ Production-Ready: Throttled updates (50ms), efficient Map-based storage, connection pooling, comprehensive TypeScript types, and error boundaries

🛠️ Technical Highlights

Technology Stack:

• React 19 + TypeScript: Leveraging React's latest concurrent features and full type safety
• Zustand: Lightweight state management (1KB) with minimal boilerplate—chosen over Redux for simplicity and performance
• lightweight-charts: Professional-grade charting library from TradingView, optimized for real-time data
• Native WebSocket API: No dependencies for WebSocket handling—full control over connection lifecycle

Architecture Decisions:

• Separation of Concerns: Core logic (orderbookEngine, krakenClient, createOrderbookStore) is 100% framework-agnostic, enabling reuse in any JavaScript environment
• Map-based State Management: Uses Map<string, string> for O(1) price level lookups and updates—critical for handling rapid-fire orderbook deltas
• Immutable Updates: New Map instances on every change ensure React can detect state changes efficiently
• Update Throttling: Batches rapid WebSocket messages every 50ms to prevent UI thrashing while maintaining perceived real-time updates
• Snapshot Capture Strategy: Stores historical snapshots every 2 seconds in live mode, maintaining a circular buffer of 1800 entries (~1 hour)

Performance Optimizations:

• Memoized selectors with Zustand to prevent unnecessary re-renders
• CSS-only depth bars (no canvas/WebGL overhead)
• Sorted arrays cached until state changes
• Depth limiting at the engine level to prevent DOM bloat

🚀 How It Works

Quick Start

npm install
npm start

The application opens at http://localhost:3000 with a live orderbook for BTC/USD.

1. Select Trading Pair: Choose from 6 major pairs (BTC, ETH, SOL, ADA, DOT, MATIC)
2. Adjust Depth: Select between 10, 25, 100, 500, or 1000 price levels
3. Real-time Updates: Watch bid/ask levels update with green/red highlights
4. Time Travel: Click the time-travel button, drag the slider to replay market movements
5. Chart Analysis: Monitor mid-price trends with the synchronized historical chart

🎥 Demo

🌐 Live Demo: https://orderbook-ochre.vercel.app/