Crypto & Fintech

Last updated May 2026

BTC Explorer - Project Q&A

Project Overview

BTC Explorer is a comprehensive Bitcoin blockchain explorer and educational platform that I built to visualize Bitcoin's activity in real-time. The application streams live transactions from the mempool, displays network statistics, tracks corporate Bitcoin holdings, and provides educational content about Bitcoin technology. I designed it for Bitcoin enthusiasts, investors, and anyone curious about how the Bitcoin network operates, whether they are technical or non-technical users.

Live Demo: btcexplorer.io

Key Features

Real-Time Transaction Stream

The Live page connects via WebSocket to stream unconfirmed transactions directly from the Bitcoin network. Users can watch transactions flow in real-time, see BTC values, transaction sizes, and input/output counts. I implemented pause/resume controls and automatic reconnection for a smooth experience.

3D Blockchain Visualizations

Using Three.js and React Three Fiber, I created immersive 3D visualizations including an animated Bitcoin logo, a particle system representing network activity, and a blockchain node network. Users can toggle between a list view and 3D transaction flow visualization.

Power Law Price Model

I implemented the Bitcoin power law model with 95.65% R-squared accuracy. Users can explore projected prices, calculate potential returns on investments, and view price milestones. The logarithmic chart shows the model trajectory from 2010 to 2040.

Corporate Treasury Tracker

This feature tracks 100+ entities holding Bitcoin including public companies (Strategy, Tesla, Marathon), ETFs (IBIT, FBTC, GBTC), governments (US, El Salvador), and private entities. I pull data from BitcoinTreasuries.net via a Cloudflare Worker proxy with a 6-hour cache and display it with sortable tables, pie charts, and bar charts. Categories are dynamically generated from the data (only showing categories with 10+ entities), and filters persist when selecting categories. A force-refresh option (?refresh=1) is available for debugging stale cache data.

Network Statistics Dashboard

The navigation bar and Live page display real-time network metrics: current block height, BTC price, mempool size, fee estimates, hashrate, and difficulty adjustment progress.

Educational Content

I curated 70+ historical Bitcoin events from the 2008 whitepaper to the 2024 halving. The Learn section explains Bitcoin technology including PoW, SHA-256, SegWit, Taproot, and Lightning Network.

Wallet Guide

A comprehensive comparison of hardware wallets (Ledger, Trezor, Coldcard) and software wallets (Sparrow, BlueWallet, Phoenix) with features, pros/cons, and direct links.

Technical Highlights

Challenge: Real-Time Data Without a Backend

I needed to display live blockchain data without maintaining server infrastructure. My solution was to connect directly to public APIs and WebSockets from the browser, with Cloudflare Workers handling CORS-restricted APIs (BitcoinTreasuries.net, Yahoo Finance, CoinGecko). This keeps hosting costs at zero while providing real-time functionality.

Challenge: Multiple Unreliable Data Sources

Bitcoin data comes from various APIs with different reliability and rate limits. I built a multi-source fallback system: CoinGecko primary with Coinbase backup for prices, and a Vercel serverless function (/api/mstr) that fetches MSTR stock data server-side from Yahoo Finance with Stooq as fallback. The serverless approach was necessary after Yahoo Finance began blocking browser requests (CORS + rate limiting), so the function runs server-side with proper headers and Vercel's CDN caches the responses. Aggressive client-side caching via TanStack Query and LocalStorage handles API outages gracefully.

Challenge: Performance with 3D Graphics

Three.js is heavy and could slow initial page load. I implemented code splitting so 3D components only load when users navigate to views that need them. The lazy loading keeps the critical path fast while still offering rich visualizations.

Challenge: Keeping Data Fresh

I used TanStack Query with visibility-based refetching. Data refreshes automatically when the tab is visible but pauses when hidden, saving bandwidth and API calls. LocalStorage caching with TTL (via getCached/setCached utilities) ensures users see recent data even on return visits. For treasury data, I implemented a 6-hour cache with a force-refresh URL parameter for debugging, and category filters that persist across interactions.

Innovative Approach: WebSocket with Fallback

