Skip to content
← All projects
/ Case study · Web app · browser booking

MAVE Booking Web App

Choose a treatment. Hold a slot. Pay a deposit.

Book in the browser: choose a studio, treatment, and available time, then secure the appointment with a deposit.

Live booking at booking.mavebeauty.co.id

MAVE Booking Web AppChoose a studioChoose a studio01 / 04
For developers
Web
Next.jsTypeScriptDrizzleTursoXendit
What I did & the proof ↓
Web
MAVE Booking Web AppProduct tour

Choose a screen to see the product’s features and main flow.

MAVE Booking Web App: Choose a studio
Screen by screen

Choose a studio

Both studio choices include their current operating policy.

Live MAVE Booking v2.12.0

1 / 4
MAVE Booking Web App · Choose a studio
Real product screenshots. Everything you click stays inside this portfolio.
The problem
Treatment duration, studio availability, and deposits must line up before an appointment.
What I built
A browser booking app with treatment choices, slot holds, and Xendit deposits.
What it enables
Customers see the treatment price and deposit before choosing an available appointment.
Feature highlights
  • Live v2.12.0 studio & treatment flow
  • Treatment duration, price & deposit
  • Availability, slot hold & Xendit
Built with

Next.js / TypeScript / Drizzle / Turso / Xendit

Designed and built by Alexanders Schwartzmann · start to finish

  • Browser booking UX
  • Availability & booking backend
  • Deposit & Xendit integration
  • Appointment and account data
See what I did and the proof ↗
Want something like MAVE Booking Web App?

I can build one around how your business works.

Talk about a similar project
What I did

I designed and built this project from start to finish.

Project creator

Alexanders Schwartzmann

From the product idea and design to the code behind the features below.

My implementation scope
  • Browser booking UX
  • Availability & booking backend
  • Deposit & Xendit integration
  • Appointment and account data

How the main flow works

  1. 01

    Studio, treatment & duration

  2. 02

    Availability rules & calendar

  3. 03

    Pending appointment hold

  4. 04

    Deposit confirmation from Xendit

Proof of the work

What was built, how it works, and why it was built that way.

01 / Real screen & code

Scheduling follows treatment duration

Availability and booking creation account for treatment duration, operating hours, existing bookings, and treatment blocks.

Technical decision

A time slot is checked against operational rules, rather than treated as an unrestricted calendar selection.

02 / Real screen & code

Deposits have a server confirmation path

The payment callback checks its token and processes payment status through the booking backend.

Technical decision

Returning from a payment page alone is not the payment confirmation; the backend handles the callback.

About these screens

Screens from the live booking site, version 2.12.0. They stop before a slot is held or a deposit is paid.

Live MAVE Booking v2.12.0 ·

The problem

Booking must make the studio, treatment, time, customer details, and deposit easy to understand while protecting appointment availability.

Feature highlights

  • Live v2.12.0 studio & treatment flow
  • Treatment duration, price & deposit
  • Availability, slot hold & Xendit

Current implementation

The live v2.12.0 flow has five steps. Both Gading Serpong and Jakarta Barat are selectable with their operating policies. Sulam, lashes, and nails have different deposit terms; specific treatments show duration, price, and DP. Next.js, Drizzle, Turso, and Xendit support customer identity, availability, transactional slot holds, and deposits.

Explore the real product

These frames come from the active v2.12.0 website. They stop at calendar inspection; no appointment was held and no deposit was paid. The linked native apps are available through the product’s current App Store and Google Play links.