TCPW — Portfolio Heatmap

TCPW is a TypeScript market data scraping and visualization engine that solves a fundamental challenge in financial data collection: many market data sources render content via JavaScript frameworks, making traditional HTTP scraping impossible. Puppeteer controls a real Chromium browser instance to load pages completely before extracting data, capturing dynamically-rendered content that static scrapers miss.

The scraping layer uses a two-tool approach: Puppeteer for JavaScript-heavy pages requiring full browser rendering, and Cheerio for efficient DOM parsing of the resulting HTML. All extracted data passes through Zod schema validation, enforcing type safety at the boundary between unstructured web content and the application's typed data model. This catches data format changes at source before they silently corrupt downstream analysis.

The visualization layer renders portfolio holdings data as color-coded heatmaps — a standard institutional format for scanning large portfolios at a glance. Performance attribution, sector concentration, and return contribution are immediately visible without reading through tabular data. The project demonstrates practical financial data engineering: getting clean, validated data from messy real-world sources into a useful analytical form.