The live transaction stream uses WebSockets for real-time data, but I implemented a REST API fallback for recent blocks if the WebSocket connection fails or takes too long to receive blocks. This hybrid approach ensures users always see meaningful data.

Engineering Decisions

Static SPA over server-rendered app

Constraint: A blockchain explorer needs real-time WebSocket updates, 3D scenes, and frequent client interaction; SEO matters less than interactivity.
Options: Next.js SSR, Remix, plain Vite SPA on Vercel.
Choice: Vite + React 18 SPA deployed as a static site.
Why: SSR offers little benefit when the primary view is a live mempool stream that hydrates seconds after load anyway. A static SPA ships faster, has no server runtime to scale, and lets me run on Vercel's free tier indefinitely.

Vercel serverless function for MSTR price

Constraint: Yahoo Finance started returning 429s for browser User-Agents and Stooq has no CORS headers; I needed MSTR data for the Strategy treasury page.
Options: Add a third Cloudflare Worker, run a Node backend, drop the feature.
Choice: A single Vercel serverless function at /api/mstr (Yahoo Finance with Stooq fallback, 60s CDN cache + 120s stale-while-revalidate).
Why: Same-origin eliminates CORS preflight, server-side requests can set proper headers, and Vercel's CDN absorbs traffic spikes for free. Adding a third Worker would have split secrets and observability across providers.

TanStack Query + localStorage instead of a state manager

Constraint: Multiple data sources with different refresh cadences (WebSocket pushes, 45s/60s/2m/5m polls), API outages must degrade gracefully.
Options: Redux + RTK Query, Zustand + manual fetch, plain useEffect + Context.
Choice: TanStack Query as the single source of truth, wrapped with TTL-based getCached/setCached helpers writing to localStorage.
Why: Query gives me deduplication, background refetch, visibility-pause, and stale-while-revalidate out of the box. The localStorage layer turns a cold open into an instant render and keeps the app readable when an upstream API is down.

Three.js loaded only where it's used

Constraint: Three.js + drei + fiber adds ~500 KB gzipped; users hitting the corporate holdings page should not pay for the 3D bundle.
Options: Bundle everything, server-render the 3D into images, lazy-load per route.
Choice: React.lazy + Suspense at the route boundary so 3D code only ships when the user navigates to Home or Live.
Why: Keeps the critical bundle under 150 KB gzipped while preserving the headline 3D experience. Image fallbacks would have lost the interactivity that is the whole point of those pages.

Frequently Asked Questions

1. Why did you build this instead of using existing blockchain explorers?

Most blockchain explorers focus on transaction lookup and block details. I wanted to create an experience that helps people understand Bitcoin at a visceral level - watching transactions flow in real-time, visualizing the network in 3D, and seeing how the price follows mathematical patterns. It is as much an educational tool as a utility.

2. How accurate is the live transaction data?

The transactions are streamed directly from Blockchain.info's public WebSocket API. They represent actual unconfirmed transactions entering the mempool in real-time. Block confirmations and network stats come from Mempool.space, which runs production-grade Bitcoin infrastructure.

3. Is the Power Law model financial advice?

No. I clearly state throughout the application that this is for educational purposes only. The power law model is a statistical observation that has held for 15+ years, but past performance does not guarantee future results. Users should do their own research before making investment decisions.

4. How do you handle API rate limits?

I implemented several strategies: TanStack Query deduplicates requests and caches responses, LocalStorage persists data across sessions with TTL validation, Cloudflare Workers cache responses at the edge, and I use multiple fallback sources when primary APIs fail or rate limit.

5. Why Three.js instead of WebGL directly or another library?

Three.js has the best balance of power and developer experience. React Three Fiber lets me write 3D scenes using familiar React patterns, making the code maintainable. The Drei library provides production-ready helpers. Direct WebGL would have taken much longer for similar results.

6. How does the WebSocket reconnection logic work?

