KUB Mobile Outage Center

Mobile App (React Native Migration Initiative)

Part of KUB's React Native modernization initiative. I delivered the outage map experience and outage reporting/status flows for cross-platform rollout readiness.

Technologies Used

React NativeExpoTypeScriptReact NavigationTanStack React QueryZodreact-native-mapsreact-native-map-clustering

App Screenshots

Outage map with storm mode and summary panel

Interactive outage callout on map marker

Address-based outage status check

Report outage: location selection

Report outage: details and contact info

Report outage: confirmation state

Project Goals

Replace fragmented outage workflows with a single mobile experience where customers can view active outages, check status by address, and submit outage reports quickly.

My Solution

I implemented the outage center in React Native + TypeScript, including a clustered outage map, service-area overlay, storm mode banner, address-based status checks, and a 3-step outage reporting flow (location, details, confirmation). I also integrated typed API parsing, dedupe logic for outage IDs, and automatic data refresh every 5 minutes.

Key Features

Clustered outage map with color-coded markers by customer impact

Outage callout cards with reported and estimated restore context

Storm mode severity banner with dynamic messaging

Address-based outage status check flow

Three-step report-outage workflow with confirmation state

Service-area overlay polygons for better geographic context

Coordinate conversion from state-plane outage API coordinates

Auto-refresh outage data every 5 minutes

Deduplication guard for duplicate outage IDs from source feeds

Results & Impact

KUB received a production-ready outage module as part of the React Native migration path, reducing future platform maintenance overhead while improving outage workflow consistency across iOS and Android.