Danilo Jamaal

Posted on Jun 5 • Edited on Aug 11

Build a Lightning-Fast Crypto Analytics Dashboard with Vite and Cloudflare Workers

#vite #tutorial #cryptocurrency #api

Build a Lightning-Fast Crypto Analytics Dashboard with Vite and Cloudflare Workers in 15 Minutes

Learn how to create a production-ready, globally distributed crypto market analysis dashboard using modern web technologies and real-time financial data.

🚀 Live Demo | 📁 GitHub Repository

What You'll Build

In this tutorial, you'll create a professional crypto analytics dashboard that:

✅ Serves from 300+ global edge locations with sub-50ms response times
✅ Displays real-time cryptocurrency market data powered by LunarCrush analytics
✅ Shows Galaxy Score and Alt Rank - LunarCrush's proprietary market health metrics
✅ Handles errors gracefully with input validation and mock data fallbacks
✅ Deploys automatically via GitHub Actions on every code push
✅ Works on any device with responsive design

Time Investment: 15 minutes

Skill Level: Intermediate (basic React and API knowledge helpful)

What You'll Learn: Modern full-stack patterns, edge deployment, API integration, CI/CD

💡 Why This Matters: Edge computing is revolutionizing web performance. By the end, you'll understand how to build applications that load instantly anywhere in the world while integrating real-time financial APIs.

Understanding LunarCrush Data

Before we start building, let's understand what makes this dashboard unique. LunarCrush provides comprehensive cryptocurrency market analytics including:

Galaxy Score - A proprietary metric (0-100) that evaluates overall market health
Alt Rank - Performance ranking compared to all tracked cryptocurrencies
Market Data - Price, market cap, volume, and volatility metrics
Performance Indicators - 24h, 7d, and 30d percentage changes

This creates a much more comprehensive view than simple price data alone.

The Technology Stack

We're using cutting-edge tools that represent the future of web development:

Frontend: React 18 + Vite 4 (lightning-fast development)
Backend: Cloudflare Workers (serverless edge computing)
API: LunarCrush (cryptocurrency market analytics data)
Deployment: GitHub Actions (automated CI/CD)

This stack delivers incredible performance: global edge deployment, zero cold starts, and automatic scaling.

Prerequisites

Before we start, make sure you have:

Node.js 20+ installed
Basic React knowledge (hooks, components)
A Cloudflare account (free tier works perfectly)
A GitHub account for deployment automation
A LunarCrush API key (We'll walk through signup below)

Sign Up For A LunarCrush Account

To access the LunarCrush API, you'll need to sign up for a paid plan (otherwise you'll use mock data).

Use my discount referral code JAMAALBUILDS to receive 15% off your plan.

Visit LunarCrush Signup
Enter your email address and click "Continue"
Check your email for a verification code and enter it
Complete the onboarding steps:
- Select your favorite categories (or keep the defaults)
- Create your profile (add a photo and nickname if desired)
- Important: Select a subscription plan (you'll need at least an Individual plan to generate an API key)

Available API Plans

Plan	Rate Limits	Best For
Individual	10 requests/min, 2K/day	Personal projects, learning
Builder	100 requests/min, 20K/day	Professional apps, small businesses
Enterprise	Custom limits	Large-scale applications

Key Generation

Once you've subscribed, navigate to https://www.lunarcrush.com/developers/api/authentication and generate an API key.

Step 1: Project Foundation with Vite

Let's start by creating our project using Vite's scaffolding tool:

npm create vite@latest crypto-sentiment-dashboard -- --template react
cd crypto-sentiment-dashboard
npm install

Add Cloudflare Workers support:

npm install -D wrangler@4

Test that everything works:

npm run dev

You should see the default Vite React app running on http://localhost:5173.

Why Vite? Unlike Create React App, Vite provides instant hot module replacement and lightning-fast builds. It's become the gold standard for modern React development.

Step 2: Cloudflare Workers API Setup

Create the API directory and basic Worker:

mkdir api

Create api/index.js:

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Handle CORS for browser requests
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type',
        },
      });
    }

    // Health check endpoint
    if (url.pathname === '/api/health') {
      return new Response(JSON.stringify({ 
        status: 'healthy',
        timestamp: new Date().toISOString()
      }), {
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
        }
      });
    }

    // Serve static assets for everything else
    return env.ASSETS.fetch(request);
  }
};

Create wrangler.toml:

name = "crypto-sentiment-dashboard"
main = "api/index.js"
compatibility_date = "2025-06-05"

[assets]
directory = "./dist"

[vars]
LUNARCRUSH_API_KEY = "your_api_key_here"

⚠️ Important: Add wrangler.toml to your .gitignore to keep API keys secure!

Test the full-stack setup:

npm run build
npx wrangler dev

