Melia
Trade
Ambient awareness instead of information overload.
A real-time monitoring interface for an autonomous cryptocurrency trading bot. The dashboard doesn't replace the automation; it makes it legible. At any moment, the operator should know what the bot is doing, why, and whether to intervene, all in under two seconds and without reading a single label.
The project started with a question: could a personal trading strategy be fully automated without losing trust in it? After years of research, backtesting, and live iterations, the answer became a working system. The dashboard is how I keep eyes on it.
Too much data, not enough signal.
Algorithmic trading generates overwhelming amounts of data: price feeds, signal scores, position states and risk metrics, all updating simultaneously. Existing dashboards either drown the operator in raw numbers or abstract too aggressively. The real challenge was to communicate state rather than display data, clearly enough to work even when the operator is only half-watching.
Designed for peripheral vision.
The interface communicates system state passively, through spatial position, motion, and color, so information is absorbed without conscious effort. A dark glassmorphism system creates depth without hard borders. Color is strictly semantic: green for profit, red for loss, orange for system warnings. A full-screen ambient gradient shifts between green and red based on live P&L. The user never reads it, yet their peripheral vision always knows whether things are going well.
Three columns. Three cognitive modes.
The left sidebar handles scanning: symbols grouped into active positions, watchlist, and AI opportunities, each card carrying a sparkline, live price, and regime tag. The center panel is the analysis layer, a TradingView chart with the bot's full technical overlays. The right panel uses snap-scrolling to switch between open positions, signal analysis, and trade history, auto-navigating based on system context.
Motion that carries information.
Price updates trigger directional color flashes, a visual heartbeat that communicates market activity at a glance. Financial figures use spring interpolation so trends are perceptible before the number is read. A risk slider in the top bar includes an AUTO mode that ties position sizing to the bot's confidence score. A Web Speech API voice system announces entries and exits audibly, enabling monitoring without looking at the screen.
Built for sub-second latency.
React · TypeScript · Tailwind CSS · Framer Motion · Zustand · TradingView Lightweight Charts. Data streams via WebSocket from a Rust async backend, maintaining sub-100ms round-trip on all price and position events.
System state in under two seconds.
The operator opens the dashboard and immediately knows equity, position state, bot activity, and risk level, without reading a label or navigating a menu. Complexity is translated into a visual language the human eye already knows how to read.
