← Back to projects

Orbit Workboard

React Native workboard that helps field service providers triage sites, inspect visits, and capture proof of work with device hardware.

#ReactNative
#NativeCapture
#ActionEligibility
#PureDomainLogic
#MotionCheck

Source code

Project overview

Orbit Workboard is a mobile app for field service providers maintaining equipment across many customer sites. A virtualized workboard surfaces which sites need attention today; site and visit detail sheets drill into timelines and warnings; and completing a visit is gated by camera evidence, QR asset verification, and an accelerometer-based motion check—each with explicit permission and fallback states.

Engineering challenges

Modeling visit action eligibility as pure domain logic—getAvailableVisitActions returns enabled/disabled actions with human-readable disabledReasons (e.g. "Required photo evidence is missing", "Asset scan does not match expected equipment") instead of scattering conditionals across UI components.
Gating complete_visit on combined readiness—visit status, required evidence photos, asset scan match, and motion check result—so invalid state transitions are impossible from the UI rather than merely hidden.
Classifying equipment handling from raw accelerometer samples: a 4-second capture window derives peak deviation from 1g and classifies stable vs rough_motion_detected, with sensor subscriptions started only while the check is active and cleaned up when the sheet closes.
Wrapping camera, scanner, and sensor concerns in a thin native/ layer with development fallbacks (simulated capture, manual scan input), keeping the same state model whether or not real hardware is available.

Features

Virtualized site list with search, status, date-scope, and evidence filters plus pull-to-refresh
Summary header (sites, visits due today, blocked, urgent, missing evidence) derived from filtered data
Stacked site and visit detail sheets that preserve list scroll and filter state
Camera evidence capture with preview, retake, and queued upload status
QR/barcode asset verification with match and mismatch states and rescan
Accelerometer motion check with live progress and stable/rough classification
Async visit actions with pending states, simulated failures, and confirmation for destructive actions
Typed analytics boundary instrumenting key user actions with consistent payloads
65 Jest tests across 11 suites covering filtering, eligibility, transitions, and readiness logic

Architecture

At a glance

React Native + Expo with TypeScript; one feature module with explicit boundaries.
UI renders state and calls callbacks; view-model hooks coordinate async behavior.
Domain modules are pure (no React imports) and carry the test coverage.

Feature modules

screens/ · components/ (workboard list, sheets, capture overlays)
viewModels/ (useWorkboardList, useVisitFieldWorkflow, useCameraPermissionGate)
domain/ (filters, summaries, action eligibility, evidence/scan/motion readiness)
native/ (camera capture, motion sampling, permission handling)
data/ (mock API with async mutations and seeded sites/visits)

Native flows

expo-camera (evidence photos and QR/barcode scanning)
expo-sensors (accelerometer sampling for the motion check)
Permission unknown/granted/denied handled as product states with recovery paths
Dev fallbacks: simulated capture and manual scan input behind labeled toggles

Data & analytics

Mock API imitates real async mutations (pending, success, simulated failure) so a live backend can replace it later; a typed trackEvent boundary keeps analytics event names and payloads consistent at every call site.

flowchart TB
  subgraph ui [1. UI — React Native + Expo]
    screen[Workboard screen — virtualized FlatList]
    sheets[Site and visit detail sheets]
    overlays[Capture overlays — camera, scan, motion]
    screen --> sheets --> overlays
  end
  subgraph vm [2. View models — hooks]
    list[useWorkboardList — search, filters, refresh]
    workflow[useVisitFieldWorkflow — capture and actions]
  end
  subgraph dom [3. Pure domain — no React imports]
    filters[Filtering, date scope, summaries]
    actions[Action eligibility and status transitions]
    readiness[Evidence, scan, and motion readiness]
  end
  native[Native wrappers — expo-camera, expo-sensors]
  mock[(Mock API — seeded sites and async mutations)]
  analytics[Analytics — typed trackEvent boundary]
  ui --> vm
  vm --> dom
  vm --> native
  vm --> mock
  vm --> analytics

Technologies used

Mobile

React Native, Expo, TypeScript

Native APIs

expo-camera, expo-sensors, safe-area-context

State & domain

View-model hooks, pure domain modules, mock async API

Testing

Jest, jest-expo (11 suites, 65 tests)

Tooling

pnpm, ESLint, tsc