Commerce Booking Platform
Built custom Node.js/React booking system integrated with Shopify for a hospitality business.
Context
The problem
The hospitality business offered experiences that didn't fit standard booking tools. They needed availability by time slot, capacity management, add-on upsells, and integration with their existing Shopify store for merchandise. The manual booking process involved phone calls, spreadsheets, and email confirmations—limiting both capacity and customer experience.
Constraints
What we were working with
- →Must integrate with existing Shopify store for unified checkout
- →Real-time availability required across multiple booking APIs
- →Mobile experience is critical—most bookings happen on phones
- →Payment processing must handle deposits and balance payments
- →Staff need simple admin interface for managing bookings
Approach
How I tackled it
- 01Mapped the complete booking journey from customer perspective
- 02Designed a unified availability engine that aggregates multiple sources
- 03Built the booking flow as a headless application embedded in Shopify
- 04Implemented real-time availability checks to prevent overbooking
- 05Created an admin dashboard for staff to manage bookings and capacity
- 06Added automated email confirmations and reminders
Architecture
Technical design
Node.js backend handles availability calculation and booking logic. React frontend provides the customer booking experience, embedded in Shopify via app blocks. Shopify handles checkout and payment processing.
- •Real-time availability aggregation from multiple booking sources
- •Shopify Checkout Extensions for seamless cart integration
- •Webhook-driven order processing for instant booking confirmation
- •Redis caching for availability data to handle traffic spikes
- •Background jobs for email notifications and calendar syncing
Technical Artifact
Custom booking platform architecture showing how the React frontend communicates with the Node.js availability engine and Shopify checkout.
What you're looking at:
- •React frontend embedded in Shopify via app blocks
- •Node.js backend aggregates availability from multiple sources
- •Redis caching handles traffic spikes during peak booking times
- •Shopify webhooks trigger instant booking confirmations
Delivery
What I shipped
Customer booking interface: mobile-first design with real-time availability
Availability engine: aggregates and calculates bookable slots across locations
Shopify integration: bookings appear as line items, processed through Shopify checkout
Admin dashboard: manage capacity, view bookings, handle modifications
Automated communications: confirmation emails, reminders, follow-ups
Reporting: booking analytics, revenue tracking, capacity utilisation
Outcome
The result
Online bookings tripled within three months of launch. The staff who previously spent hours on phone bookings now focus on customer experience. Booking abandonment dropped 40% thanks to the streamlined mobile flow. The business can now scale capacity without proportionally scaling admin effort.
Lessons
What I learned
- 1
Real-time availability is harder than it looks—race conditions and caching need careful handling
- 2
Shopify's checkout is worth keeping; building custom payment flows rarely makes sense
- 3
Mobile-first isn't just responsive design; it's rethinking the entire flow for thumb navigation
- 4
Staff buy-in matters—the admin interface needs as much UX attention as the customer side
Facing a similar challenge?
I'd be happy to discuss your situation and explore whether I can help.