# biikash1/tradeforge-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/biikash1/tradeforge-frontend
- Repository: https://github.com/biikash1/tradeforge-frontend

## Overview

TradeForge Frontend is a React trading terminal. Users authenticate, explore market data, and then trade assets or manage portfolios, watchlists, wallet activity, deposits, and withdrawals. The app routes users through feature pages; Redux actions make REST requests and update shared state, while the market dashboard also receives WebSocket updates. The graph preserves the README’s documented features, but some feature-to-state links rely on the SOURCE INDEX because their full implementations were not sampled.

Main entry points: [`src/App.jsx`](https://github.com/biikash1/tradeforge-frontend/blob/main/src/App.jsx) (App routes), [`src/State/Store.js`](https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Store.js) (Redux store), [`src/config/api.js`](https://github.com/biikash1/tradeforge-frontend/blob/main/src/config/api.js) (API client), [`src/pages/Home/Home.jsx`](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Home/Home.jsx) (Market dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App routes<br/>[App.jsx]"]
end

subgraph group_market["Markets and trading"]
  node_market_home["Market dashboard<br/>[Home.jsx]"]
  node_market_search["Coin search<br/>[SearchCoins.jsx]"]
  node_stock["Asset trading<br/>[TradingForm.jsx]"]
  node_watchlist["Watchlist<br/>[Watchlist.jsx]"]
end

subgraph group_account["Account and activity"]
  node_auth["Authentication<br/>[Auth.jsx]"]
  node_portfolio["Portfolio<br/>[Portfolio.jsx]"]
  node_activity["Order activity<br/>[Activity.jsx]"]
  node_wallet["Wallet<br/>[Wallet.jsx]"]
  node_payments["Fiat payments<br/>[PaymentDetails.jsx]"]
  node_withdrawal["Withdrawals<br/>[Withdrawal.jsx]"]
  node_withdrawal_admin["Withdrawal admin"]
end

subgraph group_state["Client state and services"]
  node_coin_actions["Coin actions<br/>[ActionCoin.js]"]
  node_order_actions["Order actions<br/>[ActionOrder.js]"]
  node_wallet_actions["Wallet actions<br/>[ActionWallet.js]"]
  node_withdrawal_actions["Withdrawal actions"]
  node_store[("Redux store<br/>[Store.js]")]
  node_api["API client<br/>[api.js]"]
  node_websocket["WebSocket client<br/>[websocket.js]"]
  node_chat["Chat service<br/>[chatService.js]"]
end

subgraph group_ui["Shared interface"]
  node_ui_components["UI components<br/>[button.jsx]"]
end

node_user(("User"))
node_backend["TradeForge API"]

node_user -->|"uses"| node_app
node_app -->|"routes to"| node_auth
node_app -->|"routes to"| node_market_home
node_app -->|"routes to"| node_portfolio
node_app -->|"routes to"| node_activity
node_app -->|"routes to"| node_wallet
node_app -->|"routes to"| node_withdrawal
node_app -->|"routes to"| node_payments
node_app -->|"routes to"| node_watchlist
node_app -->|"routes to"| node_market_search
node_app -.->|"routes to"| node_withdrawal_admin
node_app -->|"reads state"| node_store
node_app -->|"connects"| node_websocket
node_market_home -->|"dispatches"| node_coin_actions
node_market_search -->|"dispatches"| node_coin_actions
node_market_home -->|"subscribes"| node_websocket
node_market_home -->|"requests reply"| node_chat
node_market_home -.->|"opens trade"| node_stock
node_stock -->|"dispatches"| node_order_actions
node_stock -->|"dispatches"| node_wallet_actions
node_portfolio -->|"dispatches"| node_store
node_activity -->|"dispatches"| node_order_actions
node_watchlist -.->|"dispatches"| node_store
node_wallet -->|"dispatches"| node_wallet_actions
node_payments -->|"dispatches"| node_withdrawal_actions
node_withdrawal -->|"dispatches"| node_withdrawal_actions
node_withdrawal_admin -.->|"dispatches"| node_withdrawal_actions
node_coin_actions -->|"requests data"| node_api
node_order_actions -->|"requests data"| node_api
node_wallet_actions -->|"requests data"| node_api
node_withdrawal_actions -->|"requests data"| node_api
node_api -->|"REST requests"| node_backend
node_chat -->|"uses client"| node_api
node_coin_actions -.->|"updates state"| node_store
node_order_actions -.->|"updates state"| node_store
node_wallet_actions -.->|"updates state"| node_store
node_withdrawal_actions -.->|"updates state"| node_store
node_ui_components -->|"renders controls"| node_market_search
node_ui_components -->|"renders controls"| node_wallet

click node_app "https://github.com/biikash1/tradeforge-frontend/blob/main/src/App.jsx"
click node_auth "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Auth/Auth.jsx"
click node_market_home "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Home/Home.jsx"
click node_market_search "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Search/SearchCoins.jsx"
click node_stock "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Stock%20Details/TradingForm.jsx"
click node_portfolio "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Portfolio/Portfolio.jsx"
click node_activity "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Activity/Activity.jsx"
click node_watchlist "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Watchlist/Watchlist.jsx"
click node_wallet "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Wallet/Wallet.jsx"
click node_payments "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Payment%20Details/PaymentDetails.jsx"
click node_withdrawal "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Withdrawal/Withdrawal.jsx"
click node_withdrawal_admin "https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Admin/WithdrawalAdmin.jsx"
click node_coin_actions "https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Coin/ActionCoin.js"
click node_order_actions "https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Order/ActionOrder.js"
click node_wallet_actions "https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Wallet/ActionWallet.js"
click node_withdrawal_actions "https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Withdrawal/ActionWithdrawal.js"
click node_store "https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Store.js"
click node_api "https://github.com/biikash1/tradeforge-frontend/blob/main/src/config/api.js"
click node_websocket "https://github.com/biikash1/tradeforge-frontend/blob/main/src/config/websocket.js"
click node_chat "https://github.com/biikash1/tradeforge-frontend/blob/main/src/services/chatService.js"
click node_ui_components "https://github.com/biikash1/tradeforge-frontend/blob/main/src/components/ui/button.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_app,node_user toneBlue
class node_market_home,node_market_search,node_stock,node_watchlist toneAmber
class node_auth,node_portfolio,node_activity,node_wallet,node_payments,node_withdrawal,node_withdrawal_admin,node_backend toneMint
class node_coin_actions,node_order_actions,node_wallet_actions,node_withdrawal_actions,node_store,node_api,node_websocket,node_chat toneRose
class node_ui_components toneIndigo
```

## Components

### Application shell

- [App routes](https://github.com/biikash1/tradeforge-frontend/blob/main/src/App.jsx): `src/App.jsx`

### Markets and trading

- [Market dashboard](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Home/Home.jsx): `src/pages/Home/Home.jsx`
- [Coin search](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Search/SearchCoins.jsx): `src/pages/Search/SearchCoins.jsx`
- [Asset trading](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Stock%20Details/TradingForm.jsx): `src/pages/Stock Details/TradingForm.jsx`
- [Watchlist](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Watchlist/Watchlist.jsx): `src/pages/Watchlist/Watchlist.jsx`

### Account and activity

- [Authentication](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Auth/Auth.jsx): `src/pages/Auth/Auth.jsx`
- [Portfolio](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Portfolio/Portfolio.jsx): `src/pages/Portfolio/Portfolio.jsx`
- [Order activity](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Activity/Activity.jsx): `src/pages/Activity/Activity.jsx`
- [Wallet](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Wallet/Wallet.jsx): `src/pages/Wallet/Wallet.jsx`
- [Fiat payments](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Payment%20Details/PaymentDetails.jsx): `src/pages/Payment Details/PaymentDetails.jsx`
- [Withdrawals](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Withdrawal/Withdrawal.jsx): `src/pages/Withdrawal/Withdrawal.jsx`
- [Withdrawal admin](https://github.com/biikash1/tradeforge-frontend/blob/main/src/pages/Admin/WithdrawalAdmin.jsx): `src/pages/Admin/WithdrawalAdmin.jsx`

### Client state and services

- [Coin actions](https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Coin/ActionCoin.js): `src/State/Coin/ActionCoin.js`
- [Order actions](https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Order/ActionOrder.js): `src/State/Order/ActionOrder.js`
- [Wallet actions](https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Wallet/ActionWallet.js): `src/State/Wallet/ActionWallet.js`
- [Withdrawal actions](https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Withdrawal/ActionWithdrawal.js): `src/State/Withdrawal/ActionWithdrawal.js`
- [Redux store](https://github.com/biikash1/tradeforge-frontend/blob/main/src/State/Store.js): `src/State/Store.js`
- [API client](https://github.com/biikash1/tradeforge-frontend/blob/main/src/config/api.js): `src/config/api.js`
- [WebSocket client](https://github.com/biikash1/tradeforge-frontend/blob/main/src/config/websocket.js): `src/config/websocket.js`
- [Chat service](https://github.com/biikash1/tradeforge-frontend/blob/main/src/services/chatService.js): `src/services/chatService.js`

### Shared interface

- [UI components](https://github.com/biikash1/tradeforge-frontend/blob/main/src/components/ui/button.jsx): `src/components/ui/button.jsx`

### Other components

- **User**
- **TradeForge API**

## Connections

- User → App routes: uses (evidence: `README.md`)
- App routes → Authentication: routes to (evidence: `src/App.jsx`)
- App routes → Market dashboard: routes to (evidence: `src/App.jsx`)
- App routes → Portfolio: routes to (evidence: `src/App.jsx`)
- App routes → Order activity: routes to (evidence: `src/App.jsx`)
- App routes → Wallet: routes to (evidence: `src/App.jsx`)
- App routes → Withdrawals: routes to (evidence: `src/App.jsx`)
- App routes → Fiat payments: routes to (evidence: `src/App.jsx`)
- App routes → Watchlist: routes to (evidence: `src/App.jsx`)
- App routes → Coin search: routes to (evidence: `src/App.jsx`)
- App routes → Withdrawal admin: routes to
- App routes → Redux store: reads state (evidence: `README.md`)
- App routes → WebSocket client: connects (evidence: `src/App.jsx`)
- Market dashboard → Coin actions: dispatches (evidence: `src/pages/Home/Home.jsx`)
- Coin search → Coin actions: dispatches (evidence: `src/pages/Search/SearchCoins.jsx`)
- Market dashboard → WebSocket client: subscribes (evidence: `src/pages/Home/Home.jsx`)
- Market dashboard → Chat service: requests reply (evidence: `src/pages/Home/Home.jsx`)
- Market dashboard → Asset trading: opens trade
- Asset trading → Order actions: dispatches (evidence: `src/pages/Stock Details/TradingForm.jsx`)
- Asset trading → Wallet actions: dispatches (evidence: `src/pages/Stock Details/TradingForm.jsx`)
- Portfolio → Redux store: dispatches (evidence: `src/pages/Portfolio/Portfolio.jsx`)
- Order activity → Order actions: dispatches (evidence: `src/pages/Activity/Activity.jsx`)
- Watchlist → Redux store: dispatches
- Wallet → Wallet actions: dispatches (evidence: `src/pages/Wallet/Wallet.jsx`)
- Fiat payments → Withdrawal actions: dispatches (evidence: `src/pages/Payment Details/PaymentDetails.jsx`)
- Withdrawals → Withdrawal actions: dispatches (evidence: `src/pages/Withdrawal/Withdrawal.jsx`)
- Withdrawal admin → Withdrawal actions: dispatches
- Coin actions → API client: requests data (evidence: `src/State/Coin/ActionCoin.js`)
- Order actions → API client: requests data (evidence: `src/State/Order/ActionOrder.js`)
- Wallet actions → API client: requests data (evidence: `src/State/Wallet/ActionWallet.js`)
- Withdrawal actions → API client: requests data (evidence: `src/State/Withdrawal/ActionWithdrawal.js`)
- API client → TradeForge API: REST requests (evidence: `README.md`)
- Chat service → API client: uses client (evidence: `src/services/chatService.js`)
- Coin actions → Redux store: updates state
- Order actions → Redux store: updates state
- Wallet actions → Redux store: updates state
- Withdrawal actions → Redux store: updates state
- UI components → Coin search: renders controls (evidence: `src/pages/Search/SearchCoins.jsx`)
- UI components → Wallet: renders controls (evidence: `src/pages/Wallet/Wallet.jsx`)