Crypto Trading Terminal

High-performance real-time cryptocurrency trading dashboard integrated with Binance Public API. Built with React, TypeScript, Redux Toolkit, and Redux Saga for professional-grade state management and WebSocket streaming.

🚀 Features

Real-time Market Data

• Live Price Ticker: Real-time price updates for BTC/USDT and other trading pairs
• 24h Statistics: Price change, volume, high/low indicators with color-coded visualization
• Symbol Switcher: Quick switching between popular trading pairs (BTC, ETH, BNB, SOL, ADA, XRP, DOGE, DOT)

Order Book

• Depth Stream (L2): Real-time order book with 20 price levels
• Price Aggregation: Intelligent order aggregation with cumulative totals
• Visual Bars: Depth visualization showing bid/ask distribution
• Spread Calculation: Real-time bid/ask spread with percentage display

Architecture Highlights

• WebSocket Management: Automatic connection lifecycle with reconnection logic
• Performance Optimized: Throttled updates (100ms) to prevent Redux store overload
• Memory Safe: Proper cleanup of WebSocket connections and listeners
• Type Safe: Strict TypeScript with no any types
• Feature-based Structure: Clean, maintainable code organization

🛠️ Technologies

• React 18 - Modern UI framework with hooks
• TypeScript 5.3 - Static typing for type safety
• Redux Toolkit 2.0 - Efficient state management
• Redux Saga 1.3 - Complex async flows and WebSocket handling
• Tailwind CSS 3.4 - Utility-first CSS framework
• Vite 5.1 - Fast build tool and dev server
• Axios 1.13 - HTTP client for REST API calls
• Binance Public API - Market data source (REST + WebSocket)

📋 Prerequisites

• Node.js 20.x or 22.x (LTS recommended)
• npm or yarn package manager

🔧 Installation

# Clone the repository
git clone <repository-url>
cd CryptoTradingTerminal

# Install dependencies
npm install

🚀 Running

# Development mode (with hot reload)
npm run dev

# Production build
npm run build

# Preview production build locally
npm run preview

The application will start on http://localhost:5173 (or the next available port).

🧪 Testing

The project includes comprehensive test coverage using Vitest and React Testing Library.

Running Tests

# Run tests in watch mode
npm test

# Run tests with UI
npm test:ui

# Run tests once
npm test -- --run

Test Coverage

The test suite covers:

• Components: App, MarketTicker, SymbolSwitcher, OrderBook
• Redux Slices: marketSlice, orderbookSlice (state management)
• Selectors: marketSelectors, orderbookSelectors (memoized selectors)
• Utilities: formatters (price, volume, percent formatting), orderbook utils (aggregation, merging)

Test Structure

Tests are co-located with their source files using the .test.ts and .test.tsx naming convention:

src/
├── App.test.tsx
├── common/utils/
│   └── formatters.test.ts
├── features/
│   ├── market/
│   │   ├── components/
│   │   │   ├── MarketTicker.test.tsx
│   │   │   └── SymbolSwitcher.test.tsx
│   │   └── store/
│   │       ├── marketSlice.test.ts
│   │       └── marketSelectors.test.ts
│   └── orderbook/
│       ├── components/
│       │   └── OrderBook.test.tsx
│       ├── store/
│       │   ├── orderbookSlice.test.ts
│       │   └── orderbookSelectors.test.ts
│       └── utils.test.ts
└── test/
    ├── setup.ts          # Test configuration
    └── testUtils.tsx     # Testing utilities (renderWithProviders)

Testing Tools

• Vitest 4.0 - Fast unit test framework
• React Testing Library - Component testing utilities
• @testing-library/jest-dom - Custom Jest matchers for DOM
• jsdom - DOM environment for testing

Test Configuration

Tests are configured in vitest.config.ts with:

• React plugin support
• jsdom environment for DOM testing
• Path aliases (@/ for src/)
• Global test setup via src/test/setup.ts

📁 Project Structure

src/
├── api/                          # Binance API integration
│   ├── binanceRest.ts           # REST API client (Axios)
│   └── binanceSockets.ts        # WebSocket client (eventChannel)
├── assets/                       # Global styles, images
│   └── index.css                # Tailwind CSS imports
├── common/                       # Shared utilities
│   ├── constants/               # API endpoints, configuration
│   │   └── binance.ts
│   ├── types/                   # Global TypeScript interfaces
│   │   └── binance.ts
│   └── utils/                   # Formatters and helpers
│       └── formatters.ts
├── features/                    # Feature modules
│   ├── market/                  # Market ticker feature
│   │   ├── components/         # MarketTicker, SymbolSwitcher
│   │   ├── store/
│   │   │   ├── marketSlice.ts  # Redux slice
│   │   │   ├── marketSaga.ts   # WebSocket saga with throttling
│   │   │   └── marketSelectors.ts # Memoized selectors
│   │   └── index.ts            # Public API
│   └── orderbook/               # Order book feature
│       ├── components/         # OrderBook component
│       ├── store/
│       │   ├── orderbookSlice.ts
│       │   ├── orderbookSaga.ts # Depth stream saga
│       │   └── orderbookSelectors.ts
│       ├── types.ts            # Order book types
│       └── utils.ts             # Aggregation logic
├── store/                        # Redux store configuration
│   ├── rootReducer.ts           # Combined reducers
│   ├── rootSaga.ts              # Root saga (all feature sagas)
│   ├── hooks.ts                 # Typed Redux hooks
│   └── index.ts                 # Store setup
├── App.tsx                       # Main application component
└── main.tsx                      # Application entry point

🏗️ Architecture

State Management

• Redux Toolkit: Modern Redux with simplified API
• Redux Saga: Side effects management using generators
• Reselect: Memoized selectors for performance optimization

WebSocket Pattern

• eventChannel: Redux Saga pattern for WebSocket streams
• Automatic Cleanup: Proper cancellation on component unmount
• Reconnection Logic: Built-in error handling and reconnection

Performance Optimizations

• Throttling: 100ms throttling for ticker and orderbook updates
• Memoized Selectors: Prevents unnecessary re-renders
• Code Splitting: Feature-based code organization

🔄 CI/CD

GitHub Actions workflows are configured for:

• CI: Automated testing on Node.js 20.x and 22.x
• Type Checking: TypeScript compilation verification
• Build Verification: Production build testing
• Deploy: Automated deployment on main branch

See .github/workflows/ for details.

📝 Key Implementation Details

WebSocket Lifecycle

1. Connection: Automatic WebSocket connection on symbol change
2. Subscription: Subscribe to ticker/depth streams
3. Updates: Throttled updates to Redux store
4. Cleanup: Automatic cancellation on symbol change or unmount

Order Book Flow

1. Snapshot: Load initial order book from REST API
2. Stream: Subscribe to depth stream updates
3. Merge: Merge incremental updates with snapshot
4. Aggregate: Calculate cumulative totals for visualization

Symbol Switching

• Cancels existing WebSocket connections
• Resets state for old symbol
• Initializes new streams for selected symbol
• Synchronizes market and orderbook data

🎨 UI Features

• Dark Theme: Professional dark UI optimized for trading
• Responsive Design: Works on desktop and tablet
• Real-time Updates: Live price and order book updates
• Color Coding: Green/red indicators for price changes
• Loading States: Skeleton loaders during data fetch

📄 License

MIT

👤 Author

Maxsoft

---

Note: This application uses Binance Public API. No API keys are required for market data access. For trading functionality, API keys would be needed (not implemented in this version).