A Real-Time Trading Dashboard with Next.js 15 and lightweight-charts

Overview

The trading bot is fine in the terminal — but you want a chart. This is the Next.js 15 frontend that pairs with the trading bot, rendering live quotes, positions, and strategy state with TradingView's lightweight-charts library and a WebSocket connection that survives flaky networks via auto-reconnect.

Stack

• Framework: Next.js 15.5, React 19, TypeScript
• Styling: Tailwind CSS v4 (CSS-based config in src/app/globals.css via @theme, not tailwind.config.ts)
• Charts: lightweight-charts (TradingView)
• Icons: lucide-react
• Build: output: "standalone" for Docker
• Deployment: Docker behind Traefik + Authentik forward auth

Key Features

• Real-time market data dashboard
• TradingView-style candlestick charts
• WebSocket connection with auto-reconnect for live updates
• Dark theme — bg-gray-950 with green for profit, red for loss
• Portfolio and position tracking
• Strategy monitoring panels
• Connection-status indicator in the sidebar

Architecture

• src/lib/api.ts — fetch-based REST client. All functions return typed responses. Base URL from NEXT_PUBLIC_API_URL.
• src/lib/WebSocketProvider.tsx — React context exposing a single shared WebSocket connection with auto-reconnect. Consumed via the useWebSocket() hook.
• All pages are client components ("use client") using useEffect / useState. Most poll on 10–15s intervals as a fallback alongside WebSocket pushes.
• No SSR data: the bot API is a separate server, so all data is fetched client-side. This is intentional — it keeps the platform fully decoupled from the bot.

Key Files

Environment Variables

Both are intentionally NEXT_PUBLIC_* — the bot API runs on the same internal network and the values are not secrets.

Docker Build

docker build \
  --build-arg NEXT_PUBLIC_API_URL=http://bot:8080/api/v1 \
  --build-arg NEXT_PUBLIC_WS_URL=ws://bot:8080/api/v1/ws \
  -t azu-trading-platform .

In production the platform sits behind Authentik forward auth (Traefik middleware). The bot API has no Authentik in front of it because Authentik's CSRF preflight breaks WebSocket upgrades — it relies on network-level controls instead.

Lessons Learned

• This project lives on master, not main. Don't fight your existing branch convention for the sake of consistency unless you're rewriting history.
• Tailwind v4 puts theme tokens in CSS, not in a JS config — @theme blocks in globals.css replace tailwind.config.ts. Worth knowing before you go looking for the file.
• Move WebSocket auth out of the URL: passing tokens in the connection URL leaks them into proxy access logs. Authenticate in the first message instead.