Inspiration
CareMatch AI
CareMatch AI was inspired by the urgent need to make healthcare more accessible, understandable, and supportive; especially in regions where information gaps, language barriers, and limited resources make it hard for people to get the care they need. I was motivated by stories of individuals struggling to find trusted health advice, manage chronic conditions, or access mental health support, particularly in Africa and other underserved communities.
Problem Definition and Context
Accessing, understanding, and managing healthcare is a challenge for millions of people worldwide. Many face barriers such as:
- Complex healthcare systems and confusing medical information
- Language and literacy obstacles
- Limited access to reliable health advice and mental health support
- Difficulty finding trusted providers, understanding insurance, or keeping track of health records
- Lack of quick access to emergency information and contacts
Context:
The rise of digital health and AI offers new opportunities to bridge these gaps, but many solutions remain fragmented, hard to use, or inaccessible to non-technical users.
CareMatch AI was created to provide a single, compassionate, and user-friendly platform that empowers users to take control of their health, access multilingual AI support, and navigate care with confidence; no matter their background or location.
Overview
CareMatch AI is a next-generation, user-friendly web application designed to empower individuals in managing their health and navigating healthcare systems. By combining advanced AI, intuitive design, and a holistic approach to both physical and mental health, CareMatch AI serves as a compassionate digital companion for users worldwide.
Descriptive Goal
CareMatch AI is a next-generation, AI-powered health companion and care navigation platform designed for the African context.
Goal: Empower individuals and families to take control of their health, access trusted information, connect with local healthcare providers, and receive personalized support regardless of their connectivity, location, or background.
The app combines AI-driven chatbots, local health directories, emergency tools, and low-power solution (Low power mode and offline Capabilities) technology to ensure everyone can get the help they need, when they need it.
What Problem Is CareMatch AI Solving in Africa?
Accessing, understanding, and managing healthcare is a challenge for millions of people worldwide. CareMatch AI addresses the critical challenges of healthcare access, information, and continuity in Africa, where many people face:
- Complex healthcare systems and confusing medical information
- Language and literacy obstacles
- Limited access to reliable health advice and mental health support
- Difficulty finding trusted providers, understanding insurance, or keeping track of health records
- Lack of quick access to emergency information and contacts
- Limited access to reliable health information and professional care
- Overburdened or distant clinics and hospitals
- Low digital literacy and inconsistent internet connectivity
- The need for affordable, personalized, and culturally relevant health support
- Emergency situations where quick access to personal health data and contacts can save lives
CareMatch AI bridges these gaps by providing a digital health companion that works both online and offline, empowers users to manage their health, and connects them to local care resources.
Process & Research
I conducted extensive research into the realities of healthcare access in Africa, including literature reviews, interviews with local practitioners, and analysis of existing digital health solutions.
I studied the needs of users in resource-constrained environments, focusing on offline usability, emergency readiness, and multilingual support.
The feature set was shaped by real-world scenarios: e.g., the Emergency Info Card was inspired by stories of users needing instant access to allergies and contacts during emergencies.
I iterated rapidly, learning from each bug, user test, and feedback session. Each challenge led to a more robust, user-centered solution.
Transparency was maintained throughout: all major decisions, alternatives, and lessons learned are documented
This open, adaptive approach allowed me to build a solution that is not only technically sound but also deeply relevant to the communities it aims to serve.
What it does
CareMatch AI is a digital health companion that empowers users to manage their health, access trusted information, and navigate healthcare systems with confidence. It combines advanced AI chat, local health directories, mental health support, reminders, and emergency tools in a single, user-friendly web app. CareMatch AI works both online and offline, personalizes advice based on your health profile, and connects you to local care resources; making healthcare more accessible, understandable, and supportive for everyone, especially in underserved communities.
How I built it
CareMatch AI was built using a modern, full-stack approach focused on accessibility, resilience, and user empowerment:
Frontend: We used Next.js (React) with TypeScript for a robust, scalable web app. Tailwind CSS and Radix UI provided a clean, accessible, and responsive user interface. The app is a Progressive Web App (PWA), ensuring it works seamlessly on any device and even offline.
Backend & AI: We integrated multiple AI models (Google Gemini, DeepSeek, OpenAI) using a modular Genkit AI flow system, allowing for flexible, context-aware responses. Firebase powers authentication, user profiles, health records, reminders, and notifications, ensuring real-time sync and secure data storage.
Data & Integrations: We enriched healthcare provider data using custom Node.js scripts and web scraping (Cheerio, node-fetch), and built advanced search and filtering for large directories of clinics and practitioners.
Offline-First & Resilience: Service workers, localStorage, and background sync ensure the app remains functional with slow or intermittent internet. All critical features including reminders and emergency info, work offline and sync when reconnected.
User Experience: We designed for real-world constraints: low digital literacy, multilingual needs, and accessibility. Features like AI chat, mental health support, and gamified health coaching were iteratively tested and refined based on user feedback.
Security & Privacy: Sensitive health data is securely stored in Firestore, with user-controlled data export and account deletion. Role-based access protects clinical dashboards and sensitive features.
In summary: CareMatch AI was built through rapid prototyping, user-centered design, and a commitment to making healthcare tools accessible, reliable, and compassionate for everyone.
Challenges I ran into
The biggest challenges included orchestrating multiple AI providers, handling large and diverse healthcare datasets, and ensuring the app worked seamlessly both online and offline. I also had to solve for accessibility, multilingual support, and user engagement through gamification and personalized recommendations.
- AI Integration & Model Management
Challenges: Coordinating multiple AI providers (Gemini, DeepSeek, OpenAI) with different response formats. Switching between AI models dynamically for different use cases. Handling provider-specific errors and rate limits.
Solutions: Modular AI architecture with interchangeable model adapters. Fallback mechanisms to switch providers if one fails. Unified error handling for consistent user experience.
- Data Processing & Enrichment
Challenges: Scraping and validating healthcare provider data (walk-in policies, emergency contacts). Keeping datasets updated with official sources. Type safety with evolving data models (TypeScript interfaces).
Solutions: Custom Node.js scrapers (Cheerio + DuckDuckGo) for real-time data enrichment. Automated validation scripts to verify data accuracy. Incremental TypeScript interface updates with migration scripts.
- Offline-First & Sync Reliability
Challenges: Maintaining app functionality without internet. Queuing user actions and syncing when back online. Resolving conflicts from offline edits.
Solutions: Service workers for caching critical assets. localStorage for temporary data persistence. Background sync with Firestore for deferred updates.
- Performance Optimization
Challenges: Slow searches across large healthcare directories. Large file uploads (medical documents) hitting Next.js limits. Rendering delays in data-heavy dashboards.
Solutions: Lazy loading + virtualized lists for efficient rendering. Custom serverActions config to handle bigger uploads. Optimized Firestore queries with composite indexes.
- Security & Compliance
Challenges: HIPAA/GDPR compliance for sensitive health data. Preventing unauthorized access to clinical dashboards. Secure user data deletion requests.
Solutions: Role-based access control (RBAC) for sensitive features. End-to-end encryption for stored health records. Self-service data export/deletion tools.
- UI/UX & Accessibility
Challenges: Supporting multilingual users and low-literacy audiences. Ensuring consistent UI across chat, dashboard, and tools. Voice AI (ElevenLabs) integration for mental health support.
Solutions: AI-powered translations + simplified UI icons. Shared Tailwind/Radix UI component library. Seamless toggle between text/voice modes.
- State & Error Management
Challenges: Complex state (reminders, notifications, offline queues). Debugging race conditions in real-time sync. Handling Firestore timestamp serialization errors.
Solutions: Custom React hooks for centralized state logic. Redundant checks for sync conflicts. Custom JSON serializers for Firestore data.
- Maintenance & Deprecations
Challenges: Next.js API deprecations (e.g., old Link behavior). Dependency conflicts from rapid framework updates.
Solutions: Automated codemods for bulk migrations. Isolated dependency versioning to reduce breaks.
- User Engagement & Gamification
Challenges: Keeping users motivated on health goals. Personalizing recommendations.
Solutions: AI-driven progress tracking + achievement badges. Dynamic coaching based on user behavior.
Documentation of Design Alternatives and Final Decisions
Throughout the development of CareMatch AI, several design alternatives were considered for each major feature. Below are some key decisions and the rationale behind them:
AI Model Integration: Alternatives Considered: OpenAI only, Google AI only, or a modular approach. Final Decision: Use a modular AI flow system (Genkit) to allow switching between Gemini, DeepSeek, and OpenAI models. This provides flexibility, cost control, and the ability to leverage the strengths of each model for different tasks.
Data Enrichment for Healthcare Providers: Alternatives Considered: Manual data entry, third-party APIs, or custom web scraping. Final Decision: Use custom Node.js scripts with Cheerio and DuckDuckGo scraping to enrich provider data. This approach was chosen for its cost-effectiveness and ability to adapt to local data sources.
Emergency Info Card Placement: Alternatives Considered: Dedicated page, floating button, or integration into header/settings. Final Decision: Place the Emergency Info Card in both the header (for quick access) and the settings page (for full editing). This ensures both visibility and editability without cluttering the main UI.
Swipeable Tips UI: Alternatives Considered: Carousel, modal, or dismissible list. Final Decision: Implement a swipeable card carousel for quick, interactive access to health and mental health tips, both in the settings and emergency dialog.
User Profile Data Model: Alternatives Considered: Minimal fields vs. comprehensive health record. Final Decision: Use a comprehensive, extensible TypeScript interface to support future features and analytics.
UI Library: Alternatives Considered: Material UI, Chakra UI, custom CSS, or Radix UI. Final Decision: Use Radix UI for accessible, composable primitives, combined with Tailwind CSS for custom theming and rapid prototyping.
Navigation: Alternatives Considered: Sidebar, top nav, or sticky header. Final Decision: Use a sticky header with dropdowns and quick-access buttons for a modern, mobile-friendly experience.
Health Record Storage: Alternatives Considered: Local storage only, centralized server, or cloud database (Firestore). Final Decision: Use Firebase Firestore for secure, scalable, and real-time health record storage, with offline sync and user-controlled data export.
Reminders & Notifications: Alternatives Considered: Local device notifications, email/SMS, or in-app notification center. Final Decision: Implement an in-app notification dashboard and reminders system, with offline support and Firestore integration for cross-device sync.
Voice AI for Mental Health: Alternatives Considered: Text-only chat, third-party voice bots, or custom voice AI integration. Final Decision: Integrate ElevenLabs for high-quality, responsive voice AI, with seamless toggling between chat and voice modes.
Directory Search & Filtering: Alternatives Considered: Simple list, static filters, or advanced search with dynamic filtering. Final Decision: Implement advanced search and filtering for healthcare centres and practitioners, supporting large datasets and user-specific needs.
Offline-First Architecture: Alternatives Considered: Online-only, partial offline, or full offline-first with background sync. Final Decision: Build a full offline-first PWA with service workers, local caching, and background sync for resilience in low-connectivity environments.
Accomplishments that I am proud of
Recognition as Top 15 Young Geeks in Africa: Nominated and awarded as part of the top 15 young geeks in Africa, recognizing innovative contributions to technologies in Africa. As I got nominated and won, This gave me a motive in supporting different sectors in AFRICA.
Truly Offline-First Healthcare: Built a PWA that works seamlessly even with slow, intermittent, or no internet ensuring users can access critical health tools and information anytime, anywhere.
Integrated Multimodal AI: Successfully combined multiple AI models (Gemini, DeepSeek, OpenAI) for personalized health, mental health, and coaching support, including both text and voice (ElevenLabs) interactions.
Comprehensive Health Ecosystem: Unified health chat, care navigation, mental health support, reminders, emergency info, and health records in a single, user-friendly platform.
Culturally Relevant & Accessible Design: Designed for real-world constraints low digital literacy, multilingual needs, and local context—making the app usable and valuable for underserved communities.
Advanced Data Enrichment: Automated the enrichment of healthcare provider directories using custom web scraping and external APIs, providing users with up-to-date, local care options.
User Empowerment & Privacy: Gave users full control over their health data, including secure storage, easy export, and account deletion, while maintaining strong privacy and security standards.
Rapid Iteration & User Feedback: Continuously improved the app through rapid prototyping, real user testing, and feedback, resulting in a solution that is both technically robust and deeply empathetic.
What I learnt
Building CareMatch AI taught me the importance of:
Designing for Real-World Constraints: I learnt how crucial it is to build for offline access, low digital literacy, and diverse user needs especially in healthcare and in regions with limited resources.
Integrating Multiple AI Models: Orchestrating different AI providers (Gemini, DeepSeek, OpenAI) taught us about modular AI architecture, error handling, and delivering context-aware, personalized support.
User-Centered Iteration: Continuous user feedback and rapid prototyping were essential for refining features, improving usability, and ensuring the app truly meets users’ needs.
Data Privacy & Security: Handling sensitive health data reinforced the importance of robust security, user consent, and giving users control over their information.
Accessibility & Multilingual Support: Making the app accessible and usable for people with different languages and abilities required thoughtful UI/UX design and technical solutions.
Resilience & Reliability: Building a PWA that works offline and syncs data reliably, even in challenging network conditions, was both a technical and design challenge.
Value of Automation: Automating data enrichment and directory updates saved time and ensured users always have access to the latest healthcare resources.
These lessons have made me a better engineer, designer, and problem-solver, and will guide my future projects.
What's next for CAREMATCH AI
- Expand Features & Personalization:
Enhance AI coaching and health insights with more personalized, adaptive recommendations.
Add gamification (badges, challenges) to boost user engagement.
Support integration with more health data sources (wearables, EHRs, labs, pharmacies).
- Build a Mobile App:
Develop a dedicated mobile application for iOS and Android to increase accessibility and reach across Africa.
Hospital Partnerships: Digital transformation for healthcare providers
Professional Doctor Network: Verified healthcare professional platform
Digital Health Database: Centralized, secure patient data management
Doctor Management System: Comprehensive care coordination tools
Telemedicine Integration: Remote consultation and monitoring
Insurance & Payment Systems: Seamless healthcare transactions
Integrate Paid AI Models:
Subscribe to and integrate advanced, paid AI models (e.g., GPT-4, MedPaLM, or other specialized healthcare models) for faster, more accurate, and more capable responses.
- Connect to Health-Related APIs:
Integrate with external health APIs (e.g., drug databases, symptom checkers, telemedicine, insurance verification, local health directories) to provide richer, real-time information and services.
- Improve Technical Scalability:
Move to scalable cloud infrastructure (serverless, managed services, or Kubernetes).
Implement robust monitoring, logging, and automated testing (CI/CD).
Strengthen security and privacy, including regular audits and compliance with regulations (HIPAA, GDPR).
- Grow Ecosystem & Integrations:
Build public APIs and SDKs for third-party integrations (clinics, insurers, wellness apps).
Add analytics dashboards for users and admins.
Pursue partnerships with healthcare providers, NGOs, and insurers.
- Focus on Accessibility & Localization:
Support multiple languages and local health guidelines.
Improve accessibility for users with disabilities.
- Seek Investment for Growth:
Secure funding to complete development, scale operations, and maximize impact—addressing critical healthcare needs in Africa.
- Gather User Feedback & Iterate:
Continuously improve the platform based on user feedback and evolving needs.
- Introduce Medkits & Health Devices:
Offer users the ability to order or connect essential health tools and medkits (e.g., wearables, first aid boxes, thermometers, blood pressure monitors, glucometers).
Integrate device data for real-time health monitoring and personalized recommendations.
- Additional Recommendations:
Community & Support: Add peer support groups or forums, moderated by AI or professionals.
Telehealth Integration: Enable direct chat or video consultations with healthcare professionals.
Offline Capabilities: Enhance PWA/offline support for users with limited connectivity.
Regulatory Readiness: Prepare for certifications and compliance in target markets.
Brand & Outreach: Invest in marketing, community engagement, and educational content to build trust and awareness.
How to Start
Visit the CAREMATCH AI website Click on “Sign Up.” Enter your personal details (name, email, password, etc.). Complete the onboarding questions to personalize your experience. Your account is created and you’re ready to start using CAREMATCH AI FULL FEATURES!
Conclusion
CAREMATCH AI is positioned to transform healthcare access and engagement in Africa through innovative technology, AI-driven support, and a commitment to user empowerment. With continued development, strategic partnerships, and investment, CAREMATCH AI can become a leading force in digital health across the continent.
Built With
- cheerio
- deepseek
- elevenlabs
- eslint
- firebase
- framermotion
- gemini
- genkitai
- html
- javascript
- json
- lucidereact
- next.js
- node-fetch
- node.js
- npm
- openai
- openrouter
- postcss
- prettier
- pwa
- radixui
- react
- restapis
- shadcn/ui
- tailwind
- typescript
- zod
Log in or sign up for Devpost to join the conversation.