Market Data • React • TypeScript

Trader Data Visualization Dashboard

A market data dashboard built through the J.P. Morgan Forage software engineering simulation to process streaming stock quotes, visualize price movements, and flag ratio deviations in real time.

Task 1 Repo Task 2 Repo Task 3 Repo

Project Overview

This project focused on building a trader-facing visualization workflow from raw quote ingestion to front-end charting. Across three repositories, I worked through the full path of consuming live quote data, structuring it for analysis, and rendering a dashboard that surfaces pricing trends and alert conditions for a pair of stocks.

Project Highlights

3 Linked Tasks

500 Quote Requests

2 Tracked Stocks

5% Alert Threshold

Parsed streaming quote data and extracted bid, ask, and price values with Python.
Built a React and TypeScript dashboard using the Perspective visualization library.
Calculated stock price ratios and highlighted alert conditions when the spread moved out of range.
Organized the work as progressive deliverables across data processing, front-end charting, and alert logic.

Implementation Across Tasks

Task 1: Market Data Processing

Consumed quote responses from a local pricing server.
Extracted stock symbol, bid price, ask price, and computed display price values.
Added unit-test coverage around quote parsing behavior and pricing edge cases.

Task 2: Visualization Layer

Integrated Perspective into a React application for interactive chart rendering.
Configured timestamp-based visualization of top bid and ask values.
Streamed server responses into the dashboard to keep the graph updated with incoming data.

Task 3: Ratio Monitoring & Alerts

Computed normalized price ratios between two tracked stocks.
Introduced upper and lower bounds to detect outlier trading conditions.
Extended the chart schema to visualize ratio movement and trigger-alert signals together.

Dashboard Features

Live Quote Feed

Streams quote updates from the pricing server into the UI.

Time-Series Charting

Plots price and ratio movement over time for quick trend analysis.

Ratio Analysis

Compares paired stocks to identify divergence from expected behavior.

Threshold Alerts

Flags potential trading opportunities when the ratio leaves the safe band.

Technologies Used

Python Data Logic

React Frontend

TS Type Safety

Git Version Control

Frontend: React, TypeScript, CSS
Visualization: FINOS Perspective
Backend/Data Feed: Python, local quote server, CSV-based test data
Testing: Python unit tests
Workflow: GitHub repositories split by milestone deliverables

What This Project Demonstrates

Ability to move from back-end data parsing to front-end visualization in one workflow.
Experience translating raw financial data into signals traders can interpret quickly.
Comfort working across Python and modern JavaScript/TypeScript tooling.
A practical approach to monitoring market anomalies through simple, explainable thresholds.