NetSphere

• 

  Detail about how a package is sent, the energy cost, carbon footprint and much more details

• 

  General UI of the Project

• 

Inspiration

The internet connects billions of people, yet the infrastructure that makes it possible is mostly invisible. We wanted to make this hidden system easier to understand by transforming concepts like DNS, TLS, CDN routing, and traceroute into an interactive visual experience.

What it does

NetSphere allows users to enter a domain and watch its network journey unfold across an interactive 3D globe. It performs DNS resolution, TLS certificate inspection, CDN detection, IP geolocation, and traceroute, displaying network information hop-by-hop in real time. When real traceroute is unavailable, a realistic simulation mode keeps the visualization working.

How we built it

We built NetSphere using Next.js, React, and TypeScript, with Three.js, React Three Fiber, and Three Globe powering the 3D globe. A Node.js backend handles DNS lookups, TLS inspection, CDN detection, traceroute, and IP geolocation. Socket.IO streams results from the backend to the frontend as they become available.

Challenges we ran into

Our biggest challenge was coordinating multiple networking operations that complete at different speeds while keeping the visualization smooth and responsive. Traceroute was also unreliable on some networks because ICMP traffic can be blocked. We solved this using real-time event streaming and a simulated-hop system.

Accomplishments that we're proud of

We are proud of combining real networking data with an engaging 3D experience. NetSphere turns information that would normally appear as technical command-line output into something visual and intuitive.

What we learned

We gained a deeper understanding of DNS, TLS, routing, WebSockets, asynchronous programming, backend architecture, and 3D web graphics. We also learned how different networking components work together to deliver data across the internet.

What's next for NetSphere

We plan to add IPv6 and BGP visualization, latency heatmaps, historical route comparisons, and network performance analytics. Our long-term goal is to make NetSphere a useful platform for networking education, cybersecurity exploration, and understanding the global internet.

Built With

• css3
• dns
• git
• github
• html5
• ip-api
• ip-geolocation
• javascript
• next.js
• node.js
• npm
• react
• react-three-fiber
• shadcn/ui
• socket.io
• tailwind-css
• three-globe
• three.js
• tls
• traceroute
• typescript
• vs
• websockets