Cardioguard

CardioGuard is an AI web app that predicts cardiovascular disease risk with real-time assessments, visualizations, and SHAP-based explanations, offering a clear, user-friendly health insight tool.

Comment

CardioGuard - AI-Powered CVD Risk Assessment

Inspiration

Cardiovascular disease (CVD) remains the leading cause of death globally, claiming an estimated 17.9 million lives each year. We were inspired by the potential of machine learning to democratize healthcare access and enable early risk detection. The Byte 2 Beat Hackathon provided the perfect opportunity to build a solution that could help individuals understand their CVD risk through a simple, accessible web interface.

Our vision was clear: create an AI-powered tool that transforms complex medical data into actionable insights, empowering users to take proactive steps toward cardiovascular health.

What We Learned

Throughout this project, we gained valuable experience in:

  • Machine Learning for Healthcare: Training and deploying a CVD prediction model using patient health data, understanding feature importance through SHAP analysis
  • Full-Stack Integration: Connecting a Next.js frontend with a FastAPI backend deployed on Render
  • Healthcare UX Design: Creating intuitive, educational interfaces with tooltips and visual risk gauges that make medical information accessible to non-experts
  • Data Validation: Implementing robust form validation to ensure medical data integrity before making predictions
  • Model Interpretability: Using SHAP (SHapley Additive exPlanations) to provide transparency in AI predictions, crucial for healthcare applications

How We Built It

Frontend Development:

  • Built with Next.js 16 (App Router) and TypeScript for type safety and modern React features
  • Implemented comprehensive form validation using React Hook Form and Zod to ensure data quality
  • Created custom SVG risk gauge visualizations that dynamically display prediction confidence
  • Used Shadcn UI components (built on Radix UI) for accessible, beautiful interface elements
  • Designed a responsive drawer-based results display for optimal mobile and desktop UX
  • Added educational InfoTooltip components to explain medical terminology and normal ranges

Backend Integration:

  • Deployed machine learning model via FastAPI on Render cloud platform
  • Implemented Axios for reliable HTTP communication between frontend and API
  • Created data transformation layer to convert user-friendly inputs into model-ready numeric features

Model & Interpretability:

  • Trained classification model on cardiovascular disease dataset with 11 key health parameters
  • Integrated SHAP visualizations to show which features most impact individual predictions
  • Balanced model accuracy with interpretability for healthcare decision support

Design System:

  • Chose a green/emerald color palette to convey health, growth, and vitality
  • Implemented Tailwind CSS 4 for responsive, utility-first styling
  • Used Next.js Image optimization for SHAP visualization assets

Challenges We Faced

  1. API Response Format Mismatch: The backend returned risk as a text field ("High Risk" / "Low Risk") rather than a numeric prediction. We solved this by creating a conversion layer in the frontend to standardize the response format.

  2. SVG Gauge Mathematics: Calculating the correct needle rotation for the risk gauge required deep understanding of SVG coordinate systems. After multiple iterations, we mapped the 0-100% probability range to -90° to +90° rotation for accurate visual representation.

  3. Form State Management: Handling 11 different input fields with various types (numbers, selects, switches) while maintaining proper validation and user feedback required careful orchestration of React Hook Form and Zod schemas.

  4. Medical Context: Balancing technical accuracy with user-friendly language was crucial. We added tooltips explaining medical terms like "systolic BP" and included clear disclaimers about the tool being for educational purposes only.

  5. Real-time Validation: Ensuring blood pressure values, BMI calculations, and other health metrics fell within medically reasonable ranges required extensive research into clinical guidelines.

Accomplishments

  • Fully functional CVD risk prediction with 74.9% accuracy on high-risk cases
  • Beautiful, responsive UI that works seamlessly on mobile and desktop
  • Real-time form validation preventing invalid medical data
  • Interactive visualizations making AI predictions transparent and understandable
  • Comprehensive documentation and clean, maintainable codebase
  • Successfully deployed backend API on cloud infrastructure

What's Next for CardioGuard

  • Historical Tracking: Allow users to save results and track risk changes over time
  • Personalized Recommendations: Provide specific lifestyle modification suggestions based on risk factors
  • Multi-language Support: Expand accessibility to non-English speaking populations
  • Integration with Wearables: Connect with fitness trackers for automatic vital sign import
  • Healthcare Provider Dashboard: Enable doctors to monitor patient cohorts and trends
  • Advanced Models: Explore deep learning architectures for improved prediction accuracy

Built With

  • axios-1.13
  • frontend:-next.js-16
  • git/github-tools:-visual-studio-code
  • lucide-react
  • next.js-image-optimization-backend:-fastapi
  • npm
  • pip
  • python
  • radix-ui
  • react-19
  • react-hook-form-7
  • scikit-learn
  • shadcn-ui
  • shap-(shapley-additive-explanations)-cloud-&-deployment:-render-(backend-api)
  • tailwind-css-4
  • typescript-5
  • vercel-(frontend)
  • zod-4
Share this project:

Updates