Booking System

Why build it

Many small businesses still book by phone or WhatsApp: the owner answers mid-haircut, and customers who find them after hours go elsewhere. Online booking fixes both, and it's the most common thing small businesses ask for.

This demo shows the whole flow working, for a made-up barbershop, so a business owner can try it before we talk.

How it works

The customer picks a service, then a day. Free times are calculated on the spot from the shop's opening hours, how long the service takes and the bookings already made, so a 45-minute combo never gets squeezed into a 20-minute gap. Saturday shows as closed, Friday has short hours, and times that have already passed today aren't offered.

Before booking, the phone number is checked, and mistakes are explained next to the field. The confirmation offers an “add to calendar” file, and the owner view lists the day's bookings with the total.

Accessible and bilingual

Every choice is a real radio button behind the styled buttons, so the whole flow works with a keyboard and a screen reader. When you move to the next step, focus moves to that step's heading. The Hebrew version is laid out right to left, while times stay left to right.

In a real project

This demo keeps everything in your browser, so you can try it freely. For a real business, bookings are saved in a database, the owner gets a notification for each one, and customers get an SMS or WhatsApp reminder the day before.

What it does

• Free times are worked out from opening hours, service length and existing bookings
• Hebrew and English, right to left, fully usable with a keyboard
• Phone number checked before booking, with clear error messages
• “Add to calendar” file for the customer
• Owner view with the day's bookings and total, and cancelling

Built with

• Next.js
• React
• TypeScript
• Tailwind CSS