Building an Open Source Real-Time Crypto Price Tracker with Bun's Native WebSocket

I built Coinstate, a real-time cryptocurrency price tracker that aggregates data from 10+ exchanges using Bun's native WebSocket. It's 5x faster than traditional Node.js solutions, open-source (Apache 2.0), and built as a modern monorepo.

🔗 Live Demo | 💻 GitHub

The Problem

If you've ever tried to compare cryptocurrency prices across exchanges, you know the pain:

• 🔥 Tab hell - Opening 10+ browser tabs for different exchanges
• 🔄 Manual refresh - Constantly clicking refresh to see prices
• ⏰ Missed opportunities - By the time you check all exchanges, it's too late
• 📊 No overview - Can't see the market at a glance

I wanted a single dashboard showing real-time prices from all major exchanges. So I built Coinstate.

What Is Coinstate?

Coinstate is a real-time cryptocurrency price tracker that:

✅ Aggregates prices from 10+ exchanges (Binance, Coinbase, KuCoin, Kraken, etc.)
✅ Streams live updates via WebSocket with sub-second latency
✅ Displays everything in a clean, responsive interface
✅ Compares prices side-by-side across exchanges
✅ Runs blazingly fast using Bun's native WebSocket

Think of it as a Bloomberg Terminal for crypto, but free and open-source.

The Tech Stack

Why Bun? 🚀

I chose Bun for the backend because:

1. Native WebSocket - Built-in, no external dependencies
2. 10x Faster - Installation, startup, and execution
3. TypeScript Native - No compilation step needed
4. Modern API - Clean, simple, performant

Performance Comparison

Node.js + ws package:
├─ WebSocket handshake: ~15ms
├─ Message latency: ~5ms
└─ Memory per connection: ~50KB

Bun native WebSocket:
├─ WebSocket handshake: ~3ms (5x faster ⚡)
├─ Message latency: ~1ms (5x faster ⚡)
└─ Memory per connection: ~20KB (60% less 📉)

Backend Stack

Bun + Hono + Redis + Bull

The backend connects to multiple exchange APIs simultaneously:

// Native Bun WebSocket - No external dependencies!
Bun.serve({
  port: 3000,
  websocket: {
    open(ws) {
      // Client connected
      wsManager.addClient(ws);
      ws.send(JSON.stringify({
        type: 'connected',
        message: 'Welcome to Coinstate!'
      }));
    },
    message(ws, message) {
      // Handle subscriptions
      const data = JSON.parse(message);
      wsManager.subscribe(client, data.subscriptions);
    },
    close(ws) {
      // Client disconnected
      wsManager.removeClient(client);
    }
  }
});

Key Features:

• 🎯 Smart Throttling - Limits updates to 10/sec per market
• 🔄 Deduplication - Skips identical updates (saves ~40% bandwidth)
• ⚡ Redis Caching - <1ms cache hits for instant responses
• 🔁 Retry Logic - Automatic reconnection on failures

Frontend Stack

React 19 + Vite + TailwindCSS 4 + TanStack Query

function App() {
  // WebSocket for real-time updates
  const { isConnected } = useWebSocket();

  // React Query for server state
  const { data } = useQuery({
    queryKey: ['rates'],
    queryFn: fetchAllRates,
    refetchInterval: 5000
  });

  // Group by currency
  const grouped = groupBy(data, p => p.market.split('/')[0]);

  return (
    <div className="container mx-auto p-4">
      <StatusBar connected={isConnected} />
      {Object.entries(grouped).map(([currency, prices]) => (
        <CurrencySection
          key={currency}
          currency={currency}
          prices={prices}
        />
      ))}
    </div>
  );
}

Interesting Technical Challenges

1. 🔌 Handling Exchange API Differences

Each exchange has a different API format:

• Binance: BTCUSDT
• Coinbase: BTC-USD
• Kraken: XBTUSD

Solution: Adapter pattern that normalizes all exchanges:

interface NormalizedPrice {
  exchange: string;
  market: string;
  price: number;
  high24h?: number;
  low24h?: number;
  volume24h?: number;
  timestamp: number;
}

// Each exchange has an adapter
export async function fetchBinancePrice(symbol: string) {
  const response = await fetch(
    `${BINANCE_API}/ticker/24hr?symbol=${symbol}`
  );
  const data = await response.json();

  return {
    exchange: 'binance',
    market: symbol,
    price: parseFloat(data.lastPrice),
    high24h: parseFloat(data.highPrice),
    low24h: parseFloat(data.lowPrice),
    volume24h: parseFloat(data.volume),
    timestamp: Date.now()
  };
}

2. 📊 WebSocket Bandwidth Optimization

Broadcasting every price update to every client would waste bandwidth. Most updates are tiny changes (e.g., $50,000.12 → $50,000.13).

Solution: Three-layer optimization:

1. Throttling - Max 10 updates/sec per market per client
2. Deduplication - Skip if price hasn't actually changed
3. Subscriptions - Only send markets the client cares about

class WebSocketManager {
  broadcastPrice(price: NormalizedPrice) {
    this.clients.forEach(client => {
      // Check subscription
      if (!this.shouldSend(client, price)) return;

      // Check deduplication
      if (!this.hasChanged(client, price)) return;

      // Check throttle
      if (!this.canSend(client, price)) {
        client.pendingUpdates.set(price.market, price);
        return;
      }

      // Send update
      client.ws.send(JSON.stringify({
        type: 'price',
        data: price
      }));
    });
  }
}

