Case study: BookWithKhelo
Sports Venue Booking App Development: BookWithKhelo
How we planned and built BookWithKhelo, a live sports venue booking platform: player bookings, venue owner and admin dashboards, and online and manual payments.
Published
BookWithKhelo is a live platform for booking sports venues in Pakistan: badminton courts, cricket grounds, football fields and more. We built the player booking flow, a dashboard for venue owners, an admin console, and online plus manual payments, on Next.js and Firebase. It went from first commit to payments, coupons and revenue reporting in about seven months.
This case study covers what a multi-venue booking platform needs, how we built it, and what we would change. Everything below comes from the codebase and the live site at bookwithkhelo.com.
What does a sports venue booking app need?
Three kinds of users, each with a different job:
| User | What they do |
|---|---|
| Players | Find a venue, pick a sport and a court, book a slot, pay, see their bookings, use coupons and rewards |
| Venue owners | Manage courts and sports, weekly schedules, discounts, terms, location and bank details; approve, reject or add bookings; see sales |
| The operator | Add, edit and remove venues and vendors, and see revenue analytics |
In our build the owner side is the largest group of API routes: 27 for venue owners against 9 for the admin console.
How do venue owners manage courts and bookings?
Each owner gets a dashboard backed by their own set of API routes. They can:
- add and edit courts and sports, with descriptions and terms per court
- set a weekly schedule template that generates bookable slots, instead of entering slots one by one
- set discounts, location, a maps link, phone number and venue features
- add bank details for payouts
- approve or reject booking requests, create bookings by hand for walk-ins and phone calls, and update payment status
- see a sales report
Manual booking matters more than it sounds. Customers who call or walk in still need a slot, and if those bookings do not go into the same calendar, the platform can double-book.
How do payments work?
Two paths:
- Online payment through Swich, a Pakistani payment gateway, with routes for authentication, the gateway callback and transaction confirmation.
- Manual payment, added in July 2025, for customers who pay at the venue or by transfer. Owners mark those bookings as paid.
In September 2025 we added a per-venue switch for online payment, driven by Firebase Remote Config. The switch lets the operator turn online payment off for one venue without shipping a new release.
What is it built on?
| Part | Technology |
|---|---|
| Web app | Next.js 15, React 19, Tailwind |
| Data and auth | Firebase: Firestore and Authentication |
| Config and messaging | Firebase Remote Config and Cloud Messaging for push notifications |
| Hosting | Vercel, with Vercel Analytics |
| Scheduled jobs | A daily job that builds sales reports |
Firebase let a small team ship authentication, real-time data and push notifications without running servers. Remote Config doubles as an operations switch, as the payment toggle shows.
How long did it take?
The first commit was on April 2, 2025. The bookings page followed in April, payment pages in June, manual payment in July, a new payment verification webhook in mid September, the per-venue payment switch at the end of September, coupons and rewards in September and October, the daily sales report job in October. The last change on the main branch was in November 2025: 144 commits over about seven and a half months.
What would we change?
Render pages on the server. The venue pages render in the browser, so search engines and AI crawlers receive almost no content, and the structured data is added client-side. For a marketplace that wants to be found for "badminton court near me" searches, venue pages should be server-rendered with their details in the HTML. It is the first thing we would fix.
Real reviews before ratings. The code can output star ratings in structured data, but only when a venue has a non-zero rating, and there is no review system yet. That is the right default: no ratings until real customers leave them.
If you are planning a booking platform or marketplace, our web development service covers this kind of build. Our own products, Taperlark and Synopt, show other parts of what we do.
Frequently asked questions
What features does a sports venue booking app need?
At minimum: venues with courts and sports, time slots from a weekly schedule, booking with confirmation, and payments. Venue owners need a dashboard to manage courts, prices, discounts, bookings and payouts. The operator needs an admin view of venues, vendors, bookings and revenue.
How do venue owners manage bookings on BookWithKhelo?
Through their own dashboard. They add courts and sports, set a weekly schedule template, discounts, location, terms and bank details, approve or reject bookings, create walk-in bookings by hand, record payments, and see a sales report.
How do payments work in a venue booking platform?
BookWithKhelo supports online payment through a Pakistani payment gateway and a manual payment path. Online payment can be switched off for individual venues from remote configuration, without a new release.
Build a custom booking platform or use Playtomic or CourtReserve?
Off-the-shelf tools are faster to start and fine for a single club. A custom platform makes sense when you run a marketplace across many venues, need local payment methods, or want your own rules for commissions, coupons and payouts.
What tech stack works for a booking platform?
BookWithKhelo runs on Next.js and React with Firebase for the database, authentication, remote configuration and push notifications, hosted on Vercel. A daily scheduled job builds sales reports. The stack let a small team ship bookings, payments and dashboards in months.