ETF Analytics Dashboard

A modern, interactive dashboard for analyzing Exchange-Traded Funds (ETFs) performance, market trends, and sentiment analysis. Built with Next.js, TypeScript, and Tailwind CSS, this dashboard provides comprehensive insights into the ETF market with a focus on professional UX, mobile responsiveness, and dark mode support.

Features

Overview

- Total ETF Trading Volume tracking - Median 3-Year and 5-Year Returns analysis (with outlier filtering) - Dividend Yield Distribution visualization (responsive, readable bins) - Trailing P/E Ratio Distribution analysis

News Sentiment Analysis

- Topic-based sentiment analysis with real-time news - Individual ETF sentiment tracking - Real-time sentiment scoring (-1 to +1) - Visual sentiment indicators and badges - Caching and rate limit handling for API usage

Real-Time Data

- Live ETF price tracking (via Twelve Data API) - Daily price changes and percentage movements - 45-day historical price charts - Searchable ETF selection - Local storage caching for performance

Top Performers

- Top 20 ETFs by 3-Year Returns, 5-Year Returns, and Dividend Yields - Interactive, category-filtered performance charts

Category Performance

- Sector-wise performance analysis - Category-based asset distribution - 3-Year and 5-Year category returns - Combined performance metrics - Responsive chart layouts and dropdowns

User Experience & Design

- Mobile Responsive: All layouts, charts, and controls adapt to mobile screens. Tab bar uses only icons on mobile, dropdowns are repositioned for clarity, and chart labels are optimized for readability. - Dark Mode: Seamless dark/light theme switching with persistent user preference. - Professional UI: Built with shadcn/ui and Tailwind CSS for a modern, accessible, and consistent look. - Performance: Local storage caching for API data, optimized rendering, and error handling.

Data Sources

- ETF Data: Yahoo Finance (yfinance, local CSV)
- Real-time Data: Twelve Data API
- News Sentiment: Alpha Vantage API

Dataset Information

The dashboard analyzes data from 4,148 ETFs, including the following key metrics:

- Symbol and Long Name
- Category and Fund Family
- Total Assets and Net Assets
- Market Cap and Volume
- Average Volume
- Price Metrics (NAV, Previous Close, Open)
- Performance Metrics (3-Year and 5-Year Average Returns)
- Valuation Metrics (Trailing PE, Forward PE)
- Dividend Information (Yield, Last Dividend Value)

Tech Stack

- Frontend Framework: Next.js 14
- Language: TypeScript
- Styling: Tailwind CSS
- Charts: Recharts
- UI Components: shadcn/ui
- State Management: React Hooks
- Data Fetching: Native Fetch API
- Data Collection: Python (yfinance, pandas)

Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/etf-dashboard.git

2. Install dependencies:

pnpm install

3. Set up environment variables:

cp .env.example .env.local

Add your API keys to .env.local:

NEXT_PUBLIC_ALPHA_VANTAGE_API_KEY=your_alpha_vantage_api_key_here

NEXT_PUBLIC_TWELVE_DATA_API_KEY=your_twelve_data_api_key_here

4. Run the development server:

pnpm dev

5. Open http://localhost:3000 in your browser.

API Keys Required

- Alpha Vantage API key for news sentiment analysis
- Twelve Data API key for real-time price data
- Yahoo Finance API (no key required for local CSV)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request for improvements, bug fixes, or new features.

License

This project is licensed under the MIT License - see the LICENSE file for details.