Skip to content
Want a website like this?
Griya Sehat Clinic Website

Demo Website

Griya Sehat Clinic Website

Clinic website with online appointment booking and a live queue-number tracker per branch.

Open Live Preview

Industry

Healthcare, Multi-Branch Clinic Network

Timeline

2 weeks

Package Used

A website with clear structure and navigation, for a small business going online for the first time

This is a demo website I built on my own as a sample, not paid client work. The business name is illustrative. The live preview above is the real build.

01

About This Website

Clinic website with online appointment booking and a live queue-number tracker per branch.

02

Notes Behind This Demo

I invented the Griya Sehat clinic network for this demo, fictional branches included. The patient I had in mind already knows which doctor they need. They come to the page to confirm the doctor is in that day and to pick a free slot, and once they hold a queue number, they want to know when to leave home.

Three design decisions

  1. I put the Nomor Sedang Dilayani (now serving) number in the opening section, with a branch picker beside it. Patients can see how far the queue has moved before they leave the house. In the demo the number ticks up on its own as a simulation.
  2. Booked times stay in the slot grid, struck through and disabled. Patients see how busy the day is and which times are still open in one glance.
  3. The branch is picked once. Changing it at the top also swaps the doctor schedule further down, so the doctors on screen always belong to the branch the patient is looking at.

Every slot, queue number, and visit record here is sample data. For a real clinic, live booking and queues need a database and an admin panel for front-desk staff, which is Enterprise work, from Rp 15.000.000. If doctor schedules and a WhatsApp button for registering are all that is needed, Starter covers it.

03

What It Includes

  • Appointment booking by branch, specialization, and time slot
  • Queue number issued on booking confirmation
  • Live "now serving" queue tracker per branch
  • Queue lookup showing position and estimated wait
  • Mobile-first responsive design

04

Built With

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Booking Flow

Project Gallery

Griya Sehat Clinic Website - Screenshot 1
Griya Sehat Clinic Website - Screenshot 2
Griya Sehat Clinic Website - Screenshot 3
Griya Sehat Clinic Website - Screenshot 4

Interested in Similar Project?

We can build a similar site for your business, on the same technology and features.

This project uses:

A website with clear structure and navigation, for a small business going online for the first time

Pricing and packages for a clinic website →

*Contact us for further consultation about your project