useBlockchainWebSocket in src/lib/useBlockchain.js opens a connection to Blockchain.info, subscribes to unconfirmed_sub and blocks_sub, and listens for tx and block events. If the socket closes or errors, an exponential backoff retries with a cap, and a visibilitychange handler pauses the stream when the tab is hidden so users don't burn bandwidth. If no block arrives within a timeout window, the hook falls back to polling Mempool.space for recent blocks so the Live page always shows something fresh.

7. How do you ensure accessibility?

I implemented keyboard navigation throughout, proper focus states for all interactive elements, skip-to-content links, ARIA labels on icon buttons, and sufficient color contrast. The ESLint jsx-a11y plugin catches accessibility issues during development.

8. Why Vercel and Cloudflare instead of a traditional backend?

Cost and simplicity. Vercel's free tier handles the static site hosting and serverless functions (like the /api/mstr MSTR price proxy), and Cloudflare Workers' free tier is sufficient for my other API proxy needs (treasury data, CoinGecko). This serverless architecture means I pay nothing to run the application and have no servers to maintain. When Yahoo Finance broke due to CORS/rate-limiting changes, I was able to add a Vercel serverless function as a same-origin proxy in minutes rather than spinning up a backend.

9. How current is the corporate treasury data?

The treasury data comes from BitcoinTreasuries.net, which aggregates information from SEC filings, company announcements, and blockchain analysis. My Cloudflare Worker proxy caches this data for 6 hours to reduce load on their servers. I also maintain a comprehensive fallback dataset with 100+ entities that serves data if the API is unreachable. Users can force a cache refresh by appending ?refresh=1 to the URL. For real-time critical decisions, users should verify with primary sources.

10. Does the site have legal and compliance pages?

Yes. I added Terms of Service, Privacy Policy, and Disclaimer pages as static HTML in the public directory. These are linked from the footer in the Layout component, making them accessible from every page.

11. How does the Power Law calculator work?

The Power Law page implements the model price = A * (days_since_genesis ^ n) with parameters fit to historical price data. The chart uses Recharts with a logarithmic Y axis so the curve renders as a straight line, and the calculator accepts an investment date and amount to project a value at a future date. Bitcoin's genesis block (2009-01-03) anchors the day count, and the parameters live alongside the fit metadata in src/lib/bitcoinData.js so they can be re-tuned without touching the page component.

BTC Explorer - Technology Stack

Frontend

Technology	Version	Purpose
React	18.2.0	Core UI framework
React Router DOM	6.20.0	Client-side routing with nested routes
Vite	5.0.0	Build tool and dev server
Tailwind CSS	3.3.6	Utility-first styling

Why React 18

I chose React 18 for several reasons:

Concurrent rendering enables smooth UI updates even during heavy computations like 3D rendering
Suspense works perfectly with lazy-loaded components, improving initial load time
Automatic batching reduces unnecessary re-renders when multiple state updates occur
The ecosystem has excellent support for real-time data visualization

Why Vite

Vite provides:

Near-instant hot module replacement during development
Optimized production builds with automatic code splitting
Native ES modules support
Simple configuration compared to webpack

Why Tailwind CSS

Rapid prototyping with utility classes
Custom design system (Bitcoin orange palette, void/dark theme)
Purges unused CSS in production for minimal bundle size
Easy responsive design with mobile-first breakpoints

3D Visualization

Technology	Version	Purpose
Three.js	0.160.0	WebGL 3D graphics engine
React Three Fiber	8.15.0	React renderer for Three.js
React Three Drei	9.88.0	Useful helpers and abstractions

Why Three.js with React Three Fiber

I wanted to create an immersive visualization of Bitcoin transactions and the blockchain network. Three.js is the most mature WebGL library, and React Three Fiber lets me write 3D scenes using familiar React patterns:

Declarative component-based 3D scenes
Automatic disposal and memory management
Easy integration with React state and hooks
The Drei library provides pre-built components like OrbitControls, Float, and texture loaders

3D Features I Built:

Animated spinning Bitcoin logo with texture mapping
Particle system representing network transactions
Blockchain node network visualization with connections
Real-time transaction flow visualization

Data Management

Technology	Version	Purpose
TanStack Query	5.90.12	Server state management and caching
Custom Hooks	-	WebSocket connections, data transformation

