# deriv-com/deriv-app architecture

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

- Interactive diagram: https://gitdiagram.com/deriv-com/deriv-app
- Repository: https://github.com/deriv-com/deriv-app

## Overview

Deriv App is a monorepo of customer-facing trading and account platforms, plus shared API and utility packages. The broad user workflow spans account management, funding, and trading, but the README only identifies the platforms rather than documenting how they connect. The graph therefore shows the sampled routing, query, and account-sync relationships; other product branches are preserved without inferred cross-platform flows. Some API and platform modules are unsampled, so their nodes use exact enclosing directories from the tree.

Main entry points: [`packages/api-v2/src`](https://github.com/deriv-com/deriv-app/tree/master/packages/api-v2/src) (API v2), [`packages/core/src/App/app.jsx`](https://github.com/deriv-com/deriv-app/blob/master/packages/core/src/App/app.jsx) (Core app), [`packages/account/src/Containers/routes.tsx`](https://github.com/deriv-com/deriv-app/blob/master/packages/account/src/Containers/routes.tsx) (Account routing), [`packages/wallets/src/hooks/useSyncLocalStorageClientAccounts.ts`](https://github.com/deriv-com/deriv-app/blob/master/packages/wallets/src/hooks/useSyncLocalStorageClientAccounts.ts) (Account sync)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_platforms["Customer platforms"]
  node_core["Core app<br/>[app.jsx]"]
  node_appstore["Appstore<br/>[app.tsx]"]
  node_cashier["Cashier<br/>[app.tsx]"]
  node_cfd["CFD<br/>[app.tsx]"]
  node_reports["Reports<br/>[app.tsx]"]
  node_wallets["Wallets<br/>[App.tsx]"]
end

subgraph group_account["Account services"]
  node_account_app["Account<br/>[App.tsx]"]
  node_account_routes["Account routing<br/>[routes.tsx]"]
  node_account_features["Account features"]
  node_wallet_sync["Account sync"]
end

subgraph group_trading["Trading and tools"]
  node_bot_ui["Bot web UI<br/>[app.tsx]"]
  node_bot_engine["Bot engine<br/>[ticks_service.js]"]
  node_trader["Trader<br/>[routes.tsx]"]
  node_indicators["Indicators"]
end

subgraph group_api["API clients"]
  node_api_v2["API v2"]
  node_api_v2_query["Query hooks<br/>[useQuery.ts]"]
  node_api_v2_auth_query["Authorized queries"]
  node_api_legacy["API client"]
  node_api_legacy_query["Query hooks<br/>[useQuery.ts]"]
end

subgraph group_shared["Shared runtime"]
  node_shared_routes["Route utilities<br/>[routes.ts]"]
  node_shared_storage["Storage utilities<br/>[storage.ts]"]
  node_utils_accounts["Account storage"]
end

node_user(("Customer"))

node_user -.->|"uses platform"| node_core
node_user -.->|"manages account"| node_account_app
node_user -.->|"uses platform"| node_cashier
node_user -.->|"uses platform"| node_trader
node_account_routes -.->|"routes within"| node_account_app
node_account_routes -.->|"routes to"| node_account_features
node_api_v2_query -->|"uses client"| node_api_v2
node_api_v2_auth_query -->|"uses client"| node_api_v2
node_api_v2_auth_query -->|"uses query cache"| node_api_v2_query
node_api_legacy_query -->|"uses client"| node_api_legacy
node_wallet_sync -->|"requests account data"| node_api_v2
node_wallet_sync -->|"reads accounts"| node_utils_accounts
node_trader -.->|"uses routing"| node_shared_routes
node_bot_engine -.->|"serves trading UI"| node_bot_ui
node_core -->|"uses route helpers"| node_shared_routes
node_core -.->|"uses APIs"| node_api_v2

click node_core "https://github.com/deriv-com/deriv-app/blob/master/packages/core/src/App/app.jsx"
click node_appstore "https://github.com/deriv-com/deriv-app/blob/master/packages/appstore/src/components/app.tsx"
click node_cashier "https://github.com/deriv-com/deriv-app/blob/master/packages/cashier/src/app.tsx"
click node_cfd "https://github.com/deriv-com/deriv-app/blob/master/packages/cfd/src/app.tsx"
click node_reports "https://github.com/deriv-com/deriv-app/blob/master/packages/reports/src/app.tsx"
click node_wallets "https://github.com/deriv-com/deriv-app/blob/master/packages/wallets/src/App.tsx"
click node_account_app "https://github.com/deriv-com/deriv-app/blob/master/packages/account/src/App.tsx"
click node_account_routes "https://github.com/deriv-com/deriv-app/blob/master/packages/account/src/Containers/routes.tsx"
click node_account_features "https://github.com/deriv-com/deriv-app/tree/master/packages/account/src/Sections"
click node_wallet_sync "https://github.com/deriv-com/deriv-app/blob/master/packages/wallets/src/hooks/useSyncLocalStorageClientAccounts.ts"
click node_bot_ui "https://github.com/deriv-com/deriv-app/blob/master/packages/bot-web-ui/src/app/app.tsx"
click node_bot_engine "https://github.com/deriv-com/deriv-app/blob/master/packages/bot-skeleton/src/services/api/ticks_service.js"
click node_trader "https://github.com/deriv-com/deriv-app/blob/master/packages/trader/src/App/Containers/Routes/routes.tsx"
click node_indicators "https://github.com/deriv-com/deriv-app/blob/master/packages/indicators/src/indicators/exponential-moving-average.js"
click node_api_v2 "https://github.com/deriv-com/deriv-app/tree/master/packages/api-v2/src"
click node_api_v2_query "https://github.com/deriv-com/deriv-app/blob/master/packages/api-v2/src/useQuery.ts"
click node_api_v2_auth_query "https://github.com/deriv-com/deriv-app/blob/master/packages/api-v2/src/useAuthorizedQuery.ts"
click node_api_legacy "https://github.com/deriv-com/deriv-app/tree/master/packages/api/src"
click node_api_legacy_query "https://github.com/deriv-com/deriv-app/blob/master/packages/api/src/useQuery.ts"
click node_shared_routes "https://github.com/deriv-com/deriv-app/blob/master/packages/shared/src/utils/routes/routes.ts"
click node_shared_storage "https://github.com/deriv-com/deriv-app/blob/master/packages/shared/src/utils/storage/storage.ts"
click node_utils_accounts "https://github.com/deriv-com/deriv-app/blob/master/packages/utils/src/getAccountsFromLocalStorage.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_core,node_appstore,node_cashier,node_cfd,node_reports,node_wallets toneBlue
class node_account_app,node_account_routes,node_account_features,node_wallet_sync toneAmber
class node_bot_ui,node_bot_engine,node_trader,node_indicators toneMint
class node_api_v2,node_api_v2_query,node_api_v2_auth_query,node_api_legacy,node_api_legacy_query toneRose
class node_shared_routes,node_shared_storage,node_utils_accounts,node_user toneIndigo
```

## Components

### Customer platforms

- [Core app](https://github.com/deriv-com/deriv-app/blob/master/packages/core/src/App/app.jsx): `packages/core/src/App/app.jsx`
- [Appstore](https://github.com/deriv-com/deriv-app/blob/master/packages/appstore/src/components/app.tsx): `packages/appstore/src/components/app.tsx`
- [Cashier](https://github.com/deriv-com/deriv-app/blob/master/packages/cashier/src/app.tsx): `packages/cashier/src/app.tsx`
- [CFD](https://github.com/deriv-com/deriv-app/blob/master/packages/cfd/src/app.tsx): `packages/cfd/src/app.tsx`
- [Reports](https://github.com/deriv-com/deriv-app/blob/master/packages/reports/src/app.tsx): `packages/reports/src/app.tsx`
- [Wallets](https://github.com/deriv-com/deriv-app/blob/master/packages/wallets/src/App.tsx): `packages/wallets/src/App.tsx`

### Account services

- [Account](https://github.com/deriv-com/deriv-app/blob/master/packages/account/src/App.tsx): `packages/account/src/App.tsx`
- [Account routing](https://github.com/deriv-com/deriv-app/blob/master/packages/account/src/Containers/routes.tsx): `packages/account/src/Containers/routes.tsx`
- [Account features](https://github.com/deriv-com/deriv-app/tree/master/packages/account/src/Sections): `packages/account/src/Sections`
- [Account sync](https://github.com/deriv-com/deriv-app/blob/master/packages/wallets/src/hooks/useSyncLocalStorageClientAccounts.ts): `packages/wallets/src/hooks/useSyncLocalStorageClientAccounts.ts`

### Trading and tools

- [Bot web UI](https://github.com/deriv-com/deriv-app/blob/master/packages/bot-web-ui/src/app/app.tsx): `packages/bot-web-ui/src/app/app.tsx`
- [Bot engine](https://github.com/deriv-com/deriv-app/blob/master/packages/bot-skeleton/src/services/api/ticks_service.js): `packages/bot-skeleton/src/services/api/ticks_service.js`
- [Trader](https://github.com/deriv-com/deriv-app/blob/master/packages/trader/src/App/Containers/Routes/routes.tsx): `packages/trader/src/App/Containers/Routes/routes.tsx`
- [Indicators](https://github.com/deriv-com/deriv-app/blob/master/packages/indicators/src/indicators/exponential-moving-average.js): `packages/indicators/src/indicators/exponential-moving-average.js`

### API clients

- [API v2](https://github.com/deriv-com/deriv-app/tree/master/packages/api-v2/src): `packages/api-v2/src`
- [Query hooks](https://github.com/deriv-com/deriv-app/blob/master/packages/api-v2/src/useQuery.ts): `packages/api-v2/src/useQuery.ts`
- [Authorized queries](https://github.com/deriv-com/deriv-app/blob/master/packages/api-v2/src/useAuthorizedQuery.ts): `packages/api-v2/src/useAuthorizedQuery.ts`
- [API client](https://github.com/deriv-com/deriv-app/tree/master/packages/api/src): `packages/api/src`
- [Query hooks](https://github.com/deriv-com/deriv-app/blob/master/packages/api/src/useQuery.ts): `packages/api/src/useQuery.ts`

### Shared runtime

- [Route utilities](https://github.com/deriv-com/deriv-app/blob/master/packages/shared/src/utils/routes/routes.ts): `packages/shared/src/utils/routes/routes.ts`
- [Storage utilities](https://github.com/deriv-com/deriv-app/blob/master/packages/shared/src/utils/storage/storage.ts): `packages/shared/src/utils/storage/storage.ts`
- [Account storage](https://github.com/deriv-com/deriv-app/blob/master/packages/utils/src/getAccountsFromLocalStorage.ts): `packages/utils/src/getAccountsFromLocalStorage.ts`

### Other components

- **Customer**

## Connections

- Customer → Core app: uses platform (evidence: `README.md`)
- Customer → Account: manages account (evidence: `README.md`)
- Customer → Cashier: uses platform (evidence: `README.md`)
- Customer → Trader: uses platform (evidence: `README.md`)
- Account routing → Account: routes within
- Account routing → Account features: routes to
- Query hooks → API v2: uses client (evidence: `packages/api-v2/src/useQuery.ts`)
- Authorized queries → API v2: uses client (evidence: `packages/api-v2/src/useAuthorizedQuery.ts`)
- Authorized queries → Query hooks: uses query cache (evidence: `packages/api-v2/src/useAuthorizedQuery.ts`)
- Query hooks → API client: uses client (evidence: `packages/api/src/useQuery.ts`)
- Account sync → API v2: requests account data (evidence: `packages/wallets/src/hooks/useSyncLocalStorageClientAccounts.ts`)
- Account sync → Account storage: reads accounts (evidence: `packages/wallets/src/hooks/useSyncLocalStorageClientAccounts.ts`)
- Trader → Route utilities: uses routing
- Bot engine → Bot web UI: serves trading UI
- Core app → Route utilities: uses route helpers
- Core app → API v2: uses APIs