A real-time heart attack risk prediction and monitoring web application that empowers healthcare professionals to proactively manage patient cardiovascular health.

Heart disease remains the leading cause of death globally, with many cases preventable through early detection and intervention. We were inspired to create HeartGuard Live after recognizing the critical need for accessible, real-time cardiovascular risk assessment tools. Our goal was to bridge the gap between complex medical data and actionable insights, enabling healthcare providers to make faster, more informed decisions that could save lives.

HeartGuard Live is a comprehensive cardiovascular health monitoring platform that:

• Predicts Heart Attack Risk: Uses AI-powered algorithms to calculate personalized risk scores based on patient vitals including age, cholesterol, blood pressure, chest pain type, and lifestyle factors
• Real-time Monitoring: Tracks heart rate variability (HRV), SpO₂ levels, and ECG patterns with live visualizations
• Patient Management: Allows healthcare providers to add, monitor, and manage multiple patients from a centralized dashboard
• Intelligent Alerts: Automatically generates high-risk alerts for patients requiring immediate attention
• AI Health Assistant: Features an integrated chatbot that provides instant answers to heart health questions and personalized wellness tips
• Interactive Data Visualization: Displays heart rate trends with animated charts and real-time heartbeat animations
• Educational Resources: Includes tooltips and explanations for medical terminology to improve health literacy

Frontend Stack:

• React + TypeScript: Built with React 18 for a responsive, type-safe user interface
• Vite: Lightning-fast build tool for optimal development experience
• Tailwind CSS + shadcn/ui: Modern, accessible component library with beautiful design
• Recharts: Dynamic data visualization for heart rate monitoring
• React Router: Seamless navigation between dashboard, patient details, and authentication

Backend & AI:

• Lovable Cloud (Supabase): Serverless backend with PostgreSQL database, authentication, and row-level security
• Edge Functions: Serverless compute for risk calculation and AI chat processing
• Lovable AI: Integrated Google Gemini 2.5 Flash model for the health assistant chatbot
• Real-time Subscriptions: Live data updates for patient monitoring

Key Features Implemented:

• Row-Level Security (RLS) policies ensuring data privacy
• User authentication with email/password
• Responsive design optimized for desktop and mobile
• Streaming AI responses for natural conversation flow
• Automated risk assessment algorithms

1. Real-time Data Synchronization: Implementing smooth real-time updates for patient vitals while maintaining performance was challenging. We solved this using Supabase's real-time subscriptions with optimized query patterns.

2. AI Response Streaming: Creating a natural conversational experience required implementing streaming responses from the AI model, which involved careful state management and error handling.

3. Medical Accuracy: Ensuring the risk calculation algorithm was both accurate and explainable required extensive research into cardiovascular risk factors and validation against medical guidelines.

4. Data Security: Implementing proper Row-Level Security policies to ensure patient data privacy while allowing authorized access was complex but critical for healthcare compliance.

5. User Experience: Balancing comprehensive medical information with an intuitive interface required multiple iterations and careful attention to information architecture.

• Built a fully functional healthcare application in record time with production-ready security
• Implemented AI-powered features without requiring external API keys through Lovable AI integration
• Created an intuitive, accessible interface that makes complex medical data understandable
• Achieved real-time monitoring capabilities with smooth animations and live updates
• Established robust data privacy with comprehensive RLS policies
• Integrated educational elements to empower users with health knowledge
• Delivered a responsive design that works seamlessly across all devices

• Healthcare UX Design: We learned the importance of explaining medical terminology and providing context for health metrics
• Serverless Architecture: Gained deep experience with edge functions and serverless databases for scalable healthcare applications
• AI Integration: Discovered how to effectively implement conversational AI for domain-specific knowledge (cardiology)
• Security-First Development: Learned to implement healthcare-grade security from the ground up using RLS and authentication
• Real-time Systems: Mastered techniques for building responsive, real-time monitoring interfaces
• Rapid Prototyping: Learned how modern tools like Lovable Cloud can accelerate development without sacrificing quality

• Node.js & npm installed - install with nvm

# Clone the repository
git clone <YOUR_GIT_URL>

# Navigate to project directory
cd heartguard-live

# Install dependencies
npm install

# Start development server
npm run dev

• Frontend: React, TypeScript, Vite, Tailwind CSS, shadcn/ui
• Backend: Lovable Cloud (Supabase), PostgreSQL
• AI: Lovable AI (Google Gemini 2.5 Flash)
• Visualization: Recharts
• Authentication: Supabase Auth

This project was built with Lovable - The world's first AI Full Stack Engineer.

HeartGuard Live is designed to assist healthcare professionals in monitoring cardiovascular health. The information provided by this application does not replace the advice, diagnosis, or treatment of a trained healthcare professional. Risk predictions are estimates based on available data and should not be used as the sole basis for medical decisions. Always consult with qualified medical personnel for health-related concerns.