crypto-market-dashboard-guide

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

Feature	Description
Live Prices	Real-time token prices with WebSocket updates
TradingView Charts	Professional candlestick and line charts
Portfolio Tracker	Multi-chain wallet portfolio overview
DeFi Positions	LP, lending, staking position monitoring
Price Alerts	Configurable price notifications
Watchlists	Custom token watchlists
Market Overview	Top gainers, losers, trending tokens
Social Sentiment	X/Twitter sentiment indicators

Tech Stack

Layer	Technology
Framework	Next.js 14+ (App Router)
UI	React 19, Ant Design, TailwindCSS
Charts	TradingView Lightweight Charts
Data	SWR, WebSocket, CoinGecko API
State	Zustand
Auth	Web3Auth + RainbowKit

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} />;
}