Optivest MedXpert Price Calculator – Embedded React SPA
A lightweight React SPA, delivered as a WordPress plugin, enabling real-time medical-aid price calculations via secure API integration. Standalone, embeddable, and optimized for clarity and conversion.
Technologies Used
Project Gallery
Project Metrics
Timeline
2023
Architecture
Standalone React SPA embedded via shortcode
Integration
Dynamic pricing via secure API
Security
Access token–based user data prefill
Portability
Plugin deployable on any WordPress site
Challenges
- Deliver a dynamic pricing calculator that integrates seamlessly into WordPress.
- Ensure secure API communication and user data pre-fill with tokens.
- Build a mobile-friendly SPA with optimized performance.
- Maintain full independence from WordPress themes and updates.
Solutions
- Created a fully decoupled React SPA packaged as a WordPress plugin.
- Embedded via shortcode for easy deployment across WordPress pages.
- Integrated secured REST API for real-time pricing and user data retrieval.
- Implemented dynamic rendering logic for API-returned fields and options.
- Optimized UI for performance and responsiveness on all devices.
Results
- Improved customer transparency with instant price calculations.
- Reduced manual entry through automatic user data pre-fill.
- Delivered a flexible tool for future pricing changes and plan expansions.
- Boosted conversion confidence and lead quality through a faster, clearer workflow.
Project Overview
Optivest’s MedXpert required a dynamic, customer-facing price calculator that could deliver real-time medical aid plan costs without compromising security or performance. We built a standalone React SPA, packaged as a WordPress plugin, providing instant, API-driven price calculations embedded via shortcode.
Scale & Performance
The calculator responds instantly to user inputs, pulling live data from secure APIs and dynamically rendering options. Its architecture ensures that no full-page reloads occur, delivering a smooth user experience across devices. Optimized for clarity and responsiveness, the tool performs consistently regardless of theme or WordPress updates.
Key Features
User Experience
- Standalone SPA for fluid interactions with zero reloads.
- Mobile-friendly interface optimized for accessibility and clarity.
- Inline dynamic updates as pricing and options load from APIs.
Security & Data Handling
- Token-based authentication for auto-loading user data.
- Secure REST API integration for real-time plan pricing.
- Scoped request handling to protect backend systems.
Administration & Extensibility
- Plugin-based install with shortcode deployment.
- Non-intrusive integration with any WordPress theme.
- Easily extendable to support future pricing logic or plan expansions.
Technology & Architecture
- Frontend: React SPA with Tailwind CSS for responsive UI.
- Backend Integration: WordPress PHP + REST API for dynamic data exchange.
- Security: Access token authentication for personalized data pre-fill.
- Deployment: Packaged as a WordPress plugin, embeddable with shortcode.
- Data Layer: MySQL-backed WordPress environment managing persistence and API bridge.
Process & Delivery
- Requirements Discovery: Defined pricing logic, API endpoints, and token-based security.
- SPA Development: Built a decoupled React application for performance and clarity.
- Plugin Integration: Wrapped the SPA into a custom WordPress plugin for easy deployment.
- API Integration: Connected to secured endpoints to retrieve dynamic pricing and user data.
- Testing & Deployment: Validated across devices and delivered plugin for WordPress rollout.
Outcomes & Impact
- Customer Transparency: Users receive instant, accurate price calculations.
- Operational Efficiency: Automatic data pre-fill reduced friction and manual errors.
- Conversion Lift: Improved confidence in plan selection increased lead quality.
- Future-Proofing: Independent plugin ensures scalability for new plans and pricing updates.
Notable Controls & Edge Cases
- Token Expiry Handling: Graceful fallback when tokens expire, prompting re-authentication.
- Dynamic Fields: Conditional rendering of fields based on API responses.
- Fail States: Clear messaging for API timeouts, errors, or missing data.
- Isolation: The plugin remains unaffected by WordPress core/theme changes.
Ready to Build Something Amazing?
Let's discuss how we can transform your ideas into powerful software solutions.