How ahraz77/tradingview-clone works
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: App.jsx Dashboard App · upstoxService.js API Client · helpers.js Display Helpers · useUpstox.js Data Hooks
Components 20
Dashboard UI
- Dashboard App
src/App.jsx - Mock Dashboard
src/App-old.jsx - Dashboard Controls
src/components/TopBar.jsx - Display Helpers
src/utils/helpers.js - Market Statistics
src/components/MiniStat.jsx
Authentication
- Login Screen
src/components/LoginScreen.jsx - Auth Callback
src/components/AuthCallback.jsx - API Client
src/services/upstoxService.js - Upstox Config
src/config/upstox.config.js
Market Data
- Data Hooks
src/hooks/useUpstox.js - WebSocket Feed
src/services/websocketService.js - Stock Universe
src/config/upstox.config.js - Candlestick Chart
src/components/ChartPanel.jsx - Timeframe Controls
src/components/TimeframeBar.jsx - Watchlist
src/components/Sidebar.jsx
Trading Account
- Portfolio View
src/components/Portfolio.jsx - Order Book
src/components/OrderBook.jsx - Trade History
src/components/Trades.jsx
Other components
- Trader
- Upstox API
Connections 27
- Trader → Login Screen: starts login
src/components/LoginScreen.jsx - Dashboard App → Login Screen: renders
src/App.jsx - Trader → Auth Callback: returns code
README.md - Dashboard App → Auth Callback: renders
src/App.jsx - Auth Callback → Dashboard App: passes code
src/components/AuthCallback.jsx - Dashboard App → Data Hooks: uses data hooks
src/App.jsx - Data Hooks → API Client: requests account data
src/hooks/useUpstox.js - Data Hooks → WebSocket Feed: subscribes feeds
src/hooks/useUpstox.js - WebSocket Feed → API Client: gets feed authorization
src/services/websocketService.js - API Client → Upstox Config: reads settings
src/services/upstoxService.js - API Client → Upstox API: calls API
src/services/upstoxService.js - WebSocket Feed → Upstox API: streams market feed
README.md - Dashboard App → Dashboard Controls: renders
src/App.jsx - Dashboard App → Watchlist: renders
src/App.jsx - Dashboard App → Candlestick Chart: renders
src/App.jsx - Dashboard App → Portfolio View: uses portfolio view
src/App.jsx - Dashboard App → Order Book: uses order book
src/App.jsx - Dashboard App → Trade History: uses trade history
src/App.jsx - Dashboard App → Market Statistics: uses statistics
src/App.jsx - Dashboard App → Timeframe Controls: uses controls
src/App.jsx - Dashboard App → Stock Universe: loads symbols
src/App.jsx - Watchlist → Display Helpers: formats display
src/components/Sidebar.jsx - Portfolio View → Display Helpers: formats display
src/components/Portfolio.jsx - Order Book → Display Helpers: formats display
src/components/OrderBook.jsx - Trade History → Display Helpers: formats display
src/components/Trades.jsx - Mock Dashboard → Candlestick Chart: renders chart
src/App-old.jsx - Mock Dashboard → Watchlist: renders watchlist
src/App-old.jsx