I built a free BTC trading terminal with React/Vite, Coinbase WebSocket, and a multi-tier build system

#opensource #javascript

I've been building trading tools for a while and finally launched the free tier of Mammoth Capital — a BTC trading terminal that runs entirely in the browser with no broker account or API key required.

Here's what went into the build that might be useful for other developers.

The Multi-Tier Vite Build System

The biggest architectural decision was supporting three distinct feature tiers (Free, Pulse, Pro) from a single codebase. I handle this with a VITE_APP_TIER environment variable at build time:

// vite.config.js
export default defineConfig({
  define: {
    'import.meta.env.VITE_APP_TIER': JSON.stringify(process.env.VITE_APP_TIER || 'pro')
  }
})

Each tier gets its own App*.jsx component and sidebar config. The build pipeline compiles all three independently and deploys them to separate paths on the VPS.

Live BTC Data via Coinbase WebSocket

The real-time price feed uses the Coinbase WebSocket API — completely free, no API key:

const ws = new WebSocket('wss://advanced-trade-api.coinbase.com/api/v1/brokerage/price');
ws.onopen = () => ws.send(JSON.stringify({
  type: 'subscribe',
  product_ids: ['BTC-USD'],
  channel: 'ticker'
}));

Zero infrastructure cost for live BTC data. The feed updates the UI directly via React state.

The Pulse Hub — Persistent iframe Mount

One of the trickier UX challenges: embedding the standalone MammothPulse BTC app inside the free tier dashboard without it reinitializing every time the user switches tabs.

The naive approach (conditional rendering) destroys and recreates the iframe on every tab switch. The fix is always mounting it and using CSS to show/hide:

<div className={`flex-1 flex flex-col min-h-0 ${activeTab === 'pulse-hub' ? 'flex' : 'hidden'}`}>
  <iframe
    src="/app/pulse-mobile/"
    className="w-full flex-1 border-none"
    title="Mammoth Pulse"
  />
</div>

The iframe loads once and stays alive — no chart reinitialization on every navigation.

Deployment

Node.js + PM2 serving static Vite builds
SFTP auto-deploy pipeline to Hostinger VPS
Three separate build outputs: /dist-free/, /dist-pulse/, /dist-pro/

What's in the Free Tier

Live BTC terminal (Coinbase WebSocket)
Pulse Hub (embedded MammothPulse BTC app)
BTC OmniData — on-chain metrics, dominance, fear & greed
Trading journal with P&L tracking
Academy with structured modules + XP system
News/intel aggregator
Strategy workbench

Live at mammothcapital.site — no card, no broker.

Happy to answer questions about the Vite multi-tier build, the WebSocket feed, or the iframe persistence pattern.

DEV Community