Vibe Trading
A modern, event-driven trading platform built with a multi-language monorepo architecture combining TypeScript (React + Express) and Python (FastAPI microservices) with Kafka message streaming.
Architecture
┌─────────────┐
│ Browser │
└──────┬──────┘
│
↓
┌─────────────┐ ┌───────────────┐
│ Web (TS) │────────→│ API (TS) │
│ Next.js 15 │ │ Express │
│ React 19 │ └───────┬───────┘
└─────────────┘ │
↓
┌───────────────┐
│ Kafka │
│ Event Stream │
└───────┬───────┘
│
┌──────────────────────┼────────────────────────┐
↓ ↓ ↓
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ Trading Engine │ │ Market Data │ │ Analytics │
│ (Python) │ │ (Python) │ │ (Python) │
└────────────────┘ └────────────────┘ └────────────────┘
│
↓
┌───────────────┐
│ ML Models │
│ (Python) │
└───────────────┘
Project Structure
vibe-trading/
├── apps/
│ ├── web/ # React frontend (Next.js 15, static export)
│ ├── vibe-editor/ # Factor Lab notebook server (marimo 0.20.1)
│ ├── wiki/ # Documentation site (Next.js/MDX)
│ ├── api/ # Express API gateway (TypeScript)
│ ├── trading-engine/ # Trading logic service (Python/FastAPI)
│ ├── market-data/ # Market data processing (Python/FastAPI)
│ ├── analytics/ # Analytics service (Python/FastAPI)
│ └── ml-models/ # ML prediction service (Python/FastAPI)
│
├── libs/
│ ├── shared-types/ # Shared TypeScript types
│ └── shared-python/ # Shared Python utilities
│
├── conductor/ # Workflow management & product docs
├── guidelines/ # Coding guidelines (Kafka, Python, TS, ops)
├── docs/ # Project plans & design assets
│
├── docker/ # Dockerfiles and nginx config
├── docker-compose.yml # Development compose
├── docker-compose.prod.yml # Production compose
└── .env.example # Environment variables template
Frontend Features
Pages & Routes
| Route | Feature | Description |
|---|
/login | Auth | Login page |
/market | Market | Sector treemap, k-line charts, market breadth, AI chat |
/factor | Factor Analysis | Band chart, polar calendar, leaderboard, quantile charts |
/factor/home | Factor Home | Alternative factor view |
/factor/library | Factor Library | Factor discovery grid with filters |
/analysis | Stock Analysis | TradingView integration, watchlist, stock details |
ngx-charts Library
Custom D3-based chart library at apps/web/src/lib/ngx-charts/ with 13 chart families:
| Chart Type | Description |
|---|
| line-chart | Line charts with circle markers |
| area-chart | Area charts (standard, stacked, normalized) |
| bar-chart | Bar charts (vertical, horizontal, stacked) |
| band-chart | Box plot bands with symmetric power scale |
| pie-chart | Pie and donut charts |
| gauge | Radial and linear gauges |
| heat-map | Grid heatmaps |
| tree-map | Hierarchical rectangles |
| bubble-chart | Scatter plots with sized bubbles |
| polar-chart | Polar/radar charts |
| number-card | Numeric KPI cards |
| sankey | Flow diagrams |
| line-race | Animated racing line chart with leaderboard |
Built with D3.js for calculations, Framer Motion for animations, and ResizeObserver for responsive sizing.
Services