MOBILE APP CASE STUDY

Skyzone Trampoline Park App: Skip the Queue With a Cross-Platform Booking Experience

WebSpero designed and shipped a cross-platform React Native app for iOS and Android that connects Skyzone’s operations through live Roller API synchronisation. Guests skip the line and book jump tickets, memberships, birthday parties, and café orders from their phones.

2

Platforms Shipped
iOS · Android

9+

App Feature Modules
Tickets · Memberships · Parties · Café & more

1

Unified Data Layer
Roller API + MySQL in sync

3

Payment Methods
Apple Pay · Credit · Debit

Project Context

Client
Skyzone Trampoline Park

Niche
Indoor Entertainment · Mobile App (iOS + Android)

The Tech Stack

  • React Native
  • Node.js
  • MySQL
  • Firebase

"We needed one app for iOS and Android, connecting our online and offline ticketing through the Roller API, with customer data in MySQL, to eliminate long lines for pass and ticket purchases."

The core problem was simple: guests were queuing to complete transactions they could finish on their phones. Solving it required a live bridge between Roller’s POS and the mobile app so every booking stayed consistent across both. The MySQL layer stored app-specific data like reward points, waiver records, and push preferences that Roller doesn’t handle natively.

Founder, Skyzone
(Operations Lead)

THE APP

Skyzone Trampoline Park

Skyzone connects the park’s point-of-sale system to a guest-facing booking experience on iOS and Android. Every ticket purchase, membership update, and café order stays in sync whether it originates at the desk or on the phone.

For Park Guests

  • Browse and purchase time-based jump tickets by slot
  • Book birthday party packages with availability calendar
  • Buy and manage annual or monthly memberships
  • Order food and drinks from the in-park café menu
  • Earn 1 reward point per $1 spent; redeem at checkout
  • Complete digital waiver signing before arrival
  • Pay via Apple Pay, credit card, or debit card
  • View park open/close schedules and location info
  • Receive push notifications for promotions and nearby offers

HOW WE BUILT IT

A Phased, Integration-First Build Process

We front-loaded the Roller API integration before any consumer screens were written. Every booking flow and data sync was verified against the live system from day one. Consumer features were built on a confirmed data contract, not a mocked one.

Discovery & API Mapping

Audited Roller’s endpoints for tickets, memberships, parties, and waivers. Mapped every field against the client’s offline process to identify what Roller

owned and what MySQL needed to supplement.

Architecture & DB Design

Designed the Node.js middleware layer and MySQL schema.Defined the sync strategy: which records Roller owns,and which live in MySQL

(rewards, device tokens, waiver completions).

Backend & Roller Integration

Built and tested all Roller API connectors for booking creation, membership management, waiver status, and real-time availability.

Implemented Firebase for push notifications and device token management.

Core App Screens

Converted Figma designs into React Native screens: authentication, home dashboard, ticket booking, party booking, membership purchase, and rewards, all

wired to live backend endpoints.

Payments & Waiver Module

Integrated Apple Pay and card payments with PCI-compliant tokenisation.Built the digital waiver signing flow with completion status

synced to MySQL and surfaced in the operator view.

Café & Printer Integration

Built the café module covering menu browsing, cart, order placement, and order status.Integrated WiFi printer for kitchen ticket printing, with

order confirmation pushed to the guest’s device.

Geofencing & Notifications

Implemented geofence boundaries around each park location.Configured Firebase Cloud Messaging to deliver location-triggered

promotional notifications when guests enter defined proximity zones.

QA & Store Submission

End-to-end regression across iOS and Android covering booking flows, payment edge cases, offline states, and geofence accuracy. Prepared and submitted

builds to the App Store and Google Play.

WHAT WE BUILT

Nine Feature Modules Connected to a Single Live Booking System

Skyzone ships as one app for iOS and Android, connected in real time to Roller’s POS. Below is the product in the order a new user would meet it.

Authentication & Onboarding

Guests register or log in with email/password or social auth. Firebase handles session tokens across both platforms. First-time users complete a park selection and digital waiver flow before reaching the home screen, so compliance is done before any booking is attempted.

Jump Ticket Booking

The booking flow shows live slot availability pulled directly from Roller. Guests select duration and guest count, then complete checkout with card or Apple Pay. A confirmation and QR code are delivered instantly with no desk stop required. Slot availability updates in real time so guests never hit a sold-out session at checkout.

