Build a full-stack, production-grade Stock Monitoring Web Application with a modern, premium UI/UX inspired by platforms like TradingView, Zerodha Kite, and Bloomberg Terminal.

The system must implement a complete ETL pipeline:
– Extract real-time stock data from APIs
– Transform and clean the data
– Load into a MySQL database
– Serve via backend APIs to frontend dashboard

————————————————–

🧠 CORE ARCHITECTURE

1. Frontend:
– Framework: Next.js (React) + TypeScript
– Styling: Tailwind CSS + ShadCN UI
– Charts: Recharts / Chart.js / TradingView Lightweight Charts
– State Management: Zustand or Redux Toolkit
– Animations: Framer Motion

2. Backend:
– Language: Python
– Framework: FastAPI (preferred) or Flask
– API Type: REST + optional WebSockets for live updates

3. Database:
– MySQL (normalized schema)
– Use indexing for fast queries

4. ETL Pipeline:
– Extract: Fetch stock data from APIs like Alpha Vantage / Yahoo Finance
– Transform:
– Handle nulls
– Remove duplicates
– Convert timestamps
– Feature engineering (moving averages, RSI, volume trends)
– Load: Store structured data in MySQL

5. Deployment:
– Frontend: Vercel
– Backend: Render / AWS / Railway
– Database: AWS RDS / PlanetScale

————————————————–

📊 FEATURES (MUST INCLUDE)

1. Dashboard:
– Real-time stock price cards
– Top gainers / losers
– Market indices (NIFTY, SENSEX, NASDAQ)
– Heatmap visualization

2. Stock Detail Page:
– Interactive candlestick charts
– Timeframes: 1D, 1W, 1M, 1Y
– Indicators:
– Moving Average
– RSI
– Volume

3. Watchlist:
– Add/remove stocks
– Save user preferences
– Persistent storage

4. Alerts System:
– Notify when price crosses threshold
– Backend cron jobs or event-based triggers

5. Search:
– Instant stock search with autocomplete

6. Authentication:
– JWT-based login/signup
– Optional OAuth (Google)

7. API Layer:
– /stocks
– /stock/{symbol}
– /historical-data
– /watchlist

————————————————–

🎨 UI/UX REQUIREMENTS (VERY IMPORTANT)

– Dark mode default (premium look)
– Glassmorphism + subtle gradients
– Smooth transitions and hover effects
– Minimalist, clean layout
– Responsive design (mobile-first)
– Skeleton loaders for data fetching
– Real-time animations for price changes (green/red flash)

Design inspiration:
– TradingView
– Zerodha Kite
– Apple dashboard aesthetics

————————————————–

🧩 DATABASE DESIGN

Tables:
1. stocks
– id
– symbol
– name
– sector

2. stock_prices
– id
– stock_id
– price
– volume
– timestamp

3. users
– id
– email
– password

4. watchlist
– user_id
– stock_id

————————————————–

⚙️ ETL IMPLEMENTATION DETAILS

– Schedule ETL using cron or Celery
– Fetch API every X seconds/minutes
– Use pandas for transformation:
– dropna()
– drop_duplicates()
– dtype conversions
– Store processed data in MySQL
– Log errors and retries

————————————————–

📁 PROJECT STRUCTURE

Frontend:
– components/
– pages/
– hooks/
– services/api.ts
– store/

Backend:
– routes/
– models/
– schemas/
– services/
– etl/
– utils/

————————————————–

🔥 ADVANCED FEATURES (FOR NEXT LEVEL)

– WebSocket live price streaming
– AI-based stock prediction (optional ML model)
– News sentiment analysis
– Portfolio tracking with P&L
– Export data as CSV
– Role-based access

————————————————–

🧪 TESTING & QUALITY

– Unit tests (pytest / Jest)
– API validation
– Error handling everywhere

————————————————–

📘 DOCUMENTATION

– README with setup steps
– API documentation (Swagger)
– Architecture diagram

————————————————–

🎯 OUTPUT EXPECTATION

Generate:
1. Complete frontend code
2. Complete backend code
3. ETL scripts
4. SQL schema
5. Deployment steps
6. Sample environment variables

Make the project visually stunning, scalable, and production-ready.
Do NOT simplify anything. Write clean, modular, well-commented code.