Order Vantage

High performance trading interface built for the Kraken Forge Hackathon.

Documentation

---

Overview

Order Vantage visualizes Kraken's order book data in real time. It was built during the Kraken Forge hackathon to demonstrate how to handle high frequency WebSocket data in a React application without performance regressions.

The project splits the complexity into three parts: handling the data stream (Rust Core), managing state and logic (SDK), and rendering the UI (this repo).

Architecture

This repository (orderbook-react) is the frontend. It relies on the following components:

• ordervantage-sdk: NPM package that handles WebSocket connections, throttling, and state management.
• ordervantage-core: Rust backend that proxies Kraken's WS API and constructs the order book before sending it to the client.

Running Locally

You need Node.js and a running instance of the core backend (or point to the hosted dev API).

1. Clone the repo

   git clone https://github.com/unholy0X/ordervantage-react.git
   cd orderbook-react

2. Install dependencies

   npm install

3. Setup Environment

   cp .env.example .env

   If you do not have the Rust backend running locally, set VITE_API_URL to https://api.ordervantage.xyz.

4. Start Dev Server

   npm run dev

Tech Stack

• Frontend: React 19, Vite, TypeScript
• Styling: Tailwind CSS v4, Framer Motion
• Protocol: Socket.IO (via ordervantage-sdk)

License

MIT

Created by Naoufal Brahmi (naoufalbrahmi.com)