Al-Baseera Centre

Web2026

A clinic site with appointment booking and a dashboard that controls every word and image the public page shows.

RoleFull-stack engineer & designer
Year2026
Built with
- Next.js
- TypeScript
- Prisma
- PostgreSQL
- jose
- Zod

What was wrong

Clinic sites go stale because changing them means calling the developer. Prices move, a doctor joins, hours change during Ramadan — and the site keeps saying last year's version because nobody wants to file a ticket for a sentence.

What I did

Everything on the public page is a row the clinic can edit: sections, services, doctors, hours, the booking form. The visual design was built to a reference the owner supplied — Cairo type, a fixed blue and navy, specific radii — so the result looks like the clinic asked for it rather than like a template.

What changed

The clinic edits its own site, and the booking flow is part of the page rather than a phone number and a hope.

What is inside

Booking against real availability
The times on offer are computed from working-day rules, blocked dates and each service’s own duration — not a fixed grid that happily accepts a taken slot.
Services with their own prices and durations
Each service carries a description, duration, price, icon and colour, plus a page explaining what it covers and who it is for.
Medical articles
Educational content written from the dashboard, bringing in search traffic a one-page site never sees.
Before-and-after and a photo gallery
Real results shown side by side — the single most persuasive thing for a patient weighing two clinics.
Doctors, credentials and numbers
Doctor profiles, qualifications, clinic statistics and patient reviews — all editable rows, none of them hard-coded.
No hard-coded copy anywhere
Even section headings, the FAQ and the contact details are changed from the dashboard and appear immediately.

From the build

A walkthrough of 9 screens, from the site and the dashboard.

The doctor and the numbersAn introduction to the consultant, then four figures — patient satisfaction, patients a year, corrective procedures, years of practice.
The servicesEach service on its own card with duration, price, a short description and a link — real figures rather than “call for a quote”.
A service pageLASIK explained at length — who it is for, how it goes, what it covers — with the booking button on the same page.
Booking an appointmentPick the service, then the day, then a time that is genuinely free — computed from working-day rules, blocked dates and the service’s duration.
The articlesEducational content on eyes, diabetes and screen strain — search traffic a one-page site never sees.
About the centreThe centre and its team, assembled from database rows rather than copy written into the code.
Dashboard — servicesThe clinic adds, edits and removes every service: name, duration, price, icon, order and visibility — with no developer involved.
Dashboard — site contentThe doctor’s name, title, speciality, the homepage headline and the strapline — all editable fields that appear on the site immediately.
Dashboard — working hoursHours per weekday, slot length and blocked days. This screen is where the patient’s available times come from — not a fixed grid.