~/work/fwd

FWD Customer Portal

A self-service insurance portal for FWD Vietnam’s policy owners. It exists as two apps, Next.js on the web and Flutter on mobile, that share one backend and have to behave identically.

Role
Software Developer · Bitelle
Timeline
Aug 2024 — Present
Platforms
Web · iOS · Android
Client
FWD Vietnam
App · home
App · home
Web · home
Web · home
Web · Lucky Draw banner
Web · Lucky Draw banner

The problem

Policy owners needed to manage policies, pay premiums, file claims and request policy changes without calling support, on web and on mobile. The two codebases kept drifting apart on business rules, so every flow had to be specified once and implemented twice without gaps.

What I built

  1. 01
    Policy & paymentsMain policy list, benefits, ILP fund data, documents, premium payments and auto-payment enrollment.
  2. 02
    Requests & claimsPolicy adjustment and claim flows with a draft lifecycle, OTP confirmation and document upload.
  3. 03
    IdentityRegistration, account recovery, OCR ID capture, biometric login and Terms of Use consent.
  4. 04
    Lucky Draw campaignI designed and built the spin-to-win feature, including gift claiming and the chain of popups shown after login.
  5. 05
    Web ↔ App parityI documented sync rules with the web as the source of truth, so the app mirrors every change the web makes.

Architecture

Clients→
cpr_webNext.js · Redux Saga
cpr_appFlutter · GetX · Dio
Edge→
Next.js API proxy/api · /backend
Firebasepush · deep links
Core
FWD backend APIspolicy · claim · payment

Hard parts

One behavior, two codebases

Every change to requests, claims or payments is checked against both apps. Written sync rules keep the Flutter app matching the web.

Regulated flows

Drafts, OTP and document upload have to survive interruptions without losing or duplicating a customer’s request.

Stack

Next.js 13React 18TypeScriptRedux ToolkitRedux Sagastyled-componentsFlutterGetXDioFirebaseDockerKubernetes