Stock Ticker Dashboard

A real-time stock ticker dashboard built with Flask (backend) and React (frontend), powered by yfinance for free stock market data. Dark-themed, responsive, and fully functional.

Features

• Market Overview — Live quotes for popular stocks (AAPL, MSFT, GOOGL, AMZN, TSLA, NVDA, META, JPM)
• Interactive Charts — Area charts with period toggles (1D, 1W, 1M, 3M, 1Y, 5Y) powered by Recharts
• Ticker Detail Pages — Full company profile, key statistics, chart, and description
• Watchlist — Add/remove tickers, persisted to disk (JSON file)
• Search — Look up any stock ticker with instant validation
• Dark Theme — Professional fintech-inspired dark UI
• Responsive — Works on desktop, tablet, and mobile
• In-Memory Caching — Quotes (30s), history (5min), company info (1hr)

Tech Stack

Layer	Technology
Backend	Flask 3, Python 3.10+
Data	yfinance (Yahoo Finance)
Frontend	React 18, React Router, Recharts
Build	Vite 5
Styling	CSS custom properties (dark theme)

Quick Start

Prerequisites

• Python 3.10+
• Node.js 18+

1. Install backend dependencies

cd backend
pip install -r requirements.txt

2. Install frontend dependencies

cd frontend
npm install

3. Development mode (two terminals)

Terminal 1 — Flask API:

cd backend
python app.py

Terminal 2 — Vite dev server:

cd frontend
npm run dev

Open http://localhost:5173 — Vite proxies /api/* calls to Flask on port 5000.

4. Production build (single server)

cd frontend
npm run build        # Builds React into backend/static/
cd ../backend
python app.py        # Serves everything on http://localhost:5000

API Endpoints

Method	Endpoint	Description
GET	/api/quote/<symbol>	Current price, change, change %, volume, market cap
GET	/api/history/<symbol>?period=1mo&interval=1d	Historical OHLCV data
GET	/api/info/<symbol>	Company profile and financial metrics
GET	/api/search/<query>	Validate/search for a ticker symbol
GET	/api/trending	Quotes for curated popular stocks
GET	/api/watchlist	Get saved watchlist
POST	/api/watchlist	Add to watchlist { "symbol": "AAPL" }
DELETE	/api/watchlist/<symbol>	Remove from watchlist

Project Structure

Show-Case/
├── backend/
│   ├── app.py              # Flask application
│   ├── cache.py            # TTL cache utility
│   ├── requirements.txt    # Python dependencies
│   └── static/             # React production build (generated)
├── frontend/
│   ├── index.html          # Vite entry
│   ├── package.json        # Node dependencies
│   ├── vite.config.js      # Vite config with proxy
│   └── src/
│       ├── main.jsx        # React entry + routing
│       ├── App.jsx         # Layout shell
│       ├── theme.css       # Dark theme variables
│       ├── api/stocks.js   # API fetch layer
│       ├── components/     # Reusable UI components
│       └── pages/          # Route pages
├── .gitignore
└── README.md

License

MIT