← Back to all projects

Speedtest

Speedtest project screenshot

A modern, self-hosted Internet speed measurement platform with an elegant analog speedometer interface. Features comprehensive network diagnostics including ping, jitter, download/upload speed tests, IP detection, connection metadata, and a beautiful glassmorphism-themed UI with light/dark mode—all running entirely on KNWS infrastructure.

Visit SiteView Source

Technology

frontendhtml5css3javascriptsvg
backendphppythonapache
devopsapachessl

🚀 KNWS SpeedTest

Long-Form Project Summary for KNWS Showcase

A modern, self-hosted Internet speed measurement platform with a beautiful analog speedometer interface and detailed network diagnostics.

KNWS SpeedTest was designed as an internal and public-facing performance tool to measure real-world connection quality across the KNWS infrastructure. It combines an elegant animated UI with accurate latency, jitter, download, and upload tests, plus IP and connection metadata detection — all running on your own servers with no dependency on third-party APIs.

🎯 Project Goals

  1. Provide a self-hosted alternative to commercial services like Ookla SpeedTest.
  2. Build a classy, animated analog speedometer inspired by classic car dashboards.
  3. Measure ping, jitter, download speed, upload speed with high accuracy.
  4. Detect and display IP address, network provider, ASN, browser data, and connection type.
  5. Provide KNWS with a reliable tool for infrastructure testing, diagnostics, and customer support.
  6. Ensure full compatibility across browsers and devices with a fast, minimal front-end.
  7. Present data in a visually appealing, glassmorphism-themed UI with light/dark mode.

🧱 Core Features

🧭 1. Analog Speedometer UI

A custom-crafted speedometer built with:

  • SVG graphics
  • Smooth CSS and JavaScript needle rotations
  • Tick marks and dynamic color zones
  • Full animation loop during tests
  • True analog-style inertia and motion easing

The design reflects automotive speedometers, providing a satisfying and intuitive experience.

🌗 2. Dual Light/Dark Mode with Glassmorphism

  • Instant theme switching
  • Theme stored in localStorage
  • Beautiful frosted-glass panels
  • Adaptive shadows and reflections per mode
  • Smooth fade transitions

Both modes have been hand-tuned for maximum readability and aesthetic impact.

📡 3. Full Network Quality Test Suite

The application performs:

Ping Test

  • Multiple ICMP-like HTTP pings
  • Average latency
  • Jitter calculation (latency variance)

Download Speed Test

  • Fetches large random data blocks
  • Measures peak and sustained throughput
  • Calculates Mbps and records test duration

Upload Speed Test

  • Sends randomized payloads to server endpoints
  • Measures outbound throughput
  • Handles chunked uploads for consistency

All tests run in sequence and update the UI in real time.

🌍 4. IP Address & Connection Metadata Detection

The backend returns:

  • Public IP
  • ASN and ISP (if enabled via local lookup)
  • Approximate region (when configured)
  • Browser User-Agent
  • Downlink (via Network Information API)
  • Effective connection type (2G, 3G, 4G, 5G, Wi-Fi)
  • Estimated round-trip capability

This contextual info helps KNWS support diagnose user connectivity issues quickly.

📊 5. Detailed Results Dashboard

At the end of each test, users see:

  • Ping (ms)
  • Jitter (ms)
  • Download speed (Mbps)
  • Upload speed (Mbps)
  • IP address and provider information
  • Timestamp
  • Browser version
  • Device type

Everything is formatted in a clean card-based layout.

🧪 Architecture & Backend Logic

Although the frontend is a pure HTML/CSS/JS SPA, the backend provides endpoints for:

  • Download payloads
  • Upload receivers
  • Metadata queries
  • Time-sensitive ping simulation
  • Real-time diagnostic logs

Backend tech stack typically includes:

  • Apache or Nginx
  • PHP or Python endpoints
  • Randomized data generators for speed accuracy
  • Reverse-proxy rules for consistent performance

Because the service is self-hosted, results reflect true performance to the KNWS network, rather than a generic CDN.

🔧 Technology Stack

Frontend

  • HTML5
  • CSS3 (Glassmorphism, Flexbox, animations)
  • JavaScript (ES6)
  • SVG analog gauge
  • LocalStorage
  • Network Information API

Backend

  • Apache (static hosting & upload endpoints)
  • PHP/Python for speed testing endpoints
  • Random data generators for throughput validation

Infrastructure

  • Runs entirely on KNWS internal servers
  • SSL-enabled
  • Zero third-party API calls

📈 Outcome & Value

The KNWS SpeedTest platform provides:

  • Accurate, repeatable speed diagnostics
  • A beautiful, modern interface that users enjoy using
  • Fully private infrastructure (no data sent to external services)
  • A reliable tool for troubleshooting customer lines
  • A benchmark platform for server and network optimisation

It serves both internal engineering needs and public demonstration purposes, showcasing KNWS quality of service in a visually impressive way.