craft-workspace-vibe-trading

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