Tech Stock Dashboard

A professional-grade financial dashboard for tracking FAANG stocks with dynamic charts, moving averages, and real-time data visualization.

🚀 Features

• Real-time Stock Data: Track FAANG stocks (Meta, Apple, Amazon, Netflix, Google)
• Dynamic Line Charts: Interactive Chart.js visualizations
• Technical Indicators: 10, 20, and 50-day Simple Moving Averages (SMA)
• Smart Caching: Respects Alpha Vantage API limits with intelligent caching
• Responsive Design: Works seamlessly on desktop, tablet, and mobile
• Daily Updates: Automatic data refresh capabilities
• Fallback Data: Sample data when API is unavailable for testing

📋 Prerequisites

1. Alpha Vantage API Key: Get a free API key from Alpha Vantage
   • Free tier: 25 requests per day
   • Perfect for daily dashboard usage

🛠 Installation & Setup

1. Clone or download this project to your local machine

2. Serve the files (required for API calls to work):

   # Using Python 3
   python -m http.server 8000
   
   # Using Node.js (if you have http-server installed)
   npx http-server . -p 8000
   
   # Or use any other local web server

3. Open your browser and navigate to:

   http://localhost:8000
   

4. Enter your Alpha Vantage API key when prompted

   • Your key will be saved locally for future use

📊 Usage

1. Select a Stock: Choose from the dropdown menu to switch between FAANG stocks
2. View Charts: The dashboard displays:
   • Closing prices (red line)
   • 10-day SMA (blue line)
   • 20-day SMA (yellow dashed line)
   • 50-day SMA (teal dashed line)
3. Refresh Data: Click "Refresh Data" to fetch the latest data
4. Clear Cache: Click "Clear Cache" to remove cached data and force fresh API calls

🏗 Architecture

dashboard/
├── index.html              # Main dashboard page
├── css/
│   └── styles.css          # Responsive styling
├── js/
│   ├── app.js             # Main application controller
│   ├── chartController.js # Chart.js management
│   ├── dataService.js     # Alpha Vantage API integration
│   └── indicators.js      # Moving average calculations
└── README.md

Key Components

• DataService: Handles API calls, caching, and rate limiting
• ChartController: Manages Chart.js instances and visualizations
• TechnicalIndicators: Calculates SMAs and prepares chart data
• StockDashboardApp: Main application coordinator

📈 Data Sources

• API Provider: Alpha Vantage
• Data Type: Daily adjusted close prices
• Time Range: Up to 100 trading days (compact view)
• Update Frequency: Daily manual refresh (respects API limits)

🎨 Features Explained

Moving Averages

• 10-day SMA: Short-term trend analysis
• 20-day SMA: Medium-term momentum
• 50-day SMA: Long-term trend identification

Caching Strategy

• 24-hour cache for time series data
• 5-minute cache for quote data
• LocalStorage persistence for session continuity
• Smart rate limiting to stay within API limits

Responsive Design

• Desktop: Full feature experience
• Tablet: Optimized touch interactions
• Mobile: Streamlined interface

🛡️ Error Handling

• API Errors: User-friendly error messages
• Rate Limits: Automatic fallback to cached data
• Network Issues: Graceful degradation with sample data
• Missing Data: Clear status indicators

🔧 Troubleshooting

"No time series data found" Error

If you see this error, try these solutions:

1. Check API Key:

   • Ensure your Alpha Vantage API key is valid
   • Get a free key: https://www.alphavantage.co/support/#api-key

2. Test API First:

   # Start server
   python3 -m http.server 8000
   
   # Open test page
   http://localhost:8000/test-api.html

3. Check Rate Limits:

   • Free tier: 25 requests per day
   • Wait 24 hours or upgrade plan

4. Try Different Symbols:

   • Start with AAPL (Apple) - most reliable
   • Ensure correct symbol (e.g., META not FB)

5. Clear Cache:

   • Click "Clear Cache" button in dashboard

6. Sample Data Mode:

   • If API fails, dashboard automatically shows sample data
   • Test chart functionality without API

Common Issues

• CORS Errors: Use python3 -m http.server instead of opening files directly
• No Data: Check browser console (F12) for detailed error messages
• Slow Loading: API may be temporarily slow - try again later

🔧 Customization

Adding New Stocks

Edit the stockInfo object in js/app.js:

this.stockInfo = {
    // ... existing stocks
    'TSLA': { name: 'Tesla Inc.', symbol: 'TSLA' }
};

Changing SMA Periods

Modify the smaPeriods array:

this.smaPeriods = [10, 20, 50, 100]; // Add 100-day SMA

Chart Styling

Update colors in js/chartController.js:

this.chartColors = {
    closing: '#FF6384',
    sma10: '#36A2EB',
    // ... customize colors
};

📱 Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

🚨 Important Notes

1. API Limitations: Free Alpha Vantage tier is limited to 25 requests/day
2. Market Hours: Data updates once daily after market close
3. No Real-time Trading: This dashboard is for informational purposes only
4. Data Delays: Free tier data may have a 15-minute delay

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

This project is provided as-is for educational and informational purposes.

⚠️ Disclaimer

This dashboard is for educational purposes only. Stock market data and technical indicators should not be used as the sole basis for investment decisions. Always consult with qualified financial professionals before making investment decisions.