Caesars Rewards

Caesars Entertainment is an American hotel and casino company that operates more than 50 properties across the US. I partner with their Hospitality sector and lead on digital strategy and architecture.

What shipped (so far)

caesars.com (builder.io, akeneo, aws)
- Dynamic templating system to support different site layouts
- Custom static page renderer (AWS Lambda) to massively boost performance of all react native web pages built with Expo
Reusable omnichannel monorepo codebase
- Written in react native with exports for native and mobile
- Design system to component library supporting over 50 themes, driven by design tokens
- Monorepo ecosystem with NX and pnpm to accelerate delivery
Shared content API (AppSync GraphQL)
- Structured product catalog defined in Akeneo and exposed through shared GraphQL layer
- Non-product content models managed in builder.io and exposed through shared GraphQL layer
- Rich autoamated workflows with Workato to transform data for channels

Impact

Performance: Significant page load reduction and time-to-interactive (↑45% lighthouse score, 95+)
Cost/efficiency: >$500k+/yr saved
Time-to-market: New pages in minutes with ContentOps

My role & scope

Led discovery at beginning of transformation to identify pain points and shape multi-year technical roadmap
Partned with Cyber security to establish first set of AWS accounts for deploying future infrastructure for .com
Led architecture and implementation of first major channel - caesars.com website - in AWS, powered by React Native web in monorepo
Guided and mentored team members into new tech stack and ways of working

Key decisions & trade-offs

Custom static page renderer vs established framework (e.g. NextJS)
- Designed and implemented a lightweight custom Lambda that uses Puppeteer to scrape the page, extract virtual react native web styles and save a static HTML page. This was necessary because the react-native-web and module federation ecosystem did not support established frameworks, and Expo's static rendering as too immature - failing basic hydration on a number of dependencies.
Monorepo vs multiple reports
- Monorepo allows us to centralise and re-use code without friction, and duplication was a huge challenge we were solving
- Multiple repos allows individual teams to move faster but sharing code becomes more complex and duplication is a lot more likely
Reuse react native code for web vs write a web variant in pure React
- Reusing code theoretically allows teams to move faster from the same base for all channels, but complexity of those components increases
- Having a separate React web library allows for faster website delivery with easier web optimisations
Achieving static responsive styles in react native web
- React Native does not support media queries - it uses runtime JavaScript - meaning our static pages were not responsive
- Tactically, I had to create 3 versions of each page (mobile, tablet, desktop) to serve static HTML for each viewport (via CloudFront-Is-X-Viewer headers and Lambda origin routing)
- Strategically, I implemented a custom styled function internally that enabled media queries on web, forked from react-native-media-query, allowing us to move to a single static export and realize full performance benefits

What's coming

Caesars Rewards iOS and Android mobile apps, shipped from monorepo
A hotel check-in kiosk app
A full back-end modernization strategy with AWS and Node.js
Native TV apps built with react-native

See it in action

Some example live pages include:

Tech stack

AWS for all infrastructure, including some of the below:
- CloudFront, Lambdas, CloudFront VPC origins, S3, ALB
- AppSync, DynamoDB
- CloudWatch, CloudTrail
Terraform for provisioning infrastructure
Expo + React Native, including:
- react native web expo export
- react-native-media-query for responsive styles in web
- Storybook (for iOS, Android, web)
TypeScript, Node.js
Playwright, vitest, React Testing Library
GitHub & GitHub Actions