Beyond Canvas: Frontend Game Architecture with React and Phaser

Frontend technologies are no longer limited to building websites. They can also form a practical toolchain for developing 2D games. This talk uses Final Inning Baseball as a case study to explore how React, Phaser, Redux, and modern frontend tools can be used to build a game product that runs on both Web and Mobile.

Phaser is responsible for the core game layer, including scenes, sprites, animation, input, and the game loop. React, on the other hand, is better suited for the application layer around the game, such as menus, settings, modals, UI states, flow control, and responsive interfaces.

When a game becomes more than an interaction inside a canvas and starts to include multiple screens, data flows, persistence, and product-level user experience, the boundary between Phaser and React becomes an important architectural decision. This talk discusses what state should stay inside Phaser, what state should be managed by React / Redux, how the architecture can be extended to mobile apps with Capacitor, and how this Web-based stack compares with Unity / Godot in terms of development speed, testing, automation, deployment, and product integration.