How Playon builds ticketing and iOS apps with Expo, Stripe, AWS and LaunchDarkly

Schools are often overwhelmed with administrative work and don’t have time to manage all their events and activities in multiple platforms, promote their events, AND create an engaging fan experience.

PlayOn solves that problem.

We empower schools with applications and services to connect, communicate, and compete like never before. Schools can save time with a complete solution for ticketing, streaming, fundraising, concessions, sponsorships, and website management in one trusted and dependable platform. With PlayOn, schools can engage their communities and energize the event experience.

Building a platform that delivers all these services to thousands of schools and millions of end users is a challenge. In this blog, we’ll focus on our experience building ticketing and point-of-sale applications with Expo, AWS, Stripe, LaunchDarkly, and other technologies.

Why PlayOn chose to build with Expo

In our latest major app upgrade, PlayOn needed full-feature parity in iOS, Android, and web. A huge concern was being able to optimize the app for bursty seasonal peak traffic. We also wanted a platform that could support a team of JavaScript and React experts with varying levels of native app development experience.

Flutter and Ionic were investigated as alternative native development frameworks. We also considered having separate applications for web and native, but settled on a single codebase using React Native Web. React Native Web allowed us to reuse much of our frontend logic and quickly deliver feature parity on multiple platforms at once.

We chose Expo as our framework because it helps development teams in many ways. Expo further abstracts native hassles like managing certs and distributing builds. We’ve used Expo Go to prototype applications quickly, and Expo’s debugging tools have saved us countless hours of troubleshooting time.

It wasn’t a challenging decision to go with Expo. Members of our team had experience with it at other companies. I had been an early adopter of React Native in 2016. And over the years, I’ve watched the React Native developer experience improve significantly. Autolinking and The New Architecture come to mind as major advancements, as well as big improvements with Expo, like the additions of Expo Prebuild and EAS.

After years of community contributions, React Native apps now feel like natural iOS and Android native applications, to users and developers alike. We knew we could build great applications with Expo.

What does PlayOn build?

At PlayOn, we partner with over 15,000 high schools and 64 state and conference associations to set the standard for in-person, live-stream, and on-demand events. Millions of people nationwide access events with PlayOn.

Our ticketing products leveraging Expo are GoFan and Box Office. GoFan is our consumer iOS, Android, and web application for users to buy tickets to events. Box Office is our point-of-sale iOS application for schools to sell tickets, concessions, merchandise, and more at school venues.

The architecture of GoFan

The GoFan application enhances the fan experience beyond the gate, by providing a personalized and flexible way for fans to purchase and redeem tickets. Fans can follow their favorite schools and teams, discover upcoming events, and more.

With the Box Office application, schools can sell tickets, passes, digital concessions, reserved seats, and merchandise in addition to collecting donations onsite. Schools can accept payments with credit and debit cards, Apple Pay, and Google Pay using iOS devices and card readers. Schools can also use Box Office for offline redemption to scan tickets for event entry.

The GoFan (ticketing) and Box Office (point-of-sale) apps are very similar architecturally. The biggest difference is that Box Office is iOS-only and integrates with the Stripe Terminal card reader. We provide many schools with iPads that have Box Office pre-installed, along with Stripe M2 Readers.

For GoFan and Box Office, the development team has many git branches in flight for upcoming releases. When any pull request is merged to a release branch, our CircleCi pipeline runs a number of quality scans including unit tests, smoke tests, security scans, and more. After all quality checks pass, the pipeline runs a “sync” script that merges all new commits to all the subsequent release branches, alerting us of any merge conflicts for immediate resolution. Once all the releases are in sync, the entire team (devs, QA, design, and some business stakeholders) has permission to run EAS builds for any upcoming release, targeting any of our many backend API test environments. Thanks to Expo’s support for React Native Web, we can generate web builds and run ECS deployments for our web application from the same pipeline. After a production web release, we will immediately submit the latest production EAS builds to the iOS and Android stores.

GoFan and Box Office integrate with many of the PlayOn backend APIs to display information about schools, teams, and events. Fans can add tickets, merchandise, concessions, and more to their carts. When they are ready to check out, the apps integrate with Stripe’s React Native SDKs to render payment elements and confirm payments. This keeps the entire payment process secure by leveraging Stripe’s secure APIs and never storing or transmitting any of the users’ card data through our own servers.

Our native CI diagrams are a blend of Expo’s recommended “Persistent Staging” and “Branch Promotion” flows, with some additional steps to deploy our react-native-web application to AWS. Expo has some of the best documentation out there (deployment patterns for example) for managing React Native projects.

