Build A Real-Time Cryptocurrency Order Book App With React And WebSockets

·

Order books are indispensable tools for traders across financial markets—from stocks and currencies to cryptocurrencies. They provide a live display of buy and sell orders, offering critical insights into supply and demand dynamics.

This guide will walk you through creating a real-time cryptocurrency order book app using React, Redux, WebSockets, and modern web technologies. By the end, you'll have a functional app that visualizes market depth for trading pairs like BTC/USD.

What Is a Cryptocurrency Order Book?

An order book organizes live buy (bid) and sell (ask) orders for a trading pair (e.g., BTC/USD). It reveals market depth—showing liquidity and participant sentiment at various price levels.

👉 Explore advanced trading tools to enhance your strategy.

Key Features of Our React Order Book App

  1. Live WebSocket Data: Fetch real-time updates from exchanges like Coinbase.
  2. Dynamic Visual Updates: Animate order changes for clarity.
  3. Price Grouping: Aggregate orders by customizable brackets (e.g., $0.50 intervals).
  4. Error Handling: Manage disconnections gracefully.
  5. Responsive Design: Works on desktop and mobile.

Why WebSockets?

Traditional polling is inefficient for real-time data. WebSockets enable persistent, low-latency connections—ideal for high-frequency markets like crypto.

How WebSockets Work:

Step-by-Step Implementation

1. Project Setup with React and Redux

npx create-react-app order-book --template redux-typescript

2. WebSocket Integration

Use the react-use-websocket hook to connect to Coinbase's feed (wss://ws-feed.exchange.coinbase.com):

import useWebSocket from 'react-use-websocket';

const { sendMessage, lastJsonMessage } = useWebSocket('wss://ws-feed.exchange.coinbase.com', {
  onOpen: () => sendMessage(JSON.stringify({
    type: 'subscribe',
    product_ids: ['BTC-USD'],
    channels: ['level2']
  })),
  onMessage: (msg) => dispatchOrderUpdates(msg.data)
});

3. Process Order Book Data

Transform raw WebSocket messages into structured bids/asks:

function processOrders(orders) {
  const bids = orders
    .filter(o => o.side === 'buy')
    .reduce((acc, [price, size]) => {
      acc[price] = (acc[price] || 0) + size;
      return acc;
    }, {});
  // Repeat for asks
  return { bids, asks };
}

4. UI Components

Render orders in a price ladder with styled-components:

<OrderLadder>
  {Object.entries(bids).map(([price, size]) => (
    <OrderRow key={price} price={price} size={size} side="bid" />
  ))}
</OrderLadder>

5. Real-Time Animations

Use Framer Motion to animate changes:

<motion.div 
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.3 }}
>
  {/* Order rows */}
</motion.div>

6. Grouping Orders

Aggregate prices into brackets (e.g., $0.50 intervals):

const groupSize = 0.5;
const groupedBids = groupOrders(bids, groupSize);

7. Error Handling

Show reconnection attempts if WebSocket fails:

{isDisconnected && <ReconnectTimer />}

FAQs

Q: How do I add more trading pairs?

A: Extend the product_ids array in the WebSocket subscription (e.g., ['BTC-USD', 'ETH-USD']).

Q: Can I use this with other exchanges?

A: Yes! Replace the WebSocket URL with feeds from Binance, Kraken, etc.

Q: How do I optimize performance?

A: Use React.memo() for order rows and throttle rapid updates.

Q: What’s the best way to visualize large datasets?

A: Implement virtual scrolling or downsample data for high-frequency pairs.

Next Steps

👉 Discover more WebSocket applications in trading systems.

By following this guide, you’ve built a foundation for real-time financial apps. Experiment with new features or extend it to other markets—happy coding!