A modern web application built with Next.js that allows users to explore and analyze YieldMax ETF distributions and their relationship with underlying stock prices.
- 🔍 Interactive ETF Search: Easily search and select from available YieldMax ETFs using a modern searchable dropdown
- 📊 Dual-Axis Chart Visualization:
- View distribution history alongside underlying stock prices
- Interactive tooltips showing precise values
- Color-coded data series for clear differentiation
- 🎨 Modern Dark Theme: Sleek dark mode interface with carefully chosen color palette
- 📱 Responsive Design: Fully responsive layout that works on desktop and mobile devices
- 📈 Detailed ETF Information:
- Display of ETF symbol and full name
- Distribution count tracking
- Clear presentation of historical data
- Framework: Next.js 14 (React)
- Styling: Tailwind CSS
- Charts: Chart.js with React-Chartjs-2
- Data: JSON-based data store
- Node.js 18.0 or later
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/yourusername/dividendcrawler.git
cd dividendcrawler- Install dependencies:
cd frontend
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the application.
frontend/
├── src/
│ ├── app/
│ │ └── page.tsx # Main application page
│ │ └── components/
│ │ └── data/
│ └── public/
│ └── ... # Static assets
The application uses two main JSON files for data:
-
yieldmax_etf_successful.json:- List of all available ETFs
- Basic metadata (symbol, name, distribution count)
-
yieldmax_etf_distribution.json:- Detailed distribution history for each ETF
- Underlying stock price data
- Dates and amounts for each distribution
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- YieldMax ETFs for providing the underlying investment products
- The Next.js team for the excellent framework
- The Chart.js team for the powerful charting library