HealthConnect

Inspiration

In today's healthcare system, medical data is heavily fragmented. Patients struggle to access their own records, and doctors often lack a complete, unified medical history when treating a new patient. In critical emergencies, this lack of information can delay life-saving care. We were inspired to build HealthConnect to bridge this gap—empowering patients with ownership of their medical data while giving healthcare providers seamless, permission-based access to the information they need to save lives.

What it does

HealthConnect is a secure, interactive health data management platform with distinct portals for both patients and doctors:

For Patients: A comprehensive dashboard to view their complete medical history, lab results, clinical notes, and detailed PDF attachments from doctors. Patients have total control over who sees their data.

Emergency Alerts System: If a patient is unconscious, a doctor can request data through an emergency contact. The patient (or their guardian/contact) receives a high-priority "🚨 Emergency Alert" to instantly approve or deny access.

For Doctors: A streamlined interface to search records, add new patients, request access to external records, attach PDF lab results, and write direct visit feedback that syncs instantly to the patient's dashboard.

How we built it

We built HealthConnect with a focus on a stunning, dynamic user experience and secure architecture: Frontend Framework: React via Vite for a blazing fast, modern application.

Styling & UI: Tailwind CSS for a highly polished, responsive design. We utilized custom mint-green accents and soft styling to make a clinical app feel welcoming.

Animations: Framer Motion for buttery-smooth page transitions, dynamic modals, and complex micro-animations (like our custom folding origami airplane sequence and success confetti).

Authentication: Auth0 for robust, secure user authentication and role-based routing (separating doctor vs. patient workflows).

Data Visualization: Recharts to visualize patient health trends (like HbA1c levels over time).

State Management: Designed a shared, real-time in-memory store that simulates a backend database, allowing doctor edits and PDF uploads to sync instantly to the patient's view during demonstrations.

Challenges we ran into

Building a healthcare app requires balancing strict security with an intuitive user experience.

Complex UI/UX: It was challenging to design an interface that serves two distinctly different user flows (Doctors who need dense information quickly vs. Patients who need clear, digestible summaries) without making the app feel disjointed.

State Synchronization: Ensuring that PDF attachments, clinical notes, and emergency access requests synced accurately across the application states required careful architectural planning.

Animation Choreography: Perfecting the complex, multi-step Framer Motion sequences—specifically the origami plane folding animation that transforms a UI card into a flying plane with a light trail—took intense mathematical tweaking and timing adjustments.

Auth Routing: Implementing secure Auth0 callbacks while managing the development server ports led to configuration hurdles that we had to debug and resolve.

Accomplishments that we're proud of

The Emergency Alerts Protocol: We are incredibly proud of the emergency access flow. It solves a real-world problem by allowing instant, life-saving data access through emergency contacts when a patient is incapacitated. Aesthetic Excellence: HealthConnect doesn't look like a boring, legacy hospital portal. The premium design, glassmorphism elements, and playful micro-animations make managing health data actually enjoyable. Feature Completeness: From PDF handling to interactive data charts and secure authentication, we successfully shipped a highly robust, end-to-end prototype in a very short amount of time.

What we learned

We deepened our expertise in React state management and leveraging Framer Motion for complex, sequenced animation states. We learned the intricacies of implementing third-party identity providers like Auth0 to handle multi-role authentication securely. We gained a better understanding of the UX considerations specific to the medical field—specifically how to present critical, sensitive data clearly.

What's next for HealthConnect

Robust Backend Integration: Transitioning our in-memory data store to a secure, HIPAA-compliant backend with PostgreSQL/MongoDB and end-to-end encryption. AI Medical Summarizations: Integrating an LLM to automatically summarize dense, multi-year medical histories into quick, actionable bullet points for ER doctors. Hospital EHR Integration: Building APIs to interface seamlessly with existing Electronic Health Record systems (like Epic or Cerner) so doctors don't have to duplicate data entry. Mobile App: Launching native iOS and Android versions to make approving Emergency Alerts even faster via push notifications.