SaaS productFintech · derivatives2024–2026

A 44,000-line trading workstation that put nine figures of notional volume through three perpetual markets — built end to end.

Charts, order book, execution, and five trading bots on one screen.

Real-Time AI Trading DashboardView source
Stack
  • Next.js 16
  • React 19
  • TypeScript
  • Zustand
  • Privy
  • Supabase + 15 Edge Functions
  • Hyperliquid SDK
  • ethers · viem
  • KLineCharts Pro
  • Lightweight Charts
  • SSE · WebSockets
  • Framer Motion
  • Cloudflare Workers
private production build
Real-Time AI Trading Dashboard homepage
Real-Time AI Trading Dashboard mobile homepage
Snapshot

What shipped

A 44,000-line trading workstation that put nine figures of notional volume through three perpetual markets — built end to end.

Timeline
Four versions, 2024–2026 · shipped
Systems delivered
  • Trade workspace
  • Order & position engine
  • Automation center
  • Signal feed
  • Wallet auth
  • Bot API
  • Exchange SDKs
Problem

The problem

A chart with an order form bolted on is not a workstation.

The platform's users were acting on automated trade signals but executing by hand across separate tools: one tab for the chart, one for the exchange, a chat window for the signal, a spreadsheet for risk. Every hop cost seconds, and seconds cost money.

The brief was one screen that held market context, account state, analytical signals, order construction, and automation together — and stayed truthful when a data connection dropped mid-session.

Research

Four versions in

Version one turned an existing Zapier-connected signal source into a coherent product experience. Versions two and three moved the core into custom services: normalized exchange data, deterministic analysis, liquidation and cascade logic, and real-time distribution. The fourth version shown here is the terminal that brings all of it to the trader.

I owned the terminal end to end — product requirements, interaction design, the panel system, exchange and wallet integration, execution services, bot controls, guarded API routes, and Cloudflare deployment. Three other developers worked on other parts of the wider platform.

UX

Dense on purpose

Traders under pressure need everything visible and nothing precious.

The workspace is a resizable panel grid: chart with indicator controls and interval switching, order book and trade tape, order ticket with cross/isolated margin, multiplier up to 40x, take-profit and stop-loss, and a tabbed account area for positions, balances, open orders, history, and the live signal feed.

Every asynchronous action — order placed, cancelled, bot toggled — confirms through the same toast system, and stale or disconnected feeds say so instead of showing yesterday's price.

Key decisions
  • Three charting enginesbecause different views need different tools — KLineCharts Pro for trading, Lightweight Charts for compact panels, TradingView widgets for market overview.
  • Quick Trade on the market headerbecause the fastest path from signal to order should be one click with a pre-set size.
  • Automation as a first-class pagebecause bots need their own status, configuration, risk limits, and audit log — not a settings drawer.
  • Panels remember their jobbecause resizing the workspace should not split positions, orders, balances, and signals into disconnected pages.
Architecture

State, sockets, and a bot API

Ten Zustand stores coordinate positions, orders, funding, spot prices, trackers, UI state, transfers, and automation across every panel. Hyperliquid connectivity runs through a dual-node client (private node first, public fallback) with WebSocket spot prices, SSE signals, and polled account state.

Wallet authentication is Privy; application data and bot tokens live in Supabase, with 15 edge functions covering token issue and revoke, account reads, signal fetches, command publish and result polling, and a points program.

A separate bot API (13 Next.js routes) lets external agents place, cancel, and close positions through the same guarded services the UI uses. Thirty-three service modules separate exchange access, execution, risk, market data, transfers, bots, and fallback behavior. The whole app deploys to Cloudflare Workers through OpenNext.

Over its lifecycle the platform integrated three perpetuals venues. For one of them I wrote the exchange SDK from scratch — a browser-side signer compiled to WebAssembly plus a typed client — because no usable one existed.

Key decisions
  • Five automation servicesbecause signal-based Auto Trade, stale-order Cancel, SL/TP, Trailing SL, and stablecoin market-making each get their own service, store, and toggle.
  • Dual-node exchange clientbecause a private node is faster; a public fallback keeps the terminal alive when it isn't there.
Results

What shipped

0 figuresNotional volume through the platformLifetime, across usage and automation — $100M+.Reported
0Perpetuals venues integratedIncluding one exchange SDK written from scratch.Delivered
0,270 linesTypeScript in the terminal170 source files.Delivered
0Service modulesExchange, execution, risk, automation, transfers, and fallback paths.Delivered
0Supabase edge functionsPlus a shared utility module.Delivered
0Agent-facing API routesPlace, cancel, close, read state, and poll command results.Delivered
0Global state storesDelivered
0Automation botsDelivered
0Charting enginesDelivered
Delivered = shipped · Measured = instrumented · Reported = platform figure · Target = engineering budget · Early signal = first weeks
How results are reported

Scope figures come from the repository. The volume figure is the platform's own lifecycle total across its integrated venues, reported here in round terms. No trading-performance or P&L claims are made; the production platform is private and the public repo is a sanitized snapshot.

Connects

Where the signals come from

The signal feed in the terminal is the output of the same deterministic analysis pipelines that power the ACP seller agent — one data platform serving a human workstation and autonomous agents alike.

The same discipline carries into the local work: real-time state, honest failure states, and interfaces built for people who don't have time to fight their software.

Have a problem that looks like this?

That's the kind of gap I close. Tell me what's breaking and I'll show you the system that fixes it.