Crypto Market Dashboard Guide

A production-ready crypto market dashboard template built with Next.js, React, and TradingView charts. Track portfolios, monitor DeFi positions, and visualize market data.

Features

Tech Stack

Project Structure

crypto-market-dashboard/
├── src/
│   ├── app/
│   │   ├── dashboard/      # Main dashboard page
│   │   ├── portfolio/      # Portfolio tracker
│   │   ├── markets/        # Market overview
│   │   └── alerts/         # Price alerts
│   ├── components/
│   │   ├── charts/         # TradingView chart components
│   │   ├── portfolio/      # Portfolio widgets
│   │   ├── tokens/         # Token list, search, details
│   │   └── layout/         # Navigation, sidebar
│   ├── hooks/
│   │   ├── useTokenPrice.ts
│   │   ├── usePortfolio.ts
│   │   └── useWebSocket.ts
│   ├── store/
│   │   ├── portfolio.ts
│   │   ├── watchlist.ts
│   │   └── alerts.ts
│   └── services/
│       ├── market-data.ts
│       └── portfolio.ts

Chart Component

import { createChart, CandlestickSeries } from 'lightweight-charts';

function TokenChart({ symbol }: { symbol: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const { data } = useSWR(`/api/candles/${symbol}`);

  useEffect(() => {
    if (!containerRef.current || !data) return;
    
    const chart = createChart(containerRef.current, {
      width: 800,
      height: 400,
      layout: { background: { color: '#1a1a2e' }, textColor: '#e0e0e0' }
    });
    
    const series = chart.addSeries(CandlestickSeries);
    series.setData(data);
    
    return () => chart.remove();
  }, [data]);

  return <div ref={containerRef} />;
}

Portfolio Widget

function PortfolioSummary() {
  const { portfolio, totalValue, dailyChange } = usePortfolio();

  return (
    <Card>
      <Statistic title="Total Value" value={totalValue} prefix="$" />
      <Statistic
        title="24h Change"
        value={dailyChange}
        suffix="%"
        valueStyle={{ color: dailyChange >= 0 ? '#52c41a' : '#ff4d4f' }}
      />
      <TokenList tokens={portfolio} />
    </Card>
  );
}

Market Overview

function MarketOverview() {
  const { trending, gainers, losers } = useMarketData();

  return (
    <Tabs>
      <TabPane tab="Trending" key="trending">
        <TokenTable data={trending} />
      </TabPane>
      <TabPane tab="Top Gainers" key="gainers">
        <TokenTable data={gainers} sortBy="change24h" />
      </TabPane>
      <TabPane tab="Top Losers" key="losers">
        <TokenTable data={losers} sortBy="change24h" order="asc" />
      </TabPane>
    </Tabs>
  );
}

Sperax Dashboard Widgets

Specialized widgets for Sperax ecosystem:

Links

• GitHub: https://github.com/nirholas/crypto-market-dashboard
• TradingView Charts: https://www.tradingview.com/lightweight-charts/
• SperaxOS: https://app.sperax.io