BookSlot

A tiny single-page service-booking widget. Pick a service, pick a slot, drop your details, get a booking reference. Mobile-friendly.

Comment

Inspiration

Every solo business owner I know has the same plumbing problem: a contact form is too low-friction, Calendly is too high-friction (subscribe, configure, brand it), and a custom booking page is a 3-day project. BookSlot is the booking widget I would have wanted at my first side gig: one page, three services, seven days of slots, done.

What it does

A single deployed page that a small business can drop into their site or share as a direct link.

  • Pick a service (Classic Haircut $25 / Premium Grooming $45 / Quick Styling $15 in the demo, or change them)
  • Pick an available slot from the next 7 days (9am to 5pm grid)
  • Drop name, email, phone, optional notes
  • Get a confirmation card with a unique booking reference (BSlot-XXXX)

No accounts, no payment integration, no admin dashboard. Bookings live in memory for the demo (swap in a Supabase table when you go live).

How I built it with MeDo

One Deep Build prompt described the layout (service cards, 7-day calendar, customer form, confirmation card), the booking-reference format, and the warm peach + cream palette. MeDo produced a Requirements doc with the four page sections and acceptance criteria, then generated a Vite + React + Tailwind app with the slot grid and reference generator. No follow-up turns needed.

Plugins and APIs used

  • React + Vite + Tailwind (MeDo default stack)
  • In-memory booking store (sessionless; one click to swap for Supabase)
  • Mobile-first responsive Tailwind grid

Challenges I ran into

Getting the 7-day calendar to feel breezy. The first pass put all 56 slots on the page at once and it was too dense. Tightening to one day at a time (with day-tabs above the slot grid) made it usable on mobile. Booking reference uniqueness uses a 4-char random suffix; that is fine for the demo (96^4 = ~85M combinations) but I would swap in a counter or ULID for production.

What I learned

The friction in MeDo was UX-fitness, not code-fitness. The generated code worked first try. The judgment calls were about density and tap targets, which I wouhttps://app-bqzuzb6gzc3l.appmedo.comld have had to make whether the code came from MeDo or my own hands.

What is next

  • Swap the in-memory store for a Supabase table (1 prompt)
  • Email confirmation via Resend (1 prompt)
  • Embeddable iframe + lightweight branding controls

Built With

Share this project:

Updates