# manish166/trading1 architecture

> Architecture diagram of the GitHub repository manish166/trading1, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/manish166/trading1
- Repository: https://github.com/manish166/trading1
- Video tour (about a minute): https://gitdiagram.com/manish166/trading1/video

## Overview

This is a React crypto-market dashboard that displays watched-symbol price tiles and connection status. The browser entry initializes a stream engine, while the dashboard hook independently opens a Binance WebSocket and writes parsed ticks to Zustand; the tiles instead subscribe to the engine’s throttled tick stream. Thus the implementation has two socket paths rather than one shared broker. The engine also exposes raw and buffered order-book stream APIs, but the service’s order-book bridge is only a commented placeholder. Relationships below are limited to the shown code and README.

Main entry points: [`src/ws/TradingStreamEngine.ts`](https://github.com/manish166/trading1/blob/main/src/ws/TradingStreamEngine.ts) (Trading Stream Engine), [`src/store/useMarketStore.ts`](https://github.com/manish166/trading1/blob/main/src/store/useMarketStore.ts) (Market Store), [`src/App.tsx`](https://github.com/manish166/trading1/blob/main/src/App.tsx) (Dashboard Root), [`src/components/LivePriceGrid.tsx`](https://github.com/manish166/trading1/blob/main/src/components/LivePriceGrid.tsx) (Price Grid)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Dashboard UI"]
  node_dashboard["Dashboard Root<br/>[App.tsx]"]
  node_grid["Price Grid<br/>[LivePriceGrid.tsx]"]
  node_ticker["Price Tile"]
end

subgraph group_runtime["Stream Runtime"]
  node_entry["Application Entry<br/>[main.tsx]"]
  node_connection_hook["Socket Hook<br/>[useWebSocket.ts]"]
  node_container["App Container<br/>[AppContainer.ts]"]
  node_engine["Trading Stream Engine"]
end

subgraph group_state["Market State"]
  node_market_store[("Market Store<br/>[useMarketStore.ts]")]
  node_store_factory["Store Middleware<br/>[utils.ts]"]
end

subgraph group_transport["Network Transport"]
  node_service["Market Data Service"]
end

node_browser(("Browser"))
node_binance["Binance Streams"]

node_browser -->|"loads app"| node_entry
node_entry -->|"initializes"| node_container
node_entry -->|"renders"| node_dashboard
node_dashboard -->|"opens socket"| node_connection_hook
node_dashboard -->|"renders"| node_grid
node_connection_hook -->|"connects and subscribes"| node_binance
node_connection_hook -->|"writes ticks"| node_market_store
node_grid -->|"reads watchlist"| node_market_store
node_grid -->|"renders tiles"| node_ticker
node_ticker -->|"gets engine"| node_container
node_container -->|"creates engine"| node_engine
node_ticker -->|"subscribes to prices"| node_engine
node_engine -->|"connects and receives ticks"| node_service
node_engine -->|"tracks watchlist"| node_market_store
node_service -->|"opens stream"| node_binance
node_market_store -->|"created with"| node_store_factory

click node_entry "https://github.com/manish166/trading1/blob/main/src/main.tsx"
click node_dashboard "https://github.com/manish166/trading1/blob/main/src/App.tsx"
click node_connection_hook "https://github.com/manish166/trading1/blob/main/src/hooks/useWebSocket.ts"
click node_grid "https://github.com/manish166/trading1/blob/main/src/components/LivePriceGrid.tsx"
click node_ticker "https://github.com/manish166/trading1/blob/main/src/components/PriceTickerTile.tsx"
click node_container "https://github.com/manish166/trading1/blob/main/src/core/AppContainer.ts"
click node_engine "https://github.com/manish166/trading1/blob/main/src/ws/TradingStreamEngine.ts"
click node_service "https://github.com/manish166/trading1/blob/main/src/ws/MarketDataService.ts"
click node_market_store "https://github.com/manish166/trading1/blob/main/src/store/useMarketStore.ts"
click node_store_factory "https://github.com/manish166/trading1/blob/main/src/store/utils.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_dashboard,node_grid,node_ticker,node_browser toneBlue
class node_entry,node_connection_hook,node_container,node_engine toneAmber
class node_market_store,node_store_factory toneMint
class node_service toneRose
class node_binance toneIndigo
```

## Components

### Dashboard UI

- [Dashboard Root](https://github.com/manish166/trading1/blob/main/src/App.tsx): `src/App.tsx`
- [Price Grid](https://github.com/manish166/trading1/blob/main/src/components/LivePriceGrid.tsx): `src/components/LivePriceGrid.tsx`
- [Price Tile](https://github.com/manish166/trading1/blob/main/src/components/PriceTickerTile.tsx): `src/components/PriceTickerTile.tsx`

### Stream Runtime

- [Application Entry](https://github.com/manish166/trading1/blob/main/src/main.tsx): `src/main.tsx`
- [Socket Hook](https://github.com/manish166/trading1/blob/main/src/hooks/useWebSocket.ts): `src/hooks/useWebSocket.ts`
- [App Container](https://github.com/manish166/trading1/blob/main/src/core/AppContainer.ts): `src/core/AppContainer.ts`
- [Trading Stream Engine](https://github.com/manish166/trading1/blob/main/src/ws/TradingStreamEngine.ts): `src/ws/TradingStreamEngine.ts`

### Market State

- [Market Store](https://github.com/manish166/trading1/blob/main/src/store/useMarketStore.ts): `src/store/useMarketStore.ts`
- [Store Middleware](https://github.com/manish166/trading1/blob/main/src/store/utils.ts): `src/store/utils.ts`

### Network Transport

- [Market Data Service](https://github.com/manish166/trading1/blob/main/src/ws/MarketDataService.ts): `src/ws/MarketDataService.ts`

### Other components

- **Browser**
- **Binance Streams**

## Connections

- Browser → Application Entry: loads app (evidence: `src/main.tsx`)
- Application Entry → App Container: initializes (evidence: `src/main.tsx`)
- Application Entry → Dashboard Root: renders (evidence: `src/main.tsx`)
- Dashboard Root → Socket Hook: opens socket (evidence: `src/App.tsx`)
- Dashboard Root → Price Grid: renders (evidence: `src/App.tsx`)
- Socket Hook → Binance Streams: connects and subscribes (evidence: `src/hooks/useWebSocket.ts`)
- Socket Hook → Market Store: writes ticks (evidence: `src/hooks/useWebSocket.ts`)
- Price Grid → Market Store: reads watchlist (evidence: `src/components/LivePriceGrid.tsx`)
- Price Grid → Price Tile: renders tiles (evidence: `src/components/LivePriceGrid.tsx`)
- Price Tile → App Container: gets engine (evidence: `src/components/PriceTickerTile.tsx`)
- App Container → Trading Stream Engine: creates engine (evidence: `src/core/AppContainer.ts`)
- Price Tile → Trading Stream Engine: subscribes to prices (evidence: `src/components/PriceTickerTile.tsx`)
- Trading Stream Engine → Market Data Service: connects and receives ticks (evidence: `src/ws/TradingStreamEngine.ts`)
- Trading Stream Engine → Market Store: tracks watchlist (evidence: `src/ws/TradingStreamEngine.ts`)
- Market Data Service → Binance Streams: opens stream (evidence: `src/ws/MarketDataService.ts`)
- Market Store → Store Middleware: created with (evidence: `src/store/useMarketStore.ts`)