Memberships

Guests browse membership tiers, see pricing and benefits, and purchase in-app with their saved payment method. Membership status syncs back to Roller immediately, so the plan is active across the app and front-desk POS without any manual staff step. Expiry date and next billing details are visible at a glance on the home screen.

Birthday Party Booking

Guests choose a date and time, select a package (Gold, Platinum, Silver), provide party size, and submit a reservation, all synced to Roller’s event management system. Party slots follow different capacity rules from general jump tickets. Availability is surfaced on a calendar view with package details and guest count inputs on the same screen.

Café Module & WiFi Printer Integration

Guests browse the café menu, add items to a cart, and place orders from the app. Orders go to the kitchen’s WiFi printer in real time. The guest receives in-app status updates: received, preparing, ready. This removes the physical café queue and gives staff a single order source of truth.

Rewards & Points Redemption

Guests earn one point per dollar spent across all in-app purchases. Points are stored in MySQL and displayed in a dedicated rewards screen, tiered by level (Bronze, Silver, Gold, Platinum), with the option to apply them as a discount at checkout. The system tracks accumulation and redemption history per user.

Geofencing & Location-Based Notifications

Each park location has a geofence boundary. When a guest’s device enters the zone, Firebase Cloud Messaging triggers a push notification with offers or updates personalised by location. The system handles multi-park setups with separate geofence configurations per venue.

Park Schedule & Location Info

A schedule module shows open and close times, special hours, and closures per park location. Staff update hours via the admin backend without a code release. Guests can view location details and link out to directions from the home screen.

THE CHALLENGES WE SOLVED

Engineering the Integration Layer Between a Live POS and a Consumer App

The Skyzone app was a new front end for an existing operational system. Every feature had to stay consistent with what Roller knew. The real engineering difficulty lived in the integration and sync layer, not the UI. Six problems shaped how we built it:

Two Systems, One Truth: Roller API + MySQL Sync

Roller owns tickets, memberships, and party bookings. The mobile app needed additional data like reward points, device tokens, and waiver completions that Roller doesn’t store. We built a Node.js middleware layer that writes app-specific data to MySQL while routing all booking and inventory operations to Roller. Foreign key references to Roller’s user and booking IDs maintain relational integrity across both systems without duplicating records.

Precise Geofencing Across Multiple Locations

Indoor venues are physically compact and park locations can sit close to other commercial buildings. Standard radius-based geofences triggered false positives. We used polygon-based geofences with tuned radius thresholds per location. Geofence events are processed server-side with a debounce to prevent repeated notifications if a device oscillates around the boundary.

WiFi Printer Reliability for Café Orders

Kitchen WiFi is noisy and subject to interference from guest devices. Print jobs had to be guaranteed even under degraded network conditions. We implemented a queued order delivery model with retry logic and acknowledgement confirmation. If the printer doesn’t confirm receipt within a timeout window, the order is requeued and an alert is surfaced to staff.

Complex Time-Slot Booking Logic

Jump ticket slots have capacity limits and duration rules that differ from party bookings. Overbooking is operationally worse than showing a slot as unavailable. We pull live capacity state from Roller at query time rather than caching it, and apply a short-lived reservation lock in MySQL during checkout to prevent double-booking. The lock expires automatically if checkout is abandoned.

Apple Pay and Cross-Platform Payment Integration

Apple Pay is iOS-only, while card payments had to work identically on both platforms. We abstracted the payment provider behind a unified checkout hook that adapts its UI per platform while keeping server-side order handling consistent. Tokens are sent to the Node backend for charge execution and card numbers never touch the app server.

Real-Time Order Tracking and Café Notifications

Café order status moves from placed to preparing to ready in near real time, with push delivery at each state change. We used Firebase Realtime Database to push order state updates from the kitchen admin interface to the guest app, with FCM handling push delivery when the app is backgrounded. This enables sub-second updates without polling.

WHAT WAS DELIVERED

A Production-Ready Cross-Platform App With Live POS Integration

WebSpero delivered a complete iOS and Android app, a Node.js backend with live Roller API integration, a MySQL layer for app-native data, Firebase-powered push and geofencing, and a WiFi printer integration for café orders. All from a single codebase, live on both stores.

