Boga Kreasi Indah

About Boga Kreasi Indah

PT Boga Kreasi Indah (BKI) is an Indonesian food and beverage company founded in 2022 and headquartered in Jakarta, part of PAM Group. It produces high-quality food and drinks, from ready-to-eat meals, snacks, and beverages to catering for events.

BKI runs a portfolio of distinctive restaurant brands, including:

• GC Street BBQ, a Korean BBQ concept serving quality meats in a relaxed space for families and friends.

• Cols Froyo, Indonesia's first self-serve frozen yogurt, with six yogurt flavors and a wide choice of toppings.

According to the company, its 5 brands operate across 50+ branches in Indonesia, backed by partnerships with more than 10 well-known companies.

The challenge

With several brands and dozens of branches, BKI wanted one place where customers could come back to: discover the brands, join a membership, collect points, redeem vouchers, and follow promotions and articles. The program also needed affiliates who promote the brands, and an admin side to run everything.

That meant three different experiences (customer, affiliate, and admin) on top of the same loyalty rules, all of which had to feel simple on a phone in the middle of a meal.

My role

At Sawala Technology, I independently built the production front end from the ground up, working with the backend team's APIs.

What I built

Customer experience

• Public site with the company story, brand pages, promotions, articles, and contact information.

• Membership sign-up and login, with cashback and discount benefits that are only available to members.

• Points, vouchers, and memberships: customers can see their balance, membership tier, and available vouchers, and redeem them.

• Transaction history so customers can trace how they earned and spent points.

• Customer feedback flows so the brands can hear from diners directly.

Animated reward claims for events

For brand events and campaigns, I built animated reward-claim experiences, so claiming a prize feels like part of the event itself instead of a plain form.

Affiliate and admin experiences

• An affiliate area for partners who promote the brands.

• An admin area to manage members, rewards, and program content.

• API integration across all three experiences, so every screen reflects live data from the loyalty backend.

Cashier module

Outlet staff got their own area for daily operations, built around the phone camera so it works at a busy counter:

• Membership verification: the cashier scans a member’s QR code to confirm the membership before applying member benefits.

• Voucher redemption: scanning a voucher opens a confirmation step before it is marked as used, so mistakes are caught at the counter.

• B-Coin claims: members claim their B-Coin points at the outlet, with a clear result screen for both sides.

Architecture overview

A high-level view of how the platform is organised. The loyalty rules and data live in the REST API built by the backend team; the Next.js front end gives each audience its own area, and every signed-in user lands in the area for their role.

flowchart LR
  accTitle: Boga Kreasi Indah platform overview
  accDescr: Visitors use the public site. Members, affiliates, cashiers, and admins sign in and are routed to their own area. Every area talks to the loyalty REST API.
  visitor([Visitor]) --> publicSite
  member([Member]) --> guard
  affiliate([Affiliate]) --> guard
  cashier([Cashier]) --> guard
  admin([Admin]) --> guard
  subgraph web["Next.js front end"]
    publicSite["Public site<br/>brands, promos, events, articles"]
    guard{"Sign-in and<br/>role-based routing"}
    dashboard["Member dashboard<br/>QR code, vouchers, points, history"]
    affiliateArea["Affiliate area<br/>referrals and withdrawals"]
    cashierArea["Cashier module<br/>QR scans and claims"]
    adminArea["Admin panel<br/>members, rewards, outlets, content"]
    guard --> dashboard & affiliateArea & cashierArea & adminArea
  end
  publicSite & dashboard & affiliateArea & cashierArea & adminArea --> api[("Loyalty REST API<br/>backend team")]
  web -. errors .-> sentry["Sentry"]

Redeeming a voucher at the counter, step by step:

sequenceDiagram
  accTitle: Voucher redemption at the counter
  accDescr: The cashier scans a member’s voucher, checks the confirmation screen, and the loyalty API marks it as used.
  actor Member
  actor Cashier as Cashier
  participant App as Cashier module
  participant API as Loyalty API
  Member->>Cashier: Shows the voucher QR code
  Cashier->>App: Scans it with the phone camera
  App->>API: Looks up the voucher
  API-->>App: Voucher details and status
  App-->>Cashier: Confirmation screen
  Cashier->>App: Confirms the redemption
  App->>API: Redeems the voucher
  API-->>App: Result
  App-->>Cashier: Success, or the reason it failed

Tech stack

Next.js, TypeScript, Tailwind CSS, and shadcn/ui, integrated with REST APIs.

Result

The platform is live at bogakreasi.id, giving BKI one home for its brands, its loyalty program, and its promotions.

Today it serves more than 12,500 registered members.