Ravine Coffee - Cafe Order Management System
Try It Yourself
Test Accounts
- Admin: admin@gmail.com / admin123
- Cashier: cashier1@gmail.com / cashier123
*Visit /login to test different user roles. WebSocket features are optimized for local environments.
About The Platform
Ravine Coffee is a fullstack cafe management system built to digitize the entire in-store customer journey. As the Solo Fullstack Developer, I engineered an end-to-end solution where customers can scan a QR code at their table, browse the menu, and pay instantly via QRIS Midtrans. The system ensures that every order is synchronized in real-time between customers, cashiers, and kitchen staff, providing a seamless and paperless experience.
Engineering Excellence: Real-Time Architecture
Hybrid State Management
Combining TanStack Query for server state (caching & fetching) and Zustand for lightweight client state management. Ensures the UI remains responsive and synchronized during constant data updates.
Resilient DB Pattern
Implemented a Data Snapshotting pattern on OrderItems. When an order is placed, product details (name, price) are copied to the transaction record, ensuring historical invoice accuracy even if products are later modified or deleted.
Ordering & Payment Workflow
Features
Contactless Ordering
Digital menu and ordering system via table-specific QR codes.
Midtrans QRIS Integration
Automated payment workflow with real-time status updates via webhooks.
Real-Time Sync
Instant order notification between cashier and kitchen screens using WebSockets.
Historical Integrity
Prisma-backed snapshot system to preserve transaction accuracy across product changes.
Voucher Management
Sophisticated discount engine supporting fixed and percentage-based coupons.
Optimized Catalog
Infinite scrolling and efficient caching for large cafe menus.
Multi-Role Dashboards
Dedicated interfaces for Customers, Cashiers, and Administrators.
Order History & Logs
Comprehensive state tracking for every order from OPENBILL to COMPLETED.
Challenges
One of the primary engineering challenges was managing WebSockets on Serverless Infrastructure. Deploying to Vercel meant dealing with the stateless nature of serverless functions, which aren't natively designed for persistent connections. I addressed this by architecting the system to handle reconnection strategies and ensuring that Midtrans webhooks served as a reliable fallback for payment confirmation. Another major hurdle was securing WebSocket connections; ensuring that only authenticated Cashier and Kitchen roles could listen to sensitive broadcast events. Finally, I optimized the frontend using TanStack Query to prevent redundant re-renders when real-time order updates were received, maintaining a smooth 60fps experience even during peak activity.
Technology Stack
- Next.js
- TypeScript
- TanStack Query
- Zustand
- Express.js
- Prisma ORM
- Socket.io / ws
- Midtrans SDK
- Supabase (PostgreSQL)
- Vercel Deployment
- Postman Docs
Key Stack
Next.js, TypeScript, Express.js, Prisma ORM, Supabase, Midtrans QRIS, WebSockets, Zustand, TanStack Query, Vercel.