Business Merchant Platform

Every time a customer taps their phone to pay at a store in Japan, a chain of systems fires in under a second. The POS terminal talks to the gateway. The gateway routes to the payment processor. The processor debits the account. And somewhere, a merchant is watching it happen in real time on a dashboard.

I built that dashboard.

The realtime flow works like this: when a payment succeeds, a scoped JWT is issued to the merchant dashboard. The client opens a WebSocket through AWS API Gateway. Messages flow into a Vuex store — no page refreshes, no polling — and the merchant sees every transaction as it happens. If the connection drops, the client reconnects automatically, catches up on missed messages, and syncs state back.

Japan's payment landscape is unique. Customers use QR codes, NFC, and online transfers. Merchants deal with settlement cycles, campaign payouts, refunds, and reconciliation reports. Each workflow has different data requirements, and they all converge on a single dashboard.

The platform was growing fast. Multiple teams shipped features simultaneously, creating a familiar startup-to-scaleup problem: duplicated UI patterns, inconsistent API integration approaches, and a transaction page that tried to be everything at once.

The transaction page had four distinct use cases sharing one filter:

Each view got its own filter scope. The summary always showed today. The list had its own date picker. The CSV had separate parameters. The store selection component fetched the merchant's locations once and fed independent parameters to each view.

1const selectedStoreIds = ref<string[]>([])2 3const listParams = computed(() => ({4storeIds: selectedStoreIds.value,5dateFrom: listDateRange.value.start,6dateTo: listDateRange.value.end,7status: listStatus.value,8}))9 10const chartParams = computed(() => ({11storeIds: selectedStoreIds.value,12period: chartPeriod.value,13comparison: chartYoY.value,14}))15 16const csvParams = computed(() => ({17storeIds: selectedStoreIds.value,18dateFrom: csvDateRange.value.start,19dateTo: csvDateRange.value.end,20columns: csvColumns.value,21}))

1const selectedStoreIds = ref<string[]>([])2 3const listParams = computed(() => ({4storeIds: selectedStoreIds.value,5dateFrom: listDateRange.value.start,6dateTo: listDateRange.value.end,7status: listStatus.value,8}))9 10const chartParams = computed(() => ({11storeIds: selectedStoreIds.value,12period: chartPeriod.value,13comparison: chartYoY.value,14}))

The WebSocket implementation used a singleton pattern — one connection shared across all components. A Vue mixin handled the full lifecycle: token acquisition, connection setup, keep-alive, reconnection with backoff, and cleanup.

Custom close codes distinguished auth failures (no retry) from network transitions (wait and retry) from intentional backgrounding (stop and save battery). JSBridge events on mobile handled foreground/background transitions.

The summary refresh was the most nuanced piece. The transaction list could update immediately — merchants watch this in real time. But summary totals needed to stabilize before refreshing, otherwise numbers flickered as they caught up with partial data.

1const DEBOUNCE_MS = 10_0002let refreshTimer: number | null = null3 4function debouncedRefreshSummary(): void {5if (refreshTimer) clearTimeout(refreshTimer)6refreshTimer = window.setTimeout(async () => {7  const totals = await fetchSummaryTotals(currentFilters.value)8  summaryStore.update(totals)9  refreshTimer = null10}, DEBOUNCE_MS)11}

25 packages in a pnpm / Turborepo workspace, each with its own build, test, and release cycle:

Production observability was non-negotiable. Every WebSocket event, reconnection, and error was instrumented through New Relic and Sentry. When we rolled out the realtime dashboard, we could see exactly how many merchants were connected, how often reconnections happened, and which failure modes were most common.

Confidentiality note: Case study details are anonymized. Metrics are verified from git log and Jira data. No proprietary business logic, internal API contracts, or customer data are exposed.