Back to chatKlinik Cahaya Medika · Case studyChat on WhatsApp

Loading the site…

Screenshot · Homepage (live)Open in a new tab

Bastian · online

Klinik Cahaya Medika, case study.

A one-page website for a family clinic, with a lightweight admin panel so the owner can update doctor schedules and service info on their own, without waiting on a developer for routine changes.

Public landing page
Admin panel
Row Level Security
On-demand ISR

9 screens
5 admin endpoints
1 admin role

Open live demo

Is this a real client project?

Not a client project. Klinik Cahaya Medika is an illustrative case study, built to show my process from planning documents through to technical implementation. It is not presented as a client project.

Everything you see on this page is real and running: the screenshots come from the app itself, and you can try the demo yourself.

Case study focus

A self-service panel, so the clinic doesn't depend on a developer for routine changes.
One source of truth through a chain of documents: PRD, Tech Spec, Blueprint, all the way to code.
Row Level Security as the primary authorization layer, not just a check in application code.

What problem is it solving?

Doctor schedules, service info, and open/closed status often live apart from the website: in the owner's head, in a WhatsApp group, or in notes that never get updated.

Doctor schedules go stale fast

Every schedule change means contacting a developer and waiting, while patients show up based on outdated info.

Service info is inconsistent

Services or prices that change on the ground aren't automatically reflected on the website.

Patients call to check manually

Without a clear open/closed status, reception takes calls just to confirm opening hours.

No trace of what changed

When some data is wrong, it's unclear who changed what, and when.

What does the solution look like?

One system, two sides with clear roles. Visitors get information that stays accurate, and the owner gets the control to keep it that way, without needing to understand code.

For patients

Clinic summary, services, and doctor profiles on one page.
An “Open Now” indicator calculated automatically from the schedule.
A WhatsApp button as the main way to get in touch.

For the clinic owner

Secure login, then edit each doctor's practice schedule by day in a weekly table.
Manage services and doctor profiles, with a live preview of the public page right on the edit screen.
Every change is logged automatically: who changed what, and when.

Key features

Open/closed indicator

Status is calculated automatically from doctor schedules and shown in the hero and footer, so it's never stale.

Doctor photo upload

Clear, consistent photos build trust before a patient ever calls.

Self-service admin panel

Edit schedules, services, and doctor profiles from the browser, without touching code.

Real-time preview

Every edit screen shows the public view before the admin presses save.

Change history

Every change is logged automatically as an audit trail: who, what, and when.

Can I see the screens?

The homepage next to this is the running site. Click around and try it yourself. The other screens are real screenshots of the admin panel.

A detail no mockup would show: every edit screen has a public preview panel on the right, so the admin sees the change on the homepage before pressing save.

Why does it look like this?

Every color, radius, and typeface traces back to one source document, so it stays consistent across screens and every choice is easy to justify.

Nakhoda #151D18
Cahaya #497F5D
WhatsApp CTA #1E9E5A
Background #F5FAF6
Jaga (open) #67BB6B
Senja (closed) #9C7A5B

Contrast

WCAG AA 4.5:1 at minimum, with extra care above the Cahaya color.

Touch targets

At least 44×44px for every interactive element.

Radius

A consistent 16px across cards, buttons, and inputs, deliberately not a fully organic shape.

Signature element: the “Indikator Cahaya”, a light dot with a soft, breathing halo for open/closed status, designed for this clinic's identity rather than a generic traffic-light badge.

What is it built with?

Every layer follows the same contract, so the frontend, API, data, and deployment all connect cleanly.

Frontend

Public pages, admin forms, the schedule table, and real-time preview.

Next.js 15 · App Router · Tailwind

Backend API

Thin route handlers: validation, admin guard, then call the service.

Route Handlers · Zod · requireAdmin()

Database

Row Level Security as the primary authorization layer, atomic writes through RPC.

Supabase Postgres · RLS · RPC

Deployment

An explicit region for low latency in Indonesia, with on-demand revalidation.

Vercel (sin1) · Supabase SG

What does this project show?

Product and process

A connected chain of planning documents, not decisions made quietly on the side.

Architecture and security

RLS as the primary authorization layer, with atomic writes through real database transactions.

Token-based design system

Color, typography, and radius locked to one traceable source of truth.

Clean version control

Trunk-based, Conventional Commits, and commit traceability back to the source documents.

I need something like this too.

Need something like this?

Tell me briefly and I'll reply on WhatsApp. No middlemen, straight to the person who codes.