# ahraz77/tradingview-clone architecture

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

- Interactive diagram: https://gitdiagram.com/ahraz77/tradingview-clone
- Repository: https://github.com/ahraz77/tradingview-clone

## Overview

AhrazTrade is a React trading dashboard connected to Upstox. A user signs in through the app’s login and callback views; the app exchanges the returned authorization code, then hooks retrieve historical, position, and trade data and manage live subscriptions. The dashboard presents the selected market and portfolio information through charts and side panels. README documents live quotes, depth, and trade updates via WebSocket/Protobuf. The excerpts do not show every component render or data mapping, so uncertain links are omitted; App.jsx is the active entry, while App-old.jsx is a separate mock-oriented dashboard.

Main entry points: [`src/App.jsx`](https://github.com/ahraz77/tradingview-clone/blob/main/src/App.jsx) (Dashboard App), [`src/services/upstoxService.js`](https://github.com/ahraz77/tradingview-clone/blob/main/src/services/upstoxService.js) (API Client), [`src/utils/helpers.js`](https://github.com/ahraz77/tradingview-clone/blob/main/src/utils/helpers.js) (Display Helpers), [`src/hooks/useUpstox.js`](https://github.com/ahraz77/tradingview-clone/blob/main/src/hooks/useUpstox.js) (Data Hooks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Dashboard UI"]
  node_appmain["Dashboard App<br/>[App.jsx]"]
  node_legacy["Mock Dashboard<br/>[App-old.jsx]"]
  node_topbar["Dashboard Controls<br/>[TopBar.jsx]"]
  node_helpers["Display Helpers<br/>[helpers.js]"]
  node_stats["Market Statistics<br/>[MiniStat.jsx]"]
end

subgraph group_auth["Authentication"]
  node_login["Login Screen<br/>[LoginScreen.jsx]"]
  node_callback["Auth Callback<br/>[AuthCallback.jsx]"]
  node_upstoxsvc["API Client<br/>[upstoxService.js]"]
  node_config["Upstox Config<br/>[upstox.config.js]"]
end

subgraph group_market["Market Data"]
  node_hooks["Data Hooks<br/>[useUpstox.js]"]
  node_websocket["WebSocket Feed"]
  node_universe["Stock Universe<br/>[upstox.config.js]"]
  node_chart["Candlestick Chart<br/>[ChartPanel.jsx]"]
  node_timeframe["Timeframe Controls<br/>[TimeframeBar.jsx]"]
  node_sidebar["Watchlist<br/>[Sidebar.jsx]"]
end

subgraph group_account["Trading Account"]
  node_portfolio["Portfolio View<br/>[Portfolio.jsx]"]
  node_orders["Order Book<br/>[OrderBook.jsx]"]
  node_trades["Trade History<br/>[Trades.jsx]"]
end

node_user(("Trader"))
node_upstox{{"Upstox API"}}

node_user -->|"starts login"| node_login
node_appmain -->|"renders"| node_login
node_user -.->|"returns code"| node_callback
node_appmain -->|"renders"| node_callback
node_callback -->|"passes code"| node_appmain
node_appmain -->|"uses data hooks"| node_hooks
node_hooks -->|"requests account data"| node_upstoxsvc
node_hooks -->|"subscribes feeds"| node_websocket
node_websocket -->|"gets feed authorization"| node_upstoxsvc
node_upstoxsvc -->|"reads settings"| node_config
node_upstoxsvc -->|"calls API"| node_upstox
node_websocket -->|"streams market feed"| node_upstox
node_appmain -->|"renders"| node_topbar
node_appmain -->|"renders"| node_sidebar
node_appmain -->|"renders"| node_chart
node_appmain -->|"uses portfolio view"| node_portfolio
node_appmain -->|"uses order book"| node_orders
node_appmain -->|"uses trade history"| node_trades
node_appmain -->|"uses statistics"| node_stats
node_appmain -->|"uses controls"| node_timeframe
node_appmain -->|"loads symbols"| node_universe
node_sidebar -->|"formats display"| node_helpers
node_portfolio -->|"formats display"| node_helpers
node_orders -->|"formats display"| node_helpers
node_trades -->|"formats display"| node_helpers
node_legacy -->|"renders chart"| node_chart
node_legacy -->|"renders watchlist"| node_sidebar

click node_appmain "https://github.com/ahraz77/tradingview-clone/blob/main/src/App.jsx"
click node_legacy "https://github.com/ahraz77/tradingview-clone/blob/main/src/App-old.jsx"
click node_login "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/LoginScreen.jsx"
click node_callback "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/AuthCallback.jsx"
click node_upstoxsvc "https://github.com/ahraz77/tradingview-clone/blob/main/src/services/upstoxService.js"
click node_config "https://github.com/ahraz77/tradingview-clone/blob/main/src/config/upstox.config.js"
click node_hooks "https://github.com/ahraz77/tradingview-clone/blob/main/src/hooks/useUpstox.js"
click node_websocket "https://github.com/ahraz77/tradingview-clone/blob/main/src/services/websocketService.js"
click node_universe "https://github.com/ahraz77/tradingview-clone/blob/main/src/config/upstox.config.js"
click node_chart "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/ChartPanel.jsx"
click node_timeframe "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/TimeframeBar.jsx"
click node_sidebar "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/Sidebar.jsx"
click node_topbar "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/TopBar.jsx"
click node_helpers "https://github.com/ahraz77/tradingview-clone/blob/main/src/utils/helpers.js"
click node_portfolio "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/Portfolio.jsx"
click node_orders "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/OrderBook.jsx"
click node_trades "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/Trades.jsx"
click node_stats "https://github.com/ahraz77/tradingview-clone/blob/main/src/components/MiniStat.jsx"

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_appmain,node_legacy,node_topbar,node_helpers,node_stats toneBlue
class node_login,node_callback,node_upstoxsvc,node_config toneAmber
class node_hooks,node_websocket,node_universe,node_chart,node_timeframe,node_sidebar,node_upstox toneMint
class node_portfolio,node_orders,node_trades toneRose
class node_user toneIndigo
```

## Components

### Dashboard UI

- [Dashboard App](https://github.com/ahraz77/tradingview-clone/blob/main/src/App.jsx): `src/App.jsx`
- [Mock Dashboard](https://github.com/ahraz77/tradingview-clone/blob/main/src/App-old.jsx): `src/App-old.jsx`
- [Dashboard Controls](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/TopBar.jsx): `src/components/TopBar.jsx`
- [Display Helpers](https://github.com/ahraz77/tradingview-clone/blob/main/src/utils/helpers.js): `src/utils/helpers.js`
- [Market Statistics](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/MiniStat.jsx): `src/components/MiniStat.jsx`

### Authentication

- [Login Screen](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/LoginScreen.jsx): `src/components/LoginScreen.jsx`
- [Auth Callback](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/AuthCallback.jsx): `src/components/AuthCallback.jsx`
- [API Client](https://github.com/ahraz77/tradingview-clone/blob/main/src/services/upstoxService.js): `src/services/upstoxService.js`
- [Upstox Config](https://github.com/ahraz77/tradingview-clone/blob/main/src/config/upstox.config.js): `src/config/upstox.config.js`

### Market Data

- [Data Hooks](https://github.com/ahraz77/tradingview-clone/blob/main/src/hooks/useUpstox.js): `src/hooks/useUpstox.js`
- [WebSocket Feed](https://github.com/ahraz77/tradingview-clone/blob/main/src/services/websocketService.js): `src/services/websocketService.js`
- [Stock Universe](https://github.com/ahraz77/tradingview-clone/blob/main/src/config/upstox.config.js): `src/config/upstox.config.js`
- [Candlestick Chart](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/ChartPanel.jsx): `src/components/ChartPanel.jsx`
- [Timeframe Controls](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/TimeframeBar.jsx): `src/components/TimeframeBar.jsx`
- [Watchlist](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/Sidebar.jsx): `src/components/Sidebar.jsx`

### Trading Account

- [Portfolio View](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/Portfolio.jsx): `src/components/Portfolio.jsx`
- [Order Book](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/OrderBook.jsx): `src/components/OrderBook.jsx`
- [Trade History](https://github.com/ahraz77/tradingview-clone/blob/main/src/components/Trades.jsx): `src/components/Trades.jsx`

### Other components

- **Trader**
- **Upstox API**

## Connections

- Trader → Login Screen: starts login (evidence: `src/components/LoginScreen.jsx`)
- Dashboard App → Login Screen: renders (evidence: `src/App.jsx`)
- Trader → Auth Callback: returns code (evidence: `README.md`)
- Dashboard App → Auth Callback: renders (evidence: `src/App.jsx`)
- Auth Callback → Dashboard App: passes code (evidence: `src/components/AuthCallback.jsx`)
- Dashboard App → Data Hooks: uses data hooks (evidence: `src/App.jsx`)
- Data Hooks → API Client: requests account data (evidence: `src/hooks/useUpstox.js`)
- Data Hooks → WebSocket Feed: subscribes feeds (evidence: `src/hooks/useUpstox.js`)
- WebSocket Feed → API Client: gets feed authorization (evidence: `src/services/websocketService.js`)
- API Client → Upstox Config: reads settings (evidence: `src/services/upstoxService.js`)
- API Client → Upstox API: calls API (evidence: `src/services/upstoxService.js`)
- WebSocket Feed → Upstox API: streams market feed (evidence: `README.md`)
- Dashboard App → Dashboard Controls: renders (evidence: `src/App.jsx`)
- Dashboard App → Watchlist: renders (evidence: `src/App.jsx`)
- Dashboard App → Candlestick Chart: renders (evidence: `src/App.jsx`)
- Dashboard App → Portfolio View: uses portfolio view (evidence: `src/App.jsx`)
- Dashboard App → Order Book: uses order book (evidence: `src/App.jsx`)
- Dashboard App → Trade History: uses trade history (evidence: `src/App.jsx`)
- Dashboard App → Market Statistics: uses statistics (evidence: `src/App.jsx`)
- Dashboard App → Timeframe Controls: uses controls (evidence: `src/App.jsx`)
- Dashboard App → Stock Universe: loads symbols (evidence: `src/App.jsx`)
- Watchlist → Display Helpers: formats display (evidence: `src/components/Sidebar.jsx`)
- Portfolio View → Display Helpers: formats display (evidence: `src/components/Portfolio.jsx`)
- Order Book → Display Helpers: formats display (evidence: `src/components/OrderBook.jsx`)
- Trade History → Display Helpers: formats display (evidence: `src/components/Trades.jsx`)
- Mock Dashboard → Candlestick Chart: renders chart (evidence: `src/App-old.jsx`)
- Mock Dashboard → Watchlist: renders watchlist (evidence: `src/App-old.jsx`)