Kembali ke chatKlinik Cahaya Medika · Studi kasusChat WhatsApp

Memuat situs…

Tangkapan layar · Beranda (live)Buka di tab baru

Bastian · online

Klinik Cahaya Medika, studi kasus.

Landing page satu halaman untuk klinik keluarga, dengan panel admin ringan agar pemilik klinik bisa mengubah jadwal dokter dan info layanan sendiri, tanpa menunggu developer untuk perubahan rutin.

Landing page publik
Panel admin
Row Level Security
On-demand ISR

9 screen
5 endpoint admin
1 role admin

Buka live demo

Ini project klien sungguhan?

Bukan project klien. Klinik Cahaya Medika adalah studi kasus ilustratif, dibuat untuk menunjukkan proses kerja dari dokumen perencanaan sampai implementasi teknis. Ini tidak ditampilkan sebagai project klien.

Semua yang kamu lihat di halaman ini nyata dan berjalan: tangkapan layar diambil dari aplikasinya, dan demonya bisa dicoba sendiri.

Fokus studi kasus

Panel self-service, jadi klinik tidak bergantung developer untuk perubahan rutin.
Satu sumber kebenaran lewat rantai dokumen: PRD, Tech Spec, Blueprint, sampai kode.
Row Level Security sebagai otorisasi utama, bukan sekadar pemeriksaan di kode aplikasi.

Masalah apa yang mau diselesaikan?

Jadwal dokter, info layanan, dan status buka-tutup sering hidup terpisah dari website: di kepala pemilik, di grup WhatsApp, atau di catatan yang tidak sempat diperbarui.

Jadwal dokter cepat basi

Setiap perubahan jadwal butuh menghubungi developer dan menunggu, sementara pasien sudah datang berdasarkan info lama.

Info layanan tidak konsisten

Layanan atau harga yang berubah di lapangan tidak otomatis tercermin di website.

Pasien menghubungi manual

Tanpa status buka/tutup yang jelas, resepsionis menerima telepon hanya untuk mengonfirmasi jam praktik.

Tidak ada jejak perubahan

Kalau ada data yang salah, tidak jelas siapa mengubah apa dan kapan.

Solusinya seperti apa?

Satu sistem, dua sisi dengan peran yang jelas. Pengunjung mendapat informasi yang selalu akurat, pemilik mendapat kendali untuk menjaganya tetap akurat, tanpa harus paham kode.

Untuk pasien

Ringkasan klinik, layanan, dan profil dokter dalam satu halaman.
Indikator “Buka Sekarang” yang dihitung otomatis dari jadwal.
Tombol WhatsApp sebagai jalur kontak utama.

Untuk pemilik klinik

Login aman, lalu edit jadwal praktik dokter per hari lewat tabel mingguan.
Kelola layanan dan profil dokter, dengan pratinjau tampilan publik langsung di layar edit.
Riwayat perubahan tercatat otomatis: siapa mengubah apa, dan kapan.

Fitur utama

Indikator buka/tutup

Status dihitung otomatis dari jadwal dokter, tampil di hero dan footer, tidak pernah basi.

Upload foto dokter

Foto yang jelas dan konsisten membangun kepercayaan sebelum pasien menelepon.

Panel admin self-service

Edit jadwal, layanan, dan profil dokter dari browser, tanpa menyentuh kode.

Pratinjau real-time

Setiap layar edit menampilkan tampilan publik sebelum admin menekan simpan.

Riwayat perubahan

Setiap perubahan tercatat otomatis sebagai audit log: siapa, apa, dan kapan.

Boleh lihat layarnya?

Beranda di sebelah itu situs yang berjalan. Klik dan coba sendiri. Layar lain adalah tangkapan layar asli dari panel admin.

Detail yang tidak terlihat di mockup mana pun: setiap layar edit punya panel pratinjau tampilan publik di sisi kanan, jadi admin melihat perubahan tampil di beranda sebelum menekan simpan.

Kenapa desainnya begini?

Setiap warna, radius, dan jenis huruf mengacu ke satu dokumen sumber, jadi konsisten di semua layar dan mudah ditelusuri alasannya.

Nakhoda #151D18
Cahaya #497F5D
CTA WhatsApp #1E9E5A
Latar #F5FAF6
Jaga (buka) #67BB6B
Senja (tutup) #9C7A5B

Kontras

Minimum WCAG AA 4.5:1, perhatian khusus di atas warna Cahaya.

Target sentuh

Minimum 44×44px untuk semua elemen interaktif.

Radius

16px konsisten di kartu, tombol, dan input, sengaja bukan bentuk organik penuh.

Elemen signature: “Indikator Cahaya”, titik cahaya dengan halo lembut yang bernapas untuk status buka/tutup, dirancang khusus untuk identitas klinik ini, bukan badge traffic-light generik.

Dibangun pakai apa?

Setiap lapisan mengikuti kontrak yang sama, sehingga frontend, API, data, dan deployment saling terhubung.

Frontend

Halaman publik, form admin, tabel jadwal, dan pratinjau real-time.

Next.js 15 · App Router · Tailwind

Backend API

Route handler tipis: validasi, guard admin, panggil service.

Route Handlers · Zod · requireAdmin()

Database

Row Level Security sebagai otorisasi utama, write atomic lewat RPC.

Supabase Postgres · RLS · RPC

Deployment

Region eksplisit untuk latensi pengguna Indonesia, revalidation on-demand.

Vercel (sin1) · Supabase SG

Apa yang bisa ditunjukkan project ini?

Product dan proses

Rantai dokumen perencanaan yang saling terhubung, bukan keputusan yang diambil diam-diam.

Arsitektur dan keamanan

RLS sebagai lapisan otorisasi utama, write atomic lewat transaksi database asli.

Sistem desain bertoken

Warna, tipografi, dan radius terkunci ke satu sumber kebenaran yang bisa ditelusuri.

Kerapian version control

Trunk-based, Conventional Commits, dan traceability commit ke dokumen sumber.

Aku juga butuh yang seperti ini.

Butuh yang seperti ini?

Ceritakan singkat, aku balas di WhatsApp. Tanpa perantara, langsung ke orang yang ngoding.