Skip to content

deepakSingh-dev/tradeology

BranchesTags

Repository files navigation

FinBoard — AI-Powered Market Intelligence Dashboard

A Bloomberg-style financial terminal built with Next.js 15, AI/ML, and real-time market data APIs. Responsive across desktop and tablet.

Next.js TypeScript Python FastAPI TailwindCSS PyTorch

Overview

FinBoard is a full-stack, real-time financial intelligence dashboard styled after professional Bloomberg terminals. It aggregates live stock market data, AI-generated market analysis, machine learning anomaly detection, and financial news sentiment — all in a single dark-themed, responsive interface.

Built to demonstrate end-to-end engineering across frontend, backend, AI/ML, and financial data domains.

Live Features

  • Real-time stock ticker strip — live prices for equities, ETFs, and crypto polling every 15 seconds via Finnhub
  • Interactive candlestick & line charts — OHLCV data from Alpha Vantage with SMA-20 and SMA-50 overlays, powered by TradingView's lightweight-charts
  • Persistent watchlist — add/remove symbols, validated against live API, stored in localStorage
  • Financial news feed — company-specific and market-wide news with AI sentiment classification (positive / negative / neutral)
  • Stock screener — sortable table of top gainers, losers, and most active stocks across 36 equities and ETFs
  • Market AI chatbot — context-aware assistant powered by Qwen2.5-7B-Instruct via HuggingFace Inference API; reads live prices and news before every reply
  • ML signals panel — real-time anomaly detection (IsolationForest + XGBoost ensemble) and price trend prediction (PyTorch LSTM)
  • Bloomberg-style dark terminal UI — amber accent #f5a623, teal green #00d4aa, JetBrains Mono font, dense data layout

Tech Stack

Frontend

Technology Purpose
Next.js 15 (App Router) React framework, file-based routing, API routes, SSR/SSG
TypeScript 5 Full type safety across frontend and API layer
Tailwind CSS 3 Utility-first styling with custom design tokens
lightweight-charts v4 TradingView's high-performance financial charting library
React 18 UI component architecture, hooks, state management
CSS Grid / Flexbox Responsive two-column terminal layout

Backend / API

Technology Purpose
Next.js API Routes Serverless REST API endpoints (Node.js runtime)
Finnhub API Real-time stock quotes, company news, market data
Alpha Vantage API OHLCV time series, technical indicators (SMA)
Upstash Redis Edge-compatible caching layer (15s–30min TTL per route)

AI / Machine Learning

Technology Purpose
HuggingFace Inference API Hosted LLM inference via router.huggingface.co
Qwen2.5-7B-Instruct LLM for market analysis and financial Q&A
PyTorch LSTM Price trend forecasting (BULLISH / BEARISH / NEUTRAL)
XGBoost Anomaly classification (NORMAL / SUSPICIOUS / ANOMALY)
IsolationForest Unsupervised outlier detection on price/volume data
scikit-learn Feature engineering, preprocessing pipeline

ML Server

Technology Purpose
FastAPI High-performance async Python API server
Uvicorn ASGI server for FastAPI
Pydantic v2 Request/response validation
Docker Containerization for Railway deployment

Infrastructure & DevOps

Technology Purpose
Vercel Frontend deployment (Next.js)
Railway Python ML server deployment
Docker ML server containerization
ESLint + TypeScript Code quality and type safety enforcement

Architecture

┌─────────────────────────────────────────────────────────┐
│                    Browser (Client)                     │
│                                                         │
│  TerminalHeader  ←→  Live Clock + Symbol Search         │
│  TickerStrip     ←→  Polls /api/market every 15s        │
│                                                         │
│  ┌──── Left 65% ──────────┬──── Right 35% ────────┐    │
│  │  WatchlistPanel        │  AiBot                │    │
│  │  ChartPanel (lwc)      │  (Qwen2.5-7B)         │    │
│  │  NewsPanel             │  MlSignals            │    │
│  │  ScreenerPanel         │  (XGBoost + LSTM)     │    │
│  └────────────────────────┴───────────────────────┘    │
└─────────────────────────────────────────────────────────┘
          │                              │
          ▼                              ▼
