A real-time, responsive gaming telemetry dashboard built with Node.js and vanilla web stack elements. The platform features an active backend state machine that polls industry-standard corporate Statuspage APIs (including Epic Games and Discord) every 5 minutes to deliver true server connectivity logs, live global regional breakdowns, and interactive crowdsourced incident report telemetry.
- 🚀 Architecture & Live Core Loop
- ✨ Key Features
- 🛠️ Tech Stack
- 📦 Directory Structure
- 💻 Local Installation & Setup
- 📜 License
Unlike basic static portfolio pages, NETLAG.IO uses a fully operational Hybrid Polling Architecture to combine public state telemetry with live crowd data:
[ Epic Games / Discord APIs ] ──( 5 Min HTTPS Poll )──┐
▼
[ Interactive User Browser ] ──( POST /api/report )──┼─► [ Node.js Express Server ]
│ │
[ Major Platform Networks ] ──( Live Fallback )─────┘ ▼
( Returns Unified JSON Matrix )
│
▼
[ Custom Frontend UI Render ]
• Glowing Inline SVG Sparklines
• Distributed Region Pills
-
Automated Polling Stacks: The Node.js backend initializes an automated asynchronous timer (setInterval) that hits public ecosystem API status vectors every 300,000ms.
-
True Historical State Tracing: Rather than randomizing layout animations on the frontend, the backend maintains a scrolling memory buffer (capped at 15 intervals) tracking exact system stress variables.
-
Crowdsourced Event Telemetry: When users encounter game instability and click "REPORT ISSUES", a structural client payload triggers a POST interaction back to the runtime server. The backend processes the outcry, alters localized indicators instantly, and computes distributed routing failure simulations across regional zones (US, EU, ASIA).
- Live API Synchronization: Actively aggregates infrastructure states from enterprise production platforms (Fortnite, Rocket League, Discord).
- Unified Network Grid: Dedicated status strip pinned to the crown header displaying real-time connectivity status bars for Steam, PlayStation, Xbox, and Discord.
- Procedural Inline SVG Sparklines: Renders mathematical canvas layouts natively on the frontend via customized scaling vectors that adapt instantly to system load spikes without relying on bulky external graph dependencies.
- Global Server Matrix Separation: Visualizes target stability context utilizing regional nodes, mapping micro-states dynamically between global endpoints to simulate true distributed cloud topology.
- Cyber-Gaming Aesthetics: Polished, responsive dark layout designed with responsive CSS Grid layouts, variable glow tokens, unified badge boundaries, and crisp Font Awesome vector icons.
- Backend Interface: Node.js, Express Framework
- Network Communications: Native Node HTTPS Protocol (API Polling Context)
- Frontend Foundations: HTML5 Semantic Layout, Vanilla ECMAScript Core (JavaScript)
- Styling Architecture: Modern CSS3 (Custom Grid Layouts, Dynamic Flex Elements, Native Variables, Web Animations)
- Visual Vector Assets: Font Awesome Core Iconography, Pure SVG Line Matrix Canvas Graph Generators
netlag-io/
├── server.js # Node.js/Express Backend & API Polling Loop
├── package.json # Active Project Manifest & NPM Package Rules
├── package-lock.json # Hardlocked Module Dependency Trees
└── public/ # Static Web Assets Serving Folder
├── index.html # Application Skeleton Layout
├── style.css # Cyberpunk Theme Layout, Layout Tokens, & Responsive Grids
└── app.js # Core UI Engine, SVG Math Graphs, & Fetch Polling Logic
Follow these quick commands to spin up the platform on your local desktop machine environment:
- Clone the repository:
git clone https://github.com/RyzerG/netlag-io.git
cd netlag-io- Install project dependencies:
npm install- Boot the localized development engine:
npm start- Access the application: Open your preferred browser engine and point your active tab to: http://localhost:3000
This project is currently private and not open-source. All rights reserved to the original author. Unauthorized distribution or reproduction of this software is strictly prohibited. You may use this software for personal educational purposes only. For commercial use or collaboration inquiries, please contact the author directly.