CardioAI

Homepage

Inspiration

CardioAI was born out of a desire to bridge the gap between cardiac patients and their healthcare providers. We noticed that many patients feel isolated between appointments, while doctors often lack a clear, day-to-day picture of their patients' recovery. We wanted to create a "digital heart companion" that makes cardiac health monitoring as intuitive and accessible as checking a social media feed, while providing doctors with the high-fidelity data they need to save lives.

What it does

CardioAI is a dual-interface health platform: For Patients: It acts as a primary health hub where they can log vitals (BPM, Blood Sugar, SpO2), track medications, and participate in guided meditation sessions. The app includes a unique "Breathing Synchronizer" that guides users through deep-breathing exercises while recording their session for professional review. For Doctors: It provides a birds-eye view of an entire patient population. Doctors can monitor real-time trends, manage medication lists, and review video updates from patients to ensure recovery is on track. PWA Ready: The app can be installed directly onto any device (mobile or desktop) for instant access, even in low-connectivity areas.

How we built it

We used a modern, high-performance tech stack to ensure reliability: Frontend: React 18+ with TypeScript for robust, type-safe development. Styling: Tailwind CSS for a custom, responsive "Medical-Premium" aesthetic. Animations: motion/react (Framer Motion) for smooth state transitions and the specialized breathing cycle animation. Backend & Auth: Firebase (Firestore & Authentication) for secure, real-time data synchronization. Icons & Assets: Lucide-React for intuitive UI symbols and a custom-built SVGs for branding. Localization: i18next to ensure cardiac care is accessible across language barriers.

Challenges we ran into

One of our biggest hurdles was creating the Synchronized Meditation Engine. We had to build a reliable state machine that transitioned between 'Inhale', 'Hold', and 'Exhale' phases (4 seconds each) while ensuring the CSS animations remained perfectly fluid. We also spent significant time refining the PWA installation logic to provide a seamless "Install App" experience that feels native on both iOS and Android.

Accomplishments that we're proud of

The Branding: We designed a unique, multi-layered "Glowing Heart" logo from scratch using pure SVG code, representing the layers of care provided by the app. User Interface: Balancing a "calm and clinical" vibe—using soft emeralds and roses to reduce patient anxiety while maintaining the high contrast needed for medical use. Performance: Achieving lightning-fast load times and a near-perfect Lighthouse score through optimized Vite builds.

What we learned

We learned that in healthcare technology, clarity is a feature. Every pixel must serve a purpose—whether it's illustrating a heart rate spike or guiding a breath. We also deepened our expertise in Progressive Web App (PWA) development, realizing how much power "web-first" apps now have to mimic native mobile experiences.

What's next for CardioAI

IoT Integration: Connecting directly to smartwatches and blood pressure cuffs for automatic data entry. Advanced AI Diagnostics: Integrating Gemini-powered preventative analysis to flag potential cardiac events before they happen. Patient Community: Safe, moderated peer-support groups where patients can share their recovery journeys and stay motivated.