Kraken Analytics Visualizer

Kraken Analytics Visualizer

Current Situation

Currently, financial analysts (and any crypto user) need easily accessible information about the cryptocurrencies they want to invest in. But it's not just about seeing each pair; it's also about being able to compare one pair (in which they want to invest) against another to see volatility and have more information to decide whether to invest or look for another pair.

The solution

Kraken Analytics Visualizer is a real-time cryptocurrency trading data visualization application that connects to the Kraken exchange's WebSocket API to display live order book information, trading pair comparisons, and historical data analysis.

Track: Orderbook Visualizer

Features

• Real-time Order Book Visualization: Displays live bid/ask orders showing current market depth
• Multi-Pair Support: Allows users to select from multiple trading pairs (e.g., ETH/USDT)
• Trading Pair Comparison: Compare metrics between two different trading pairs side by side
• OHLC Chart Visualization: Interactive charts with Open, High, Low, and Close data for various time intervals
• Comprehensive Trading Pair List: Shows all available trading pairs with search and pagination
• Ticker Information: Displays key metrics like last price, bid/ask, 24h change, volume, etc.

Technical Highlights

This project is built on Next.js due to its simplicity and lightweight nature compared to other frameworks (essential for efficient use of the websocket connection without excessive resource consumption). A websocket manager handles opening and calling, eliminating the need to open a connection each time (it's opened only once, and each call has its own subscription and unsubscription process).

• For this project, the Rest API is used to obtain the list of pairs (considering that it does not change very often), and WebSockets are used for the rest.

Technologies

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS
• WebSocket: Real-time connection to Kraken API
• Charts: Custom Canvas-based OHLC visualization

How It Works

Installation

Clone the repository.

Install dependencies:

npm install

Create a .env file in the root directory and add the Kraken API URLs:

NEXT_PUBLIC_KRAKEN_API_PAIRS=https://api.kraken.com/0/public/AssetPairs
NEXT_PUBLIC_KRAKEN_WS_URL=wss://ws.kraken.com/v2

Considering that URLs can change, I decided to put them as environment variables so that it works well even when they change.

Usage

Dashboard

• The main dashboard displays available trading pairs with search and pagination

Live Order Book

• Select a trading pair from the list
• View real-time order book data with bids and asks
• See OHLC charts with interval selection
• Access detailed trading pair information in the sidebar

Trading Pair Comparison

• Select two different trading pairs to compare
• View side-by-side ticker data
• Analyze comparison metrics including price differences, volume differences, and spread analysis

Demo & Documentation

GitHub repo: https://github.com/nescampos/krakenanalytics 

Demo: https://krakenanalytics.vercel.app/

Video: https://youtu.be/n0TA0IckMWI