CASE STUDY · FRONTEND
Cryptocurrency Tracker
A fast, private crypto dashboard with live prices, candlestick charts, portfolio P&L and price alerts across every exchange.
- ROLE
- Frontend developer
- TIMELINE
- 6 weeks
- TEAM
- Solo
- PLATFORM
- Web app
PRODUCT IDENTITY
ledgr
Track every coin. Miss no move.
01 · OVERVIEW
Project overview
DEVELOPMENT TIME
6 weeks
Spike to public beta
TEAM SIZE
Solo
Design and frontend
KEY ACHIEVEMENT
2,400+ assets
Streaming live at 60 fps
THE PROBLEM
Most crypto trackers are slow, ad-heavy and want your exchange keys. Prices lag, charts stutter, and portfolio totals rarely match what the exchange shows.
THE APPROACH
Ledgr streams prices straight from exchange WebSockets into an in-memory store, batches updates to one render per frame, and computes P&L locally so no keys ever leave the browser.
60 fps
charts while streaming live ticks
< 50 ms
tick-to-screen latency
0
API keys stored on a server
02 · FEATURES
What it does
Live prices
WebSocket feeds from major exchanges, updated every tick.
Candlestick charts
1H to 1Y candles with volume, zoom and crosshair.
Portfolio P&L
Realized and unrealized gains computed in the browser.
Price alerts
Notify on price, percentage move or volume spike.
Watchlists
Group coins and sort by change, volume or market cap.
Exchange import
Read-only CSV import from Coinbase, Binance and Kraken.
03 · PROCESS
How it was built
WEEK 1
Discover
Benchmarked five trackers for latency, accuracy and privacy.
- Benchmark report
- Data sources
WEEK 2
Design
Terminal-style layout, chart states and alert flows.
- Figma prototype
- Number styles
WEEK 3–5
Build
Socket layer, chart rendering, portfolio engine and alerts.
- Web app
- Stream store
WEEK 6
Ship
Public beta on Vercel with error and performance monitoring.
- Public beta
- Perf budget
04 · TECH STACK
Built with
FRONTEND
- TypeScript
- React
- Zustand
CHARTS
- Chart.js
- Financial plugin
- Canvas
DATA
- WebSocket feeds
- CoinGecko API
- IndexedDB
TOOLING
- Vite
- Vercel
- Vitest
ARCHITECTURE
Ledgr web app
React + Zustand
Stream store
Batching + P&L engine
Exchange sockets
Live ticks
CoinGecko API
Metadata, history
IndexedDB
Portfolio, alerts
05 · LEARNINGS
Challenges & learnings
Thousands of ticks per second
CHALLENGE
Rendering every price update froze the UI during volatile markets.
OUTCOME
Batching ticks into one store update per animation frame kept the UI smooth.
Keeping keys private
CHALLENGE
Users would not trust a tracker that stores exchange API keys.
OUTCOME
Read-only CSV import and in-browser P&L meant no keys or balances ever hit a server.
Interested in this project?
Happy to walk through the code, the decisions behind it, or how something similar could work for your team.