📡 WiFiSiapa

See, control & secure every device on your WiFi — from a single beautiful dashboard.

A self-hosted network monitor & bandwidth-control tool for Linux. Discover every device on your WiFi, identify them, watch live bandwidth, see which sites they open, throttle or fully cut anyone's internet, prioritise your own devices, and even switch WiFi networks — all from a polished, real-time web dashboard you can open from your phone.

🔴 Live Demo · runs on simulated data — no install needed

⚠️ About this repository. This is the public showcase: the complete frontend (Vue 3 + Vite + Tailwind) running in demo mode with simulated data, so anyone can click the live link and explore the full UI/UX. The privileged backend that does the real network work (raw-socket scanning, ARP interception, tc traffic shaping, netfilter, packet inspection) is kept in a private repository.

Multi-page SPA: Dashboard · Monitor · WiFi · Speed Test — with smooth transitions, skeleton loaders, toasts and live SSE updates.

Monitor — live bandwidth & opened sites	WiFi — scan & switch networks

Speed Test — prove the boost

Frontend — Vue 3 (<script setup>), Vite, Tailwind CSS v4, composable state store, Server-Sent Events for realtime, zero heavy deps.

Backend (private) — Python + Flask, raw AF_PACKET sockets, arp-scan / nmap, arpspoof, Linux tc HTB, iptables/nftables, conntrack, nmcli, mDNS, and a hand-written DHCP/DNS/TLS-SNI packet parser.

   Phone / Tablet / any device on the LAN
                  │  browser
                  ▼
   ┌────────────────────────────────┐
   │  Vue 3 SPA  (this repo)         │  Dashboard · Monitor · WiFi · SpeedTest
   └───────────────┬────────────────┘
                   │ JSON + SSE (realtime)
                   ▼
   ┌────────────────────────────────┐
   │  Flask API  (private)          │  /api/devices /throttle /block /boost …
   └───────────────┬────────────────┘
                   ▼
   ┌──────────────────────────────────────────────┐
   │  Linux host (root)                            │
   │  • discovery: arp-scan + ARP cache + mDNS      │
   │  • naming: reverse-DNS + NetBIOS + DHCP sniff   │
   │  • bandwidth: conntrack accounting             │
   │  • control: arpspoof + tc HTB + iptables       │
   │  • traffic: raw-socket DNS / TLS-SNI parser     │
   │  • wifi: nmcli scan / connect                  │
   └──────────────────────────────────────────────┘

• Discovery & naming. Combines active ARP scanning with the kernel ARP cache, then enriches each device from the OUI vendor database, mDNS broadcasts, and DHCP Option-12 hostnames sniffed off a raw socket — the trick that reveals names of modern phones that otherwise hide behind randomized MACs.
• Per-device bandwidth. Other devices' traffic doesn't normally pass through your laptop, so a device is briefly ARP-spoofed to route through the host, where conntrack byte-accounting measures it live.
• Throttle / cut. Traffic is shaped with a Linux tc HTB class per device, or dropped with a netfilter FORWARD rule — the device stays associated to the AP but loses internet, no deauth.
• Activity. A hand-written parser reads DNS queries and TLS ClientHello SNI off the wire to show which services are being opened (domains only — HTTPS payloads stay encrypted), then collapses noisy CDN/tracker domains into recognisable names.

npm install
npm run build:demo   # simulated-data build
npm run preview      # serves the static demo
# or: npm run dev    # hot-reload dev server

Deploying the live demo to Cloudflare Pages / Vercel: see DEPLOY.md.

Built for monitoring and managing your own home WiFi — parental controls, catching freeloaders, prioritising your work device. ARP-based control on a network you don't own is illegal in many places; use the passive/identification features only on networks that aren't yours.

MIT © Bintang Samudra — see LICENSE.