## 1. Architecture design

```mermaid
graph TD
  A[User Browser] --> B[React Frontend Application]
  B --> C[WebSocket Connection]
  C --> D[Python Backend Server]
  D --> E[MT5 Python API]
  E --> F[Local MT5 Platform]

  subgraph "Frontend Layer"
      B
  end

  subgraph "Backend Layer"
      D
  end

  subgraph "External Services"
      F
  end
```

## 2. Technology Description

* Frontend: React\@18 + tailwindcss\@3 + vite

* Initialization Tool: vite-init

* Backend: Python\@3.9 + FastAPI + WebSockets

* Database: None (real-time data only)

## 3. Route definitions

| Route     | Purpose                                                      |
| --------- | ------------------------------------------------------------ |
| /         | Dashboard page, displays live trading charts and market data |
| /settings | Settings page, configure MT5 connection parameters           |

## 4. API definitions

### 4.1 WebSocket API

Real-time market data streaming

```
ws://localhost:8000/ws/market-data
```

Message format (Backend to Frontend):

```json
{
  "type": "market_data",
  "symbol": "EURUSD",
  "timeframe": "1m",
  "data": {
    "timestamp": 1706012345,
    "open": 1.0850,
    "high": 1.0855,
    "low": 1.0848,
    "close": 1.0852,
    "volume": 1250
  }
}
```

### 4.2 REST API

MT5 Connection Test

```
POST /api/test-connection
```

Request:

| Param Name | Param Type | isRequired | Description          |
| ---------- | ---------- | ---------- | -------------------- |
| server     | string     | true       | MT5 server address   |
| login      | integer    | true       | MT5 account login    |
| password   | string     | true       | MT5 account password |

Response:

| Param Name | Param Type | Description               |
| ---------- | ---------- | ------------------------- |
| connected  | boolean    | Connection status         |
| symbols    | array      | Available trading symbols |

## 5. Server architecture diagram

```mermaid
graph TD
  A[WebSocket Handler] --> B[MT5 Service]
  B --> C[MT5 Python API]
  C --> D[Local MT5 Platform]
  
  E[REST API Handler] --> B
  
  subgraph "Python Backend Server"
      A
      E
      B
  end
```

## 6. Data model

### 6.1 Data model definition

No persistent database required. Real-time market data flows directly from MT5 to frontend via WebSockets.

### 6.2 Data Structure

Market Data Object (temporary, in-memory only):

```json
{
  "symbol": "string",
  "timeframe": "string", 
  "candles": [
    {
      "timestamp": "number",
      "open": "number",
      "high": "number", 
      "low": "number",
      "close": "number",
      "volume": "number"
    }
  ]
}
```

## 7. MT5 Integration Details

Python Backend will use `MetaTrader5` Python package to:

* Establish connection to local MT5 terminal

* Subscribe to real-time price updates

* Fetch historical candlestick data

* Get available trading symbols

* Monitor connection status

Connection parameters required:

* Server address (from MT5 login window)

* Account login number

* Account password

* Data feed timezone settings

