A high-performance, real-time command center dashboard built with React 19 and Vite 8.
OmniSight Command Center is a futuristic, immersive geospatial dashboard designed for monitoring global server networks, analyzing node health, and visualizing high-volume data streams. Inspired by sci-fi interfaces and built with bleeding-edge web technologies, it features both an interactive 3D WebGL globe and a highly detailed 2D topological map.
Monitor worldwide network traffic, global connectivity, and regional activity in real-time.
Click on any node (either on the 3D globe or 2D map) to view deep diagnostics, latency metrics, and real-world ground/fiber routing to its nearest neighbor.
OmniSight leverages a combination of WebSockets, WebGL, and advanced React hooks to deliver a zero-latency monitoring experience.
- Live Data Ingestion: A dedicated Node.js WebSocket backend streams live fluctuating latencies, throughput metrics, and dynamic server logs at 2000ms intervals directly into the React context.
- Event Filtering: Instantly isolate critical errors or warnings from the noisy telemetry stream.
- 3D WebGL Globe (
react-globe.gl): Features auto-rotation, glowing connection arcs, and a "Click-to-Fly" search engine that smoothly orbits to any physical address on Earth. - 2D Flat Map (
react-simple-maps): D3-based SVG map with smooth panning and zooming, overlaying a real-world terrain map for precision tracking.
- MapToolkit Integration: Uses real geocoding to resolve a node's exact location, elevation, and address based on its coordinates.
- FastRouting (OSRM): Dynamically calculates the actual ground driving route vs. theoretical subsea fiber latency between datacenters.
- Streaming Terminal: View
INFO,WARN, andALERTsecurity and network events in a dedicated logs pane, complete with filtering and search capabilities.
- Cyberpunk Aesthetic: Translucent components with neon accents (Cyan/Purple), built entirely with raw Tailwind CSS 4 utilities.
- System Override: Type
hackanywhere on your keyboard to instantly trigger a system override, flipping the UI into a glowing Terminal Green matrix theme.
- React 19 Concurrent Features: Leverages the latest concurrent rendering features for smooth UI updates even under heavy telemetry load.
- Lazy Loading: The heavy 3D Globe component is lazily loaded via
React.Suspenseto ensure the initial app payload is tiny. - Rolldown Chunking: Automated vendor chunking separates React, Three.js, Maps, and UI libraries into cacheable assets.
| Category | Technology | Description |
|---|---|---|
| Framework | React 19 | Latest concurrent features and hooks |
| Bundler | Vite 8 | Ultra-fast HMR and optimized build via Rolldown |
| Backend | ws | Native Node.js WebSockets for live data streaming |
| Styling | Tailwind CSS 4 | Utility-first CSS with CSS variable theme |
| 3D Engine | react-globe.gl | WebGL-accelerated interactive globe |
| 2D Engine | react-simple-maps | D3-based SVG maps with panning |
| Charts | Recharts | Composable SVG charting |
| Geo API | MapToolkit | Reverse geocoding and routing |
Ensure you have Node.js (v18+ recommended) and npm installed. You will also need a free API key from MapToolkit.
Clone the repository and install dependencies:
git clone https://github.com/amafjarkasi/omnisight-command-center.git
cd omnisight-command-center
npm installTo prevent CORS errors and securely use the MapToolkit API, you must configure your environment variables. Copy the example file:
cp .env.example .envOpen .env and replace your_api_key_here with your actual MapToolkit API key.
You need to run both the WebSocket backend and the Vite frontend server. Open two separate terminals:
Terminal 1 (Backend):
npm run backendTerminal 2 (Frontend):
npm run devNavigate to http://localhost:5173 in your browser.
server.js- Native Node WebSocket backend streaming simulated network node arrays and system logs.src/hooks/useMockData.js- Connects to the WebSocket backend, ingests ticks, and populates the global React context.src/components/GlobeView.jsx- Isolated 3D engine, lazily loaded.src/services/maptoolkit.js- Dedicated API abstraction for fetching geographic data through the Vite proxy.
npm run backend— Starts the WebSocket telemetry server on port 8080.npm run dev— Starts the Vite frontend server.npm run build— Builds the application for production, intelligently chunking vendor libraries.npm run preview— Boots a local server to preview the production build.npm run lint— Runs ESLint across the codebase.
Designed and engineered for the future of network monitoring.