A web application that parses Robinhood CSV exports and instantly visualizes your entire options and stock trading history — calls, puts, buys, and sells — with a color-coded dashboard and interactive treemap.
The Problem
Active options traders on Robinhood can rack up hundreds of transactions — stock buys and sells, covered calls, cash-secured puts, long calls and puts — but the platform's built-in history gives you a flat list with no P&L grouping, no visual summary, and no way to quickly see which tickers are working and which are bleeding money.
I wanted to drop in my CSV export and immediately see: where am I up, where am I down, and how do all of my trades fit together visually.
The Solution
TradeTracker accepts Robinhood's standard CSV export, parses every transaction, calculates P&L using FIFO for stocks and premium net for options, and renders two views:
Step 1 — Import
The upload flow detects the Robinhood CSV format automatically — Activity Date, Instrument, Trans Code, Quantity, Price, Amount — and redirects to your dashboard the moment processing completes. A warning banner reminds you this is an alpha build and to keep data private.
Step 2 — Dashboard
The dashboard opens with a stats bar: Total P&L, Total Stock Trades, Option Sells, Option Buys, and total trade count. Below it, every ticker is listed alphabetically with up to five trade-type cards — Stock Trades, Call Sells, Put Sells, Call Buys, Put Buys — each color-coded by P&L intensity. Filter buttons let you sort by Portfolio, Highest Gains, or Highest Losses.
Step 3 — Treemap
The treemap is the centerpiece of the visual design. Box area is proportional to the absolute P&L of each position — bigger boxes mean bigger impact, positive or negative. Green intensifies toward dark green for gains over $5k; red intensifies toward dark red for losses over $5k. Top-left anchors the biggest winners, bottom-right anchors the biggest losers. The result is a single image that tells the entire story of your trading year.
Product Requirements
Before writing any code, a full product requirements document was drafted to define scope, data model, and feature behavior. Here's the core of it.
A personal web application to track and analyze Robinhood trades with a focus on options trading and stock sales. Robinhood's native interface offers no grouped P&L by ticker or trade type, making it difficult for active traders to understand their performance at a glance.
TICKER STRIKE C/P MM/DD/YY to detect optionsPOST /api/upload — Upload and parse CSVGET /api/trades/summary — Dashboard dataGET /api/trades/treemap — Treemap dataGET /api/trades/stats — Overall statisticsThe Build Journey
This project was built using AI-assisted development in Claude — an AI code editor — where natural language prompts drove each phase from product spec to polished UI. Here are the key conversations that shaped the build.
TICKER STRIKE C/P MM/DD/YY. It auto-detected Trans Codes (STO, BTO, STC, BTC) to classify each option trade into the correct category.Tech Stack
All trade data stays on your machine. SQLite handles the database locally, so there's no backend to host and no data to expose. The React frontend and Express server run concurrently via a single npm run dev.
Reflections
The most interesting part of this build wasn't the code — it was watching how clearly-defined prompts compressed days of scoping into minutes. When I described the problem in trading terms (FIFO, STO, BTC, premium credits), the AI matched my domain language and produced accurate logic on the first pass.
The lesson: AI code generation is only as precise as the product thinking behind it. The PRD did the heavy lifting. The prompts were just precise instructions built on top of a clear spec. That's a UX skill — knowing exactly what you want before you build it.