SSStefan Saladino← Selected work

02 / Case study

Browser game · Creative engineering

Home Run Derby PWA

A browser baseball game built with React, Phaser and shared TypeScript.

Home Run Derby PWA combines a React interface with Phaser gameplay, player accounts and saved progression. It is designed to work on both desktop and mobile, with the same game rules shared across the frontend and API.

ROLEProduct designer · Gameplay and full-stack developer
SCOPEGame systems, UI, responsive presentation, domain architecture and integration
STACK
  • React
  • TypeScript
  • Phaser
  • Node.js
  • Supabase
Home Run Derby PWA practice screen showing Shohei Ohtani selected at Oracle Park
REAL PRODUCT SCREENPractice setup · Oracle Park

System architecture

How the game and app stay in sync.

01React shell
02Game bridge
03Phaser runtime
04Shared game core
05Persistent profile
01

THE CHALLENGE

React and Phaser have to feel like one product.

The project has a conventional React application and a real-time Phaser game. Player profiles, tournaments, stadiums, ball flight and saved progress all have to agree, even though they run in different parts of the application.

02

WHAT I DID

I split the project into focused packages.

I organized the code into web, API, shared and game-core packages. Shared TypeScript contracts keep the interface and gameplay aligned, while focused tests cover motion, avatars, tournaments, persistence and stadium-specific behavior.

03

WHERE IT STANDS

New game systems can be added safely.

The game now has a structure where I can work on a stadium, animation or gameplay system without rewriting the rest of the product. Each addition can be tested on its own before it is connected to the full game.

4workspace packages
2connected interfaces
Sharedgame rules
Responsivedesktop and mobile

Next case study

Collaborative PWA