Overview
SIER Sport Arena is a sports complex in Surabaya with badminton courts, tennis courts, futsal fields, volleyball courts, a soccer field, and 3x3 basketball courts. Before this app, people booked by calling or messaging on WhatsApp. The staff would check a paper schedule, confirm availability, and write it down. Mistakes happened. Double bookings happened. Customers got frustrated.
They needed a booking system that showed real-time availability and let customers reserve courts themselves. Not a full e-commerce platform — they still wanted to handle payments in person. Just a way to see what's open and claim a slot.
I built SIER Sport Arena as a mobile-first booking app. Users browse available courts by sport and time, make reservations, and get confirmation. Staff manage the schedule from a web dashboard. The app syncs in real time, so double bookings are impossible.
The challenge wasn't the booking logic — that's straightforward. The challenge was making it simple enough that both customers and staff would actually use it instead of falling back to phone calls.
Client
PT Surabaya Industrial Estate Rungkut (SIER) manages an industrial estate with various facilities, including this sports complex. The arena is open to the public and popular with local sports clubs and casual players.
They wanted to modernize without losing the personal service. The app was meant to reduce admin work, not replace human interaction. Customers could book online, but they'd still pay and check in at the front desk.
Features
Court browsing shows all available facilities by sport type. Each court has photos, specs (surface type, lighting, capacity), and hourly rates. Users can filter by date and time to see what's open.
Booking flow is simple: pick a sport, pick a court, pick a time slot, confirm. The app checks availability in real time and reserves the slot immediately. Users get a booking confirmation with a QR code.
Booking history lets users see past and upcoming reservations. They can cancel bookings up to a certain time before the slot. The app sends push notifications for booking confirmations and reminders.
Staff dashboard (web-based) shows the full schedule across all courts. Staff can create bookings on behalf of customers, mark slots as unavailable for maintenance, and check in customers by scanning their QR codes.
Tech Stack
Flutter for the mobile app. GetX for state management and routing. Firebase Firestore for real-time data sync — it made sense here because availability needs to update instantly across all devices.
Firebase Cloud Messaging for push notifications. QR code generation for booking confirmations. Google Sign-In for authentication, though they also support phone number login.
The web dashboard is built with Flutter Web. Same codebase, different target. It's not the prettiest admin panel, but it works and the staff can use it without training.
My Role
Lead mobile developer. I designed the app architecture, built the UI, implemented the booking logic, and integrated with Firebase. I also built the web dashboard for staff.
The real-time sync was critical. If two people try to book the same slot at the same time, only one should succeed. Firestore's transactions handled this, but I had to design the data model carefully to avoid race conditions.
I also worked with the client to define business rules. How far in advance can people book? How late can they cancel? What happens if someone doesn't show up? These decisions shaped the app's behavior.
User testing revealed that the first version was too complicated. I simplified the booking flow, reduced the number of screens, and made the availability calendar more visual. The goal was to make booking a court as easy as ordering food.
The app has been live for over a year. SIER reports fewer double bookings, less admin work, and happier customers. They've told me the app increased bookings because people can now see availability without calling. That's the kind of outcome that makes the work worthwhile.