Price Calculator – React SPA - 2nd project_

Standalone Price Form with Dynamic API Integration for medical company

...

Project Details_

Project_

Custom WordPress Plugin & React SPA

Project Roles:

Frontend DevelopmentBackend IntegrationWordPress Plugin DevelopmentReact SPAAPI IntegrationClient CollaborationTesting & Deployment

Project Tech:

React.jsWordPressCustom REST APITailwind CSSPHPMySQL

Intro

A lightweight, dynamic price calculator developed as a standalone Single Page Application for Optivest (MedXpert). The solution integrates with WordPress via a custom plugin and supports secure API-based calculations and user data pre-fill using access tokens.

Case Summary

Price Calculator – Optivest / MedXpert
Year: 2023


Overview

The application allows users to calculate medical aid prices based on real-time API data and conditional form logic. It's built to be highly responsive, embeddable, and secure — improving user interaction and price transparency.


Platform & Stack

  • Platform: WordPress with Custom Plugin
  • Frontend: React Single Page Application
  • Backend: WordPress + PHP
  • API Integration: Dynamic pricing data and user details via secured REST API
  • Styling: Tailwind CSS + Scoped Component Styling

Features

  • Fully decoupled SPA embedded via shortcode
  • Auto-load user data when access token is detected
  • Dynamic rendering of API-returned fields and options
  • Mobile-friendly design
  • Optimized for performance and clarity
  • Easily extendable for future plans and pricing changes

Hosting & Deployment

  • Delivered as a standalone plugin installable on any WordPress site
  • Shortcode-based deployment in page content
  • Fully scoped and non-intrusive with existing WordPress themes
  • Secured API request handling

Result

Empowered Optivest and MedXpert with a flexible, self-contained pricing tool for medical aid customers — improving lead quality, reducing manual data entry, and increasing conversion confidence.