BarBurgGer
Integrated F&B E-Commerce and self-service platform. Custom cart state, multi-outlet routing, dynamic Midtrans transaction pricing, and Biteship courier integrations.
01 — Overview
Overview
a. F&B E-Commerce Concept
BarBurgGer integrates digital storefront catalogs with local ordering methods, matching online deliveries with self-service/in-store dining options. Clients browse items locally, customize variations, and complete checkouts. When ordering in-store, clients scan table QR codes to access table-specific checkout sessions.
The platform routes incoming orders to their nearest outlet automatically. When an order is paid, the system registers the details in the kitchen fulfillment queue, prints physical order slips, and manages courier dispatches.
b. High-Level System Architecture
We built the system architecture on Laravel 10. The frontend uses blade templates and Vite-compiled assets styled with Tailwind CSS, communicating with core controllers via REST endpoints. The backend core handles catalog lookups, cart state checks, and database-level calculations.
The checkout layer is linked to two external services. For shipping, the Biteship API manages shipping coordinates, validates postal areas, and tracks couriers. For payments, the Midtrans API handles checkout tokens. Orders and transaction details are recorded inside local PostgreSQL ledgers.
- Developed a unified cart and checkout engine supporting both online deliveries and scan-QR self-service
- Programmed multi-outlet and brand routing mechanics serving custom branch catalogs
- Designed product variations and add-ons option structures (fnb_additional)
- Implemented dynamic transaction fee calculations matching Midtrans pricing methods
- Linked Biteship shipping API to validate area IDs, fetch courier rates, and map coordinates
- Built Filament administrative moderation dashboards managing outlets, orders, and coupons
- Set up double-entry bookkeeping transactions to write order ledgers securely
02 — Problems & Challenges
Problems & Challenges
a. Complex Cart State Management
Managing active cart items across web sessions without polluting database storage is a common problem. F&B orders often include multiple copies of the same product, each with distinct toppings, variations, and notes.
We solved this by designing a session-based cart system (addToCart). Cart lines are written to the temporary trx_book table under a shared session ID. To prevent conflicts when users adjust quantities (such as 7+1=8 instead of duplicating rows), the system soft-deletes matching cart lines, recalculates individual extras, and inserts the updated quantity rows inside a database transaction.
b. Handling Product Add-ons & Variations
Food products feature various optional add-ons (extra cheese, double beef patties, custom sauces) that require dynamic price additions. These prices must adjust depending on whether the client selects online, offline, or self-service dining modes.
We resolved this by writing structured add-ons handlers. When adding items, the system queries extras from the fnb_additional table and runs get_active_additional_price, checking the current outlet's price column. The service sums the base product price and selected add-ons, saving the final book price dynamically.
c. Real-Time Order Routing/Payment
Routing checkout payments to individual outlet accounts while applying custom PPN (11%) and service charges (5%) is a complex process. The system must also support various payment methods and apply correct transaction fees.
We programmed order routing logic inside OrderService.php. During checkout, the service resolves the outlet configuration, determines tax columns, and calculates transaction fees depending on the selected Midtrans payment method (e.g. 2% for GoPay/ShopeePay, 0.7% for QRIS, or IDR 4,000 for Bank Transfers). This fee is added to the total, and the system requests a Midtrans Snap token, ensuring the payment drawer loads correctly.
03 — Project Goals
Project Goals
a. Maximizing Conversion Rates
We aimed to reduce checkout drop-offs by verifying user inputs in real time. We built validation filters to format Indonesian phone numbers (+62 prefix) and check details before payment submission, preventing failed callbacks.
By automating the checkout validation flow, we lowered friction and improved successful order rates.
b. Seamless Customer Ordering Experience
Our goal was to ensure the mobile browser ordering experience is fast. This required optimizing catalog rendering speeds and delivery rate calculations.
By caching outlet menus in Redis and optimizing Biteship rate requests, we kept average page loading speeds under 50ms.
04 — Design Process
Design Process
a. F&B Database Schema Modeling
We modeled the database structure in PostgreSQL to manage multi-outlet inventories. The schema defines: data_outlet (mapping branch locations), fnb_products (storing item properties), fnb_additional (storing product options), and trx_ord/trx_ord_d (storing order headers and transaction items).
When checkout succeeds, the system writes the order, registers transaction details, and deletes the temporary trx_book records, protecting database integrity.
b. Checkout Flow UI/UX Design
We designed the checkout interface to guide clients through order details, delivery selections, and payment options. We built a customized customization modal to let users configure product add-ons easily.
The cart drawer summarizes items, displays delivery rates, applies coupons, and shows tax breakdowns before loading the payment options.
c. Shopping Cart & Checkout Page
The checkout page displays customer details, delivery maps, and order summaries. It loads the Midtrans Snap modal dynamically, allowing users to pay via QRIS or e-wallets without leaving the page.
05 — Usability Testing
Usability Testing
a. Cart & Payment Validation
We verified the ordering logic under different transaction scenarios. We wrote integration tests to check PPN, service charges, and payment callback status changes, confirming that successful payment callbacks update order records and clear cart sessions.
We also tested error cases, ensuring that failed or expired transactions do not clear active cart items, letting users retry payments.
b. API Integration Testing
We tested the platform's integration with Biteship and Midtrans APIs. We mocked API responses to test timeout scenarios, confirming that the system handles shipping rate failures or payment gateway drops gracefully.
06 — Prototyping & Handoff
Prototyping & Handoff
a. CMS/Admin Panel Deployment
We deployed the administrative management panel using Filament PHP. The workspace provides managers with tools to track active orders, print order summaries, modify outlet settings, configure coupons, and review sales logs.
This centralized control panel allows operations teams to manage multiple branches and update menu options in real time.
b. Order Fulfillment Integration
We set up dispatch systems to notify local kitchens of paid orders. When Midtrans confirms payment, the CRM pushes the order details to the outlet's monitor, printing receipts and dispatching Biteship couriers.
07 — Key Takeaways
Key Takeaways
a. Building High-Performance E-Commerce
F&B systems require rapid transaction processing. Designing clean cart state engines and using background queues to process API dispatches ensures platform stability during peak ordering hours.
b. Architecting Scalable F&B Platforms
Managing multi-outlet platforms requires structured catalogs. Designing modular database relationships allows brands to configure branch-specific prices and menu options without duplicating core databases.