Visit http://localhost:8787/api/health - you should see JSON with a health status.

What's happening here? Cloudflare Workers run your API code at the edge, meaning your backend logic executes in the same data center as your users for minimal latency.

Step 3: Cryptocurrency Analytics API Integration

Now let's add the core functionality - fetching real cryptocurrency market data.

Update api/index.js to include analytics data fetching:

// Mock data for demonstration
const MOCK_DATA = {
  btc: {
    symbol: 'BTC',
    name: 'Bitcoin',
    price: 104080.81,
    galaxyScore: 46.3,
    altRank: 306,
    marketCap: 2068578645007.58,
    volume24h: 41976305116.99,
    percentChange24h: -1.07,
    percentChange7d: -2.54,
    percentChange30d: 7.27,
    volatility: 0.0045,
    marketCapRank: 1,
    timestamp: new Date().toISOString()
  },
  eth: {
    symbol: 'ETH', 
    name: 'Ethereum',
    price: 3840.23,
    galaxyScore: 68.5,
    altRank: 2,
    marketCap: 450000000000,
    volume24h: 15000000000,
    percentChange24h: 1.87,
    percentChange7d: -1.23,
    percentChange30d: 12.45,
    volatility: 0.0067,
    marketCapRank: 2,
    timestamp: new Date().toISOString()
  }
};

function getMockData(symbol) {
  const lowerSymbol = symbol.toLowerCase();
  if (MOCK_DATA[lowerSymbol]) {
    return { ...MOCK_DATA[lowerSymbol], isMockData: true };
  }

  // Generate realistic mock data for unknown symbols
  return {
    symbol: symbol.toUpperCase(),
    name: `${symbol.toUpperCase()} Token`,
    price: Math.round((Math.random() * 1000 + 0.01) * 100) / 100,
    galaxyScore: Math.round((Math.random() * 80 + 10) * 10) / 10,
    altRank: Math.floor(Math.random() * 500) + 1,
    marketCap: Math.floor(Math.random() * 100000000000),
    volume24h: Math.floor(Math.random() * 5000000000),
    percentChange24h: Math.round((Math.random() * 20 - 10) * 100) / 100,
    percentChange7d: Math.round((Math.random() * 30 - 15) * 100) / 100,
    percentChange30d: Math.round((Math.random() * 50 - 25) * 100) / 100,
    volatility: Math.round(Math.random() * 0.01 * 10000) / 10000,
    marketCapRank: Math.floor(Math.random() * 1000) + 1,
    timestamp: new Date().toISOString(),
    isMockData: true
  };
}

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Handle CORS
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 
          'Access-Control-Allow-Headers': 'Content-Type',
        },
      });
    }

    // Crypto analytics endpoint
    if (url.pathname.startsWith('/api/sentiment/')) {
      const symbol = url.pathname.split('/')[3];

      // Validate symbol format
      if (!symbol || !/^[A-Za-z]{2,10}$/.test(symbol)) {
        return new Response(JSON.stringify({
          error: 'Invalid symbol format',
          message: 'Symbol must be 2-10 letters only (e.g., BTC, ETH)'
        }), {
          status: 400,
          headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
          }
        });
      }

      try {
        // Try real API if key is available
        if (env.LUNARCRUSH_API_KEY) {
          const response = await fetch(`https://lunarcrush.com/api4/public/coins/${symbol.toLowerCase()}/v1`, {
            headers: {
              'Authorization': `Bearer ${env.LUNARCRUSH_API_KEY}`
            }
          });

          if (response.ok) {
            const data = await response.json();

            if (data.data) {
              const coinData = data.data;
              const formatted = {
                symbol: symbol.toUpperCase(),
                name: coinData.name || 'Unknown',
                price: coinData.price || 0,
                galaxyScore: coinData.galaxy_score || 0,
                altRank: coinData.alt_rank || 0,
                marketCap: coinData.market_cap || 0,
                volume24h: coinData.volume_24h || 0,
                percentChange24h: coinData.percent_change_24h || 0,
                percentChange7d: coinData.percent_change_7d || 0,
                percentChange30d: coinData.percent_change_30d || 0,
                volatility: coinData.volatility || 0,
                marketCapRank: coinData.market_cap_rank || 0,
                timestamp: new Date().toISOString(),
                isMockData: false
              };

              return new Response(JSON.stringify(formatted), {
                headers: {
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': '*',
                  'Cache-Control': 'public, max-age=300'
                }
              });
            }
          }
        }

        // Fall back to mock data
        const mockData = getMockData(symbol);
        return new Response(JSON.stringify(mockData), {
          headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Cache-Control': 'public, max-age=60'
          }
        });

      } catch (error) {
        // Always fall back to mock data on errors
        const mockData = getMockData(symbol);
        return new Response(JSON.stringify(mockData), {
          headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Cache-Control': 'public, max-age=60'
          }
        });
      }
    }

    // Health check
    if (url.pathname === '/api/health') {
      return new Response(JSON.stringify({ 
        status: 'healthy',
        timestamp: new Date().toISOString()
      }), {
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*'
        }
      });
    }

    // Serve static assets
    return env.ASSETS.fetch(request);
  }
};

