Net Tracer

Immersive terminal dashboard for real-time network diagnostics and geolocation.

Comment

Inspiration

I am a huge fan of technology and the show "Regular Show". In one of the episodes, there’s a scene with a retro-futuristic terminal vibe that I found incredibly cool. Combining that aesthetic with my interest in cybersecurity, I decided to create NetTracer. I really enjoy interfaces with neon glowing borders, so I focused on bringing that "glow" to life in a functional network tool.

What it does

NetTracer is an immersive diagnostic dashboard. It performs a real-time "handshake" to analyze network metrics, fetching the user's connection data, latency (ping), and ISP information, all presented through a professional hacker-style terminal interface.

How we built it

I built this project entirely by myself as a solo developer:

  • Frontend: Built with Vanilla JavaScript for maximum performance and zero overhead. I heavily utilized CSS Grid and Glassmorphism to achieve the terminal look with glowing neon effects.

  • Backend: Developed a Node.js and Express API to handle and process metadata requests.

  • Deployment: The entire stack is hosted on Vercel, using Serverless Functions to bridge the frontend with the backend analysis logic.

Challenges we ran into

  • API Integration: My biggest challenge was getting the API to communicate correctly. I had to pivot my original idea and find better ways to fetch and deliver the data.

  • The Async Typewriter Effect: Synchronizing the character-by-character terminal animation with real-time data coming from the API was tricky to get right without breaking the UI.

  • Serverless Migration: This was my first time using Node.js. Transitioning from a local environment to the cloud was a massive hurdle. I had to learn how to refactor an Express server into modular Vercel functions and configure vercel.json from scratch.

  • Responsive Design: Fitting a 3-column terminal report onto a smartphone screen without losing the "hacker" feel required complex CSS Flexbox and media query adjustments.

Accomplishments that we're proud of

I am genuinely proud of what I achieved. I challenged myself to learn and code for fun, and I managed to build a working full-stack application. It was just me and Google against the clock, and seeing the final "Analysis Complete" screen felt amazing.

What we learned

This weekend was a deep dive into Serverless architecture. Since I had never used Node.js before, I learned how to manage environments without a "constant" server and how to optimize API calls for low latency in a serverless environment.

What's next for Net Tracer

I plan to integrate real packet-loss detection and a traceroute visualizer that maps the data's journey across a 3D globe.

Share this project:

Updates