Crypto trading simulator inside a chat app
The client ran a crypto trading education community targeting the Brazilian market — thousands of Portuguese-speaking members learning to trade through Telegram channels and group chats. The problem was conversion: people would join, lurk for a few days, and leave. There was no hands-on experience, no way to practice what the educators were teaching. The client wanted something that would let new members feel what trading is like — without risking real money and without leaving Telegram.
how we built it
We built a Mini App that simulates crypto trading directly inside Telegram. Users get a virtual wallet with a starting balance, browse real market pairs, and place buy/sell orders against live price data rendered on interactive candlestick charts. The charts use the lightweight-charts library — the same engine behind TradingView — giving the experience a level of visual credibility that matters when you're teaching people to read candles and spot patterns. Every trade updates the portfolio in real time: holdings, P&L, transaction history. Telegram-native haptics fire on order execution via @twa-dev/sdk, and push notifications alert users when a position moves significantly. The whole thing feels native to the platform, not like a browser page crammed into a chat window.
what made it hard
The first real challenge was the viewport. Telegram Mini Apps run in a mobile-only WebView with severely limited screen real estate — no desktop mode, no landscape. Fitting a meaningful trading chart alongside portfolio data, order controls, and a price ticker required aggressive layout decisions. We ended up with a tabbed interface that lets users swipe between the chart view and the portfolio view, with a persistent ticker bar at the top. It's a compromise, but it works — users spend 80% of their time on the chart tab anyway.
Real-time price data was the second puzzle. WebSocket connections inside Telegram's WebView are unreliable — they drop on background/foreground switches and some Android vendors kill them aggressively. Instead of fighting it, we switched to a polling approach with adaptive refresh intervals: faster polling when the user is actively viewing a chart, slower when they're on other tabs. The backend — FastAPI with async SQLAlchemy and asyncpg — handles the polling load comfortably because each request is lightweight. It's not true real-time, but with sub-second refresh on active charts, users don't notice the difference.
onboarding flow
Then there was the tutorial. The client insisted on an onboarding flow that teaches new users what a candlestick is, how to read a price chart, and how to place their first trade. The trap with tutorials is that every step you add increases drop-off — but every step you remove leaves users confused. We landed on a four-step guided flow with Framer Motion animations: one screen for the wallet concept, one for reading charts, one for placing a simulated trade, and a congratulations screen with their first P&L result. Completion rate sits around 72%, which the client considers strong for their audience. Users who finish the tutorial are three times more likely to return the next day.
results
The result is a product that turned passive channel lurkers into active participants. Average session time inside the Mini App is over four minutes — significant for a Telegram context where most interactions last seconds. The community's paid conversion rate improved noticeably after launch, because users who practiced trading in the simulator understood what the premium signals and courses were actually for. The honest lesson: building for Telegram's Mini App platform means accepting its constraints early. Every feature we designed desktop-first had to be thrown out and rethought for a 360-pixel-wide frame. Starting mobile-only from day one would have saved us a full sprint of rework.
Stack
Frontend: Next.js 14, React 18, Tailwind CSS, @twa-dev/sdk, lightweight-charts, Framer Motion
Backend: FastAPI, SQLAlchemy 2 + asyncpg, PostgreSQL