Packet City

Packet City gamifies cybersecurity by turning invisible network traffic into a 3D visualization. Explore attacks, analyze threats, and deploy defenses against those threats in real-time.

Comment

Inspiration

As the president of my high school's cybersecurity club, I lead weekly workshops on a variety of cybersecurity topics. One of the topics we cover is data packet flow to understand network traffic. The industry-standard tool for this is Wireshark, but the interface is extremely archaic and intimidating for beginners. Packet City was born to solve this educational gap. It transforms the abstract data packets into a gamified, 3D city, making complex cyber-concepts intuitive and interactive for students.

What it does

Packet City is a browser-based 3D network simulator that visualizes traffic as vehicles traveling between nodes like your PC, a Router, and a Hacker. Users can trigger real-world attacks, such as DDoS attacks, Port Scans, and Man-in-the-Middle to see exactly how they behave in real-time. It features a defense system where users must analyze logs and deploy firewalls to physically bounce malicious data packets away, turning passive learning into active incident response.

How we built it

I built a high-performance simulation engine using Python and FastAPI to generate complex traffic patterns, streaming them to the frontend via WebSockets. The visualization layer uses React Three Fiber and Three.js, employing custom shaders to handle hundreds of moving packets simultaneously without dropping frames. I also implemented custom collision logic to power the interactive firewall, allowing packets to be destroyed dynamically based on active security rules.

Challenges I ran into

My biggest challenge was performance because initially, attaching dynamic lights to every packet caused the browser to crash during heavy DDoS simulations. I solved this by switching to emissive materials and neon color coding, which kept the frame rate smooth.

Accomplishments that I'm proud of

I am proud of successfully turning networking concepts that are traditionally taught in a dry manner. into an interactive experience for beginners. Additionally, creating a lag-free 3D environment that runs seamlessly in a web browser was a significant technical issue that I managed to solve with a ton of iteration.

What I learned

I learned how to manage an entire project as a solo hacker, and how to structure my time. I also learned how to design effective software that actually serves a purpose through the numerous workshops happening at the event. On the technical side, I gained experience with Three.js rendering cycles and WebSocket state management to keep the frontend and backend synced without lagging from the hundreds of data packets.

What's next for Packet City

I plan to introduce a multiplayer "Red vs. Blue" mode where one student attacks and another defends in real-time.

Built With

Share this project:

Updates