Building a shared baby with Next.js and NestJS

I built Grow The Baby, a small web experiment with one baby shared by everyone. Visitors can pay €1 to add or remove one day of his age. He moves through different life stages, and the story ends at 100 years. There are two contribution leaderboards and a shared name that visitors can buy the right to change.

The interesting engineering problem was keeping a collective game consistent while payments and visitors arrive independently.

I kept the application in two parts: a Next.js frontend and a NestJS API, with MySQL and TypeORM. One database record holds the baby's age, name and current naming price. The browser displays that state; it doesn't decide whether a paid action succeeded. The character uses SVG and CSS animations rather than a game engine.

For payments, the API first stores a pending purchase and creates a Stripe Checkout session. Returning to the success URL does not change the game. The change happens only when the API receives a signed checkout completion event with a paid status. It also checks the session ID, amount, currency and payment mode against the stored purchase.

Retries need their own handling. Checkout creation uses an idempotency key. The webhook locks the purchase record inside a database transaction and checks whether it has already been completed. Updating the game and recording completion happen together, so a repeated event doesn't add the same days twice. The shared game record is locked during updates too.

After a committed change, the API sends the updated state through Server-Sent Events. This fits the current single-process deployment: visitors receive updates without polling, and there is no separate message broker.

The site is live at https://growthebaby.com.

I'd appreciate feedback on one specific UX question: before opening the contribution form, is it clear that your action changes the same baby for every visitor?