BreakPoint

• 

  Title Screen

• 

  Lobby Area

• 

  First Floor

• 

  Load Balancer Question

• 

  Elevator UI

• 

  Second Floor

• 

  Cache Question

THE CORE CONCEPT System design is notoriously difficult for junior developers and computer science students to grasp. Most learning resources rely heavily on dry architectural diagrams, whitepapers, or abstract interview preparation guides that don't let you see the immediate consequences of bad architecture. We wanted to build a game to turn abstract distributed system concepts—like e.g., load balancing, network partitions, caching strategies—into an interactive, hands-on game where players can physically see how and why systems fail under load before discovering how to fix them. BreakPoint is an interactive system design educational game. On each floor (or level) players are tasked with a handful of tasks to complete in order to progress further into the game, learning more about system design as they go. Some key features are as follows:

• Interactive Architecture Sandbox: Players place, configure, and connect components such as Load Balancers, Servers, Redis Caches, Database Replicas, and more.
• Real-Time Failure Simulation: Visualizing traffic spikes and simulating points of failure like overloaded servers, high deployment costs, and memory consumption.
• Immersive Developer Environment: Built with beginner level developers in mind, the game has reactive audio cues, a cute, pixelated art style, and an ambient office background to put players in the hot seat of an intern on their first day.

HOW WE BUILT IT

• Game Engine & Rendering: Built the interactive canvas and simulation state machines using Phaser 3.
• Language & Core Logic: Developed strictly in TypeScript to ensure type safety across complex system state flows, routing algorithms, and component registries.
• Audio & Atmosphere: Implemented an integrated sound manager in Phaser to handle multi-channel ambient office soundscapes and dynamic SFX triggers and scenario-specific music tracks.
• Tooling & Deployment: Bundled using Vite and deployed via [insert more here].

CHALLENGES WE RAN INTO

• Inconsistent Gameplay: Several times we found that there were inconsistencies with the appearance or logic between floors, which was given as our group branched and created them separately. Handling merge conflicts after coming together was the biggest hurdle that came from this.
• Balancing Education with Gameplay: Striking the right balance between technically accurate system design principles and intuitive, fun game mechanics required multiple iterations on all of the puzzles to not only make them different, but also specific to the niche they were teaching about.
• Audio & Asset Integration: Managing browser autoplay restrictions and ensuring audio assets loaded and looped seamlessly without interrupting user interactions across scene transitions.

WHAT WE ARE PROUD OF

• Designing and implementing a fully playable, gamified systems simulator from scratch within the hackathon timeframe.
• Crafting a cohesive developer aesthetic—from the IDE-inspired break.point() branding to the immersive audio design.
• Successfully translating complex computer science topics into digestible, interactive visual mechanics that junior engineers can immediately learn from.

WHAT WE LEARNED

• Deepened our understanding of game loop lifecycle management and sprite pooling in Phaser 3 with TypeScript.
• Learned how to effectively abstract distributed system patterns into intuitive visual puzzles.
• Gained experience with rapid asset pipeline configuration, Web Audio context handling, and end-to-end hackathon project delivery.

WHAT'S NEXT FOR BREAKPOINT

• More System Design Scenarios: More floors added for each building, and more buildings with varying niches to learn and develop.
• AI integration with ElevenLabs to give NPCs their own voice, and Gemini API to allow users to have their own conversations beyond just scripted dialogue.
• Tiger Data to save progress across game sessions using dedicated save points (perhaps a printer), allowing it to feel more like a game.

Built With

• json
• phaser.js
• typescript
• vite