Booking web app

Sidr Barber Lounge

Demo project · fictional business

A bilingual (Arabic-first, English) booking web app with an owner dashboard for a two-branch barbershop in Muscat (Al Khuwair, Al Mouj).

All 24 acceptance tests pass. Lighthouse mobile: 99, 100, 100, 100.

acceptance tests pass: 24/24
automated tests, each on a fresh temporary database: 78
Lighthouse mobile, production build (performance, accessibility, best practices, SEO): 99 · 100 · 100 · 100
LCP: 2.1–2.2 s
CLS: 0
of JavaScript: 6.3 KB

The brief

A booking site and owner dashboard for a two-branch barbershop, Arabic first, that only ever offers real free times.

What I built

Six-step booking that shows only real free times
A private link to move or cancel
No double bookings
Per-barber views
Price editing, days off, Ramadan hours and a weekly spreadsheet export

Three hard problems

Problem Every time has to be Muscat time, whatever the visitor's phone or the server says.
How I solved it Each booking stores the moment in UTC plus its real Muscat date and time, and all the maths runs in UTC+4. A phone set to London still sees Muscat times (acceptance test T1).
Problem Two customers can pick the same barber and the same time at the same moment.
How I solved it One immediate SQLite transaction checks and saves the booking, and a unique index on the barber and start time is the last line of defence, so a double booking can never be stored.
Problem In Ramadan the shop stays open past midnight, so a 1:30 AM slot belongs to the evening before.
How I solved it Each booking also keeps its business day: a 1:30 AM slot is listed under the right evening and saved with the next day’s date (acceptance test T9).

What I learned

My first time building websites like these. They taught me dedication and sharpness: reading code closely, and using UI and UX with more precision and clarity.

The stack

Node.js 24
Express 5
SQLite (better-sqlite3)
bcryptjs
compression
Server-rendered HTML, plain CSS and JS
Node's built-in test runner

Proof

Booking, step 1 of 6: choose your services, each with its time and price, beside the running total — Step 1 of 6: services, times and prices, with the total beside them

The same booking step in Arabic, laid out right to left — Arabic first: the same step, right to left

Booking, step 2: choose a branch, with a note explaining that Haircut and Beard trim were switched to the cheaper combo — Step 2: the branch, and the combo switch explained in place

Services and prices: six services with durations and prices in Omani rials — Clear prices in Omani rials