Custom SPA – WordPress_

Medical Aid Plan Selection Application

...

Project Details_

Project_

SPA Development & WordPress API Integration

Project Roles:

SPA DevelopmentFrontend ArchitectureBackend DevelopmentWordPress API IntegrationPlugin DevelopmentDevOpsClient Support

Project Tech:

React.jsWordPress REST APIWebPackTailwind CSSStyled ComponentsPHPMySQLDockerContext API

Intro

MedXpert, an initiative by Optivest, required a modern Single Page Application (SPA) for customer medical aid plan selection — replacing a legacy form-based system. The solution had to be responsive, modular, easy to update, and capable of secure backend communication via the WordPress REST API. The Single Page Application allows interaction with APIs without causing the webpage to reload. Since it is isolated from WordPress, it is not affected by WordPress updates.

The app is seamlessly embedded into a WordPress page and developed as a portable plugin, allowing long-term maintainability, secure deployment, and future feature expansion.

Case Summary

MedXpert – Medical Aid Selection SPA
Company: Optivest
Year: 2023

Overview

A full re-development of Optivest's digital medical aid form system into a dynamic, state-managed Single Page Application (SPA), complete with custom backend endpoints, persistent state management, and reusable logic across form components.

Platform & Stack

  • Platform: WordPress
  • Frontend: React SPA with Context API and Tailwind CSS
  • Backend: PHP with WordPress REST API and custom endpoints
  • Database: WordPress MySQL
  • Plugin Architecture: Fully packaged as a WordPress plugin
  • DevOps: Docker environment with Git versioning

Features

  • Interactive multi-step medical aid plan form
  • Persistent state logic using React’s Context API
  • Custom form validation and user progress tracking
  • Plugin-based install for portability across WordPress instances
  • Secure API communication using nonce tokens
  • Backend form data handling with post-type storage and filtering
  • Integration-ready for piggybacking Gravity Forms or CPT
  • Modern styling using Tailwind CSS and Styled Components
  • Built-in debug support and structured development documentation

Hosting & Deployment

  • Hosted via WordPress Docker container
  • Configured for seamless development → staging → production rollout
  • Minimal plugin dependencies for long-term stability
  • Independent deployment with versioned Git repo

Result

MedXpert’s new SPA delivered a faster, smoother, and more secure experience for customers exploring and downloading medical aid plan benefits. Its reusable architecture and seamless integration with WordPress backends opened the door for future enhancements and potential white-label deployment across other Optivest divisions.