Why TanStack Query

Managing real-time data from multiple APIs requires robust caching and synchronization. TanStack Query provides:

Automatic background refetching with configurable intervals
Deduplication of identical requests
Optimistic updates and stale-while-revalidate pattern
Built-in loading and error states
Window focus refetching (I disable this for better UX)

Custom Data Hooks

I built several custom hooks in useBlockchain.js:

useBlockchainWebSocket() - WebSocket connection to Blockchain.info for live transactions
useMempoolData() - Polling mempool.space API for network stats
useBitcoinPrice() - Multi-source price fetching (CoinGecko primary, Coinbase fallback)
useMstrPrice() - MSTR stock price via Vercel serverless function (Yahoo Finance → Stooq fallback chain)

Animation & UI

Technology	Version	Purpose
Framer Motion	10.16.0	Animation library
Lucide React	0.294.0	Icon library
Recharts	2.10.0	Charting library

Why Framer Motion

For smooth UI animations, Framer Motion offers:

Simple declarative API with initial, animate, exit props
Layout animations for list reordering (transaction stream)
AnimatePresence for enter/exit animations
Spring physics for natural-feeling motion

Why Recharts

For the Power Law chart and Treasury visualizations, I needed a React-native charting solution:

Composable component-based API
Built-in responsive container
Good support for logarithmic scales (essential for Bitcoin price charts)
Custom styling that matches my dark theme

Infrastructure & Deployment

Technology	Purpose
Vercel	Frontend hosting with edge network + serverless functions
Vercel Serverless Functions	MSTR stock price API proxy (`/api/mstr`)
Cloudflare Workers	API proxy functions for treasury and price data
GitHub	Source control

Why Vercel

Zero-config deployment for Vite/React apps
Global edge network for fast loading worldwide
Automatic HTTPS and CDN caching
Serverless Functions for same-origin API proxying (eliminates CORS issues)
CDN-level response caching for serverless functions (s-maxage, stale-while-revalidate)
Easy environment variable management
Free tier sufficient for this project

Why Cloudflare Workers

I built lightweight proxy workers to solve several problems:

CORS restrictions - BitcoinTreasuries.net and CoinGecko APIs block browser requests
Rate limiting - Aggregate requests to stay under API limits
Fallback handling - Try multiple data sources automatically
Response caching - Cache responses at the edge

Workers I deployed:

treasuries-proxy - Proxies BitcoinTreasuries.net and aggregates data
treasuries-proxy-coingecko - Handles CoinGecko API with caching

Why Vercel Serverless Functions (for MSTR)

Yahoo Finance began returning 429 Too Many Requests for requests without a proper User-Agent header, and Stooq lacks CORS headers entirely. Instead of relying solely on external Cloudflare Workers, I added a Vercel serverless function at /api/mstr that:

Runs server-side - Can set User-Agent headers that browsers can't for cross-origin requests
Is same-origin - No CORS preflight needed, the browser treats it like any other page resource
Has CDN caching - Vercel caches responses for 60s with 120s stale-while-revalidate
Has built-in fallback - Tries Yahoo Finance first, falls back to Stooq

External Data Sources

API	Data Provided	Rate Limits
Mempool.space	Block height, fees, mempool stats, difficulty	Generous public API
Blockchain.info WebSocket	Live unconfirmed transactions, new blocks	Real-time stream
CoinGecko	Bitcoin price, 24h change	10-30 calls/minute
Coinbase	Spot price (fallback)	Public API
Yahoo Finance	MSTR stock price (via `/api/mstr` serverless function)	Rate limited; requires User-Agent
Stooq	MSTR price (fallback via `/api/mstr`)	No CORS; server-side only
BitcoinTreasuries.net	Corporate, ETF, and government holdings (100+ entities)	Via proxy, 6h cache

Development Tools

Tool	Version	Purpose
ESLint	9.39.1	Code linting and quality
PostCSS	8.4.32	CSS processing
Autoprefixer	10.4.16	CSS vendor prefixes
TypeScript (types)	5.5.2	Type definitions for workers

Code Quality

