A real-time, team-based trading performance dashboard built with Next.js, Tailwind CSS, Zustand and Material UI.
Track P&L trends, market data, trade tickers and leaderboards all in a sleek, responsive interface.
- P&L Plot – Real-time line chart displaying PnL over time for each team
- Leaderboard – Sorted rankings based on profit & loss
- Trade Ticker – Stream of matched trades showing timestamps, aggressor, prices and users involved
- Instrument Overview – Live bid/ask stats across exchanges (Binance, OKX, etc.)
- Customizable Polling Rate – Adjust update frequency from dropdown
- Dark/Light Mode – Theme toggle built-in
| Overview (Dark Mode) | Overview (Light Mode) |
|---|---|
 |
 |
| P&L Graph Detailp | Trade Panel Close-u |
|---|---|
 |
|
- Framework: Next.js 14
- UI: Material UI (MUI), Tailwind 3
- State Management: Zustand
- Charting: Recharts, D3 Scale
- Utilities: Axios, Moment.js, React Resizable Panels
- Node.js
v18+ - npm / yarn / pnpm
# clone the repo
git clone https://github.com/bryanlzl/plutus-dashboard.git
cd plutus-dashboard# install dependencies
npm install# lastly, run dev
npm run devGo to http://localhost:3000 to explore the dashboard.
plutus-dashboard/
├── components/ # UI components (charts, tables, panels)
├── pages/ # Next.js routes
├── public/ # Static assets (screenshots, logos)
├── styles/ # Tailwind config & global CSS
├── store/ # Zustand state stores
└── utils/ # Axios configs, constants, helpers