Crypto trading bot — order & chart UI
A real-time interface over live money — BTC and ETH price charts with the trader's open orders plotted on the same axes, everything arriving over WebSockets instead of a poll. Built entirely in vanilla JS, no framework.
Front-End Engineer
Vanilla JS · Chart.js · WebSockets
Fixed-step grid · Fibonacci
Visualization layer over real trades
Chart & open orders
ws: order #4471 filled — BUY $63,400
ws: replacement placed — BUY $61,900
ws: price tick — $64,281
Fill reconciliation
Build notes
No framework, by choice
Chart rendering, order-line overlays, and WebSocket state were all managed in plain JS — no React, no Vue, just direct DOM and canvas control.
Orders on the price axis
Open orders were drawn as lines on the same chart as price, not a separate list — where an order sat relative to price was the whole point.
Two placement strategies
Fixed-step grids spaced orders at even intervals; Fibonacci spacing placed them at retracement levels — both computed client-side before syncing to the backend.
Start it and walk away
A trader defines the setup once — pair, spacing, range — and starts the bot; from there it runs unattended, automatically reopening a replacement order at the next level every time one fills.
The UI was never the source of truth
Orders drawn here synced to a backend that placed them on the real exchange — every reconciliation had to match what actually happened with real money.