Building MGM's Web Check-In Flow

Lead Front-End Engineer · React, TypeScript, Next.js

Project Snapshot

The Web Check-In flow (aka WCI) is a Next.js web app built on the MGM Web Platform. It’s a micro-front-end rendered inside the MGM shell, which supplies the standard header and footer.

The Pain We Solved

Lobby lines at a large hotel aren’t fun. As part of the Front Desk of the Future effort, I built a web flow that lets guests check in from the comfort of their browser.

Under the Hood

The Web Check-In Flow is a sequence of pages that guide guests through the entire process.

Five-Step Guest Journey

Start page (reservation lookup)
Room add-ons and upgrades
Identity verification
Payment validation
Review & check-in

Implementation Highlights

An app-state context tracks each guest’s progress.
Every page fires one GraphQL query for data.
If a guest abandons the flow, they start over.
Guests are redirected to a third-party ID-verification flow, then returned as verified users.
On check-in, reservation data hits the back end to switch the reservation to “checked-in.”
Non-sensitive data lives in session storage.

Roadblocks & Fixes

Racing the Clock

An MVP had to ship in under three two-week sprints. One extra Saturday later, the pilot launched on time.

Taming the Full-Refresh Bug

The inherited shell triggered a full page refresh on route changes, wiping app state. The bug appeared only in certain environments, but once identified, I refactored navigation to keep state intact.

Impact in the Wild

The pilot property rolled out smoothly, and WCI is now live across all MGM properties. Adoption keeps climbing as more guests choose the hassle-free web check-in.