VISION DELIVERED
Platform An app that works on both iOS and Android Single React Native codebase shipping native builds to both App Store and Google Play
Data Sync Online and offline process data in one place, synced to Roller Node.js middleware bridges Roller API and MySQL; all booking and membership events are consistent across POS and app
Queue Elimination Reduce long wait times to purchase passes and tickets Guests complete ticket purchase, party booking, and waiver signing before arrival; desk queue is optional, not mandatory
Café Operations In-park café integration Full café module with menu browsing, in-app ordering, real-time order status, and WiFi printer delivery to kitchen
Loyalty Reward points at $1 = 1 point, with redemption Points earned per transaction stored in MySQL, redeemable at checkout, with full balance and history view in-app
Location Engagement Location-based offers for nearby guests Polygon geofencing per park with Firebase-triggered promotional push notifications on proximity entry

WHAT TO EXPECT FROM US

Transparent Engineering and Predictable Delivery for Consumer Apps Connected to Existing Systems

If you are building a consumer mobile app that connects to an existing POS or booking system, here is what working with our team looks like.

We audit your third-party APIs before writing a line of app code:

If your product depends on an external system, we map every endpoint, rate limit, and data contract in discovery. Features are built on a confirmed, tested integration, not assumptions that break at launch.

One codebase, two platforms, no compromise on either:

React Native lets us ship iOS and Android from a single codebase, but we don’t use that as an excuse to cut platform-specific corners. Apple Pay, push permissions, and native UI patterns are implemented correctly per platform.

We tell you what the scope actually is, not what sounds good in a proposal:

Booking locks, concurrency edge cases, printer retry logic: we spec the awkward parts up front and estimate honestly. If a feature adds three weeks, you know before you sign off.

Data architecture is decided early, not retrofitted later:

When your app needs a third-party system and an app-native data layer to coexist, we design the boundary before any code is written. Getting it wrong at week one creates data consistency bugs at week twelve.

Notifications and location features are tested on real devices, not just emulators:

Push delivery, geofence accuracy, and background behaviour all differ between simulators and hardware. We test across iOS and Android versions before marking these features complete.

The app ships to both stores. That is the finish line, not “dev complete”:

App Store and Google Play review cycles, certificate management, build signing, and store listing setup are all part of the engagement.

TECHNICAL NOTES

The Architecture, Infrastructure, and Tooling Powering the Skyzone App

React Native Architecture

Single codebase targeting iOS and Android with a shared component library. Platform-specific branches handle payment UI and notification permission flows. Navigation uses React Navigation with deep-link support for push-triggered opens.

Roller API Integration

All Roller interactions are proxied through the Node.js backend; the mobile client never calls Roller directly. This keeps credentials server-side, allows response normalisation before delivery, and centralizes retry logic.

MySQL Data Layer

MySQL stores what Roller doesn’t own: reward point balances, point transaction history, digital waiver completions, FCM device tokens, and notification preferences. Foreign key references maintain relational integrity.

Firebase (FCM + Realtime DB)

Firebase Cloud Messaging handles all push delivery. Firebase Realtime Database powers the live café order state feed between the kitchen admin and the guest app, enabling sub-second updates without polling.

Geofencing Implementation

Polygon geofences are defined per park location rather than radius circles. Geofence events are processed server-side with a debounce to prevent repeated trigger notifications if a device oscillates around the boundary.

Payment Infrastructure

Payment tokenisation is handled client-side via the payment provider SDK; tokens are sent to the Node backend for charge execution. Apple Pay runs through the native iOS payment sheet. Reward point redemption is calculated server-side.

WiFi Printer Integration

Café orders are dispatched to the kitchen printer via the local network using a print server adapter on the Node backend. Orders are queued with retry logic and a configurable timeout. Failed print jobs surface as alerts.

Booking Lock & Concurrency

Time-slot bookings apply a short-lived reservation lock in MySQL when a guest enters checkout. The lock prevents double-booking during the payment window. Roller’s booking creation is called only after payment succeeds.

Building a consumer app that needs to connect to an existing POS or booking system? Book a 30-minute architecture call with our engineering lead. We will map your integration surface, identify the sync risks, and tell you what the build honestly requires.

Reply to start a call

webspero.com/contact · hello@webspero.com