Heart Consultants LLC - Digital Cardiology Consultation Platform

Heart Consultants LLC works with hospitals and cardiology groups to improve the clinical, operational, and financial performance of cardiovascular care programs, including catheterization laboratories, electrophysiology services, and structural heart programs.

The digital platform extends this expertise into an online consultation experience, enabling patients to connect with healthcare professionals for advice, consultations, and follow-up.

This project stands out to me because of the amount of work invested in establishing a robust frontend structure before implementing the application's different features. The objective was not simply to build a collection of screens, but to create a consistent, maintainable interface architecture suitable for a professional healthcare environment.

Frontend architecture with IBM Carbon Design System

One of the major technical challenges was building a coherent user interface using IBM Carbon Design System.

Rather than styling each page independently, I structured the frontend around Carbon's design principles and reusable React components. This helped establish consistency across typography, spacing, forms, navigation, and interactive elements while providing a foundation for the application's different workflows.

The architecture also required careful management of custom styling. Carbon components and design tokens had to remain consistent with the platform's visual identity without compromising the underlying design system.

The frontend was built with React and Carbon, using IBM Plex typography and a structured styling approach.

For example, a reusable consultation form can be built around Carbon components rather than recreating form controls from scratch:

import {
  Button,
  Form,
  TextInput,
  TextArea,
} from '@carbon/react';
 
function ConsultationRequest() {
  return (
    <Form onSubmit={(event) => event.preventDefault()}>
      <TextInput
        id="full-name"
        labelText="Full name"
        placeholder="Enter your full name"
        required
      />
 
      <TextArea
        id="reason"
        labelText="Reason for consultation"
        placeholder="Describe your request"
      />
 
      <Button type="submit">
        Request a consultation
      </Button>
    </Form>
  );
}
 
export default ConsultationRequest;

This is an illustrative example of the Carbon component approach, not a reproduction of the original application's source code.

Laravel backend and application architecture

Laravel provides the backend foundation for the platform, separating server-side responsibilities from the React presentation layer.

This separation supports a more modular architecture in which the frontend consumes API responses while Laravel handles business rules, data access, and protected operations.

For a healthcare consultation platform, the backend must also enforce access rules around patient information, appointments, and consultation records. These controls should be applied server-side rather than relying solely on frontend visibility.

An illustrative API route structure could look like this:

use App\Http\Controllers\Api\ConsultationController;
use Illuminate\Support\Facades\Route;
 
Route::middleware('auth:sanctum')
    ->prefix('consultations')
    ->group(function () {
        Route::get('/', [
            ConsultationController::class,
            'index',
        ]);
 
        Route::post('/', [
            ConsultationController::class,
            'store',
        ]);
 
        Route::get('/{consultation}', [
            ConsultationController::class,
            'show',
        ]);
    });

The authentication middleware shown here is an example; the actual authentication mechanism should match the project's implementation. In addition to authentication, consultation access requires authorization checks to ensure that each user can access only the records permitted by their role and relationship to the consultation.

Real-time consultations with LiveKit

Another important part of the project was the integration of LiveKit, an open-source platform for real-time audio and video communication.

This integration adds a real-time communication layer to the application, making it possible to support remote consultations without building the underlying media infrastructure from scratch.

At a high level, the architecture separates the responsibilities as follows:

A typical integration involves the backend issuing a short-lived access token after verifying the user's identity and authorization. The frontend then uses that token to connect to the appropriate LiveKit room.

The token should be generated server-side, with signing credentials kept out of the frontend. An illustrative Laravel endpoint might follow this structure:

public function join(Consultation $consultation)
{
    $this->authorize('join', $consultation);
 
    // Generate a short-lived LiveKit token
    // using server-side credentials and the
    // authorized room and participant identity.
 
    return response()->json([
        'room' => $consultation->room_name,
        'token' => $this->liveKitTokenService
            ->createFor($consultation, request()->user()),
    ]);
}

The token service above represents an architectural example, not a confirmed class from the original project. Its purpose is to highlight the separation between consultation authorization and real-time connection credentials.

Security and healthcare considerations

Working on a healthcare-oriented application makes security and access management particularly important. The architecture needs to account for authenticated access, role-based permissions, secure handling of consultation information, and protection of real-time session credentials.

The platform's security model should also consider the confidentiality of audio/video sessions, appropriate retention of records, and the applicable privacy requirements for the jurisdictions in which the service operates.

Engineering challenges and lessons

The project required combining three complementary areas of engineering:

• Design-system engineering: Building a coherent interface architecture around Carbon Design System rather than relying on isolated page-level styling.
• Full-stack development: Separating React presentation components from Laravel business logic and API responsibilities.
• Real-time integration: Connecting a business application to LiveKit while keeping authentication and room access under application control.

The result is a technically rich project that combines enterprise-oriented UI engineering, backend application design, and real-time communication in a healthcare context.

Technologies: React, TypeScript, IBM Carbon Design System, IBM Plex, Laravel, PHP, LiveKit, REST APIs.