-
-
Interactive drag and drop prescription zone with real time state listeners during active vision pipeline processing.
-
Successful system execution showing parsed clinical timeline columns rendered via Markdown alongside active browser notification alerts.
-
MedsMinder AI high fidelity landing interface featuring localized responsive layout design grids and ambient UI styling loops.
💡 Inspiration
Many patients especially elderly individuals and those with low medical literacy struggle to follow their prescription plans accurately. Unreadable doctor handwriting and confusing medical abbreviations (like BD, TID, AC, PC) lead to dangerous dosage mistakes or completely missed medications. We wanted to build a simple, instant solution that acts like an intelligent personal pharmacist right in your web browser.
🧠 What it does
MedsMinder AI allows users to upload a clear photo of any handwritten medical prescription or pill bottle label. The system reads and converts the unstructured handwriting into an ordered, digital schedule. It extracts the medication name, explicit dosage rules, and timing tracks. Simultaneously, it pushes a real-time, native operating-system-level notification directly to the user's screen as an interactive alert, creating a seamless tracking loop.
🛠️ How we built it
The project is built on top of a highly optimized web architecture using Next.js 16 with the App Router for fast server routing and zero layout shifts.
- Frontend: Styled completely with Tailwind CSS to create a responsive, fluidly animated dashboard layout with micro-interactions.
- Backend: An API route processes the incoming image object payload safely on the server side, streams it as a Base64 string, and securely orchestrates requests to the Google Gemini API.
- Parsing Core: Implements structured validation templates to cleanly decouple real-time system alert variables from the verbose user schedule panel text.
🚧 Challenges we faced
A major technical challenge was handling the irregular structure of handwritten medical slips and preventing the AI from misinterpreting letters or hallucinating names. We solved this by developing a strict, rigid prompt engineering template that enforces zero-guessing constraints and forces the model to strictly output line-by-line observations in a clean layout. We also navigated cross-platform browser restrictions to handle native Web Notification permissions cleanly.
🎓 What we learned
We mastered advanced binary file streaming workflows inside Next.js API routes and learned how to safely handle sensitive external keys without exposing them to client components. We also discovered how to utilize native browser push mechanisms to create real-time user value without relying on costly backend notification packages.
🔮 Future Scope
In the future, we plan to expand MedsMinder AI by:
- Connecting to Twilio SMS Gateways to text alerts directly to users without internet-connected smartphones.
- Integrating a Web3 distributed ledger database (like Solidity smart contracts) to securely back up patient compliance schedules with complete medical privacy.
Built With
- google-gemini-api
- javascript
- next.js-16
- node.js
- react
- tailwind-css
- web-notifications-api
Log in or sign up for Devpost to join the conversation.