Boga Kreasi Indah

Kenalan sama Boga Kreasi Indah

PT Boga Kreasi Indah (BKI) adalah perusahaan makanan dan minuman di Indonesia yang berdiri tahun 2022 dan berkantor pusat di Jakarta, bagian dari PAM Group. BKI bikin makanan dan minuman berkualitas tinggi, mulai dari makanan siap saji, camilan, dan minuman, sampai katering buat berbagai acara.

BKI punya beberapa brand restoran yang unik, di antaranya:

• GC Street BBQ, konsep Korean BBQ dengan daging pilihan berkualitas dan suasana nyaman buat kumpul bareng keluarga dan teman.

• Cols Froyo, self-serve frozen yogurt pertama di Indonesia, dengan enam pilihan rasa yogurt dan beragam topping.

Menurut perusahaan, 5 brand mereka beroperasi di 50+ cabang di Indonesia, dan didukung kemitraan dengan lebih dari 10 perusahaan ternama.

Tantangan

Dengan banyak brand dan puluhan cabang, BKI pengin punya satu tempat yang bikin customer balik lagi: kenalan sama brand-nya, gabung membership, ngumpulin poin, nukar voucher, dan ngikutin promo dan artikel. Programnya juga melibatkan affiliate yang mempromosikan brand, dan butuh sisi admin buat ngejalanin semuanya.

Artinya ada tiga pengalaman berbeda (customer, affiliate, dan admin) di atas aturan loyalty yang sama, dan semuanya harus terasa simpel dibuka di HP, bahkan pas lagi makan.

Peranku

Di Sawala Technology, aku develop sendiri production front end-nya dari awal, lalu nyambungin ke API dari tim backend.

Yang aku bikin

Pengalaman customer

• Website publik berisi cerita perusahaan, halaman brand, promo, artikel, dan info kontak.

• Daftar dan login membership, dengan benefit cashback dan diskon yang cuma didapat member.

• Points, vouchers, dan memberships: customer bisa lihat saldo poin, tier membership, dan voucher yang tersedia, terus nukarnya.

• Riwayat transaksi biar customer bisa ngelacak poinnya dapat dari mana dan kepakai buat apa.

• Alur customer feedback biar brand bisa denger langsung dari pelanggan.

Animated reward claim untuk event

Buat event dan campaign brand, aku bikin animated reward-claim experience, biar klaim hadiah terasa jadi bagian dari event-nya, bukan sekadar form biasa.

Pengalaman affiliate dan admin

• Area affiliate buat partner yang mempromosikan brand.

• Area admin buat ngelola member, reward, dan konten program.

• Integrasi API di ketiga pengalaman, jadi tiap layar nampilin data live dari backend loyalty.

Modul kasir

Staf outlet punya area sendiri buat operasional harian, dibikin dengan fokus ke kamera HP biar tetap praktis di kasir yang ramai:

• Verifikasi membership: kasir scan QR code member buat mastiin membership-nya sebelum benefit member diberikan.

• Penukaran voucher: setelah voucher di-scan, ada langkah konfirmasi dulu sebelum voucher ditandai terpakai, jadi salah klik di kasir bisa dicegah.

• Klaim B-Coin: member ngeklaim poin B-Coin di outlet, dengan layar hasil yang jelas buat kedua pihak.

Gambaran arsitektur

Gambaran umum cara platform ini disusun. Aturan loyalty dan datanya ada di REST API yang di-develop tim backend; front end Next.js ngasih tiap pengguna area sendiri, dan setiap user yang login langsung diarahin ke area sesuai perannya.

flowchart LR
  accTitle: Gambaran platform Boga Kreasi Indah
  accDescr: Pengunjung memakai website publik. Member, affiliate, kasir, dan admin login lalu diarahkan ke area masing-masing. Semua area terhubung ke REST API loyalty.
  visitor([Pengunjung]) --> publicSite
  member([Member]) --> guard
  affiliate([Affiliate]) --> guard
  cashier([Kasir]) --> guard
  admin([Admin]) --> guard
  subgraph web["Next.js front end"]
    publicSite["Website publik<br/>brand, promo, event, artikel"]
    guard{"Login dan<br/>routing per role"}
    dashboard["Dashboard member<br/>QR code, voucher, poin, riwayat"]
    affiliateArea["Area affiliate<br/>referral dan penarikan dana"]
    cashierArea["Modul kasir<br/>scan QR dan klaim"]
    adminArea["Panel admin<br/>member, reward, outlet, konten"]
    guard --> dashboard & affiliateArea & cashierArea & adminArea
  end
  publicSite & dashboard & affiliateArea & cashierArea & adminArea --> api[("REST API loyalty<br/>tim backend")]
  web -. error .-> sentry["Sentry"]

Alur penukaran voucher di kasir, langkah demi langkah:

sequenceDiagram
  accTitle: Penukaran voucher di kasir
  accDescr: Kasir memindai voucher member, mengecek layar konfirmasi, lalu API loyalty menandai voucher sebagai terpakai.
  actor Member
  actor Cashier as Kasir
  participant App as Modul kasir
  participant API as Loyalty API
  Member->>Cashier: Menunjukkan QR code voucher
  Cashier->>App: Memindai dengan kamera HP
  App->>API: Mencari data voucher
  API-->>App: Detail dan status voucher
  App-->>Cashier: Layar konfirmasi
  Cashier->>App: Mengonfirmasi penukaran
  App->>API: Menukarkan voucher
  API-->>App: Hasil
  App-->>Cashier: Berhasil, atau alasan gagal

Tech stack

Next.js, TypeScript, Tailwind CSS, dan shadcn/ui, terintegrasi dengan REST API.

Hasil

Platform ini udah live di bogakreasi.id, jadi satu rumah buat brand, program loyalty, dan promo BKI.

Sekarang platformnya melayani lebih dari 12.500 member terdaftar.