MedXpert: Embedded React SPA for WordPress

Project Overview

Optivest’s MedXpert needed to retire a legacy, form-heavy flow and move to a fast, resilient Single Page Application. We delivered a React SPA embedded inside WordPress as a portable plugin—secure by design, easy to deploy, and independent from WordPress core updates. The result is a modern plan-selection experience with persistent state, robust validation, and a stable DevOps pipeline.

Scale & Performance

The SPA eliminates full-page reloads, keeps user progress intact across steps, and reduces friction on mobile. Client-side state via Context API and targeted API calls to custom REST endpoints keep interactions snappy. The plugin model minimizes runtime dependencies, improving stability across environments.

Key Features

Enrollment & UX

• Multi-step medical-aid plan selection with guided progression.
• Persistent state and resumable progress (Context API).
• Custom validation rules and inline error messaging.
• Mobile-responsive layout with Tailwind CSS and Styled Components.

Security & Data

• Nonce-protected WordPress REST endpoints with scoped capabilities.
• Backend form data handling using custom post-type storage and filters.
• Sanitization/validation on server-side input.

Admin & Extensibility

• Portable, versioned plugin for clean installs/updates.
• Integration-ready to piggyback Gravity Forms or CPT workflows.
• Structured developer documentation and built-in debug support.

Deployment & Maintainability

• Dockerized development, staging, and production environments.
• Git-driven release process for predictable rollouts and rollbacks.
• Minimal external plugin dependencies for long-term stability.

Technology & Architecture

• Frontend: React SPA (Context API for global state), Tailwind CSS, Styled Components, Webpack bundling.
• WordPress Integration: Custom REST routes in PHP secured with nonces and capability checks; data persisted via custom post types.
• Packaging: Fully self-contained WordPress plugin—no theme coupling, minimal dependency footprint.
• Data Layer: Uses WordPress MySQL for persistence; API interactions are explicitly scoped and validated.
• Ops: Docker-based local environments and staged pipelines; Git for version control and release tagging.

Process & Delivery

1. Audit & Design: Mapped legacy form logic, user journeys, and security requirements.
2. Incremental Build: Implemented the SPA in discrete modules with shared form logic and validation.
3. API Hardening: Delivered custom REST endpoints, nonce workflows, and capability checks.
4. Plugin Packaging: Encapsulated the SPA and APIs into a single, portable plugin.
5. CI/CD: Established Docker environments and a Git-based deploy path from dev → staging → production.
6. Handover & Support: Documentation, debug tooling, and client training for ongoing operations.

Outcomes & Impact

• Experience: Faster plan exploration with zero reloads; clearer progress and fewer user errors.
• Risk Reduction: Independence from WordPress core/theme updates prevents breakage and reduces maintenance overhead.
• Speed to Change: Plugin packaging + Dockerized environments accelerate updates and controlled releases.
• Scalability: Clean separation of concerns and reusable modules support future features and white-label deployment.

Notable Controls & Edge Cases

• Nonce Rotation & Expiry: Defensive handling for expired/invalid tokens with user-safe recovery states.
• Autosave & Resume: Client-side persistence preserves progress during tab closes or network hiccups.
• Validation Fallbacks: Server-side validation mirrors client rules to prevent bypass.
• Hard Fail States: Clear error boundaries, loading states, and retry actions for unreliable networks.
• Update Resilience: Plugin remains unaffected by theme swaps or WordPress minor updates.