Book-it

• 

  Landing hero (headline + ticket) "The landing page: one link replaces the DMs back-and-forth for booking a local business."

• 

  Problem + "Live in about five minutes" steps "The problem Book·it solves, and how fast a vendor can go live: minutes, not days."

• 

  Dashboard with stats + QR code "A vendor's dashboard: bookings and revenue this week, plus a QR code to print for the shop."

• 

  Upcoming bookings + services list/form "Vendors manage bookings and add services (name, price, duration) right from the dashboard."

• 

  Opening hours "Setting weekly opening hours, this is what generates real available time slots for customers."

• 

  Customer booking page (service → day → time) "The customer view: pick a service, pick a real open day and time, no account needed."

• 

  Booking confirmation / manage page "Every booking gets a private manage link, so customers can cancel it themselves anytime."

Inspiration

Small businesses like barbershops, tutors, and home food sellers still book appointments by chatting back and forth: "are you free Friday?", a forgotten reply, a double-booked slot. The tools to fix this exist, but they're usually built for big companies with big budgets. I wanted to build the same experience, one link, real open times, instant booking, for someone running a business solo, with zero setup cost.

What it does

Book·it lets any small vendor create a free booking page in about a minute. They add their services (name, price, duration) and their opening hours, then share one link or a downloadable QR code. Customers open that link, pick a service, pick a real open time slot, and book, no account, no app required.

On the vendor side, bookings appear live on a dashboard the instant they happen, with a sound and a browser notification, powered by Supabase Realtime. Vendors can confirm or cancel bookings, see weekly revenue and booking counts, and customers get automatic email confirmations plus a private link to cancel their own booking if their plans change. The whole thing is installable as two separate PWAs, one branded experience for vendors managing their business, and a second one personalized per vendor for their customers (installing "Joe's Barbershop" gives you an app named exactly that).

How we built it

• Frontend: plain HTML, CSS, and JavaScript, no framework, to keep it fast and dependency-free
• Backend: Supabase (PostgreSQL) for auth, database, and Row Level Security, so every vendor can only ever access their own data
• Real-time updates: Supabase Realtime (Postgres logical replication) pushes new bookings to the vendor's dashboard instantly
• Double-booking protection: enforced at the database level with a Postgres exclusion constraint, not just in JavaScript
• Email notifications: EmailJS, so confirmations and reminders send with no backend server needed
• QR codes: generated client-side with QRious
• PWA: a custom service worker, web manifest, and a dynamically generated manifest per vendor so each business's customers get their own personalized installable app
• Hosting: static site on Render, deployed straight from GitHub

Challenges we ran into

Preventing double bookings reliably was the trickiest part, two customers could tap the same time slot within milliseconds of each other. Instead of trying to catch this in JavaScript, I pushed the constraint into Postgres itself using an exclusion constraint, so the database physically rejects an overlapping booking no matter how the request arrives.

Making the app feel personal without a backend was another challenge. Generating a unique installable PWA manifest per vendor, entirely client-side using Blob URLs, so each business's customers get an app with that business's own name, took some experimentation to get right.

Accomplishments that we're proud of

Building a fully working, real-time, multi-tenant booking platform, with secure data isolation between vendors, live notifications, and two distinct installable apps, using only a static frontend and Supabase, with no custom backend server at all.

What we learned

How much you can build on Postgres directly, real-time subscriptions, exclusion constraints, security-definer functions, instead of reaching for a custom backend. Also, how meaningful small UX details are for a product like this: a QR code, a confetti burst on booking, a live toast notification, these are what make a functional tool feel like a real product.

What's next for Book·it

Automated scheduled reminders (today's version needs a vendor to tap a button), SMS notifications alongside email, online deposits to reduce no-shows, and a directory page so customers can discover new local vendors on Book·it.

Built With

• css3
• emailjs
• github
• html5
• javascript
• postgresql
• pwa
• qrious
• render
• service-workers
• supabase