CoinEx Futures Dashboard — Rebuild in Next.js

Priority: HIGH Assigned: Glitch (build) → Hawk (review) Created: 2026-02-26 Port: 8891 (same as current)

Overview

Rebuild the CoinEx Futures Scanner dashboard from plain HTML into the standard stack.

Stack (MANDATORY)

Next.js 15 (App Router)
Tailwind CSS v4
Framer Motion (animations)
ShadCN UI (component library)
Lucide Icons
TypeScript throughout
SSE or WebSockets for real-time data (no third-party backend — we handle it ourselves)
NO Convex

Current Dashboard Features (must replicate)

The existing dashboard at projects/crypto-signals/dashboard/index.html (433 lines) has:

Header

Title: "⚡ CoinEx Futures Scanner"
Live indicator, last scan timestamp, auto-refresh countdown (30s)

Controls

Sort: Long Score, Short Score, Name, 24h Change, RSI
Filter: All Coins, Long Signals Only, Short Signals Only, Any Signal

Summary Bar

Coin count, Long signals count, Short signals count, Average RSI

Thresholds Display

LONG threshold: 45 pts, SHORT threshold: 50 pts
TP: +5%, SL: -3%
Leverage: 5x / 7x (score≥60)

Coin Cards (grid layout, responsive)

Each card shows:

Coin name + signal badges (LONG ✓ / SHORT ✓)
Price + 24h change %
4 indicator boxes: RSI (14) with gauge, VWAP %, 24h Change, BB Position
Each indicator shows Long/Short point contributions
Score bars for LONG and SHORT with threshold markers
Signal badge with direction + leverage

Data Source

Binance US API: https://api.binance.us/api/v3/klines?symbol=${symbol}&interval=1h&limit=100
29 coins: BTC, ETH, SOL, XRP, DOGE, ADA, AVAX, LINK, DOT, MATIC, NEAR, ATOM, LTC, UNI, AAVE, FIL, ALGO, XLM, VET, ICP, APT, SUI, ARB, OP, SEI, HYPE, TRUMP, PUMP, ASTER
All client-side calculated: RSI(14), VWAP(24h), Bollinger Bands(20), scoring

Scoring System

Long score (max 80): RSI(<25=30, <30=25, <35=15, <40=5) + VWAP(<-3%=20, <-1.5%=15, <0=8) + 24hChange(<-10%=15, <-5%=10, <-2%=5) + BB(<0=15, <0.2=10)
Short score (max 80): RSI(>75=30, >70=25, >65=15, >60=5) + VWAP(>3%=20, >1.5%=15, >0=8) + 24hChange(>10%=15, >5%=10, >2%=5) + BB(>1=15, >0.8=10)

Enhancements for v2

Dark theme (keep the current dark aesthetic — bg #0a0e17 / #111827)
Animated transitions with Framer Motion when data updates
Mobile responsive — card grid should work on phone
SSE endpoint for real-time price updates instead of polling from client
Live positions panel — read from projects/crypto-signals/data/coinex-live/trader_state.json to show current open positions with P&L
Trade history — read from projects/crypto-signals/data/coinex-live/trade_log.json

Project Location

projects/coinex-dashboard/ (new directory, clean Next.js project)

Systemd

Create ~/.config/systemd/user/coinex-dashboard.service on port 8891. Kill the old Python server first (pid of old server.py).

Context7

Use Context7 for Next.js 15, Tailwind v4, ShadCN UI, and Framer Motion docs before writing any code.

Tests

Unit tests for scoring functions
E2E smoke test that the page loads and renders coin cards

3.1 KiB Raw Permalink Blame History