GXQS Explorer is a real-time blockchain explorer and command center built with Next.js 15 App Router, TypeScript, and Tailwind CSS. It provides live chain metrics, validator intelligence, mempool monitoring, AI-driven anomaly detection, and smart-contract deployment tooling in a single responsive interface.

The home screen surfaces a live KPI grid, TPS chart, block stream, and recent transactions — all driven by the GXQS chain API.

Drill into every block with timestamp, transaction count, gas metrics, and validator signature.

Real-time mempool view with fee distribution, transaction type breakdown, and alert badges when the backlog exceeds thresholds.

Leaderboard of active validators showing uptime, stake weight, blocks produced, and performance score.

On-chain anomaly detection and predictive analytics powered by the built-in AI layer.

Interactive AI model controls — configure thresholds, retrain triggers, and view model confidence scores.

Cross-chain and geo-distributed node health map with latency metrics per region.

Tokenomics dashboard: price feed, market cap, staking ratio, circulating supply, and emission schedule.

Guided deploy wizard with ABI upload, constructor argument builder, gas estimator, and live deployment status.

Bottom navigation bar on small screens with a collapsible More tray giving access to all nine routes.

Dashboard (390 px)	More nav tray expanded

State-driven glow — no always-on glow.

/* Hover: soft */
.glow-hover-primary:hover { box-shadow: 0 0 12px rgba(0,255,225,0.25); }
/* Active: strong */
.glow-active-primary      { box-shadow: 0 0 20px rgba(0,255,225,0.5), 0 0 40px rgba(0,255,225,0.2); }
/* Critical: pulsing animation */
.animate-glow-pulse-warning { animation: glowPulseWarning 1.5s ease-in-out infinite; }
.animate-glow-pulse-danger  { animation: glowPulseDanger  1s   ease-in-out infinite; }

app/                    Next.js App Router pages
├── page.tsx            Home — Command Dashboard
├── blocks/             Block explorer
├── mempool/            Mempool monitor
├── validators/         Validator leaderboard
├── deploy/             Contract deploy wizard
├── ai-dashboard/       AI anomaly dashboard
├── ai-control/         AI model controls
├── global-intelligence/ Cross-chain node map
├── economic-intelligence/ Tokenomics
└── api/                Mock RPC API routes

components/
├── explorer/           Page-level smart components
│   ├── CommandDashboard.tsx   Live KPI grid + identity bar
│   ├── Navigation.tsx         Sidebar (≥md) + bottom nav (<md)
│   ├── BlockStream.tsx
│   ├── TransactionList.tsx
│   └── ...
└── ui/                 Design-system primitives
    ├── GlassCard.tsx          Glassmorphism card (depth prop)
    ├── StatCard.tsx           KPI card (primary | secondary)
    ├── NeonBadge.tsx          Semantic badge (design-token colors)
    ├── ChartCard.tsx          Collapsible chart wrapper
    ├── ActivityFeed.tsx       Feed list with accent lines
    ├── LiveIndicator.tsx      Data-driven live dot
    └── ...

lib/
├── rpc.ts              Mock blockchain data (GXQS chain simulation)
└── utils.ts            Formatting helpers

styles/
└── globals.css         CSS custom properties + utility classes

Note: lib/rpc.ts contains a simulated GXQS chain RPC layer. All blockchain data is generated with realistic values. No live RPC endpoint is required to run the explorer.

# Install dependencies
npm install

# Start development server
npm run dev
# → http://localhost:3000

# Production build
npm run build
npm start

# Lint
npm run lint

Requirements: Node.js 18+, npm 9+

MIT © GXQS