Pervaj Ahmed TuhinUpdated How We Built Five Star Mobile Valet's New Site
The Five Star Mobile Valet site lets a customer pick a package, choose a slot and pay, all in one flow. This is how we built it, and the decisions behind the booking flow.
What did the site need to do?
Five Star is a mobile valeting service, so a booking is a job at the customer's door, not a table at a venue. The site had to do more than describe packages.
- Show what each package includes, how long it takes and the price range.
- Let the customer choose a package, vehicle size, location and slot.
- Take payment online, or let them pay on the day.
- Handle a cancellation without anyone doing sums by hand.
How does one price table drive the quote and the charge?
Prices live in one table, keyed by package and vehicle size, with a separate list of add-ons. The booking page uses it to show the total. The payment route uses the same table to work out the amount to charge.
The browser never sends a price. It sends the package, the vehicle size and the add-ons, and the server calculates the amount. That keeps the quote on screen and the card charge in step, and stops anyone changing the amount in the page.
How do scheduling and bookings stay in step?
Scheduling runs through Calendly, with a separate Calendly link for each package. The booking flow has four steps: select a service, choose location and time, enter details, then pay.
When the customer picks a slot, the site saves the date, time and Calendly references against the booking's own reference number. A Calendly webhook then keeps the booking in line afterwards: a new invitee marks it as scheduled, and a cancelled one marks it as cancelled.
How do payments and cancellations work?
Customers choose online payment with Stripe or pay on the day. When a Stripe payment succeeds, a webhook confirms the booking and records the payment.
The cancellation rule is in code. A cancellation made within 24 hours of the slot keeps 25 per cent of the amount paid, and Stripe refunds the rest. An earlier cancellation is refunded in full. A booking to be paid on the day has nothing to refund. The site's cancellation policy states the same rule, and the code is what enforces it.
What does the team manage?
A password-protected dashboard has three tabs: bookings, contact messages and payments. Each can be filtered by status, and a booking can be moved between pending, confirmed, completed and cancelled. Confirmation and contact emails go out through EmailJS.
What is it built with?
- Next.js, React, TypeScript and Tailwind.
- Supabase for bookings, contact messages and payment records.
- Stripe for payments and refunds, and Calendly for scheduling.
- Hosted on Vercel.
First published
Pervaj Ahmed Tuhin is the Co-Founder and Chief Technology Officer of Ravenence, leading how the sites are built and structured.
