Network DNA

Network DNA transforms Wireshark traffic into interactive 3D DNA, helping users visualize connections, understand network activity, and spot suspicious behavior.

Comment

Inspiration

Cybersecurity tools provide a ton of useful information, but that information is often presented in a manner thats difficult to understand unless you have ample experience. endless feeds of packets, logs, and alerts. This was inspired by the Beyond the Feed theme. We asked ourselves what if network traffic could become something you explore instead of something you scroll through. This became Network DNA.

What it does

Network DNA takes real Wireshark PCAP/PCAPNG captures and transforms network communication into an interactive 3D DNA helix. Users can explore connections, see packet activity, decode relationships in beginner-friendly language, and generate Wireshark filters for deeper investigation.

Our Attack Lab also simulated potential C2 beaconing. As suspicious behavior develops, the affected relationships visibly "mutates" from normal traffic into an investigation-type state.

How we built it

Built the frontend with React, TypeScript, Three.js, and React Three Fiber. A Python/FastAPI backend processes uploaded packet acaptures using Wireshark's TShark and capinfos tools.

Raw packets are aggregated into bidirectional network conversations before being sent to the frontend. Those relationships drive both the network topology and the 3D DNA visualization.

We used Git/GitHub for collaborating and AI coding agents throughout development while reviewing, testing, and integrating each stage incrementally.

Challenges we ran into

One major challenge was turning directional packets into meaningful bidirectional conversations. For example, we needed to make sure an HTTPS server's port 443 remained the service port even when packets traveled from server to client.

We also had to make the transition from a 2D network topology into a Three.js DNA helix feel seemless, handle dense real-world captures without overwhelming the visualization, and integrate real TShark data without breaking the educational interface

Accomplishments that we're proud of

We're extra proud that Network DNA isnt just a visual skeleton. A user can upload a real packet capture, have it analyzed by TShark, and see those actual communication relationships become the network topology and DNA.

We're also proud of the progressive learning experience: users can begin with a simple explanation, dive into technical connection details, and ulitmately receive valid Wireshark filters for ivestigating the traffic themselves.

What we learned

We gained hands-on experience with Wireshark, TShark, PCAP analysis, TCP/IP networking, bidirectional conversation modeling, React, TypeScript, Three.js, Python, FastAPI, REST APIs, Git/GitHub, and cybersecurity-focused UI/UX.

We also learned a lot about working effectively with AI coding agents: breaking a large project into checkpoints, reviewing generated architecture, testing integrations, and using AI as an engineering tool rather than blindly accepting generated code.

What's next for Network DNA

Future versions could add live network capture, IPv6 support, richer endpoint identification, timeline/rewind capabilities, and additional Attack Lab scenarios such as port scanning and data exfiltration.

The larger vision is for Network DNA to become a living visualization of network behavior. Helping people see, understand, and investigate what is happening across a network in real time.

Built With

Share this project:

Updates