Learn WebSockets
A real-time crypto dashboard built to learn WebSockets from the ground up. 8 assets streaming live via Binance, with broadcast, heartbeats, and auto-reconnect.
Tech Stack
Next.js 16
React framework
TypeScript
Type safety
Express
HTTP server
ws
WebSocket library
Recharts
React charts
Tailwind CSS
Utility CSS
Project Structure
| File | Purpose |
|---|---|
| ws-server/src/app.ts | Express + ws backend, Binance connector, broadcast, heartbeat |
| frontend/src/hooks/useWebSocket.ts | React hook: connect, reconnect, track history |
| frontend/src/components/Dashboard.tsx | Main layout with search, sort, market overview |
| frontend/src/components/CoinCard.tsx | Individual coin tile with sparkline chart |
| frontend/src/components/DetailChart.tsx | Large area chart for selected coin |
| frontend/src/components/SparklineChart.tsx | Mini inline chart (Recharts) |
| frontend/src/components/MarketOverview.tsx | Market sentiment, gainers/losers, top performers |
| frontend/src/lib/types.ts | TypeScript types + asset metadata (7 coins + 1 commodity) |
Quick Start
1. Clone the Repository
git clone https://github.com/shubhu2002/crypto-pulse-websocket.git2. Start the WebSocket server
cd ws-server
yarn install
yarn dev # Runs on port 40003. Start the Next.js frontend
cd frontend
pnpm install
pnpm dev # Runs on port 30004. Open in browser
Visit http://localhost:3000— you'll see 8 assets streaming live with charts.
Links & Resources
GitHub Repository
Source code, issues, and contribution guide
Live Demo
Deployed frontend on Vercel
Binance WebSocket Docs
Upstream API we connect to
RFC 6455 — WebSocket Protocol
The official spec this guide is built on
ws — Node WebSocket Library
The server library used in this project
Try These Experiments
- Open multiple tabs — watch the server log show client count increasing. All tabs get the same broadcast data.
- Kill the WS server— watch the frontend show "Disconnected" and auto-reconnect when you restart it.
- Check DevTools → Network → WS — see every WebSocket frame flowing in real-time.
- Hit the health endpoint —
curl http://localhost:4000/healthshows connected client count. - Add a new coin — add to COINS in server.ts and COIN_META in types.ts, restart server.