Web app

PropTradingDash v2

Production TypeScript monorepo powering the dashboard, checkout, and gateway of a prop-trading platform.

Private repository

Year: 2025
Type: Web app
Context: Team project, QuantTechnology Group
Industry: Fintech / Prop Trading
Role: Frontend developer, one of four developers on the dashboard and checkout apps

One of four developers on the platform. Contributed 139 commits to a ~20MB TypeScript codebase.

Problem

A prop-trading firm needed a single frontend platform to serve traders, handle program purchases, and route requests. The previous version had grown into a codebase where UI, checkout, and routing concerns were tangled and hard to ship independently.

Solution

A Bun-workspaces monorepo splitting the product into three deployable apps (dashboard, checkout, gateway) on top of four shared packages (ui, checkout-shared, checkout-widgets, locales), so a change to the design system or the checkout flow propagates once instead of being reimplemented per surface.

What I built

Three apps + four shared packages in a single Bun workspaces monorepo
Shared component library documented in Storybook
End-to-end coverage with Cypress, plus a dedicated E2E test repository
Strict quality gate: ESLint (airbnb-typescript), Prettier, jsx-a11y, Husky pre-commit hooks
Automated release pipeline with git-cliff changelog generation and semantic versioning
Internationalization through a shared locales package
Figma-to-implementation pixel diff tooling to catch visual drift

Engineering challenges

Keeping three apps visually and behaviourally consistent

Dashboard, checkout, and gateway ship separately but must feel like one product. Shared UI and checkout logic live in workspace packages rather than being duplicated, so a fix lands once. The tradeoff is stricter API discipline at the package boundary.

Working inside a large codebase with a small team

Four developers maintaining a codebase this size means everyone works across surfaces they did not write: reading unfamiliar code, matching established conventions, and passing an automated lint, type, and test gate on every commit. Ownership is wide by necessity.

Design fidelity at scale

With many screens and multiple contributors, visual drift from the Figma source is inevitable. The repo carries a pixel-diff tool comparing implementation against Figma frames, turning "does this match the design?" into a checkable step rather than an opinion.

Stack

TypeScript
React
Bun
Monorepo (workspaces)
Tailwind CSS
Storybook
Cypress
ESLint
git-cliff

Screens

Screens withheld: proprietary internal product.