What we solved
Retail traders do their real work in three places at once: a brokerage app for orders, TradingView for charts, and a calculator tab for position sizing and profit math. TradeBar collapses those into one app. The position, profit, Fibonacci, and average calculators all auto-fill from the live price of the asset the user picks - not a stale number they typed two minutes ago. Alerts fire in under a second when the asset crosses a user-defined threshold.
The system at a glance
A Flutter 3.13.0 app (iOS + Android + admin web from one codebase). A FastAPI backend fronts the market-data vendor and runs the alert-rule evaluator. A socket stream pushes tick-by-tick prices to every connected client. Firebase Cloud Messaging fires price alerts; Crashlytics handles stability. Historical charts are custom-drawn in Flutter because off-the-shelf chart libs couldn’t hit the design.
What the user experiences
- Watchlists across Nasdaq, NYSE, OTC, and crypto. Search any symbol.
- Calculators: position, profit, Fibonacci, average.
- Asset integration: pick any stock or crypto, attach to any calculator, live price auto-fills.
- Interactive chart: 1H / 1D / 1W / 1M / 6M / 10m timeframes; candle and line views; pinch to zoom.
- Alerts: set a threshold, get a push when the price crosses it.
How we built the pieces
Live prices - socket stream from FastAPI
The FastAPI backend subscribes upstream to the market-data vendor once, multiplexes to a WebSocket / socket stream, and broadcasts every tick to connected clients. A user with TradeBar open on their phone and their laptop sees the same price on both, without either client hammering the vendor. The socket is the thing; polling wouldn’t hold the latency budget.
The chart - CustomPainter, because the design demanded it
Off-the-shelf Flutter chart libraries ran out of road on visual style. The team dropped to Flutter’s CustomPainter and wrote the candle renderer from scratch - tick by tick, with its own hit-testing for the crosshair and tooltip. More code, but the chart looks like a trading terminal instead of a chart-library default.
Alerts - rule evaluator on FastAPI, not just FCM
A price alert is not “wake up, send push.” It is: evaluate every rule against every tick, don’t double-fire on socket reconnect, don’t miss a cross because the server restarted. The FastAPI backend runs a rules engine keyed by asset, with last-seen-price state; when a tick crosses a threshold, it fires exactly once via FCM.
Admin web - same codebase
flutter build web ships the admin. Same models, same FastAPI backend. The trading surface runs on phones; operations run on desktops; one team maintains both.
Crashlytics - non-negotiable for a finance app
Every crash reports to Firebase Crashlytics with user context and recent ticks. A user with a thousand dollars in the middle of a trade does not forgive a crash; the team sees the exact repro in minutes.
The price-through-loop is the whole trick
The interesting engineering is not any single calculator or the chart - it is the loop: a price tick enters FastAPI, multiplexes to the socket, updates the chart and the calculator input and the rules engine simultaneously. Get that loop right and the rest is decoration; skip it and the app falls apart the first time the market moves fast.
Results
- iOS + Android + admin web live from one Flutter codebase.
- Live price feed streaming over the socket to every connected client.
- Custom-drawn historical charts with multiple timeframes.
- Alert rules firing within a second of the threshold cross.
- Watchlists across four markets: Nasdaq, NYSE, OTC, crypto.
What an engineering team should take from this
If you are building any real-time trading / markets UI:
- CustomPainter is your friend when charts need to look like trading terminals. Off-the-shelf libs run out of road fast.
- Rules engines beat raw FCM for alerts. State matters - last-seen-price, de-duplication on reconnect, once-and-only-once delivery.
- One backend subscription, fan-out to clients. Hammering the vendor from every device is how your rate-limit gets revoked.
- FastAPI’s WebSocket support plus Python’s async story is a fine spine for this pattern. Typed on both sides, one language for the pipe and the rules engine.
Tech stack
- Mobile + web admin: Flutter 3.13.0 (iOS, Android, web from one codebase)
- Backend: FastAPI (REST + socket stream + rules engine)
- Real-time: WebSocket / socket stream
- Push + crash: Firebase Cloud Messaging + Crashlytics
- Charts: Flutter
CustomPainter(hand-built) - Data: Postgres for watchlists + alert rules (inferred)
- Market data: vendor API (stocks: Polygon.io / Finnhub / Alpaca; crypto: Binance / CoinGecko - inferred)
Screens
