Total Buah Segar

Fresh produce e-commerce platform for TBS, serving Indonesian consumers with scheduled fruit delivery, loyalty programs, and timed daily specials. An omnichannel retail experience built as a PWA-grade web app.

Problem

• Legacy WooCommerce frontend couldn't handle real-time inventory, scheduled delivery, or tiered loyalty — common in Southeast Asian grocery e-commerce.

• Need for a unified platform combining CMS-managed content, member perks, and location-aware shipping.

Approach

• Dual API layer — Axios instances for auth/CMS (main API) and product/checkout (WooCommerce ecom API), unified by a 401 interceptor.

• Redux Toolkit + Context — 18 RTK slices for global state; React Context for auth session with useReducer. Custom useStore hook replacing raw useSelector/useDispatch.

• Optimistic UI everywhere — wishlist toggle, address CRUD, cart updates all mutate Redux state first, then reconcile on API response with rollback.

• Two-phase checkout — address → shipping → coupon → points → live summary → Midtrans Snap, with reactive recalculation at each step.

• Per-page auth guard & layout — declarative Component.authGuard / Component.layout via NextPage module augmentation.

Impact

• Replaced monolithic WooCommerce theme with a maintainable component-driven architecture (18 slices, zero test debt — planned).

• Handles full Indonesian e-commerce lifecycle: timed flash sales, loyalty tiers, voucher QR, OTP auth, and scheduled delivery windows.

• i18n-ready (EN/ID) with locale-aware validation via yup-locales.