I configured ESLint with:

eslint-plugin-react-hooks for proper dependency arrays
eslint-plugin-jsx-a11y for accessibility compliance
eslint-plugin-react-refresh for hot reload compatibility
eslint-plugin-react for React best practices
globals for environment-specific global definitions

Bundle Size Considerations

To keep the application fast, I implemented several optimizations:

Lazy loading - All page components load on-demand
Code splitting - Vite automatically splits by route
Tree shaking - Unused code eliminated in production
CSS purging - Tailwind removes unused classes

The Three.js bundle is significant (~500KB), but I only load it on pages that need 3D visualization. The core app bundle stays under 150KB gzipped.

Key Dependencies Summary

Production Dependencies:

{
  "@react-three/drei": "^9.88.0",
  "@react-three/fiber": "^8.15.0",
  "@tanstack/react-query": "^5.90.12",
  "framer-motion": "^10.16.0",
  "lucide-react": "^0.294.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.20.0",
  "recharts": "^2.10.0",
  "three": "^0.160.0"
}

Dev Dependencies:

{
  "@types/react": "^18.2.0",
  "@types/react-dom": "^18.2.0",
  "@vitejs/plugin-react": "^4.2.0",
  "autoprefixer": "^10.4.16",
  "eslint": "^9.39.1",
  "eslint-plugin-jsx-a11y": "^6.10.2",
  "eslint-plugin-react": "^7.37.5",
  "eslint-plugin-react-hooks": "^7.0.1",
  "eslint-plugin-react-refresh": "^0.4.24",
  "globals": "^16.5.0",
  "postcss": "^8.4.32",
  "tailwindcss": "^3.3.6",
  "vite": "^5.0.0"
}

BTC Explorer - Architecture

System Architecture Diagram

flowchart TB
    subgraph Client["Browser Client"]
        UI[React UI Components]
        Router[React Router]
        State[TanStack Query Cache]
        Three[Three.js 3D Engine]
    end

    subgraph Frontend["Frontend Application (Vite)"]
        Pages[Page Components]
        Hooks[Custom Hooks]
        Lib[Utility Libraries]
    end

    subgraph External["External APIs"]
        Mempool[Mempool.space API]
        CoinGecko[CoinGecko API]
        Blockchain[Blockchain.info WebSocket]
        Yahoo[Yahoo Finance API]
        Stooq[Stooq API]
        Coinbase[Coinbase API]
    end

    subgraph Serverless["Vercel Serverless Functions"]
        MstrAPI[/api/mstr<br/>MSTR Price Proxy]
    end

    subgraph Edge["Edge Functions"]
        TreasuryProxy[Treasury Proxy<br/>Cloudflare Worker]
        CoinGeckoProxy[CoinGecko Proxy<br/>Cloudflare Worker]
    end

    subgraph Hosting["Hosting & CDN"]
        Vercel[Vercel Edge Network]
    end

    UI --> Router
    Router --> Pages
    Pages --> Hooks
    Pages --> Three
    Hooks --> State

    State --> Mempool
    State --> Blockchain
    State --> MstrAPI
    State --> TreasuryProxy
    State --> CoinGeckoProxy

    MstrAPI --> Yahoo
    MstrAPI --> Stooq
    TreasuryProxy --> Yahoo
    TreasuryProxy --> Stooq
    CoinGeckoProxy --> CoinGecko

    Hooks --> Coinbase

    Vercel --> Client

Data Flow Architecture

flowchart LR
    subgraph RealTime["Real-Time Data"]
        WS[WebSocket Connection]
        TX[Transaction Stream]
        BLK[Block Events]
    end

    subgraph Polling["Polled Data"]
        Price[BTC Price<br/>60s interval]
        Network[Network Stats<br/>45s interval]
        MSTR[MSTR Price<br/>2m interval]
        Treasury[Treasury Data<br/>5m interval]
    end

    subgraph Cache["Caching Layer"]
        LocalStorage[Browser LocalStorage]
        QueryCache[TanStack Query Cache]
    end

    subgraph Display["UI Display"]
        LivePage[Live Transaction View]
        Stats[Network Statistics]
        Charts[Price Charts]
        Holdings[Treasury Holdings]
    end

    WS --> TX
    WS --> BLK
    TX --> LivePage
    BLK --> LivePage

    Price --> QueryCache
    Network --> QueryCache
    MSTR --> QueryCache
    Treasury --> QueryCache

    QueryCache --> LocalStorage
    QueryCache --> Stats
    QueryCache --> Charts
    QueryCache --> Holdings

