Frontend
Frontend: React Trading Dashboard
A React-powered trading dashboard with real-time charts, multi-broker support, and integrated ML analytics
React 18 MUI v6 TradingView Charts Mobile Ready
Table of Contents
01 App Architecture 02 Key Pages 03 Tech Stack 04 State Management 05 Sub-Module Guide
Section 01
App Architecture
The frontend follows a layered architecture: entry point and routing at the top, pages and components in the middle, with hooks, services, and state management at the foundation.
Frontend Layer Architecture
App.jsx + Routes.jsx Entry point, routing
▽
Pages Route-level views
AlgoTraderPage IndexTVPage SimulatorPage StrategyPage CryptoTraderPage AdminDashboard
▽
Components Reusable UI blocks
OptionBuyTool OIChart ChartComponent Analytics Strategies WebSocket
▽
Hooks & Context State logic & providers
useOptionBuyingTool useGlobalWebSocket useChartData AuthContext CompanySearchContext
▽
Services API communication
apiHelpers tradingApi derivativesApi mlAnalyticsApi indexDataApi
▽
State Data persistence
Redux Toolkit React Context
Data Flow
User Action → Hook → API Service → Strapi → Response → State Update → Re-render
Section 02
Key Pages
The application is organized into focused page-level components, each handling a distinct trading workflow.
AlgoTraderPage AlgoTraderPage
SimulatorPage SimulatorPage
DerivativesAnalysisPage DerivativesAnalysisPage
StrategyPage StrategyPage
CryptoTraderPage CryptoTraderPage
AdminDashboard AdminDashboard
Section 03
Technology Stack
A modern React stack optimized for real-time financial data visualization and mobile deployment.
| Category | Technology | Version | Purpose |
|---|---|---|---|
| Framework | React | 18.2 |
Component-based UI |
| UI Library | Material-UI (MUI) | v6.1.7 |
Pre-built components, theming |
| Charts | TradingView Lightweight Charts | Latest |
Candlestick, line, histogram charts |
| Charts | Chart.js / Recharts | Latest |
Supplementary charts (pie, bar, scatter) |
| State | Redux Toolkit | Latest |
Global state management |
| State | React Context | Built-in |
Auth, search, WebSocket, home page state |
| HTTP | Axios | Latest |
API calls with JWT bearer auth |
| Real-time | Socket.io-client | Latest |
WebSocket connection to server |
| Build | Vite | Latest |
Fast dev server and bundler |
| Mobile | Capacitor | Latest |
Android/iOS native wrapper |
| Security | Crypto-js | Latest |
Client-side token encryption |
Section 04
State Management
A hybrid approach combining Redux Toolkit for complex shared state with React Context for scoped providers and custom hooks for encapsulated logic.
Redux Toolkit Redux Toolkit
React Context React Context
Custom Hooks Custom Hooks
API Layer API Layer
Auth Pattern Always use getToken() from utils/helpers.js for JWT tokens. Never import from useAuthContext() directly -- the helper provides consistent token retrieval across all API services.
Section 05
Sub-Module Guide
Deep dives into the major frontend subsystems, each covered in its own dedicated article.
→ Option Buy Tool: 4 Trading Modes
Normal, Strategy, Straddle, Martingale modes. Complete order flow with real-time Greeks, position management, and ML-driven entry scoring.
06-01
→ Analytics & Visualization Dashboard
OI charts, Greeks heatmaps, signal dashboard. IV surface visualization, dealer flow analysis, and gamma exposure tracking.
06-02
Algo Master Platform · Frontend Series
Top comments (0)