KloudPX

Overview

KloudPX is a comprehensive, production-grade healthcare delivery platform designed specifically for the Philippine market. It bridges the gap between patients and pharmacies by providing a seamless digital ecosystem for ordering medicines and accessing healthcare services. The platform is robust, secure, and compliant with healthcare regulations.

The Problem

Accessing prescription medicines and healthcare essentials can be challenging due to logistical barriers and strict regulatory requirements. The goal was to create a digital solution that simplifies this process while strictly adhering to safety protocols, particularly for distinguishing between Over-the-Counter (OTC) and Prescription (Rx) medications.

System Architecture

The ecosystem is composed of three interconnected portals, all synchronized in real-time via a centralized API layer:

• User Portal (Next.js): A customer-facing web application where patients can browse products, upload prescriptions, and track orders. It handles high traffic and requires SEO optimization.
• Admin Portal (React): A secure Single Page Application (SPA) for business owners to manage inventory, payments, and logistics.
• Pharmacist Portal (React): A specialized interface for licensed professionals to verify medical documents and approve restricted orders.

Workflow Breakdown

• Rx (Prescription) & OTC Workflow: OTC items can be added to the cart immediately. Rx items require the user to upload a valid prescription. The checkout process automatically segments these items.
• Delivery System: Users can choose between Express Delivery (guaranteed within 3–4 hours) and Standard Delivery. The system calculates cut-off times and availability dynamically.
• Prescription-to-Cart Automation: When a doctor prescribes medication on the partner platform (HealthSense), the data is securely transmitted and pre-populated in the user's KloudPX cart, reducing manual entry errors.

Technical Implementation

• Real-Time Synchronization: Utilized React Query to maintain server state consistency across all three portals. An update in the Pharmacist Portal reflects immediately in the Admin view without manual refreshing.
• Centralized API Structure: Designed a monolithic API approach that serves all three frontends, ensuring data integrity and consistent business logic.
• Secure State Handling: Implemented Redux Toolkit for complex global state requirements, particularly for the split cart logic (Rx vs OTC) and cross-session persistence.

My Contribution

I served as the primary Frontend Architect and Developer for this project. My role was pivotal in translating complex healthcare requirements into a user-friendly digital experience.

• Frontend Architecture: Designed the folder structure and component hierarchy for all three portals, ensuring code reusability and scalability.
• State Management: Architected the global state using Context API for UI themes and user sessions, and Redux for complex cart management involving multiple product types.
• API Integration: Handled the integration of over 50+ REST API endpoints using Axios, implementing interceptors for token management and error handling.
• Performance Optimization: Utilized React Query to minimize redundant network requests and implemented code-splitting in Next.js to ensure fast load times even on slower mobile networks.

Impact

The launch of KloudPX significantly streamlined the medicine delivery process for thousands of users in the Philippines. It reduced the average time from prescription to delivery and ensured 100% compliance with local pharmacy regulations through the digital verification system.