FxSaarthi

The same currency pair behaves differently depending on which trading session is active. EUR/USD during the London–New York overlap is a different beast than EUR/USD during the quiet Sydney session. Volatility spikes, liquidity shifts, and economic releases cluster around specific hours — yet most forex tools treat all hours as equal.

Existing tools fall into one of two traps: they are either simple world-clock widgets with no analytical depth, or complex institutional terminals that require a Bloomberg subscription. Nothing in between offers session-aware analysis with integrated data pipelines at zero cost.

FxSaarthi uses a glass-morphism aesthetic — translucent panels with subtle gradients, backdrop blur, and inset highlights floating over a dark background (#0f1419). Each trading session has a unique color so a glance at any chart or clock tells the trader which market is driving the action.

Session Color Palette

Sydney — #38bdf8 (sky blue) Tokyo — #f472b6 (pink) London — #facc15 (yellow) New York — #34d399 (green)

Responsive Breakpoints

Mobile (< 768px): single column, 8-tab bottom nav with snap-scroll Tablet (768–1024px): 2-column grid, tab nav Desktop (> 1024px): 4-quadrant Bento grid with fixed 52px navbar

Component Hierarchy

App.tsx (root orchestrator) Desktop (>= 1024px) → BentoDesktopLayout DesktopNavbar (52px fixed) Left Sidebar (20%): TimeCard, ActiveSessions, PairsToTrade Right Content Grid (80%): ForexChart, VolumeChart, EconomicCalendar, SessionClocks Mobile / Tablet (< 1024px) OverviewPanel, EconomicCalendar, ForexChart, SessionGuide WorldClockPanel, FXToolsPanel, BestPairsWidget BottomNavBar (8 tabs, snap-scroll)

40+ React components, 8 custom hooks, zero state management libraries. FxSaarthi is built entirely with React hooks — no Redux, no Context API, no Zustand. State flows top-down from App.tsx, which orchestrates timezone selection, real-time clock updates, and session status calculations.

Animation System

Every animation is built with Framer Motion 11.18.2 and respects prefers-reduced-motion via the useReducedMotion hook. All animations use GPU-accelerated properties (transform, opacity) with type: "tween" for predictable 60fps rendering.

Three data sources converge into one database, served by one API, rendered in one UI. The pipeline architecture separates concerns: scraping runs on its own schedule, price ingestion on another, and correlation analysis runs daily. All write into the shared fx_global PostgreSQL database on Cloud SQL.

24-Hour Session Timeline

Built with Recharts BarChart and a custom CustomBarShape renderer. Sessions are stacked in three layers: main sessions (90% row height), overlaps (40%), and killzones (40%). A blinking "Now" line pulses every second with a glow effect, position calculated via useMemo for zero transition overhead. Sessions split across midnight are rendered as p1/p2 segments. Timezone offset shifts all bar positions dynamically.

Economic Calendar

AG Grid table displaying events from the economic_calendar_ff table, refreshed every 3 minutes via the ForexFactory scraper pipeline. Countdown timers: red (< 2h), amber (2–6h), cyan (> 6h), grey (past). Multi-currency filter: USD, EUR, GBP, JPY, AUD, CAD, NZD, CHF, CNY. Impact filtering: High, Medium, Low. Quick filters: Yesterday, Today, Tomorrow.

Position Size Calculator

Risk-based lot sizing with live ATR data from the volatility_metrics table. The calculator uses useFXVolatility to fetch real-time ATR values, so recommended position sizes reflect current market conditions. Inputs: account balance, risk % (0.5–5% slider), stop loss pips, instrument. Outputs: lot size, risk amount in account currency, pip value. ATR-aware: suggests stop-loss based on current 14-period ATR.

Correlation Heatmap

A 28-pair matrix and network graph showing pairwise correlations. Data computed daily by the FX Pipeline and stored in correlation_matrix. Color scale: green (+0.7 to +1), grey (neutral), red (−0.7 to −1). Pair screener covers hedging, trending, and reversal categories with ranked best-pairs recommendations.

World Clocks

Four analog clocks — Sydney, Tokyo, London, New York — each with session-aware status indicators. Borders glow when the session is OPEN and pulse on WARNING. 100ms update interval for smooth second hand rotation with millisecond precision (second + ms / 1000). Session-colored accents: cyan, pink, yellow, green.

Volatility Monitor

Sortable grid showing all 28 instruments from the volatility_metrics table, color-coded by volatility regime. Metrics: HV-20, ATR-14, SMA-30, Bollinger Band Width. Row colors: green (low), yellow (medium), red (high volatility). Sortable by any column for quick pair discovery. Hourly refresh via FX Pipeline Cloud Run job.

The core of FxSaarthi is its session status engine. Every second, App.tsx recalculates whether each session is OPEN, CLOSED, or WARNING (opening/closing within 15 minutes). The logic handles overnight sessions (Sydney crosses midnight UTC) by checking both "today" and "yesterday" ranges.

Frontend

Backend & Data

Repository Architecture

Forex-Session-Dashboard — React + Express + Docker → Cloud Run Service ForexFactory-Calendar-Scraper — Python + Docker → Cloud Run Job (every 3 min) DataPipeLine-FX-APP — Python + Docker → Cloud Run Jobs (hourly + daily)