DataViz

⚠️ Note: This application is still in development and may not work fully in all scenarios.

DataViz is a modern, multi-source real-time dashboard that allows you to monitor stocks, weather, and custom data all in one unified interface. Built with React, Node.js, and TypeScript, it provides a professional-grade data visualization platform with real-time updates and interactive charts.

🎯 Features

Multi-Source Data Support

• 📈 Stock Market Data: Real-time stock prices with technical indicators (RSI, SMA)
• 🌤️ Weather Data: Live weather conditions from major global cities
• 📊 CSV Upload: Import and visualize spreadsheet data
• 📋 JSON Upload: Parse and display structured JSON data
• 🔄 Real-Time Updates: WebSocket connections for live data streaming

Professional UI/UX

• 🌙 Dark Theme: Optimized for professional trading environments
• 📱 Responsive Design: Works seamlessly on desktop and mobile
• 🎨 Interactive Charts: Powered by Recharts with technical indicators
• ⚡ Live Updates: Real-time price movements and data changes
• 🔧 Configurable: Select only the data sources you need

Technical Features

• TypeScript: Full type safety across frontend and backend
• WebSocket: Real-time bidirectional communication
• API Integration: Alpha Vantage (stocks) and OpenWeatherMap (weather)
• File Processing: Smart CSV/JSON parsing with validation
• Caching: Intelligent data caching to respect API rate limits
• Error Handling: Robust error handling with fallback mechanisms

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Alpha Vantage API Key (free at alphavantage.co)
• OpenWeather API Key (free at openweathermap.org)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/dataviz-pro.git
   cd dataviz-pro

2. Install Backend Dependencies

   cd backend
   npm install

3. Configure API Keys

   # Copy environment template
   cp .env.example .env
   
   # Edit .env and add your API keys
   ALPHA_VANTAGE_API_KEY=your_stock_api_key_here
   OPENWEATHER_API_KEY=your_weather_api_key_here

4. Install Frontend Dependencies

   cd ../frontend
   npm install

Running the Application

Start both servers simultaneously:

Terminal 1 - Backend Server:

cd backend
npm run dev

Terminal 2 - Frontend Server:

cd frontend
npm start

Access the application at http://localhost:3000

📊 Data Sources

Stock Market Data

• Symbols: AAPL, GOOGL, MSFT, AMZN, TSLA, NVDA, META
• Metrics: Real-time prices, volume, market cap, price changes
• Technical Indicators: RSI (14-period), SMA 20, SMA 50
• Updates: Every 1 minute during market hours, simulated outside hours
• API: Alpha Vantage (5 calls/minute free tier)

Weather Data

• Locations: New York, London, Tokyo, San Francisco, Sydney
• Metrics: Temperature, humidity, pressure, wind speed, conditions
• Updates: Every 10 minutes with real weather conditions
• API: OpenWeatherMap (1000 calls/day free tier)

Custom Data Upload

• CSV Support: Automatic column mapping for name/value pairs
• JSON Support: Flexible parsing of various data structures
• File Size: Maximum 10MB per file
• Validation: Built-in error checking and data sanitization

🏗️ Architecture

DataViz Pro/
├── backend/                 # Node.js + Express + TypeScript
│   ├── src/
│   │   ├── server.ts       # Main server with WebSocket support
│   │   ├── realStockService.ts    # Alpha Vantage integration
│   │   ├── weatherService.ts      # OpenWeather integration
│   │   ├── fileUploadService.ts   # CSV/JSON processing
│   │   ├── stockGenerator.ts      # Mock data generator
│   │   ├── config.ts       # Configuration management
│   │   └── types.ts        # TypeScript interfaces
│   ├── uploads/            # Temporary file storage
│   └── package.json
├── frontend/               # React + TypeScript
│   ├── src/
│   │   ├── pages/
│   │   │   ├── DataSourceSelection.tsx  # Initial setup page
│   │   │   ├── Dashboard.tsx           # Main dashboard
│   │   │   └── StockDetail.tsx         # Detailed stock view
│   │   ├── components/
│   │   │   ├── StockCard.tsx          # Stock display component
│   │   │   ├── WeatherCard.tsx        # Weather display component
│   │   │   ├── CustomDataCard.tsx     # Custom data display
│   │   │   ├── PriceChart.tsx         # Interactive charts
│   │   │   ├── StockInsights.tsx      # Market analysis
│   │   │   └── FileUpload.tsx         # File upload interface
│   │   ├── hooks/
│   │   │   └── useWebSocket.ts        # WebSocket connection logic
│   │   ├── types/
│   │   │   └── dataTypes.ts           # TypeScript interfaces
│   │   └── index.css       # Dark theme styling
│   └── package.json
└── README.md

