MedPal

Inspiration

Many places in the world don’t have easy access to doctors or medical advice. Even in well-developed healthcare systems, it can take a long time to get professional help for symptoms that may or may not be serious. MedPal aims to reduce that wait time by offering users a fast, AI-powered way to analyze symptoms and determine if it's something minor or an emergency that requires immediate medical attention.

What it does

Users can describe symptoms to the AI (either by voice or text), and MedPal analyzes them to suggest possible conditions or illnesses. It then recommends next steps—such as buying over-the-counter medication, seeing a doctor, or calling emergency services. Conversations are saved so users can refer back to them or continue where they left off.

How we built it

We built MedPal using React for the front end and Supabase for authentication and database storage. The app includes a modular layout with a sidebar for navigating past conversations, voice input using the Web Speech API, and text-to-speech feedback to improve accessibility. Conversations are stored in Supabase, and users can create, rename, and delete chats. The UI is responsive, working well on both mobile and desktop, and includes smooth sidebar collapsing behavior.

Challenges we ran into

Integrating voice input and text-to-speech in a seamless and user-friendly way. Managing state between different components (e.g., sidebar, chat, settings). Dealing with UI responsiveness while ensuring scrollable areas don’t overflow. Merging code changes without breaking existing functionality—at one point, an unresolved merge conflict caused a major rendering error.

Accomplishments that we're proud of

Fully functional, clean, and responsive UI built from scratch. Voice control features that make the app more accessible. Persistent conversation history with edit and delete features. Smooth sidebar animations and layout logic for different screen sizes. Modular architecture that makes the app easy to scale and maintain.

What we learned

How to integrate and manage voice input/output with React. Using Supabase for real-time data and authentication. Effective use of component-based design for cleaner code and faster development. Importance of resolving merge conflicts properly (especially in JSX!). Better UI/UX principles when designing tools for real-world medical use cases.

What's next for MedPal

Symptom confidence scores: Display how certain the AI is about each possible condition. Multilingual support: Allow users to speak and get results in their native language. Doctor integration: Allow clinics to connect MedPal to their own triage systems. Offline mode: Cache symptom input and show results without active internet. Improved emergency detection: Use additional metadata like voice tone, frequency of symptoms, etc.