AI Health Assistant Pro

• 

  dashboard of the project

Inspiration

Delayed healthcare access and medical anxiety prevent early diagnosis. We built an accessible AI-powered health companion to provide instant symptom guidance, emergency contact access, and wellness tracking—making healthcare information available 24/7.

What it does

An all-in-one health app combining AI symptom analysis, voice input, emergency contacts, BMI/water/sleep/exercise tracking, health tips with sharing, user profiles, FAQ, and dark/light themes—all stored locally with zero cloud dependency.

How we built it

Frontend SPA using HTML5, CSS3 ( glassmorphism + responsive design), and vanilla JavaScript. Integrated OpenRouter API for AI responses, Web Speech API for voice-to-text, and localStorage for persistent data. Optimized for 4 device breakpoints.

Challenges we ran into

1)Layout breaking with footer overflow (fixed with flex optimization) 2)Chatbox scrolling issues (solved with min-height: 0 pattern) 3)Recording UX friction (pivoted from popup to chat-based transcription) 4)Mobile responsiveness for 8-tab interface on 320px screens.

Accomplishments that we're proud of

13+ features in one app | True offline-first design | Voice integration with real-time transcription | Professional glassmorphism UI | Full accessibility (ARIA labels, keyboard nav) | XSS protection & data validation | Responsive across all devices.

What we learned

1)Web APIs power (Speech Recognition, Clipboard, localStorage) 2)Modern CSS excellence (Grid/Flex for responsive design) 3)UX iteration matters (popup → chat integration) 4)Client-side security considerations 5) Vanilla JS efficiency without frameworks.

What's next for AI Health Assistant Pro

Backend API migration for security | Medication interaction checker | Wearable device integration | Appointment reminders | PWA with offline support | Multi-language support | Mobile app versions.

Built With

• api
• css3
• html5
• javascript
• localstorage
• openrouter
• webspeech