🔧 Configuration

Backend Configuration

• Port: 3001 (configurable via PORT env var)
• API Rate Limits: Respect free tier limitations
• Cache Duration: 1 minute for stocks, 10 minutes for weather
• File Upload: 10MB maximum, CSV/JSON only

Frontend Configuration

• WebSocket URL: ws://localhost:3001
• Reconnection: Automatic with exponential backoff
• Theme: Dark mode optimized for data visualization
• Charts: Recharts with custom styling

📱 Usage Guide

Getting Started

1. Visit http://localhost:3000
2. Select your desired data sources (stocks, weather, CSV, JSON)
3. Click "Launch Dashboard" to start monitoring
4. Use the ⚙️ Reconfigure button to change data sources

Stock Data

• Click any stock card to view detailed analysis
• Interactive charts with technical indicators
• Real-time price updates during market hours
• Market insights and trading signals

Weather Data

• Live weather from 5 major cities
• Temperature changes and weather conditions
• Detailed metrics including humidity, pressure, wind

Custom Data Upload

• Drag and drop CSV/JSON files
• Automatic data parsing and validation
• Instant visualization of uploaded data
• Support for timestamps, categories, and units

🔌 API Endpoints

REST API

• GET /api/stocks - Get all stock data
• GET /api/stocks/:symbol - Get specific stock
• GET /api/stocks/:symbol/history - Get historical data
• GET /api/weather - Get all weather data
• GET /api/weather/:location - Get specific location weather
• POST /api/upload/csv - Upload CSV file
• POST /api/upload/json - Upload JSON file
• GET /api/datasources - Get data source status
• GET /health - Health check

WebSocket

• Connection: ws://localhost:3001
• Events: Real-time stock and weather updates
• Frequency: 1 minute (stocks), 10 minutes (weather)
• Reconnection: Automatic with exponential backoff

🛠️ Development

Backend Development

cd backend
npm run dev          # Start with hot reload
npm run build        # Build TypeScript
npm run type-check   # Type checking only

Frontend Development

cd frontend
npm start            # Start development server
npm run build        # Build for production
npm test             # Run tests

Adding New Data Sources

1. Create service in backend/src/ (e.g., newDataService.ts)
2. Add API endpoints in server.ts
3. Create frontend component in frontend/src/components/
4. Update data source selection in DataSourceSelection.tsx
5. Add to dashboard in Dashboard.tsx

🎨 Customization

Styling

• Dark theme variables in frontend/src/index.css
• Component-specific styles with CSS classes
• Responsive breakpoints for mobile optimization

Data Sources

• Add new stock symbols in backend/src/config.ts
• Add weather locations in config.weatherLocations
• Customize API endpoints and cache durations

Charts

• Modify chart configurations in PriceChart.tsx
• Add new technical indicators
• Customize color schemes and themes

🚨 Troubleshooting

Common Issues

Backend won't start:

• Ensure Node.js v16+ is installed
• Check if port 3001 is available
• Verify API keys in .env file

API calls failing:

• Check API key validity
• Verify internet connection
• Review rate limit status

File uploads not working:

• Check file format (CSV/JSON only)
• Ensure file size under 10MB
• Verify backend uploads directory exists

WebSocket disconnections:

• Check network stability
• Frontend automatically reconnects
• Refresh page if connection fails

Port Conflicts

If port 3001 is in use:

// In backend/src/config.ts
export const config = {
  port: process.env.PORT || 3002, // Change port
  // ...
}

API Rate Limits

• Alpha Vantage: 5 calls/minute (free tier)
• OpenWeatherMap: 1000 calls/day (free tier)
• App automatically caches data to respect limits

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🔮 Future Enhancements

• Additional data sources (crypto, forex, news)
• User authentication and saved configurations
• Data export functionality
• Mobile app companion
• Advanced chart types and indicators
• Real-time collaboration features
• Custom alerts and notifications
• Historical data analysis tools

---

Built with ❤️ using React, Node.js, and TypeScript