Result: 60% less bandwidth without losing important updates! 🎉

3. 🛡️ Graceful Degradation

Exchanges go down. APIs rate-limit. Networks fail.

Solution: Multi-tier fallback system:

async function fetchPrice(exchange: string, market: string) {
  // 1. Check Redis cache (< 1ms)
  const cached = await redis.get(`price:${exchange}:${market}`);
  if (cached && isFresh(cached)) return cached;

  try {
    // 2. Try primary endpoint
    return await fetchFromExchange(exchange, market);
  } catch (error) {
    // 3. Try alternative endpoint
    if (exchange.alternativeUrl) {
      return await fetchFromAlternative(exchange, market);
    }
    // 4. Return last known price
    return cached || null;
  }
}

4. 📦 Monorepo with Bun Workspaces

Converted from separate npm packages to unified Bun monorepo:

Before:

cross-router/          # Backend (npm)
frontend/              # Frontend (npm)

After:

packages/
  ├── backend/         # @coinstate/backend (bun)
  └── frontend/        # @coinstate/frontend (bun)

Benefits:

• ✅ Shared dependencies
• ✅ Single bun install (11x faster than npm!)
• ✅ Unified scripts
• ✅ Better developer experience

# Before (npm): ~45 seconds
npm install

# After (bun): ~4 seconds! 🚀
bun install

Performance Benchmarks 📈

Real-world production metrics:

Compared to Node.js:

• 11x faster installation
• 40x faster hot reload
• 5x faster WebSocket
• 60% less memory per connection

Lessons Learned 💡

1. Bun Is Production-Ready ✅

I was skeptical, but Bun has been rock-solid:

• Zero stability issues in production
• Native WebSocket is flawless
• TypeScript works out of the box
• npm packages work fine

Gotcha: Some Node.js packages (like ws) aren't needed with Bun's native APIs.

2. Real-Time Is Hard ⚠️

Building a real-time system taught me:

• Always have fallbacks - Networks fail
• Cache aggressively - Redis is your friend
• Throttle intelligently - Not every update matters
• Test with load - 10 vs 10,000 connections is very different

3. Documentation Matters 📚

Spent 20% of dev time on documentation. Worth it:

• 800+ lines of backend docs
• 900+ lines of frontend docs
• Migration guides
• Quick start guide

Result: First contributor PR within 24 hours! 🎉

4. Open Source Everything 🌍

Apache 2.0 license means:

• Anyone can use it freely
• Companies can fork it
• Contributions come back
• Trust through transparency

Already seeing interest from trading bots and portfolio trackers.

Try It Yourself 🚀

Live Demo

Visit coinstate.co to see it in action!

Run Locally

# Clone
git clone https://github.com/oyeolamilekan/coinstate
cd coinstate

# Install (takes ~4 seconds!)
bun install

# Start Redis
redis-server

# Start backend
bun dev:backend

# Start frontend (new terminal)
bun dev:frontend

Visit http://localhost:5173 and watch prices update in real-time! ⚡

API Example

# Get Bitcoin price from Binance
curl http://localhost:3000/api/binance/BTC-USDT

# WebSocket stream
wscat -c ws://localhost:3000/ws

# Subscribe to markets
> {"type":"subscribe","subscriptions":["BTC-USDT","ETH-USDT"]}

What's Next? 🔮

Roadmap for v2:

• [ ] 🔔 Price alerts - Get notified at target prices
• [ ] 📈 Historical charts - View price trends
• [ ] 🌐 More exchanges - Add DEXs and regional exchanges
• [ ] 💼 Portfolio tracking - Track your holdings
• [ ] 📱 Mobile apps - iOS and Android
• [ ] 🤖 Trading signals - ML-based predictions
• [ ] 🔌 Public API - Let others build on top

Contributing 🤝

The project is open-source and looking for contributors!

What you'll work with:

• Bun runtime
• WebSocket architecture
• Real-time systems
• React 19
• TailwindCSS 4

Ways to contribute:

• Add exchanges (~50 lines per adapter)
• Improve UI/UX
• Write tests
• Fix bugs
• Add features

Check out the contributing guide to get started!

Conclusion 🎯

Building Coinstate taught me that:

1. Bun is ready for production - Don't be afraid to use it
2. Native APIs are powerful - Less dependencies = less complexity
3. Real-time is achievable - With the right architecture
4. Open source works - Share your code, grow together

The entire stack is modern, fast, and maintainable. If you're building a real-time application, definitely consider Bun's native WebSocket—it's a game-changer! 🚀

Links & Resources 🔗

• 🌐 Website: coinstate.co
• 💻 GitHub: github.com/oyeolamilekan/coinstate
• 📧 Email: johnsonoye34@gmail.com

FAQ ❓

Q: Why not Node.js?
A: Bun is 10x faster with native WebSocket support. No external packages needed.

Q: Why not Rust/Go?
A: JavaScript/TypeScript is more accessible for contributors. Bun gives near-native performance with better DX.

Q: Why not serverless?
A: WebSocket requires persistent connections. Dedicated servers are more cost-effective for high-frequency updates.

Q: Is it safe for trading?
A: This is for informational purposes only, not financial advice. Always verify prices on official exchanges before trading.

Questions? Comments? Drop them below! 👇

If you found this interesting, give it a ⭐ on GitHub!

Built with ❤️ using Bun, React, and too much coffee. ☕