Entropy Monitor — Next.js / Vercel

Real-time order flow entropy dashboard for XAU/USD, NAS100, US30. Deployable to Vercel in under 5 minutes.

---

Local development

# 1. Install dependencies
npm install

# 2. Run dev server
npm run dev

# Open http://localhost:3000
# Runs in demo mode by default — no API keys needed

---

Deploy to Vercel

Option A — Vercel CLI (fastest)

npm install -g vercel
vercel login
vercel          # follow prompts — auto-detects Next.js

Your app is live at https://your-project.vercel.app in ~60 seconds.

Option B — GitHub + Vercel dashboard

1. Push this folder to a GitHub repo:

   git init
   git add .
   git commit -m "initial commit"
   gh repo create entropy-monitor --public --push

2. Go to vercel.com/new

3. Import the GitHub repo — Vercel auto-detects Next.js, no config needed

4. Click Deploy

Option C — Vercel CLI one-liner

npx vercel --prod

---

Connecting to the Python backend (live data)

The frontend is a static Next.js app — it connects to your Python backend over WebSocket. The backend runs on your own machine.

# Start the Python backend (separate repo)
cd ../entropy_monitor_backend
pip install -r requirements.txt
# Edit config.json: set demo_mode: false, add your API keys
python main.py
# Backend runs at ws://localhost:8765/ws

In the app's Settings panel, set the WebSocket URL to your machine's address. Note: when accessing the Vercel-hosted app from the same machine as the backend, ws://localhost:8765/ws works. From another device, use your machine's local IP.

---

Project structure

entropy-monitor/
├── pages/
│   ├── _app.js           # Next.js app wrapper
│   └── index.js          # Main page — wires hooks → Dashboard
├── src/
│   ├── engine/
│   │   └── simulator.js  # Entropy math (pure JS, no DOM deps)
│   ├── hooks/
│   │   ├── useEntropy.js # Simulation loop + WebSocket + audio alerts
│   │   └── useSettings.js# localStorage-backed settings
│   ├── components/
│   │   ├── Dashboard.jsx  # Full UI — all panels wired together
│   │   ├── EntropyGauge.jsx # SVG percentile gauge
│   │   ├── EntropyChart.jsx # SVG line chart with real timestamps
│   │   └── SettingsPanel.jsx# Slide-up settings sheet
│   └── theme/
│       └── index.js       # Dark / Light / Midnight / Terminal tokens
├── styles/
│   └── globals.css
├── public/
│   └── favicon.svg
├── next.config.js
├── vercel.json
└── package.json

---

Environment variables (optional)

If you want to bake in a default WebSocket URL at build time, add to Vercel:

Variable	Example
NEXT_PUBLIC_WS_URL	ws://your-server:8765/ws

Then in src/hooks/useSettings.js, change the default:

wsUrl: process.env.NEXT_PUBLIC_WS_URL || "ws://localhost:8765/ws",

---

Themes

Dark · Light · Midnight · Terminal — switchable in Settings, persisted to localStorage.

Signal reminder

This monitors volatility magnitude — not direction. ~45% directional accuracy. Use for position sizing, not entry signals.