Main Patient View (Next Steps)
Patient Wellness View (Meditation and Relaxation)
Nurse View: Database View
Nurse View: Add New Patient Dashboard

🏥 MediClear

💡 Inspiration

Going to the Emergency Room is already stressful—the worst part? The waiting room. Patients often have no idea when they’ll be seen or what tests they’re waiting for. This fundamental lack of communication creates anxiety and frustration for patients and adds pressure to already overworked healthcare staff.

We wanted to transform the waiting experience from uncertainty into clarity. MediClear bridges the communication gap between hospitals and patients, turning passive waiting into an informed and supportive experience. By incorporating Vivirion-inspired patient wellness and education, MediClear helps patients better understand their care journey while reducing anxiety during ER visits.

🧠 What it does

MediClear is a dual-portal hospital transparency platform that allows triage nurses to communicate patient progress in real time.

📱 For Patients

Patients receive a 6-character access code at triage.

Entering this code unlocks a personalized patient dashboard.

Patient Experience Flow

$$ \text{Patient Arrives} \rightarrow \text{Receives Access Code} \rightarrow \text{Logs Into Portal} \rightarrow \text{Views Treatment Timeline} $$

The dashboard provides:

Live Tracking: A dynamic timeline showing completed, active, and upcoming steps in the patient's ER journey, along with machine availability when relevant.
Wait Room Wellness: A suite of clinical anxiety-reduction tools designed to help patients stay calm and supported while waiting.
Condition-Specific Education (Powered by Vivirion): Patients receive tailored educational modules related to their symptoms, helping them understand possible tests, procedures, and what to expect next.

👩‍⚕️ For Nurses & Administrators

The nurse interface acts like an ER traffic control center.

Nurse Workflow

$$ \text{Patient Intake} \rightarrow \text{Symptoms Tagged} \rightarrow \text{Diagnostic Steps Assigned} \rightarrow \text{Treatment Stage Updated} $$

The dashboard allows staff to:

A desktop dashboard that acts like an ER traffic controller.
Nurses can quickly intake patients, tag symptoms, and drag-and-drop diagnostic steps into a patient’s treatment timeline.
Staff can advance or revert a patient’s treatment stage with a single click.
Diagnostic machine statuses can be updated in real time to reflect availability and reduce patient uncertainty.

⚙️ How we built it

MediClear was designed as a cloud-native full-stack healthcare coordination system with two synchronized user interfaces connected through a centralized API layer.

🖥️ Frontend Architecture

The client applications were built using React with Vite for fast development and optimized build performance.

Routing between the Patient Portal and Nurse Command Center is handled through React Router, allowing the application to behave as a seamless single-page interface while still supporting multiple operational dashboards.

We used Tailwind CSS to rapidly prototype a responsive UI system that prioritizes accessibility, clarity, and calm visual design—key for healthcare environments where cognitive load should remain low.

The frontend communicates with the backend through a configurable API endpoint defined via environment variables, allowing the same client build to work across local development and cloud deployment environments.

🧩 Backend System

The backend is a RESTful API built with Node.js and Express, designed to manage patient workflow state and hospital resource data.

API Capabilities

Patient creation and intake routing
Treatment stage advancement and rollback
Machine availability tracking
Patient lookup via secure 6-character access code

Patient records and facility resource data are modeled using Mongoose schemas, enabling structured validation and consistent state management.

☁️ Deployment

The frontend is deployed globally on Vercel, while the backend API runs independently on Render.

Both services connect to a centralized MongoDB Atlas cloud database.

🧱 System Architecture

MediClear is designed as a distributed full-stack application with two independent user portals interacting through a centralized API layer.

$$ \text{Patient Portal (React)} \qquad \text{Nurse Portal (React)} $$

$$ \Downarrow $$

$$ \text{REST API Layer (Node.js + Express)} $$

$$ \Downarrow $$

$$ \text{Data Models (Mongoose)} $$

$$ \Downarrow $$

$$ \text{MongoDB Atlas Cloud Database} $$

🏗 Infrastructure Layers

Layer	Technology	Role
Frontend	React + Vite + Tailwind	Interactive UI portals
Routing	React Router	Handles patient vs nurse portal navigation
API	Express.js	Central application logic
Database	MongoDB Atlas	Persistent storage
ODM	Mongoose	Schema validation + data modeling
Deployment	Vercel + Render	Distributed hosting

🔄 End-to-End Workflow

1️⃣ Patient Intake Workflow

$$ \text{Patient Arrives} \rightarrow \text{Triage Nurse Intake} \rightarrow \text{Symptoms Tagged} \rightarrow \text{Diagnostic Steps Assigned} \rightarrow \text{6-Character Access Code Generated} $$

This code acts as a temporary authentication token that allows the patient to view their treatment journey without exposing sensitive hospital systems.

2️⃣ Patient Portal Workflow

$$ \text{Enter Access Code} \rightarrow \text{API Request: GET /patients/code/:code} \rightarrow \text{Patient Data Retrieved} \rightarrow \text{Timeline Generated} \rightarrow \text{Live Journey Visualization} $$

The UI dynamically constructs the patient journey using:

$$ \text{nextSteps[]} + \text{currentStepIndex} $$

Which produces:

$$ \text{Completed Steps} \quad | \quad \text{Current Step} \quad | \quad \text{Upcoming Steps} $$

3️⃣ Nurse Portal Workflow

$$ \text{Patient Record Selected} \rightarrow \text{Advance Treatment Stage} \rightarrow \text{PUT /api/patients/:id} \rightarrow \text{Database Update} \rightarrow \text{Patient Portal Auto-Refresh} $$

