Modernising a live FX platform without stopping the market.
Leading the frontend of an institutional FX trading platform — taking a legacy third-party codebase to a modern, tested, containerised stack while it stays live.
Role
Senior Frontend Engineer
Period
Oct 2025 — Present
Desk
FX trading · Treasury
Location
London · Hybrid
Regression cycle
0 minfrom 2 weeks of manual testing
Platforms redesigned
0main trading platform + internal tools
Development speed
0×with agentic plan → build → review
01Starting position
A legacy codebase that couldn't stop trading.
I took over a messy, legacy third-party FX trading platform: GWT dependencies, a functional-programming syntax layer, and outdated versions of webpack, React and TypeScript.
Regression testing was manual and took two weeks per cycle. So the first move wasn't a rewrite — it was a safety net. A Playwright suite now covers the full UX flows and runs in thirty minutes.
Drawn to scale against 80 working hours.
02The plan
Seven moves, in an order that keeps risk low.
Each step relies on the one before it. Tests come first so every later change is verifiable; infrastructure comes last, once the code is worth containerising.
- 01
E2E coverage
Playwright tests across every full UX flow, so every later change has a safety net.
- 02
Legacy clean-up
Remove dead paths and duplication before touching the foundations.
- 03
Dependency upgrades
Webpack, React and TypeScript brought to their latest versions.
- 04
Plain TypeScript
Functional-programming syntax rewritten into idiomatic, readable TypeScript.
- 05
GWT removal
The last of the GWT dependency taken out of the frontend.
- 06
FE / BE split
Frontend and backend separated into independently deployable pieces.
- 07
Containerisation
Both sides packaged into containers for a modern delivery pipeline.
03Design system
Built for prices that never stop moving.
I redesigned three platforms — the main trading platform and internal tools — on a new high-fidelity design system. The goal: handle dense, real-time trading data without looking or feeling like a legacy terminal.
Live prices and trade updates stream to the browser over WebSockets, fed by RabbitMQ on the backend, and the design system is shaped around that constant stream of updates.
| Pair | Bid | Ask | Spread |
|---|---|---|---|
| EUR/USD | 1.08414 | 1.08426 | 1.2 |
| GBP/USD | 1.27144 | 1.27156 | 1.2 |
| USD/JPY | 151.314 | 151.326 | 1.2 |
| USD/CHF | 0.88124 | 0.88136 | 1.2 |
| AUD/USD | 0.65734 | 0.65746 | 1.2 |
| EUR/GBP | 0.85264 | 0.85276 | 1.2 |
Illustrative only — random-walk prices rendered in the browser
04Treasury tooling
SpectrAxe Switch.
I built the interface and logic for a tool that lets treasury teams act as intermediaries between Prime Brokers and trades — bridging front-office execution and back-office systems.
Prime Brokers
Liquidity & credit
SpectrAxe Switch
Treasury intermediation
Trades
Front office → back office
Simplified diagram of the role the tool plays
05Platform foundations
Identity, accounts and a faster team.
I designed a firm-wide identity service and a new hierarchical account system, giving much more granular control across every platform.
I also wrote the frontend "source of truth" guidelines used across all platforms, and integrated agentic workflows into planning, development and review — cutting development time by three times.
01
Plan
+ agents
02
Build
+ agents
03
Review
+ agents
Frontend source-of-truth guidelines
Shared context for engineers and agents across every platform
Instruments
- TypeScript
- React
- WebSockets
- RabbitMQ
- Playwright
- Webpack
- Docker
- Design systems