Skip to content

MyMedicalHub Patient Portal

website

A production patient portal that connects onboarding, AI-assisted intake, movement assessment, exercises, reports, billing, appointments, and remote care across tenant-configured healthcare journeys.

Role
Frontend architecture and product engineering within the MyMedicalHub team
Scope
Patient journeys, movement and computer-vision workflows, tenant configuration, payments, reporting, and reliability
Status
Private employer-owned production system under active development

Problem

Patients need to complete intake, assessments, guided movements, exercises, appointments, payments, and result review without navigating disconnected healthcare tools. The portal must keep those journeys understandable while adapting to different tenants, devices, clinical programs, and service configurations.

Constraints

  1. C1

    Camera, audio, browser capability, network quality, and local ML performance vary across patient devices and directly affect clinical workflow reliability.

  2. C2

    Tenant-specific features and branded journeys must coexist without duplicating the application or leaking one organization’s configuration into another.

  3. C3

    Assessment and payment flows cross multiple services, redirects, session states, and expiry conditions that must recover predictably.

  4. C4

    Patient-facing errors and progress states must remain clear without exposing internal healthcare or infrastructure details.

Architecture

A React application composes tenant-aware patient journeys, Redux and focused context boundaries coordinate long-running workflows, browser media and ML adapters support movement analysis, and guarded service integrations connect assessments, reporting, payments, appointments, and remote assistance.

01

Patient experience

Responsive onboarding, dashboards, intake, assessments, exercises, reports, subscriptions, billing, calendars, and assistance flows.

02

Workflow state

Redux slices, React contexts, form state, and lifecycle hooks coordinate multi-step assessment, payment, callback, and chatbot journeys.

03

Media and intelligence

Webcam, MediaPipe, TensorFlow.js, speech, chatbot, and WebRTC boundaries support guided movement and remote-care interactions.

04

Tenant and service integration

Feature flags, tenant themes, authenticated APIs, payment redirects, reports, notifications, and remote-assistance services remain behind explicit adapters.

Decisions

D1

Keep tenant behavior configuration-driven

Tenant feature state and theme configuration select supported journeys without maintaining a separate frontend for every healthcare organization.

D2

Treat movement capture as a state machine

Preparation, person detection, countdown, recording, processing, retake, and completion are coordinated explicitly so late media events cannot restart a finished assessment.

D3

Isolate external redirects and payments

Payment, direct-to-consumer, mobile, callback, and remote-assistance redirects preserve the minimum required context and validate expiry or return states before resuming a workflow.

D4

Expose device limitations before clinical work begins

Compatibility, network, and performance checks give patients actionable guidance before unreliable media or ML execution compromises an assessment.

Contribution

  • Contributed extensively across movement assessment, reports, patient dashboards, authentication, payment, tenant-feature, chatbot, and remote-assistance surfaces.
  • Refined camera and recording lifecycle behavior, including selection changes, completion guards, retake rules, audio shutdown, and person-in-frame requirements.
  • Implemented and maintained tenant-aware UI, report interpretation, assessment history, payment continuation, and authenticated redirect behavior.
  • Added focused component and workflow tests while iterating on a large production React codebase shared by a multidisciplinary product team.

Outcomes

  • Patients can move through onboarding, assessment, exercise, reporting, payment, and remote-care journeys in one tenant-aware portal.
  • Movement capture handles more device, tenant, and lifecycle edge cases without silently recording invalid or stale state.
  • Feature configuration supports multiple healthcare programs while preserving a shared application foundation.
  • Operational warnings and recovery paths surface earlier, reducing avoidable failures during patient-facing clinical workflows.

Verified stack

  • React
  • Redux Toolkit
  • JavaScript
  • TensorFlow.js
  • MediaPipe
  • WebRTC
  • Vonage OpenTok
  • Microsoft Bot Framework
  • i18next
  • Formik
  • Yup
  • Jest
  • React Testing Library
  • System Design

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.

Discuss a project