Medi-voice

Inspiration

During a visit to a local community health center, I noticed how many elderly people struggle to remember their medication timings, especially those with visual or mobility issues. Inspired by this, I decided to build MediVoice — a hands-free, voice-activated reminder app that can assist people in taking their medicines on time with ease and independence. The idea was to create something lightweight, accessible, and usable on any device, without requiring an app install or technical knowledge.

What it does

MediVoice is a voice-activated medication reminder web app that helps users set, track, and get notified about their medicine schedules—hands-free. Users can simply speak commands like “Remind me to take Paracetamol at 9:30 AM,” and the app will schedule it accordingly, with priority levels and repeat options. At the right time, it plays an alert, speaks out the reminder, and asks for confirmation to ensure compliance.

How we built it

We built MediVoice entirely as a front-end project using HTML, CSS, and JavaScript. It uses:

• Web Speech API for speech recognition and text-to-speech functionality.
• LocalStorage to persist reminders and history data even after the page is refreshed.
• setInterval and timestamp comparison to constantly monitor and trigger alerts.
• Dynamic DOM rendering for live updates to reminders and deleted history.
• Responsive UI with modern animated cards and floating buttons for mobile and desktop.

The entire app is hosted on GitHub and deployed via Vercel.

Challenges we ran into

• Handling microphone permissions smoothly on mobile browsers.
• Making speech recognition flexible enough to understand different time formats.
• Ensuring reminders with daily repeat still worked correctly after the date changed.
• Providing a visually clean yet functional UI within a short time.

Accomplishments that we're proud of

• Fully functional voice-controlled system with both input and feedback.
• Alerts that feel personal—through speech and sound—without needing any backend.
• A history section to track deleted reminders and clean UI with priority tagging.
• Everything works without internet after initial load (almost fully offline-ready).

What we learned

• Deepened understanding of browser capabilities like the Web Speech API.
• How to simulate "alarm-like" behavior using pure JavaScript and client-side logic.
• Efficient DOM manipulation and real-time reminder checking without performance lag.
• UI/UX improvements for accessibility and clarity.

What's next for MediVoice

• Add PWA (Progressive Web App) features to fully enable offline access and installability.
• Integrate Firebase for optional user login and cloud sync.
• Improve speech input flexibility using NLP libraries or AI-powered parsing.
• Add multilingual voice command support to help more users globally.

- Explore integrating with smart assistants (Alexa, Google Assistant) in future.

Built With

• a
• and
• and-dark-themed-design.-*javascript-(vanilla)*-?-for-all-core-functionalities-like-reminder-logic
• api*
• backend.
• built-with-*html5*-?-for-structuring-the-application-and-elements.-*css3*-?-for-styling-the-ui-with-a-modern
• code
• control
• deployment.
• fast
• feedback
• for
• github*
• history
• hosting.
• https://youtu.be/2j2v6vnkgqy
• localstorage*
• needing
• recognition
• reliable
• reminders
• responsive
• save
• speech
• speech-to-text)
• text-to-speech).
• to
• ui
• updates.
• used
• vercel*
• version
• voice
• voice-control
• web
• without