NULL-TRACE

Inspiration

Cybersecurity is often taught through theory, commands, and isolated examples, but it can be difficult to understand how those concepts connect during a real incident. We wanted to turn that learning process into something interactive.

NULL//TRACE was inspired by the idea of putting a player inside a simulated cyber incident where every clue matters. Instead of simply reading about IP addresses, packets, authentication, binary, logs, and databases, the player has to use those concepts to investigate a breach and trace the attacker.

What We Built

NULL//TRACE is an interactive cybersecurity investigation game set inside a fictional network called POLYNET.

The player becomes an incident investigator and works through a series of missions. They analyze network activity, inspect logs, decode information, interact with a simulated terminal, follow packet routes, solve security puzzles, and eventually identify the compromised system.

The game includes:

• Interactive network investigation
• Simulated terminal commands
• Packet and routing challenges
• Binary, hexadecimal, and ASCII decoding
• Authentication and password puzzles
• Database and SQL security concepts
• Log analysis
• Attacker tracing
• Hints and scoring
• Achievements and player ranks
• Mission progression
• Educational explanations after challenges
• Local progress saving

All cybersecurity interactions are simulated inside the game. The project does not scan, attack, or interact with real networks or systems.

How We Built It

We built NULL//TRACE as a web-based game using React, Vite, and TypeScript.

The game is organized around separate engines for missions, puzzles, terminal interactions, networking, scoring, and game events. This allowed us to keep the gameplay logic independent from the UI and make new missions easier to add.

The interface was designed as a complete visual system rather than a collection of unrelated screens. The same design language is used across the main menu, mission selection, investigation interface, terminal, network visualization, puzzles, achievements, and results.

Game progress is stored locally so the core experience can run without requiring a backend or external service.

Challenges We Faced

One of the biggest challenges was making cybersecurity concepts feel like gameplay instead of turning the project into a collection of quizzes.

We solved this by making the player discover information and use it to progress. A decoded message can reveal a clue, a network route can expose a suspicious machine, and a log entry can connect multiple pieces of evidence.

Another challenge was creating a realistic-feeling investigation environment while keeping everything completely safe. We built simulated versions of terminal commands, network activity, logs, and database interactions instead of executing real security operations.

We also focused heavily on making the experience visually cohesive and responsive so that the project feels like a complete game rather than a traditional educational website.

What We Learned

Through NULL//TRACE, we learned how game mechanics can be used to teach technical concepts through interaction and experimentation.

We also gained experience designing state-driven applications, building reusable React components, creating interactive visualizations, managing game state, and structuring a larger frontend application around independent game systems.

Most importantly, we learned that technical education becomes much more engaging when the user has a reason to apply the concept rather than simply being asked to remember it.

What's Next

We want to expand NULL//TRACE with more investigation scenarios, additional difficulty levels, richer network simulations, multiplayer challenges, and a larger collection of cybersecurity concepts.

The long-term goal is to turn it into a collection of interactive cybersecurity investigations where players learn by solving incidents rather than following traditional lessons.

Built With

• css
• express.js
• gsap
• html
• javascript
• localstorage
• node.js
• react
• svg
• typescript
• vite
• zustand