┌──────────────────┐          ┌──────────────────────┐
│  Next.js API     │          │  FastAPI ML Server   │
│  Routes          │          │  (Railway / Docker)  │
│                  │          │                      │
│  /api/market     │          │  POST /predict       │
│  /api/chart      │          │  ├─ IsolationForest  │
│  /api/news       │          │  ├─ XGBoost          │
│  /api/screener   │          │  └─ LSTM (PyTorch)   │
│  /api/ai         │          │                      │
│  /api/ml ────────┼──────────┘  GET /health         │
└──────────────────┘          └──────────────────────┘
          │
          ▼
┌──────────────────────────────────────────────┐
│  External APIs                               │
│  Finnhub  ·  Alpha Vantage  ·  HuggingFace  │
│  Upstash Redis (caching layer)               │
└──────────────────────────────────────────────┘

Data Flow

  • page.tsx owns global state: selectedSymbol, watchlist, quotes, news
  • Clicking any watchlist row or screener row → setSelectedSymbol → chart, AI bot, and ML signals all update reactively
  • API routes proxy external services with server-side caching to stay within free-tier rate limits
  • ML server trains on synthetic data at startup — no external dataset required

Graceful Degradation

  • Alpha Vantage rate-limited → synthetic OHLCV data generated deterministically from symbol seed
  • ML server offline → local z-score + moving-average fallback in /api/ml
  • Finnhub key missing → empty arrays, UI shows placeholder states
  • HuggingFace key missing → descriptive prompt shown to user

Project Structure

finboard/
├── src/
│   ├── app/
│   │   ├── page.tsx                  # Main dashboard, global state
│   │   ├── layout.tsx                # Root layout, fonts (JetBrains Mono, Inter)
│   │   ├── globals.css               # CSS variables, Bloomberg dark theme
│   │   └── api/
│   │       ├── market/route.ts       # Real-time quotes proxy (Finnhub)
│   │       ├── chart/route.ts        # OHLCV + SMA (Alpha Vantage)
│   │       ├── news/route.ts         # News + sentiment scoring
│   │       ├── screener/route.ts     # Stock screener (36 symbols)
│   │       ├── ai/route.ts           # LLM chat (HuggingFace)
│   │       └── ml/route.ts           # ML signals proxy + fallback
│   ├── components/
│   │   ├── TerminalHeader.tsx        # Live clock, market status, symbol search
│   │   ├── TickerStrip.tsx           # Animated infinite-scroll price ticker
│   │   ├── WatchlistPanel.tsx        # Watchlist with sparklines, add/remove
│   │   ├── ChartPanel.tsx            # Candlestick/line chart + SMA overlays
│   │   ├── NewsPanel.tsx             # News feed with sentiment badges
│   │   ├── ScreenerPanel.tsx         # Sortable stock screener table
│   │   ├── AiBot.tsx                 # AI chat sidebar with market context
│   │   └── MlSignals.tsx             # Anomaly gauge + trend signal card
│   └── lib/
│       ├── types.ts                  # Shared TypeScript interfaces
│       ├── finnhub.ts                # Finnhub API helpers + sentiment scoring
│       ├── alphavantage.ts           # Alpha Vantage helpers + synthetic fallback
│       └── ai-context.ts             # Market context builder for LLM system prompt
└── ml_server/
    ├── main.py                       # FastAPI app, CORS, lifespan startup
    ├── anomaly.py                    # IsolationForest + XGBoost ensemble
    ├── forecast.py                   # PyTorch LSTM online training + inference
    ├── requirements.txt
    └── Dockerfile

Getting Started

Prerequisites

  • Node.js 18+
  • Python 3.11+
  • Free API keys (see below)

1. Clone & install

git clone https://github.com/deepakSingh-dev/tradeology.git
cd tradeology
npm install

2. Configure environment