Test the API endpoint:

npm run build && npx wrangler dev

Visit http://localhost:8787/api/sentiment/btc - you should see cryptocurrency analytics data.

Smart Fallback Strategy: Notice how we always provide useful data? If the real API is unavailable, users get realistic mock data instead of errors. This creates a much better developer experience.

Step 4: React Frontend Development

Now let's build an attractive frontend to display our market analytics data.

Update src/App.js:

import { useState, useEffect } from 'react'
import './App.css'

function App() {
  const [cryptoData, setCryptoData] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [symbol, setSymbol] = useState('btc')
  const [inputError, setInputError] = useState('')

  const fetchCryptoData = async (crypto) => {
    setLoading(true)
    setError(null)

    try {
      const response = await fetch(`/api/sentiment/${crypto}`)
      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.message || 'Failed to fetch data')
      }

      setCryptoData(data)
    } catch (err) {
      setError(err.message)
      setCryptoData(null)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchCryptoData(symbol)
  }, [symbol])

  const validateInput = (input) => {
    const cleaned = input.replace(/[^A-Za-z]/g, '').toLowerCase()

    if (cleaned.length === 0) {
      return { isValid: false, error: 'Please enter a crypto symbol' }
    }

    if (cleaned.length < 2) {
      return { isValid: false, error: 'Symbol must be at least 2 letters' }
    }

    if (cleaned.length > 10) {
      return { isValid: false, error: 'Symbol must be 10 letters or less' }
    }

    return { isValid: true, cleaned }
  }

  const handleSearch = (e) => {
    e.preventDefault()
    const input = e.target.crypto.value
    const validation = validateInput(input)

    if (!validation.isValid) {
      setInputError(validation.error)
      return
    }

    setInputError('')
    setSymbol(validation.cleaned)
    e.target.crypto.value = validation.cleaned.toUpperCase()
  }

  const handleInputChange = (e) => {
    const input = e.target.value
    const validation = validateInput(input)

    if (validation.isValid) {
      setInputError('')
      e.target.value = validation.cleaned.toUpperCase()
    } else if (input.length > 0) {
      setInputError(validation.error)
    } else {
      setInputError('')
    }
  }

  return (
    <div className="app">
      <header className="app-header">
        <h1>📊 Crypto Analytics Dashboard</h1>
        <p>Real-time cryptocurrency market analysis powered by LunarCrush</p>
      </header>

      {/* Mock Data Banner */}
      {cryptoData && cryptoData.isMockData && (
        <div className="mock-data-banner">
          <div className="banner-content">
            <span className="banner-icon">⚠️</span>
            <div>
              <strong>Demo Mode:</strong> Using mock data for demonstration. 
              <br />
              <small>Add your LunarCrush API key to see real market data.</small>
            </div>
          </div>
        </div>
      )}

      <form onSubmit={handleSearch} className="search-form">
        <div className="input-container">
          <input 
            name="crypto" 
            type="text" 
            placeholder="Enter crypto symbol (e.g., BTC, ETH)" 
            defaultValue={symbol.toUpperCase()}
            onChange={handleInputChange}
            maxLength={10}
            className={inputError ? 'input-error' : ''}
          />
          {inputError && <div className="input-error-message">{inputError}</div>}
        </div>
        <button type="submit" disabled={!!inputError}>Get Analytics</button>
      </form>

      {loading && <div className="loading">Loading market data...</div>}

      {error && <div className="error">Error: {error}</div>}

      {cryptoData && !loading && (
        <div className="crypto-card">
          <h2>
            {cryptoData.name} ({cryptoData.symbol})
            {cryptoData.isMockData && <span className="mock-badge">DEMO</span>}
          </h2>

          <div className="metrics-grid">
            <div className="metric">
              <label>Galaxy Score</label>
              <span className="value">{cryptoData.galaxyScore}</span>
            </div>

            <div className="metric">
              <label>Alt Rank</label>
              <span className="value">#{cryptoData.altRank}</span>
            </div>

            <div className="metric">
              <label>Price</label>
              <span className="value">${cryptoData.price?.toLocaleString()}</span>
            </div>

            <div className="metric">
              <label>24h Change</label>
              <span className={`value ${cryptoData.percentChange24h >= 0 ? 'positive' : 'negative'}`}>
                {cryptoData.percentChange24h?.toFixed(2)}%
              </span>
            </div>

            <div className="metric">
              <label>Market Cap</label>
              <span className="value">${(cryptoData.marketCap / 1000000000)?.toFixed(1)}B</span>
            </div>

            <div className="metric">
              <label>Volume (24h)</label>
              <span className="value">${(cryptoData.volume24h / 1000000000)?.toFixed(1)}B</span>
            </div>

            <div className="metric">
              <label>7d Change</label>
              <span className={`value ${cryptoData.percentChange7d >= 0 ? 'positive' : 'negative'}`}>
                {cryptoData.percentChange7d?.toFixed(2)}%
              </span>
            </div>

            <div className="metric">
              <label>Volatility</label>
              <span className="value">{(cryptoData.volatility * 100)?.toFixed(2)}%</span>
            </div>
          </div>

          <div className="timestamp">
            Last updated: {new Date(cryptoData.timestamp).toLocaleString()}
          </div>
        </div>
      )}
    </div>
  )
}

