Inspiration
As a parent, I wanted to know what my kids' devices were doing on our home network — which servers they're connecting to, whether anything looks unusual. The existing tools are either raw terminal output (Wireshark, tcpdump) or enterprise-grade software that requires a sysadmin. There was nothing in between: a simple, readable dashboard a parent could actually use. That gap was the inspiration.
What it does
Network Sniffer Dashboard is a real-time home network visibility tool that runs in a browser tab. It captures live network traffic and plots every external connection as a pulsing dot on a dark world map. Unrecognized devices appear as larger red dots so they stand out immediately.
Hover any dot to see the full connection detail: which device, what destination hostname, what city and country the server is in, when the connection happened, and what protocol it used. Click the device name to rename it inline — "Kid's iPad" instead of a MAC address — and the dot immediately switches from red to white. A time scrubber along the bottom lets you drag back through history and view a heatmap of connection density for any past time window.
How we built it
The backend is written in Go. It uses gopacket to capture raw network packets, an ARP cache to map IP addresses to MAC addresses (stable device identifiers that survive DHCP reassignment), and the DB-IP GeoLite2 database for local IP-to-location lookups with no per-request API calls. Events are persisted to SQLite and streamed to the browser over WebSocket in real time.
The frontend is TypeScript with Vite and Leaflet.js. Pulsing dot markers are Leaflet DivIcon elements animated with CSS keyframes. Historical mode uses the leaflet.heat plugin to render connection density as a heatmap. The entire build was spec-driven: PRD → technical spec → itemized checklist → implementation, one item at a time.
Challenges we ran into
JSON field name mismatch — the Go backend was serializing struct fields as PascalCase (DstLat, MacAddress) while the TypeScript frontend expected snake_case (dst_lat, mac). Events were flowing over the WebSocket but coordinates were undefined, so no dots appeared. Caught it by inspecting the live WebSocket messages in DevTools.
GeoIP database setup — MaxMind's GeoLite2 requires account registration, which added friction during development. Solved by switching to DB-IP's free MMDB, which is fully compatible with the same reader library and downloadable with a single curl command.
SQLite path resolution — the backend runs from the backend/ directory, so relative paths in .env needed ../ prefixes to reach data/. Added os.MkdirAll to the store's Open() function so it never crashes on a missing directory.
Accomplishments that we're proud of
Getting a live packet capture pipeline all the way through to pulsing dots on a world map in a single build session. The full data flow — raw packet → ARP lookup → GeoIP → WebSocket → Leaflet marker — works end to end. The inline device rename that immediately flips a red dot to white is a small detail that makes the UX feel complete. And the time scrubber switching seamlessly between live dot mode and historical heatmap mode is the kind of thing that makes the dashboard feel like a real product.
What we learned
Spec-driven development. This project had a full PRD and technical spec before a single line of code was written — something I hadn't practiced in detail before. Having an exact spec for each component made it possible to verify what was built against what was planned, which is exactly how you build trust in AI-generated code. The spec also surfaced tradeoffs early (MAC vs IP for device identity, local DB vs API for GeoIP) before they became implementation problems.
What's next for Network Sniffer Dashboard
- Unknown device investigation panel — clicking a red dot opens a detail view of every connection that device has made, so you can assess it before naming it
- Suspicious destination flagging — connections to known malicious IPs or unusual ports flagged visually
- Alerts — browser or email notification when an unknown device joins the network
- Linux support — replace the macOS arp -a call with ip neigh for cross-platform use
- Mobile-responsive layout — so parents can check in from their phone
Built With
- cartodb
- coder/websocket
- db-ip
- geolite2
- go
- gopacket
- leaflet.heat
- leaflet.js
- libpcap
- mattn/go-sqlite3
- sqlite
- typescript
- vite
- websockets
