ETF Tracker Dashboard

A modern dashboard for tracking cryptocurrency ETFs (Exchange-Traded Funds), built with React, TypeScript, and Vite. The dashboard provides interactive visualizations and detailed tables for ETF flows, performance, and market data.

Project Overview

ETF Tracker Dashboard allows users to explore and analyze cryptocurrency ETFs, including Bitcoin and Ethereum funds. The dashboard offers real-time data visualizations, historical performance, and comprehensive tables to help users understand fund inflows, outflows, assets under management (AUM), and more.

Main Features

• ETF Categories:
  • View all ETFs, Bitcoin ETFs, or Ethereum ETFs using category filters.
• Interactive Charts:
  • Visualize net flows by coin or by fund over selectable time periods (30 days, 1 year, all time).
  • Custom legends and net flow summaries for BTC and ETH.
• Overview Cards:
  • See current net flow, historical values, and yearly performance for selected ETF categories.
• Comprehensive Table View:
  • Paginated tables with ETF details: ticker, fund name, price, volume, AUM, market cap, premium, net fee, and type.
  • Switch between overview and flows data.
• Responsive UI:
  • Clean, modern design with responsive layouts for desktop and mobile.
• Loading & Error States:
  • Skeleton loaders and error messages for robust user experience.

Tech Stack

• Frontend: React 19, TypeScript, Vite
• UI: Tailwind CSS, Radix UI, Highcharts
• State & Routing: React Hooks, React Router
• Data Fetching: Axios
• Linting: ESLint, TypeScript ESLint

Getting Started

1. Install dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Build for production:

   npm run build

4. Preview production build:

   npm run preview

Project Structure

• src/etfTrackerOverview/ - Main dashboard components (charts, tables, filters)
• src/components/ui/ - Reusable UI components
• src/data/ - ETF category options and static data
• src/utils/ - Axios instance and utility functions

License

MIT