/ Case study — Delivery

Ayam Bakar Delivery

The brand got its own ordering app — browse, pay, track — so it keeps the customer and the margin instead of handing both to an aggregator.

RoleFrontend

Year2025

TypeDelivery

LiveVisit ↗

ReactViteReact RouterTypeScriptTailwind CSS

delivery.ayambakarasapjimbaran.co.id Live recreation

Delivery location

◎ Canggu, Bali ▾

🔔

What you'd like
to eat for today?

Free Delivery
on your first order!

Super Deal
50% OFF All Menu

⌕Search menu, restaurant or craving⌕

Your own delivery app — order in a few taps

A branded ordering app your customers use directly, so you keep the margin and the relationship instead of paying an aggregator. Browse, pay, and track the order live.

Order foodStep 1 / 4

Sign in

Just your phone number — a quick code, no password.

Phone + OTP

Keep your margin
No aggregator fee on every order — the channel is yours.
Own the customer
Their details and order history stay with you, not a middleman.
A real app experience
Fast, smooth, and branded — 20+ screens from login to live tracking.

Problem

Every delivery order ran through aggregator apps that took a cut of each sale and owned the customer relationship. The brand had no channel of its own — no cart, no order history, no idea who was ordering.

Approach

A mobile-first storefront the brand owns end to end, built as a fast single-page app. The whole ordering journey lives in one client — phone + OTP login, browse, product detail, cart, checkout, payment method, and live order tracking — plus favorites, promos, referrals, and support chat.

React SPA on Vite + React Router, with app-like screen transitions in the browser.
Phone + OTP sign-in — no password wall between hungry and paid.
20+ screens covering the full journey: home, product, cart, checkout, payment, tracking, orders, addresses, store locator, rewards, refer-a-friend, chat, profile.

Own the channel, or rent your margin — and your customers — to someone else.

Architecture

React SPA (Vite + React Router)
  splash → login → OTP → home
    → product → cart → checkout → payment method
    → order tracking / history
  state: cart context · favorites · addresses
  orders + payment → ABAJ commerce backend (Xendit, server-side)

Key decisions & trade-offs

SPA, not a reload per tap. React Router drives app-like navigation so ordering on the web feels like a native app.
Phone + OTP over accounts. The lowest-friction identity that still ties an order to a real person — and reuses the brand’s own login.
Front-end owns the journey; the backend owns the money. Pricing and payment are recomputed server-side on the ABAJ backend — the client never quotes a total it can be trusted on.

Result

A complete, brand-owned ordering experience — from login to live tracking — that keeps the margin and the customer data in-house instead of with a middleman.

Masalah

Tiap pesanan delivery lewat aplikasi aggregator yang mengambil potongan dari setiap penjualan dan memiliki hubungan dengan pelanggan. Brand-nya tidak punya channel sendiri — tidak ada keranjang, tidak ada riwayat pesanan, tidak tahu siapa yang memesan.

Pendekatan

Sebuah storefront mobile-first yang dimiliki brand dari ujung ke ujung, dibangun sebagai single-page app yang cepat. Seluruh perjalanan pemesanan hidup di satu klien — login HP + OTP, jelajah, detail produk, keranjang, checkout, metode pembayaran, dan pelacakan pesanan langsung — plus favorit, promo, referral, dan chat dukungan.

React SPA di atas Vite + React Router, dengan transisi layar seperti-aplikasi di browser.
Masuk dengan HP + OTP — tanpa tembok password antara lapar dan bayar.
20+ layar mencakup seluruh perjalanan: beranda, produk, keranjang, checkout, pembayaran, pelacakan, pesanan, alamat, pencari toko, reward, ajak-teman, chat, profil.

Miliki channel-nya, atau sewakan marginmu — dan pelangganmu — ke orang lain.

Arsitektur

React SPA (Vite + React Router)
  splash → login → OTP → home
    → product → cart → checkout → payment method
    → order tracking / history
  state: cart context · favorites · addresses
  orders + payment → ABAJ commerce backend (Xendit, server-side)

Keputusan kunci & trade-off

SPA, bukan muat-ulang tiap ketuk. React Router menggerakkan navigasi seperti-aplikasi jadi memesan di web terasa seperti aplikasi native.
HP + OTP ketimbang akun. Identitas dengan gesekan paling kecil yang tetap mengikat pesanan ke orang sungguhan — dan memakai ulang login milik brand sendiri.
Front-end memiliki perjalanannya; backend memiliki uangnya. Harga dan pembayaran dihitung ulang di sisi server pada backend ABAJ — klien tidak pernah mengutip total yang bisa dipercaya begitu saja.

Hasil

Pengalaman pemesanan yang lengkap dan dimiliki-brand — dari login sampai pelacakan langsung — yang menjaga margin dan data pelanggan tetap di dalam, bukan di tangan perantara.

/ How it’s done

Phone-OTP sign-in — live

Type any 6 digits. Phone + OTP is the whole identity — no password wall between hungry and paid.

verify · +62 811-8100-141

type any 6 digits

Phone + OTP over accounts. No password to forget, no signup wall between hungry and paid — yet every order still resolves to a real person, reusing the brand's own login. The whole 20+ screen journey lives in one fast React SPA; pricing is recomputed server-side.

Own the channel

A first-party storefront so the brand keeps its margin and customer data, instead of renting both to aggregators.

Phone + OTP over accounts

The lowest-friction identity that still ties an order to a real person, reusing the brand’s own login — no signup wall to kill first-order conversion.

A real app in the browser

20+ screens — splash, product, cart, checkout, payment, live tracking, addresses, rewards — as one fast React SPA on Vite + React Router.

Front-end owns the journey; backend owns the money

Cart and flow live client-side; pricing and payment are recomputed server-side on the ABAJ backend before an invoice exists.

What you'd liketo eat for today?

Free Deliveryon your first order!

Super Deal50% OFF All Menu