Gallery
Description
GitHub: https://github.com/BuckyMaler/kraken-forge-orderbook-visualizer
Demo App: https://kraken-forge-demo-app.vercel.app
Component Registry: https://kraken-forge-component-registry.vercel.app
Problem
New trading apps, dashboards, and terminals are flooding the market. All of them having common UI/UX elements such as order books, tickers, and charts. However, there are no open source component libraries for trading UIs. With my custom component registry you can add an order book component to your app in seconds.
Solution
My custom component registry is a code distribution tool powered by shadcn. With it, engineers can add UI components to their apps with a single command. While its beginning is humble, with just the order book component, it could be the start to a full-fledged trading component library.
Features
Component Registry
- Sleek, reusable order book component
- Add components to your app in seconds with shadcn CLI
Demo App
- Performant, real-time order book
- Time travel up to 500 previous states
Technical Highlights
Tech Stack
- 💪 TypeScript
- 🏗️ Next.js
- Fast development builds
- Optimized production build
- 🛠️ Redux Toolkit
- Robust state management
- Granular state updates
- 🎨 shadcn/ui
- Accelerates development with pre-built components
- Provides design consistency
- 💅 Tailwind CSS
- Accelerates development with utility classes
- Pairs well with shadcn/ui
- 🐙 Kraken WebSocket API
Performance Optimizations
React updates triggered by websocket data are throttled to improve performance and UX
Depth graph rendering is hardware accelerated using CSS transforms
Skeleton loading states to improve perceived performance and UX
Time travel only caches the latest 500 order book states to prevent memory bloat
React Compiler is enabled for automatic memoization using useMemo, useCallback, and React.memo
Data Streaming
Level 2 (L2) order book data is streamed via the Kraken WebSocket API. websocketMiddleware is responsible for connecting/disconnecting the websocket connection and sending/receiving websocket messages. orderbookMiddleware is responsible for subscribing/unsubscribing to the book channel and handling book channel messages.
book channel subscribe flow
orderbook state update flowFor additional details, refer to the project's README.md.