This creates real-time synchronization between both portals.

🏥 Machine Resource Tracking

Hospitals often have limited diagnostic equipment.

MediClear tracks machine availability using:

$$ \text{Machine Status} \in {\text{Available},\text{In Use},\text{Maintenance}} $$

When a nurse updates machine status:

$$ \text{PUT /api/machines/:id} \rightarrow \text{MongoDB Update} \rightarrow \text{Updated Status Reflected on Patient Dashboard} $$

Patients can therefore see why delays occur, increasing transparency.

🗄 Data Model

Patient Schema

$$ Patient = { code,, name,, healthCard,, symptoms[],, nextSteps[],, currentStepIndex,, createdAt,, updatedAt } $$

Treatment Progress Calculation

$$ CurrentStep = nextSteps[currentStepIndex] $$

$$ CompletedSteps = nextSteps[0:currentStepIndex] $$

$$ UpcomingSteps = nextSteps[currentStepIndex+1:] $$

This enables dynamic rendering of a patient's journey without storing redundant state.

Machine Schema

$$ Machine = { id,, name,, status,, createdAt,, updatedAt } $$

Where:

( status \in {Available, InUse, Maintenance} )

🌐 API Architecture

Method	Endpoint	Purpose
GET	`/api/health`	Server health check
GET	`/api/patients`	Retrieve patient list
GET	`/api/patients/code/:code`	Patient lookup
POST	`/api/patients`	Create patient
PUT	`/api/patients/:id`	Update treatment stage
GET	`/api/machines`	Retrieve facility resources
PUT	`/api/machines/:id`	Update machine status

🔗 Data Synchronization Model

Both portals operate on the same centralized dataset.

$$ \text{Nurse Portal} \rightarrow \text{API} \rightarrow \text{Database} \rightarrow \text{Patient Portal} $$

This architecture ensures:

Consistent patient state
Immediate propagation of treatment updates
Shared visibility between staff and patients

🚀 Future System Extensions

SMS Notifications

$$ \text{Stage Update} \rightarrow \text{Webhook Trigger} \rightarrow \text{Twilio API} \rightarrow \text{Patient SMS Alert} $$

Hospital Data Integration

Future integration with HL7 / FHIR could allow MediClear to pull real-time hospital scheduling data.

$$ Hospital Systems \rightarrow FHIR API \rightarrow MediClear Backend \rightarrow Patient Dashboard $$

🎯 Design Philosophy

$$ \text{Transparency} \rightarrow \text{Reduced Anxiety} \rightarrow \text{Better Patient Experience} $$

By combining clinical workflow visibility, machine resource transparency, and patient education, the platform transforms passive waiting into an informed and supportive healthcare experience.

🧗 Challenges we ran into

One of the biggest engineering challenges was transitioning from a local development environment to a fully cloud-hosted architecture during the hackathon.

When we deployed the frontend to Vercel and the backend to Render, we encountered several cross-origin communication issues (CORS) that prevented the client from successfully interacting with the API. Resolving this required reconfiguring the server middleware and ensuring proper environment-based API routing.

We also encountered schema synchronization issues while evolving the patient workflow system. As we added new fields to track treatment stages and educational modules, several records began returning NaN values due to improper schema validation during stage updates.

Debugging this required restructuring how the patient’s current step index was stored and ensuring that all database updates were properly validated through the Mongoose schema.

Finally, designing a system that simultaneously supports two different user roles (patients and nurses) interacting with the same underlying dataset required careful API design to ensure that state updates remained consistent across both portals.

🏆 Accomplishments that we're proud of

We’re proud that MediClear evolved from an idea into a fully deployed, production-style full-stack platform within the time constraints of a hackathon.

Instead of building a static prototype, we successfully implemented:

A dual-interface system for both patients and hospital staff
A live cloud database architecture
A state-driven patient treatment workflow
A machine availability tracking system
A symptom-based educational recommendation engine

Both portals communicate through the same backend API and database, allowing nurses to update patient treatment stages while patients instantly see their journey update on their own dashboard.

We’re also proud of how the system balances technical infrastructure with human-centered design. The Vivirion-inspired wellness tools and educational modules ensure that MediClear doesn’t just track hospital logistics—it actively improves the emotional experience of waiting for care.

📚 What we learned

Building MediClear gave us practical experience designing and deploying a distributed full-stack application under real-time constraints.

We gained hands-on experience with:

Structuring a React + Express full-stack architecture
Designing RESTful APIs for multi-role systems
Managing environment variables across multiple hosting platforms
Deploying single-page React applications with client-side routing
Debugging cross-origin network communication
Building schema-driven database models with Mongoose

Beyond the technical challenges, we also learned how small improvements in transparency and communication can have a large impact on the healthcare experience. Reducing uncertainty for patients in high-stress environments can meaningfully improve both patient wellbeing and staff efficiency.

🔮 What's next for MediClear

SMS Patient Notifications

Integrating Twilio would allow the system to automatically notify patients when their treatment stage advances, allowing them to step away from the waiting room while still staying informed.

Hospital System Integration

Future versions could integrate with healthcare interoperability standards such as HL7 and FHIR, enabling MediClear to pull real-time diagnostic scheduling data directly from hospital systems.

Predictive Wait-Time Modeling

With enough operational data, MediClear could implement machine learning models to estimate wait times, helping patients understand realistic timelines for upcoming diagnostic steps.

Expanded Patient Support

The wellness and education modules could be expanded into interactive guided experiences designed in collaboration with clinical psychologists, helping patients manage stress and uncertainty during medical visits.