export default App

Key Frontend Features:

Real-time search with instant validation
Professional error handling with user-friendly messages
Comprehensive market data including Galaxy Score and Alt Rank
Smart input filtering (letters only, length limits)
Visual feedback for loading states and errors

Step 5: Professional Styling

Update src/App.css with a modern, dark theme inspired by professional financial platforms:

[Include the same CSS from the previous response, updated to handle the new metrics grid with 8 items]

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Add different gradient colors for the additional metrics */
.metric:nth-child(5)::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.metric:nth-child(6)::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.metric:nth-child(7)::before {
  background: linear-gradient(90deg, #8b5cf6, #d946ef);
}

.metric:nth-child(8)::before {
  background: linear-gradient(90deg, #06b6d4, #0891b2);
}

Design Philosophy: The dark theme with purple gradients creates a professional financial aesthetic that builds trust with users while the responsive grid layout accommodates our comprehensive market data display.

Step 6: Deployment & CI/CD Setup

[Include the same deployment section as before with GitHub Actions]

Step 7: Testing & Validation

Let's test all the features we've built:

Input Validation:

Try entering 123 (should show validation error)
Try entering VERYLONGSYMBOL (should show length error)
Try entering BTC (should work perfectly)

API Integration:

Search for BTC, ETH, SOL (should show market data)
Try INVALIDCOIN (should handle gracefully)

Market Data Display:

Verify Galaxy Score displays correctly
Check that Alt Rank shows the competitive ranking
Confirm market cap and volume are formatted properly
Test percentage changes show positive/negative colors

Understanding Your Data

Galaxy Score (0-100): LunarCrush's proprietary metric combining price performance, market activity, and social engagement. Higher scores indicate stronger market position.

Alt Rank: Performance ranking vs all tracked cryptocurrencies. Lower numbers = better performance (e.g., #1 = best performer).

Market Metrics: Traditional financial indicators including market cap, trading volume, and price volatility that provide context for investment decisions.

What You've Accomplished

Congratulations! You've built a production-ready financial application that demonstrates:

✅ Modern Architecture Patterns

Serverless edge computing with Cloudflare Workers
React with modern hooks and functional components
API integration with proper error handling
Responsive design with mobile-first approach

✅ Professional Development Practices

Input validation and sanitization
Graceful error handling and fallbacks
Automated CI/CD with GitHub Actions
Secure environment variable management

✅ Real-World Performance

Global edge deployment (300+ locations)
Sub-50ms response times worldwide
Automatic scaling and zero maintenance
Built-in redundancy and reliability

Next Steps & Customization Ideas

Beginner Extensions:

Add more cryptocurrency symbols
Implement dark/light theme toggle
Create a favorites system with localStorage
Add social sharing buttons for specific coins

Intermediate Enhancements:

Integrate charts for historical price trends
Add real-time WebSocket updates
Implement price alerts and notifications
Create comparison views for multiple cryptocurrencies

Advanced Features:

Build portfolio tracking with authentication
Implement custom market analysis models
Create a mobile app with React Native
Add advanced charting with technical indicators

Key Takeaways

Edge Computing for Financial Data: By deploying to Cloudflare Workers, your financial application delivers market data instantly anywhere in the world. This architecture is crucial for time-sensitive financial information where milliseconds matter.

Comprehensive Market Analysis: Galaxy Score and Alt Rank provide unique insights beyond simple price data, giving users a more complete picture of cryptocurrency market dynamics.

Production-Ready Patterns: Professional financial applications always include fallbacks, validation, and error handling. Your dashboard demonstrates these patterns while maintaining excellent user experience.

Resources & Learning More

Explore the complete source code: GitHub Repository

Try the live application: Crypto Analytics Dashboard

Learn more about the technologies:

Get a free LunarCrush API key: LunarCrush Developer Portal