Overview
Belanja E-Commerce was developed for a regional physical retailer moving from informal chat-based sales channels to a self-service online store. The system automates inventory reservation, shipping estimation, payment reconciliation, and order tracking as order volume scales.
Problem
Retail staff had to manually check inventory, verify bank transfer receipts, query courier rates, record shipping details, and send tracking numbers. This caused delayed responses, overselling during promotions, postage errors, and cart abandonment.
Solution
We built a responsive SPA-like web application using Laravel, Livewire, and TailwindCSS. Checkout calculations are automated through courier APIs, payments are reconciled through signed webhooks, and cart selections stay synchronized across guest and authenticated sessions.
Checkout & Operations Architecture
The checkout flow combines real-time shipping rate lookup, payment gateway integration, hybrid cart synchronization, and pessimistic inventory locking. This keeps order creation, stock reservation, and payment status updates consistent even when customers leave the browser before payment is completed.
Key Features
- Mobile-optimized storefront with sticky navigation, gesture-friendly layouts, and safe-area handling.
- Automated courier rates for multiple domestic shipping carriers based on package weight and destination.
- Payment gateway integration for virtual accounts, QRIS, and e-wallets with signed webhook callbacks.
- Hybrid cart synchronization between session storage and authenticated database carts.
- Pessimistic inventory locking to prevent overselling limited-stock items during high-traffic checkout.
- Delivered-only product reviews and downloadable PDF invoices with role-based access.
Tech Stack
Laravel
Livewire
TailwindCSS
Alpine.js
Midtrans
Biteship
FrameworkPHP, Laravel, Livewire, Alpine.js
InterfaceTailwindCSS with mobile-first storefront interactions
PaymentsPayment gateway integration with signed webhook callbacks
ShippingDomestic courier rate API integration
DataEloquent ORM with transaction isolation and inventory locks
Contribution
Architected the relational database schema, models, custom enum castings, and migrations; engineered payment and courier API wrappers; implemented secure webhook signature validation; built Livewire storefront pages; and created tests for third-party payment flows and discount payloads.
Impact
The system moves order confirmation, payment checking, postage lookup, and stock reservation from manual staff work into automated workflows. Inventory locking reduces overselling risk, while webhook-based reconciliation keeps order status and stock updates resilient.