CareCompass AI

Inspiration

The healthcare system is incredibly complex to navigate. We realized that a significant number of patients struggle to figure out which medical specialist they need when symptoms arise. This confusion often leads to delayed care for critical conditions, or conversely, overcrowded emergency rooms for minor issues that could be handled by a local clinic. We wanted to build a bridge—a tool that empowers patients to understand their symptoms, assess the urgency, and confidently route themselves to the right care at the right time.

What it does

CareCompass AI is an intelligent, AI-powered healthcare navigation platform. Users input their symptoms (via text or voice) and answer brief follow-up questions regarding duration, severity, and personal risk factors. The AI engine then analyzes this data to generate a "Confidence Score" and immediately routes the patient to the most appropriate medical specialist. Crucially, it features built-in Emergency Detection. If red-flag symptoms are detected, the system immediately halts the assessment to urge the patient to contact emergency services. It also includes a personalized "Health Journey" dashboard to track past symptom assessments over time.

How we built it

We built the application with a focus on premium, production-ready frontend technologies: Frontend: React (powered by Vite) for lightning-fast rendering. Styling: Tailwind CSS to create a sleek, ultra-professional, and minimalist black-and-white theme that evokes trust and enterprise quality. Animations: Framer Motion to provide seamless, fluid page transitions and interactive micro-animations (like the analyzing loading rings). State Management: React Context API and LocalStorage to handle persistent user sessions and health journey tracking without needing an external database. Icons & UI: Lucide React for crisp, scalable vector icons.

Challenges we ran into

One of the biggest challenges was defining the ethical boundaries of the application. It was critical to ensure the platform functioned strictly as a routing navigator and not a diagnostic tool. We spent significant time fine-tuning the mock AI engine logic and the UI copy to repeatedly remind users that the tool does not replace professional medical advice. Additionally, building out the complex global state to handle mock authentication, user locations (zip codes), and assessment histories entirely on the frontend required careful data structuring.

Accomplishments that we're proud of

We are incredibly proud of the premium user interface. By stripping away standard vibrant startup colors and focusing on a monochrome, high-contrast aesthetic, the app feels like a legitimate, trustworthy medical tool. We are also proud of the "Explainability" feature in the results dashboard, which shows users exactly why a specific specialist was recommended based on their input, increasing transparency and trust.

What we learned

We learned a lot about designing for user trust in healthcare applications. Minimizing friction (like offering a smooth UI and clear instructions) while simultaneously enforcing safety guardrails (like the emergency lock screen) is a delicate balancing act. We also deepened our experience with Framer Motion, learning how to make route transitions feel like a native mobile app.

What's next for CareCompass AI

We plan to transform this frontend prototype into a fully scalable platform by integrating a secure backend (like Firebase or Supabase) for HIPAA-compliant data storage. Next, we want to integrate the Google Places API to pull real-time data on nearby clinics based on the user's zip code, and eventually connect with healthcare networks to allow automated, one-click appointment booking directly from the results page.

Built With

• framer-motion
• html5
• javascript
• react
• tailwindcss
• vite