✦ OPEN TO WORK // SENIOR FULL-STACK & APPLIED AI ✦ REAL-TIME WEBSOCKETS & DISTRIBUTED SYSTEMS ✦ MUMBAI, INDIA [UTC +5:30] ✦ OPEN TO WORK // SENIOR FULL-STACK & APPLIED AI ✦ REAL-TIME WEBSOCKETS & DISTRIBUTED SYSTEMS ✦ MUMBAI, INDIA [UTC +5:30] ✦ OPEN TO WORK // SENIOR FULL-STACK & APPLIED AI ✦ REAL-TIME WEBSOCKETS & DISTRIBUTED SYSTEMS ✦ MUMBAI, INDIA [UTC +5:30]
arrow_back All Projects
CASE STUDY · FULL-STACK PLATFORM
FINTECH ARCHITECTURE EXCHANGE MODERNIZATION OFF-MAIN-THREAD WORKERS

OroSoft Trading Terminal

High-Frequency Precious Metals Exchange Web Application

ROLE Senior Engineer & Technical Lead 2021 – Present
CORE TECHNOLOGIES
Real-Time Systems Web Workers WebSockets React
PRIMARY HIGHLIGHT Powers 10–50 bullion trading institutions Web Workers eliminated UI thread lock under heavy load
LINKS & ACCESS
EXPERIENCE arrow_downward

01. Context & Overview

As Technical Lead on a 20-engineer initiative, spearheaded the modernization of OroSoft’s flagship precious metals trading platform from a legacy desktop terminal into a sub-second, resilient web architecture serving 10–50 financial institutions.

02. The Constraints & Needs

Enterprise financial trading terminals demand zero downtime and relentless UI responsiveness:

  1. High-Frequency Market Ticks: Gold and silver exchanges stream hundreds of price quotes per second during market open; processing JSON deserialization on the main JavaScript thread caused UI frame drops and dropped clicks.
  2. Legacy Monolith Webpack Debt: Developers suffered through ~90-second cold start and rebuild loops, slowing down release cadences.
  3. Institutional Stability Guarantees: Trading desks execute multi-million dollar bullion trades; defects sustained per sprint had to be strictly capped below 3 bugs.
MarketTickPayload
v4.2.0 · DATA CONTRACT
// Contract schema definition
{
"metal_symbol": *req <enum(XAU, XAG, XPT, XPD)> // Precious metal commodity identifier
"bid_price": *req <decimal(12, 4)> // Current market buy price
"ask_price": *req <decimal(12, 4)> // Current market sell price
"spread": *req <decimal(6, 4)> // Calculated institutional spread
"tick_sequence": *req <uint64> // Monotonically increasing exchange sequence
}

03. System Architecture & Data Flow

ARCHITECTURE SCHEMATIC

Off-Main-Thread Real-Time Streaming Architecture

01
Binary WebSocket Stream Ingestion FULL-DUPLEX WSS

Dedicated WebSocket stream establishes connection directly inside a background Web Worker.

arrow_downward
02
Worker-Thread Deserialization & Diffing OFF-MAIN-THREAD WORKER

Web Worker parses high-frequency market ticks, calculates spreads, and diffs state completely away from the browser DOM.

arrow_downward
03
Batched Frame Synchronization 60 FPS PAINT SYNCHRONIZER

Transferable Objects pass batched state snapshots to the React rendering thread synchronized with requestAnimationFrame.

arrow_downward
04
Sub-Millisecond Order Dispatch IDEMPOTENT ORDER ROUTING

Trader order executions bypass queues and dispatch directly to institutional settlement matching engines.

04. Protocol & Sequence Lifecycle

PROTOCOL LIFECYCLE

Market Volatility Tick-to-Screen Trace

Exchange Feed
Worker Thread
UI React Thread
Trading Desk
#1 Exchange Feed → Worker Thread : WSS: Stream burst of 250 price ticks/sec
1.2ms
#2 Worker Thread → Worker Thread : Deserialize JSON & recalculate order book
0.4ms
#3 Worker Thread → UI React Thread : postMessage(TransferableObject) batch
0.8ms
#4 UI React Thread → Trading Desk : requestAnimationFrame 60 FPS repaints
16.6ms
#5 Trading Desk → Exchange Feed : Instant limit order placement
8.5ms

05. Benchmark & Evaluation Matrix

ARCHITECTURE MATRIX

Platform Modernization Benchmarks

Production Metrics Across 50 Trading Desks

swipe Swipe horizontally to inspect full matrix
Area / Decision Conventional Approach Chosen Solution Trade-Off & Impact
UI Frame Rate Under Volatility 18–24 FPS (Main-thread UI locking) Solid 60 FPS (Web Workers offload) Smooth Real-Time Charts
Frontend Build Time ~90 Seconds (Webpack monolith) ~10 Seconds (Vite + Vitest) -89% CI Build Latency
Sprint Defect Rate 12–18 bugs / sprint < 3 bugs / sprint (Zod contracts) 78% Defect Reduction
Active Business Coverage Desktop-only legacy client 10–50 Institutional desks live on web Cross-platform Access

06. Production Learnings & Architecture Rules

  1. Keep Heavy Data Out of the React Render Loop: High-frequency streaming data should never pass directly into React state on every packet; batch updates and process ticks in Web Workers.
  2. Modern Build Tools Compound Developer Productivity: Migrating from Webpack to Vite saved hours of waiting each week across 20 engineers.
  3. Strict Runtime Contracts Prevent Enterprise Incidents: Enforcing Zod validation on incoming financial schemas prevented faulty exchange payloads from corrupting trade executions.
arrow_back Return to All Projects ↑ Top of Page