Skip to content

Readme.md

Latest commit

 

History

History
245 lines (190 loc) · 8.38 KB

Readme.md

File metadata and controls

245 lines (190 loc) · 8.38 KB

Crypto Trading Terminal

Demo Preview

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).