A real-time dashboard for monitoring Binance futures liquidations using WebSocket connections. Track live liquidation events with filtering, sorting, and visualization capabilities.
- Real-time Data Stream: Live connection to Binance futures liquidation WebSocket
- Interactive Dashboard: Modern, responsive UI with dark theme
- Data Visualization: Bar charts showing liquidation volume by symbol
- Advanced Filtering: Filter liquidations by trading symbol
- Flexible Sorting: Sort by time, price, quantity, or symbol
- Live Statistics: Real-time metrics including total volume and bull/bear ratios
- Mobile Optimized: Fully responsive design for all devices
- Auto-reconnection: Automatic WebSocket reconnection on connection loss
The dashboard provides:
- Live liquidation feed with real-time updates
- Volume statistics and bull/bear sentiment indicators
- Interactive charts powered by Recharts
- Symbol-based filtering and multi-column sorting
- Connection status monitoring with error handling
- Frontend: React 19.2.0 with TypeScript
- Styling: Tailwind CSS for responsive design
- Charts: Recharts for data visualization
- Icons: Lucide React for modern iconography
- Data Source: Binance WebSocket API (
wss://fstream.binance.com/ws/!forceOrder@arr) - Build Tool: Create React App
- Node.js (v16 or higher)
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/cj4c0b1/binance-liquidation-tracker.git
cd binance-liquidation-tracker- Install dependencies:
npm install- Start the development server:
npm start- Open http://localhost:3000 in your browser
The application will automatically connect to Binance's liquidation WebSocket stream and begin displaying real-time data.
Runs the app in development mode with hot reloading enabled.
Launches the test runner in interactive watch mode.
Builds the app for production with optimized bundles and minification.
The app processes Binance liquidation events with the following structure:
interface LiquidationData {
id: string; // Unique identifier
symbol: string; // Trading pair (e.g., "BTCUSDT")
side: 'BUY' | 'SELL'; // Liquidation side
price: string; // Liquidation price
quantity: string; // Liquidation quantity
time: string; // Formatted timestamp
timestamp: number; // Unix timestamp
}- Connects to
wss://fstream.binance.com/ws/!forceOrder@arr - Handles both single events and batch arrays
- Implements automatic reconnection with exponential backoff
- Processes liquidation events continuously without a fixed limit
- Filters liquidations by symbol (partial string matching)
- Sorts by time, price, quantity, or symbol (ascending/descending)
- Calculates aggregate statistics (volume, counts, ratios)
- Generates chart data for top 10 symbols by volume
- Dark theme optimized for trading environments
- Responsive grid layout for mobile and desktop
- Live connection status indicators
- Interactive sorting buttons with visual feedback
- Efficient React state updates using functional updates
- Memoized calculations for chart data generation
- Optimized WebSocket message processing
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
npm run buildThe build folder contains optimized static files ready for deployment to any static hosting service.
This project is configured for Netlify deployment with automatic builds from your git repository.
This project is open source and available under the MIT License.
This tool is for educational and informational purposes only. Always conduct your own research before making trading decisions. Liquidation data is provided by Binance and subject to their terms of service.