Network Architect: Daily Cyber Range

Build networks, investigate attacks, and defend your Reddit community through interactive daily cyber range challenges.

Comment

Inspiration

Cybersecurity is often taught through slides, multiple-choice questions, and memorized definitions. We wanted to turn those concepts into systems that players could build, test, break, diagnose, and repair.

Network Architect was inspired by real troubleshooting workflows:

  1. Connect the devices.
  2. Configure the network.
  3. Observe the traffic.
  4. Identify the failure.
  5. Restore service without disrupting legitimate users.

Reddit felt like a natural home for this idea because communities can learn from shared incidents, compare different solutions, and eventually work together to strengthen a collective defense score.

What it does

Network Architect: Daily Cyber Range is an interactive networking and cybersecurity simulator built directly inside Reddit.

Players can:

  • Build network topologies by placing devices and connecting numbered ports.
  • Configure IP addresses, subnet masks, gateways, VLANs, interfaces, and security controls.
  • Send simulated ICMP, TCP, and UDP packets through the network.
  • Watch packets travel, reroute, get blocked, or fail at a specific hop.
  • Use tools such as ping, traceroute, packet inspection, alerts, and event logs.
  • Trigger switch, cable, routing, and configuration failures.
  • Diagnose incidents before attempting repairs.
  • Compare security, availability, performance, resilience, cost, and response time.
  • Experiment freely in the Network Sandbox.

Campaign labs introduce networking and cybersecurity concepts through practical scenarios, including:

  • Building a star topology and discovering its single point of failure.
  • Creating a redundant backup path.
  • Testing mesh-network resilience.
  • Repairing IPv4 and subnet configuration.
  • Segmenting departments with VLANs.
  • Connecting separate networks through routers and default gateways.

The central gameplay loop is:

Build → Configure → Test → Observe → Diagnose → Recover

The game also teaches that blocking everything is not always the best security decision. A response may stop an attacker while also taking legitimate services offline. The best solution must protect the network while preserving availability.

How we built it

We built Network Architect using:

  • Reddit Devvit Web
  • TypeScript
  • Phaser
  • React
  • HTML
  • CSS

Phaser

Phaser powers the interactive network canvas, including:

  • Device placement and movement.
  • Visible connection ports.
  • Cable creation and deletion.
  • Packet-path animations.
  • Device selection.
  • Failure animations.
  • Status changes.
  • Canvas interaction and simulation feedback.

React and HTML

React and HTML provide the surrounding interface, including:

  • Campaign browser.
  • Device library.
  • Configuration panels.
  • Objectives and alerts.
  • Packet-testing tools.
  • Terminal and event history.
  • Responsive controls and dialogs.

Simulation engine

We created a deterministic simulation engine with reusable models for:

  • Devices.
  • Ports.
  • Links.
  • Packets.
  • Routes.
  • VLANs.
  • Firewall rules.
  • Failures.
  • Objectives.
  • Scoring events.

Packets have simulated sources and destinations. Switches forward traffic within the correct VLAN, routers require valid routes and gateways, failed links stop forwarding, and redundant paths can preserve connectivity.

Configuration options affect the actual simulation result instead of acting as decorative controls.

Levels are driven by structured TypeScript definitions, allowing new challenges to reuse the same engine. We also created original geometric device artwork in code instead of relying on copyrighted networking assets.

Challenges we ran into

The biggest challenge was balancing technical accuracy with fast and understandable gameplay.

A complete network emulator would be too complicated for a Reddit mini-game, but oversimplifying the mechanics would turn the experience into another multiple-choice quiz. We created internally consistent rules that teach the reason behind each result without requiring professional certification knowledge.

Integrating React interface panels with a Phaser canvas also required careful event coordination. Dragging devices, connecting small ports, selecting objects, and using configuration forms all needed to work without accidental clicks or conflicting inputs.

Other challenges included:

  • Keeping cable anchors attached while devices move.
  • Making ports readable without allowing them to dominate the artwork.
  • Recalculating packet paths after failures.
  • Preventing invalid or occupied-port connections.
  • Preserving campaign progress and best scores.
  • Making a wide simulator layout readable inside Reddit.
  • Keeping text sharp while Phaser objects scale.
  • Separating visual feedback from authoritative simulation state.
  • Supporting both guided campaign labs and an unrestricted sandbox.
  • Distinguishing physical connections, interface state, and packet-forwarding availability.

We repeatedly redesigned the project after realizing that simply collecting keys or pressing buttons such as Block or Isolate did not create meaningful cybersecurity gameplay.

Accomplishments that we're proud of

We are especially proud that Network Architect became a functional simulator rather than a cybersecurity-themed quiz.

Players can:

  1. Construct a star network.
  2. Deliver a packet through its central switch.
  3. Observe the switch fail.
  4. Watch connected endpoints lose communication.
  5. Collect diagnostic evidence.
  6. Install or repair network equipment.
  7. Reconnect the required ports.
  8. Verify that service has been restored.

We also built:

  • Deterministic packet routing and failure handling.
  • Automatic rerouting through redundant paths.
  • Ordered firewall-rule evaluation.
  • VLAN-aware switching.
  • Gateway and subnet validation.
  • Safe device and cable deletion.
  • Persistent campaign progression and best scores.
  • Multidimensional performance scoring.
  • A reusable free-build sandbox.
  • Distinct device, port, traffic, warning, and failure states.
  • An automated test suite covering routing, failures, firewall behavior, VLANs, scoring, progression, and redundant paths.

The result teaches players by allowing the network to respond directly to their decisions.

What we learned

We learned that educational games work best when the concept becomes the mechanic.

A firewall should not merely be represented by a label. It should inspect traffic and apply ordered rules.

Redundancy should not be explained only through text. Players should watch the primary path fail and see traffic move through an alternative route.

We also learned that good cybersecurity decisions involve trade-offs. Security is not simply about maximizing the number of blocked connections. Availability, cost, performance, false positives, and recovery time all matter.

Finally, we learned how important visual clarity is inside Reddit. Short objectives, recognizable devices, visible ports, focused feedback, and responsive panels make complicated systems feel approachable.

What's next for Network Architect: Daily Cyber Range

Next, we plan to add:

  • Daily seeded incidents shared by an entire subreddit.
  • Community defense goals and daily scoreboards.
  • Comment-driven incident modifiers.
  • User-submitted network challenges.
  • Additional DNS, DHCP, Wi-Fi, VPN, cloud, monitoring, and disaster-recovery labs.
  • More attack simulations without exposing real exploit payloads.
  • Improved mobile interactions and touch-friendly cabling.
  • Cooperative incidents where Reddit communities protect shared infrastructure.
  • Expanded accessibility, sound design, onboarding, and performance testing.

Our long-term goal is to make Network Architect a replayable community cyber range where Redditors learn practical networking by building systems, watching them fail, and discovering how to make them resilient.

Built With

Share this project:

Updates