karawaci.kode

2026-06-14 · 7 min

Bangun MVP SaaS 3 Hari dengan Claude Code + Cloudflare

Klien klinik kecantikan Karawaci (~6 cabang Jabodetabek) minta MVP SaaS booking yang internal. “Yang penting jalan dalam seminggu, kami test dengan staff dulu.” Saya commit: 3 hari, deploy ke production, Rp 6jt budget. Saya pakai Claude Code + stack Cloudflare full. Hasilnya.

Scope MVP

Fitur minimum:

  • Login staff (magic link email)
  • Add booking customer (nama, HP, treatment, slot waktu)
  • Calendar view per cabang
  • Confirmation WhatsApp ke customer
  • Dashboard summary (booking hari ini, minggu ini)

Tidak ada:

  • Payment integration (klien handle offline dulu)
  • Multi-tenant (single tenant untuk MVP)
  • Mobile app (web responsive cukup)

Stack pilihan

  • Astro 6 dengan Actions (related: Astro Actions vs Server Functions)
  • Cloudflare Pages untuk hosting
  • Cloudflare D1 untuk database (~150 booking/hari estimate, well within limit)
  • Cloudflare Workers untuk WA Business webhook
  • Cloudflare R2 untuk uploaded image (foto treatment, jarang dipakai)
  • shadcn + Tailwind v4 untuk UI

Setup cost: Cloudflare free tier semua. Rp 0 untuk infrastructure di MVP phase.

Hari 1 (8 jam)

Jam 1-2: Scaffolding. Claude Code prompt:

Buat Astro 6 project dengan App Router pattern, integrasi Cloudflare Pages adapter, 
D1 binding, shadcn setup. Output struktur folder lengkap.

Output: scaffold yang langsung jalan. Saya verify dengan bun run dev.

Jam 3-4: Schema D1. Saya kasih spec ke Claude Code, dia generate SQL migration:

CREATE TABLE staff (id TEXT PRIMARY KEY, email TEXT UNIQUE, name TEXT, ...);
CREATE TABLE branches (id TEXT PRIMARY KEY, name TEXT, address TEXT, ...);
CREATE TABLE treatments (id TEXT PRIMARY KEY, name TEXT, duration_min INTEGER, price INTEGER);
CREATE TABLE bookings (id TEXT PRIMARY KEY, customer_name TEXT, customer_phone TEXT, branch_id TEXT, treatment_id TEXT, slot_at INTEGER, status TEXT);

Jam 5-8: Auth + booking form. Claude Code generate magic link auth pakai pattern dengan signed token + email via Cloudflare Workers (Resend integration). Booking form dengan Astro Actions + Zod validation.

Hasil hari 1: bisa login, bisa create booking, calendar view kosong.

Hari 2 (9 jam)

Jam 1-3: Calendar view per cabang. Saya pakai FullCalendar via CDN (Astro client:load island). Claude Code generate integration. Initial bug: timezone D1 store epoch, display salah. Fix dengan explicit timezone conversion (Asia/Jakarta).

Jam 4-6: WhatsApp confirmation. Setup WA Business API via Twilio (klinik klien sudah punya akun). Webhook receiver di Cloudflare Workers, kirim template message saat booking created.

Pattern:

export async function POST(c: Context) {
  const { booking } = await c.req.json();
  const message = `Halo ${booking.customer_name}, booking Anda untuk ${booking.treatment_name} di ${booking.branch_name} pada ${booking.formatted_time} sudah dikonfirmasi.`;
  await fetch('https://api.twilio.com/...', { ... });
  return c.json({ ok: true });
}

Jam 7-9: Dashboard summary. Aggregation query di D1, simple chart pakai shadcn charts (Recharts wrapper).

Hasil hari 2: feature lengkap, masih bug di edge case.

Hari 3 (6 jam)

Jam 1-3: QA + bug fix. Saya manual test 23 scenario. Fix 8 bug (validation message, timezone in calendar, double-booking guard).

Jam 4-5: Production deploy. wrangler pages deploy. Domain custom: book.kliniknama.com. Cloudflare SSL otomatis.

Jam 6: Demo ke klien via screen share. Klien training 30 menit dengan staff.

Total: 23 jam selama 3 hari.

Cost & metric setelah 1 bulan production

Cloudflare usage (1 bulan):

  • D1: 480k row read + 9.2k row write — dalam free tier (5M read, 100k write per hari sebenarnya — saya salah baca, free tier 5M total/hari sekarang)
  • Workers: 14k invocation — dalam free tier (100k/hari)
  • Pages: traffic ~3GB — dalam free tier (unlimited bandwidth)
  • R2: 80MB storage — dalam free tier (10GB)
  • Total Cloudflare cost: Rp 0

Twilio WA Business (1 bulan):

  • ~4,200 message sent
  • Cost: $0.005 × 4200 = $21 (~Rp 336k)

Domain (custom subdomain dari klien existing): Rp 0.

Monthly OPEX: ~Rp 336k. Untuk klinik dengan revenue ~Rp 200jt/bulan: 0,17%.

Latency

Booking form submit (di Jakarta dengan Indihome):

  • P50: 380ms
  • P95: 920ms
  • P99: 1,8 detik (cold start D1 di POP yang baru aktif)

Calendar page load:

  • P50: 480ms (Astro static + island hydrate)
  • P95: 1,2 detik

Acceptable untuk MVP. Klien tidak komplain.

Yang akan saya hardening jika klien commit

Setelah 1 bulan running, klien commit beli paket setahun. Saya kasih plan hardening 2 minggu:

  1. Multi-tenant: support 6 cabang dengan separate data (sekarang single-tenant fake separation via branch_id filter).
  2. Backup D1: snapshot daily ke R2. Pattern dari Litestream small SaaS.
  3. Rate limit: tidak ada di MVP. Tambah Cloudflare Rate Limiting rule.
  4. Audit log: critical action (cancel booking, refund) butuh audit trail. Add table + trigger.
  5. Mobile optimization: test di Samsung A12, fix layout issue.
  6. Test suite: 0% test coverage di MVP. Tambah minimal smoke test + critical path.

Effort estimate: 80 jam, Rp 20jt. Klien setuju.

Yang break (1 bulan first)

  1. D1 latency dari POP US: kadang request route ke POP US untuk Indonesia user (rare, ~3% request). P99 spike. Tidak ada control sampai Cloudflare buka region Indonesia. Detail di post D1 vs Postgres saya.

  2. Magic link email delay: Resend free tier kadang delay 30-60 detik. Customer staff complain. Upgrade ke Resend paid ($20/mo) untuk priority delivery.

  3. WA template approval: pertama submit template message rejected Twilio (terlalu generic). Re-submit dengan template lebih spesifik. Delay 2 hari approval.

  4. Calendar drag-and-drop: FullCalendar UI bug di Safari iOS. Saya disable drag-drop di mobile, replace dengan dropdown selector. 1 jam fix.

Verdict

3 hari MVP dengan Claude Code + Cloudflare full stack: feasible untuk scope booking sederhana SaaS internal. Cost Rp 0 sampai user adoption signifikan.

Bukan untuk MVP yang butuh:

  • Payment integration kompleks (Midtrans Snap minimal 1-2 hari extra)
  • Multi-tenant strict isolation (legal/financial use case)
  • Real-time collaboration (CRDT, presence)

Pattern reusable untuk klien lain dengan scope serupa. Saya sudah pakai stack ini untuk 3 MVP berbeda, average shipping 4-5 hari per project.

Bukan magic — accumulating tech debt cepat. Hardening phase wajib sebelum push marketing. Tapi untuk validate produk-market fit di klien SMB Indonesia: stack ini menang.

Ditulis oleh Reza Pradipta