Architecture Overview

Why I Chose This Architecture

I designed BTC Explorer as a single-page application (SPA) with a focus on real-time data visualization.

Key Architectural Decisions

1. Client-Side Rendering with React

I chose React 18 with client-side rendering for several reasons:

The application is highly interactive with real-time updates
No SEO requirements for the main dashboard functionality
Simplified deployment as a static site on Vercel
Excellent ecosystem for data visualization libraries

2. WebSocket for Live Transactions

For the live transaction stream, I use WebSockets connecting directly to Blockchain.info's public API. I implemented automatic reconnection logic and visibility-based pause/resume to conserve bandwidth when the tab is not active.

3. Server-Side API Proxies

Several APIs I needed (Yahoo Finance, BitcoinTreasuries.net) have CORS restrictions. I use two approaches to solve this:

Vercel Serverless Functions - A /api/mstr endpoint fetches MSTR stock price server-side from Yahoo Finance (with proper User-Agent headers) and Stooq as fallback. Vercel's CDN caches responses for 60 seconds with stale-while-revalidate, reducing upstream API calls. Being same-origin, this eliminates CORS entirely.
Cloudflare Workers - Lightweight proxies for BitcoinTreasuries.net and CoinGecko data, caching responses at the edge. The treasury proxy aggregates data from BitcoinTreasuries.net, covering 100+ entities across companies, ETFs, governments, and private holdings.

4. Aggressive Client-Side Caching

I implemented a multi-layer caching strategy using TanStack Query and LocalStorage. Treasury data uses a 6-hour cache with a force-refresh option (?refresh=1 URL parameter) for debugging. The getCached/setCached utilities in useBlockchain.js provide TTL-based localStorage caching across all data sources.

5. Lazy Loading and Code Splitting

All page components are lazy-loaded using React's lazy() and Suspense.

6. Static Data for Historical Content

I maintain a curated dataset in bitcoinData.js for historical events and wallet recommendations.

Component Architecture

api/
└── mstr.js               # Vercel serverless: MSTR price (Yahoo → Stooq fallback)
src/
├── main.jsx              # App entry, providers setup
├── App.jsx               # Route definitions, lazy imports
├── components/
│   ├── Layout.jsx        # Navigation, footer, live status bar
│   └── ThreeScenes.jsx   # All 3D visualizations
├── pages/
│   ├── HomePage.jsx              # Landing with hero and features
│   ├── LivePage.jsx              # Real-time transaction stream
│   ├── MarketsPage.jsx           # Wrapper → VisualizationsPage
│   ├── VisualizationsPage.jsx    # Price history, adoption, halving charts
│   ├── PowerLawPage.jsx          # Price model and calculator
│   ├── CorporateHoldingsPage.jsx # 100+ entity treasury tracker
│   ├── MicroStrategyPage.jsx     # Strategy deep dive
│   ├── LearnPage.jsx             # Wrapper → TechnologyPage
│   ├── TechnologyPage.jsx        # Bitcoin technology education
│   └── WalletsPage.jsx           # Hardware & software wallet guide
└── lib/
    ├── useBlockchain.js   # All data fetching hooks
    ├── bitcoinData.js     # Static datasets (72+ events, wallets, specs)
    └── queryClient.js     # TanStack Query config

Trade-offs and Limitations

What I Sacrificed:

Server-side rendering would improve initial load SEO
A dedicated backend could provide more reliable caching
Real-time prices are limited by free API rate limits

What I Gained:

Zero infrastructure costs (static hosting + free API tiers + serverless functions)
Simple deployment and maintenance
No database to manage or scale
Application works offline with cached data

Back to All Projects