Here is a basic high-level overview of how we run builds of our application code. Thanks to react-native-web, the same codebase has many pipelines for running web builds via Nextjs, and native builds via EAS.

• AWS powers most of our production workflows. We have many AWS experts with a variety of skill sets. We use ECS to host our production web applications (running react native-web code), and a multitude of backend services, some of which integrate directly with our Expo apps.
• We use Stripe as our platform for all payment processing in our applications. Our Expo apps integrate with Stripe directly and use several Stripe npm packages.
• Lately, we have also leveraged LaunchDarkly for feature flagging in our Expo applications (and other applications). We are regularly discovering new use cases for feature-flagging, and it has become a powerful tool in the planning and delivery of new features.

This architecture is continuing to evolve as we discover new opportunities to deliver valuable features faster and with higher quality. On previous versions of these apps which did not use Expo, the native build process was cumbersome and required the time of senior engineers to generate test builds for our various testing environments. Development environments were brittle and builds were slow.

Now, Expo has become the backbone of how we generate native development environments and builds, and it has enabled a team of many developers and stakeholders to move fast on new ideas. This pipeline, along with LaunchDarkly feature flags, has increased the team’s confidence and innovation. Having these tools has given us new opportunities to quickly prototype and experiment that we did not have previously.

Expo tools and services used at PlayOn

“Expo” means different things to different developers. Some people just think of open-source libraries when they hear “Expo”. Some people think of their Build service and others just think of Evan Bacon’s Twitter feed. So I’ll detail here what parts of Expo we use at PlayOn:

• EAS build allows many developers of all experience levels to target and distribute builds across our multiple environments quickly and easily. EAS build has given autonomy to our QA team who can run their own builds without having to wait on developers.
• We use EAS Submit for automatically uploading our production builds to TestFlight and Google Play, which speeds up our releases.
• Expo-store-review allows us to connect with our fans and get valuable feedback. We introduced some prompts with this library a few months ago. Using this tool to connect with our fans gave us invaluable feedback.
• Expo-brightness: We use full brightness when users enter the gate in case they are in a dark stadium.
• Expo-location: lets us serve users more relevant results for school search.
• Expo-dev-client: We were hesitant to drop support for Expo Go, which our developers were all familiar with, but switching to expo-dev-client brought consistency to our dev environments and its debug tools have improved our developer experience.
• Expo-linking: We had many production web URLs that needed to support deep linking after our migration.

The ROI of Expo: Developer autonomy and time saved

Prior to building with Expo, we had a React web SPA and a bare React Native iOS app that was difficult to maintain, did not have native feature parity, and did not support Android. We now have a single codebase that continues to evolve and supports all three platforms, with full feature parity. That alone is a sufficient ROI, but the value of Expo has gone much further for us.

Building and distributing our iOS builds used to be challenging because it required the involvement of senior developers for simple builds, and we had limited testing environments. With Expo, developers and test engineers of all experience levels are empowered to build and distribute apps across multiple test environments whenever they want. The result is a higher quality app that is easier to maintain and continuously delivers new features and optimizations.

Expo-dev-client and EAS, along with Expo’s developer tools, have saved our team countless hours in setting up builds and context switching. Using EAS with our internal pipelines has improved communication with our QA team and increased everyone’s autonomy. We have a robust development runway for native applications that would not be possible without Expo.

Another pleasant surprise is just how many React Native packages work out of the box with Expo nowadays, and how many package developers intentionally support Expo. In the early days, there were many compatibility issues between JavaScript, React Native, Expo, XCode, and Android Studio, with many painful native “gotchas”, but now packages generally tend to “just work” in a way that could be taken for granted by new adopters. Due diligence is still needed to ensure the quality and compatibility of any package, but the community has come a long way, and it feels like anything is possible.

Advice for Expo devs

The React Native community is innovating fast, but one consequence of this innovation is that packages fall out of date quickly. Being on top of package management is essential to the survival of React Native applications.

Thankfully, Expo version updates are usually straightforward, and Expo provides great documentation. These updates provide a good opportunity to audit and update the rest of your packages and keep the team informed of the latest API changes and improvements.

What’s next for PlayOn?

PlayOn will continue to innovate and build products that serve our schools best and allow them to connect with their communities in dynamic and engaging ways.

As for Expo, we are excited about Expo Router and how it will simplify our routing and navigation across platforms. We are also planning to leverage EAS Updates to speed up delivery. With Expo as a core part of our team’s tool set, we continue to find new and exciting opportunities for our applications.

Andrew Kirchmyer, Lead Engineer