9.6 KiB
███████╗██╗ ██╗██████╗ ██████╗ ██╗ ██╗
╚══███╔╝╚██╗ ██╔╝██╔══██╗██╔═══██╗╚██╗██╔╝
███╔╝ ╚████╔╝ ██████╔╝██║ ██║ ╚███╔╝
███╔╝ ╚██╔╝ ██╔══██╗██║ ██║ ██╔██╗
███████╗ ██║ ██║ ██║╚██████╔╝██╔╝ ██╗
╚══════╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝
ZyroX Dashboard — Next.js Web Interface
✦ Overview
This folder contains the ZyroX web dashboard built with Next.js 14 (App Router), TypeScript, and Tailwind CSS. It connects to the bot's FastAPI backend via HTTPS (ngrok tunnel) and lets server admins manage all bot settings through a sleek, branded UI.
dashboard/
├── app/ App Router pages & API routes
│ ├── api/auth/ NextAuth OAuth callback
│ ├── dashboard/ Main dashboard area
│ │ ├── admin/ Admin-only panel
│ │ ├── guilds/ Server selection
│ │ └── guild/[guildId]/ Per-server settings pages
│ │ ├── antinuke/
│ │ ├── automod/
│ │ ├── leveling/
│ │ ├── logging/
│ │ ├── tickets/
│ │ ├── welcome/
│ │ └── …more
│ ├── docs/ Documentation page
│ ├── privacy/ Privacy policy
│ └── terms/ Terms of service
├── components/
│ ├── dashboard/ Feature-specific form components
│ └── ui/ Base UI components (button, card, input…)
├── hooks/ Custom React hooks
├── lib/ API client, auth config, utilities
└── types/ TypeScript type definitions
✦ Features
- Discord OAuth2 login — secure sign-in, session managed by NextAuth
- Per-server management — antinuke, automod, leveling, logging, tickets, welcome, and more
- Live bot stats — real-time metrics pulled from the FastAPI backend
- Admin panel — owner-only configuration and announcements
- Fully branded — name, logo, and colours via environment variables
- HTTPS ready — works with the bot's ngrok static domain out of the box
- Vercel-ready — deploys in minutes with zero config changes
✦ Prerequisites
| Requirement | Notes |
|---|---|
| Node.js 18+ | — |
| ZyroX bot running | with API_ENABLED=true and TUNNEL_ENABLED=true |
| Discord OAuth app | from Discord Developer Portal |
✦ Setup
1 — Install dependencies
npm install
2 — Configure environment
Create a .env.local file in this folder:
# ── Bot API ───────────────────────────────────────────────────────
# Use the ngrok static domain from the bot's tunnel
NEXT_PUBLIC_API_URL = https://xxxx-xxxx-xxxx.ngrok-free.app/api/v1
NEXT_PUBLIC_DASHBOARD_API_KEY = your_shared_api_key # must match bot's DASHBOARD_API_KEY
# ── NextAuth ──────────────────────────────────────────────────────
NEXTAUTH_URL = http://localhost:3000
NEXTAUTH_SECRET = a_long_random_string # generate: openssl rand -base64 32
# ── Discord OAuth ─────────────────────────────────────────────────
DISCORD_CLIENT_ID = your_discord_oauth_client_id
DISCORD_CLIENT_SECRET = your_discord_oauth_client_secret
# ── Branding ──────────────────────────────────────────────────────
NEXT_PUBLIC_ADMIN_IDS = your_discord_user_id
NEXT_PUBLIC_BRAND_NAME = "ZyroX"
NEXT_PUBLIC_BRAND_NAME_WORD = "ZX"
3 — Run locally
npm run dev
✦ Environment Reference
| Variable | Description |
|---|---|
NEXT_PUBLIC_API_URL |
Full URL to the bot's FastAPI backend — use the ngrok static domain |
NEXT_PUBLIC_DASHBOARD_API_KEY |
Must exactly match DASHBOARD_API_KEY in the bot .env |
NEXTAUTH_URL |
Your dashboard's public URL (Vercel domain in production) |
NEXTAUTH_SECRET |
Random secret for NextAuth session signing |
DISCORD_CLIENT_ID |
Discord OAuth2 client ID |
DISCORD_CLIENT_SECRET |
Discord OAuth2 client secret |
NEXT_PUBLIC_ADMIN_IDS |
Comma-separated Discord user IDs with admin panel access |
NEXT_PUBLIC_BRAND_NAME |
Bot name shown in the dashboard UI |
NEXT_PUBLIC_BRAND_NAME_WORD |
Short abbreviation shown in the dashboard (e.g. ZX) |
✦ Deployment (Vercel)
Vercel is the recommended host — the project is pre-configured for zero-config deployment.
Step 1 — Connect your repo
Go to vercel.com → Add New Project → connect your GitHub repo → set root directory to dashboard/
Vercel auto-detects Next.js — no build settings needed.
Step 2 — Add environment variables
In Settings → Environment Variables, add all keys from the table above.
| Variable | Production Value |
|---|---|
NEXT_PUBLIC_API_URL |
https://xxxx.ngrok-free.app/api/v1 |
NEXTAUTH_URL |
https://your-app.vercel.app |
NEXTAUTH_SECRET |
generate one |
DISCORD_CLIENT_ID |
from Discord Developer Portal |
Step 3 — Add the redirect URI in Discord
In your Discord app → OAuth2 → Redirects → add:
https://your-app.vercel.app/api/auth/callback/discord
Step 4 — Deploy
Hit Deploy. Vercel builds and publishes automatically. ✓
✦ Connecting to the Bot API
The dashboard talks to the bot's FastAPI backend. The URL comes from NEXT_PUBLIC_API_URL.
- Local dev — set to
http://localhost:8000/api/v1(bot running locally) - Production — set to the bot's ngrok static domain:
https://xxxx.ngrok-free.app/api/v1
The bot prints the current tunnel URL every time it starts:
◈ Tunnel: API is live at https://xxxx.ngrok-free.app
↳ set NEXT_PUBLIC_API_URL=https://xxxx.ngrok-free.app/api/v1
If you set NGROK_DOMAIN in the bot's .env, this URL will never change between restarts.
✦ Troubleshooting
| Problem | Fix |
|---|---|
| Auth error on login | Check Discord OAuth client ID/secret and redirect URI in Developer Portal |
| Dashboard can't load data | Confirm bot is running with API_ENABLED=true and NEXT_PUBLIC_API_URL is correct |
| CORS error in browser | Make sure your Vercel URL is allowed — add it to CORS_ORIGINS in the bot's .env |
NEXTAUTH_SECRET error |
Make sure NEXTAUTH_SECRET is set and non-empty |
| API key rejected (401) | NEXT_PUBLIC_DASHBOARD_API_KEY must exactly match DASHBOARD_API_KEY in the bot |
| ngrok warning page appears | The bot's FastAPI middleware already injects the skip-warning header automatically |
✦ CodeX Devs
Built for protection. Designed for style.
© 2026 CodeX Devs — MIT License