Fortified Trader Frontend

Modern, real-time trading dashboard built with Next.js 15 and TypeScript for automated trading strategies.

Overview

This is the frontend application for the Fortified Trading Platform, providing a responsive web interface for monitoring and controlling automated trading strategies. The application uses WebSocket connections for real-time updates of trading status, positions, and trade history.

Features

• Real-time Updates: WebSocket-based live data for trading status, positions, and trades
• Multi-Strategy Support: Monitor and control EMA, Supertrend, and ZeroDay strategies
• Live Trading Dashboard: View active positions, P&L, and trading metrics
• Trade History: Paginated view of paper and real trades
• Live Charts: Real-time candlestick charts with technical indicators
• Broker Integration: Manage Schwab and TastyTrade broker connections
• Paper & Live Trading: Switch between simulated and real trading modes
• Responsive Design: Mobile-friendly interface with dark mode support

Tech Stack

• Framework: Next.js 15 (App Router with Turbopack)
• Language: TypeScript
• Styling: Tailwind CSS + shadcn/ui components
• State Management: React Context API
• Real-time: WebSocket connections via native WebSocket API
• Animations: Framer Motion
• Charts: Lightweight Charts (TradingView)

Getting Started

Prerequisites

• Node.js 18+
• Backend API running on port 8000
• Redis for WebSocket pub/sub

Installation

# Install dependencies
npm install

# Run development server
npm run dev

The application will be available at http://localhost:3000

Production Build

# Build for production
npm run build

# Start production server
npm start

Architecture

WebSocket Integration

The frontend maintains persistent WebSocket connections for each trading strategy:

• Connection: wss://[host]/api/ws/trading/{strategy}?token={jwt}
• Auto-reconnection: Exponential backoff (max 30s)
• Heartbeat: Ping/pong every 15 seconds
• Message Types:
  • initial_snapshot: Full state on connect
  • status: Trading status updates
  • trade: New trade notifications

Key Components

src/
├── app/                    # Next.js app router pages
│   ├── dashboard/         # Main dashboard routes
│   │   ├── strategy-control/  # Strategy management
│   │   ├── charts/            # Live charts view
│   │   └── user-setting/      # User settings
│   └── login/             # Authentication
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── live-positions.tsx     # Real-time positions table
│   ├── metrics-dashboard.tsx  # Strategy metrics
│   ├── play-buttons.tsx       # Start/stop controls
│   └── trades-table.tsx       # Trade history
├── context/              # React Context providers
│   ├── AuthContext.tsx   # Authentication state
│   └── TradingContext.tsx     # Trading data & WebSocket
├── hooks/                # Custom React hooks
│   ├── use-websocket-trading.ts  # WebSocket connection
│   └── use-trades.ts             # Trade history
└── lib/                  # Utilities and types

Context Providers

TradingContext: Manages global trading state

• WebSocket connections for all strategies
• Strategy status (running, symbols, uptime)
• Live/paper trading mode
• Broker connection status

AuthContext: Handles user authentication

• JWT token management
• User session persistence
• Protected route guards

Environment Variables

Create a .env.local file:

# Not currently required - API URL is inferred from request origin
# NEXT_PUBLIC_API_URL=http://localhost:8000

The frontend automatically proxies API requests to the backend at localhost:8000 in development.

API Integration

REST Endpoints

• GET /api/start-trading - Start strategy
• GET /api/stop-trading - Stop strategy
• GET /api/positions - Get active positions
• GET /api/trades - Get trade history (paginated)
• POST /api/refresh-token-link - Update Schwab token

WebSocket Endpoints

• WS /api/ws/trading/{strategy} - Real-time strategy updates

Note: The old REST polling endpoint (/api/trading-status) is deprecated. All status updates now use WebSockets.

Development

Project Structure

• App Router: Next.js 15 app directory with server/client components
• Turbopack: Fast incremental builds (enabled by default)
• Client Components: Marked with "use client" directive
• API Proxy: Next.js rewrites API calls to backend

Code Style

• TypeScript strict mode
• ESLint for code quality
• Functional components with hooks
• Context for global state
• Custom hooks for reusable logic

Deployment

PM2 (Production)

# Start with PM2
pm2 start ecosystem.config.js --only frontend

# View logs
pm2 logs frontend

# Restart
pm2 restart frontend

Environment Setup

• Backend must be accessible at localhost:8000
• Nginx proxies /api/* and /api/ws/* to backend
• Frontend serves on port 3000 (proxied via Nginx)

WebSocket Migration (2024)

The application was migrated from REST polling to WebSocket-based real-time updates:

• Before: Polled /api/trading-status every 5 seconds
• After: Persistent WebSocket connections with push updates
• Benefits: Reduced server load, instant updates, better scalability

Components using WebSocket:

• use-websocket-trading.ts - Main WebSocket hook
• TradingContext.tsx - Global WebSocket integration
• live-positions.tsx - Real-time position updates
• metrics-dashboard.tsx - Live metrics display

Troubleshooting

WebSocket Connection Issues

Check browser console for:

[WebSocket] ✅ Connected for strategy: ema
[WebSocket] ✅ Received initial snapshot

If connections fail:

1. Verify backend is running
2. Check JWT token is valid
3. Ensure Redis is running (backend dependency)

Stale Data

Clear browser cache and reload:

• Chrome/Edge: Ctrl + Shift + R (Windows) / Cmd + Shift + R (Mac)
• Firefox: Ctrl + F5 / Cmd + Shift + R

Contributing

This is a private trading platform. Follow existing code patterns:

• Use TypeScript types for all props/data
• Create reusable hooks for complex logic
• Keep components focused and testable
• Use shadcn/ui for consistent styling

License

Proprietary - All rights reserved