cp .env.local.example .env.local
# Fill in your API keys
FINNHUB_API_KEY=        # finnhub.io — free
ALPHA_VANTAGE_KEY=      # alphavantage.co — free
HUGGINGFACE_API_KEY=    # huggingface.co — free
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=
ML_SERVER_URL=http://localhost:8000

3. Start the ML server

python -m venv .venv && source .venv/bin/activate
pip install -r ml_server/requirements.txt
uvicorn main:app --app-dir ml_server --port 8000

4. Start the frontend

npm run dev   # → http://localhost:3000

Docker (ML server)

docker build -t finboard-ml ./ml_server
docker run -p 8000:8000 finboard-ml

API Reference

Endpoint Method Description Cache
/api/market?symbols=AAPL,SPY GET Live quotes for comma-separated symbols 15s
/api/chart?symbol=AAPL&range=1M GET OHLCV candles + SMA20/SMA50 5–30min
/api/news?symbol=AAPL GET Company or market news with sentiment 5min
/api/screener?type=gainers GET Top gainers / losers / most active 5min
/api/ai POST {message, symbol, sessionId} → LLM response none
/api/ml POST {symbol, prices[], volumes[]} → ML signals none
http://localhost:8000/predict POST Anomaly score + trend signal (ML server) none
http://localhost:8000/health GET ML server health check none

ML Models

Anomaly Detection

  • Algorithm: IsolationForest (unsupervised) + XGBoost (supervised) ensemble
  • Features: price returns, z-score, volume ratio, momentum (5d/10d), volatility, max drawdown
  • Training: synthetic data generated at startup (1000 normal + 50 anomaly samples)
  • Output: anomalyScore (0–1), anomalyLabel (NORMAL / SUSPICIOUS / ANOMALY)

Price Trend Forecasting

  • Algorithm: 1-layer LSTM (PyTorch), online learning per request
  • Input: last 30 normalized daily prices
  • Training: ~80 gradient steps at prediction time (~1–2s)
  • Output: trendSignal (BULLISH / BEARISH / NEUTRAL), trendConfidence (0–1)

Design System

Token Value Usage
--bg #0a0a0a Page background
--surface #111111 Panel backgrounds
--surface2 #1a1a1a Cards, inputs
--border #2a2a2a Panel borders
--amber #f5a623 Primary accent, Bloomberg yellow
--green #00d4aa Price up, bullish, positive
--red #ff4444 Price down, bearish, negative
--blue #4a9eff SMA-20, links
--purple #a78bfa AI elements
--font-mono JetBrains Mono All numbers and prices
--font-inter Inter Labels and UI text

Skills Demonstrated

Frontend / UI Engineering React 18, Next.js 15 App Router, TypeScript, Tailwind CSS, CSS Grid, Flexbox, responsive design, component architecture, custom hooks (useEffect, useCallback, useRef), dynamic imports, SSR-safe patterns, real-time polling, localStorage persistence, SVG sparklines, CSS animations

Backend / API Engineering Next.js API Routes, serverless functions, REST API design, third-party API integration, caching strategy, rate-limit handling, graceful degradation, error boundaries, environment configuration

AI / LLM Engineering HuggingFace Inference API, chat completion API, system prompt engineering, conversation history management, market context injection, multi-turn dialogue, model selection and provider routing

Machine Learning Supervised and unsupervised learning, IsolationForest, XGBoost, PyTorch LSTM, feature engineering, online learning, time-series analysis, anomaly detection, trend classification

Financial Domain Real-time market data, OHLCV candlestick charts, technical indicators (SMA-20/50), stock screener, financial news sentiment analysis, watchlist management, market session detection, equity/ETF/crypto coverage

DevOps / Infrastructure Docker, FastAPI, Uvicorn, Railway deployment, Vercel deployment, environment variable management, multi-service architecture

Deployment

Service Platform Notes
Next.js frontend Vercel Zero-config, auto-deploys from main
Python ML server Railway Set ML_SERVER_URL to the Railway URL in Vercel env

License

MIT

About

Trade Researcher - News, Analytics, Anomaly Detection, LLM Assistance.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages