Ravine Coffee - Sistem Manajemen Order Cafe
Coba Sendiri
Akun Test
- Admin: admin@gmail.com / admin123
- Kasir: cashier1@gmail.com / cashier123
*Kunjungi /login untuk mencoba role user yang berbeda. Fitur WebSocket dioptimalkan untuk local environment.
Tentang Platform
Ravine Coffee adalah sistem manajemen cafe fullstack yang dibuat untuk mendigitalisasi seluruh perjalanan customer di tempat. Sebagai Solo Fullstack Developer, saya membangun solusi end-to-end di mana customer bisa scan QR di meja, melihat menu, dan membayar langsung melalui QRIS Midtrans. Sistem ini memastikan setiap order tersinkron real-time antara customer, kasir, dan kitchen staff.
Engineering Excellence: Arsitektur Real-Time
Hybrid State Management
Menggabungkan TanStack Query untuk server state (caching dan fetching) dan Zustand untuk client state yang ringan. Ini menjaga UI tetap responsif dan sinkron saat data terus berubah.
Pola DB yang Resilient
Menerapkan pola Data Snapshotting pada OrderItems. Saat order dibuat, detail produk seperti nama dan harga disalin ke record transaksi agar invoice historis tetap akurat meskipun produk diubah atau dihapus.
Workflow Order dan Payment
Fitur
Contactless Ordering
Menu digital dan sistem order melalui QR code khusus per meja.
Midtrans QRIS Integration
Workflow pembayaran otomatis dengan update status real-time melalui webhook.
Real-Time Sync
Notifikasi order instan antara layar kasir dan kitchen menggunakan WebSockets.
Integritas Historis
Sistem snapshot berbasis Prisma untuk menjaga akurasi transaksi meskipun data produk berubah.
Manajemen Voucher
Discount engine yang mendukung kupon fixed dan percentage-based.
Catalog Teroptimasi
Infinite scrolling dan caching efisien untuk menu cafe yang besar.
Dashboard Multi-Role
Interface khusus untuk Customer, Kasir, dan Administrator.
Riwayat dan Log Order
Tracking state lengkap untuk setiap order dari OPENBILL sampai COMPLETED.
Tantangan
Salah satu tantangan engineering utama adalah mengelola WebSockets di serverless infrastructure. Deploy ke Vercel berarti harus menghadapi sifat serverless function yang stateless dan tidak dirancang untuk koneksi persisten. Saya mengatasinya dengan merancang reconnection strategies serta memastikan webhook Midtrans menjadi fallback reliable untuk konfirmasi pembayaran. Tantangan lain adalah mengamankan koneksi WebSocket agar hanya role Kasir dan Kitchen yang terautentikasi yang bisa menerima broadcast event sensitif. Di frontend, saya memakai TanStack Query untuk mencegah re-render berulang saat update order real-time masuk.
Stack Teknologi
- Next.js
- TypeScript
- TanStack Query
- Zustand
- Express.js
- Prisma ORM
- Socket.io / ws
- Midtrans SDK
- Supabase (PostgreSQL)
- Vercel Deployment
- Postman Docs
Stack Utama
Next.js, TypeScript, Express.js, Prisma ORM, Supabase, Midtrans QRIS, WebSockets, Zustand, TanStack Query, Vercel.