PNL Dashboard — Risk Monitor

A real-time P&L monitoring and risk dashboard for CFD traders built with modern web technologies.

Screenshot

Replace with actual screenshot after deployment

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Charts: Recharts
• Animations: Framer Motion
• Icons: Lucide React
• Font: Geist (Vercel)

Features

✨ Live Features:

• Live PNL Ticker — Real-time P&L with delta and percentage changes, animated with Framer Motion
• Trading Volume Chart — Rolling 60-second volume history with Recharts area chart and live data updates
• Asset Exposure Heatmap — Risk-scored CFD assets grouped by category (Forex, Indices, Crypto, Commodities)
• Threat Alert Feed — Real-time alert stream with severity levels (low/medium/high/critical) and pulsing critical alerts
• Top Traders Table — Sortable trader leaderboard with PNL, volume, risk scores, and trade counts
• Time Range Filter — Switch between 1m, 5m, 1h, 1d views
• Live Clock — Real-time display with pulsing "Live" badge

🎨 Design:

• Dark theme with glassmorphism effects
• Smooth animations and transitions using Framer Motion
• Fully responsive (mobile, tablet, desktop)
• Error boundaries on each panel for resilience
• Loading skeletons for smooth initial load
• Color-coded risk indicators (green/yellow/orange/red)

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/pnl-dashboard.git
   cd pnl-dashboard

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open in browser:

   http://localhost:3000
   

Architecture Decisions

Why Next.js 14 App Router?

Next.js 14 with App Router provides:

• Server Components by default — Cleaner data fetching patterns for future API integration
• Built-in optimization — Automatic code splitting, image optimization, and font optimization
• use client directive — Seamless client-side interactivity without context hell
• Zero-config deployment — Native Vercel integration with environment variables and edge functions

Why Recharts?

Recharts was chosen for charting because:

• Lightweight and composable — Build complex charts from simple components
• TailwindCSS-friendly — Easy to style with custom colors and dark backgrounds
• React-native — Built specifically for React with hooks support
• Responsive by default — ResponsiveContainer automatically adapts to parent width
• Animation support — Built-in SVG animations for data changes

Simulated Real-Time Data with setInterval

The dashboard uses setInterval to simulate real-time updates via:

• useLivePNL — Updates PNL every 800ms with ±0.5% fluctuations
• useVolumeHistory — Appends volume tick every 1 second, keeps last 60
• useAlertFeed — Fires random alerts every 3-8 seconds
• useExposure — Recalculates risk scores every 5 seconds

This was chosen for the demo because:

• ✅ No backend required for prototyping
• ✅ Demonstrates real-time UI patterns clearly
• ✅ Easy to replace with actual WebSocket in production

Production WebSocket Integration

To replace mock data with real WebSocket streams in production:

// hooks/useRealPNL.ts
export function useRealPNL() {
  const [pnl, setPnl] = useState<LivePNL>({...});
  
  useEffect(() => {
    const ws = new WebSocket(process.env.NEXT_PUBLIC_WS_URL);
    
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setPnl({
        totalPNL: data.pnl,
        delta: data.delta,
        percentChange: data.percentChange,
      });
    };
    
    return () => ws.close();
  }, []);
  
  return pnl;
}

Then update components to use useRealPNL instead of useLivePNL.

What I Would Build Next

Phase 2: Real-time Infrastructure

• WebSocket Integration — Replace setInterval with live broker data via WebSocket (e.g., Interactive Brokers, Alpaca, Kraken)
• Server-Sent Events (SSE) — Alternative to WebSocket for one-way data streams (simpler firewall-friendly option)
• Data Persistence — Store trade history and alerts in PostgreSQL for analytics

Phase 3: Authentication & Multi-User

• NextAuth.js — OAuth2 authentication (Google, GitHub) or broker credentials
• User Profiles — Save dashboard preferences, watchlists, alert thresholds per trader
• Role-based Access — Admin dashboard for supervising multiple traders

Phase 4: Broker Integration

• Alpaca API — Real stock/crypto trading data
• Interactive Brokers — Institutional CFD data integration
• Real trade execution — Place, modify, and cancel trades from dashboard

Phase 5: Analytics & Intelligence

• Historical Charts — Multi-day/month candle charts with technical analysis overlays
• Performance Analytics — Win rate, Sharpe ratio, max drawdown, risk metrics
• Predictive Alerts — ML-based anomaly detection for unusual market conditions
• Trade Journal — Annotate trades with screenshots, reasoning, lessons learned

Project Structure

pnl-dashboard/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main dashboard page
│   └── globals.css         # Global styles & CSS variables
├── components/
│   ├── Header.tsx          # Dashboard header with live clock
│   ├── TimeRangeFilter.tsx # Time range selector
│   ├── PNLTicker.tsx       # Live P&L display
│   ├── VolumeChart.tsx     # Trading volume chart
│   ├── ExposureHeatmap.tsx # Risk heatmap
│   ├── AlertFeed.tsx       # Alert stream
│   ├── TradersTable.tsx    # Trader leaderboard
│   ├── Skeleton.tsx        # Loading skeletons
│   └── ErrorBoundary.tsx   # Error handling
├── hooks/
│   ├── useLivePNL.ts       # Real-time PNL updates
│   ├── useVolumeHistory.ts # Volume chart data
│   ├── useAlertFeed.ts     # Alert generation
│   └── useExposure.ts      # Asset exposure simulation
├── data/
│   ├── mockTraders.ts      # 10 demo traders
│   └── mockAssets.ts       # 12 CFD assets
├── types/
│   └── index.ts            # TypeScript interfaces
└── README.md               # This file

Deployment

Deploy to Vercel (Recommended)

The easiest way to deploy is using the Vercel Platform from the creators of Next.js.

Steps:

1. Push code to GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/your-username/pnl-dashboard.git
   git branch -M main
   git push -u origin main

2. Import to Vercel:

   • Go to vercel.com
   • Click "Add New" → "Project"
   • Select "Import Git Repository"
   • Paste your GitHub repo URL
   • Click "Import"

3. Configure (Optional):

   • No environment variables needed — The dashboard works with mock data out of the box
   • Framework: Next.js is auto-detected
   • Root directory: ./

4. Deploy:

   • Click "Deploy"
   • Wait for build to complete (~2 min)
   • Your dashboard is live at https://your-project.vercel.app

That's it! Vercel automatically:

• ✅ Installs dependencies
• ✅ Builds Next.js app
• ✅ Deploys globally with CDN
• ✅ Sets up HTTPS
• ✅ Auto-redeploys on git push

Performance Optimizations

• useMemo — Memoized chart data transformations to prevent unnecessary recalculations
• Framer Motion — Optimized animations using AnimatePresence and layout IDs
• Error Boundaries — Prevent cascade failures from crashing entire dashboard
• Skeleton Loading — Smooth perceived performance with placeholder content
• TailwindCSS — Purged unused styles in production build

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers (iOS Safari 14+, Chrome Mobile)

License

MIT License — See LICENSE file for details

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

Support

For issues or questions, please open a GitHub issue or email: support@example.com

---

Built with ❤️ by Your Name