MediBase

Home page
Medication page
Search page
Schedule page
Profile page

take a look at our pitch/slides (includes demo video) here for a better overview and more details about MediBase!

try it out here! (the try it out links section at the bottom is too hidden lol)

If you are testing the site, here are some DIN numbers you can use. Alternatively, see this API.

Inspiration

Have you ever had your parents or grandparents ask you to read the prescription label for them because it is too tiny and hard to read? Have you ever had them also ask you to translate it since they might not understand English?

We have experienced this ourselves, and it made us wonder, what if other people like our parents/grandparents didn’t have someone like us to read and translate? How many people have accidentally taken an incorrect amount of their prescription medication that impacted their health?

The mortality rate from drug overdoses tripled in the United States between 1990 and 2006. In the United States, unintentional overdose deaths among adults aged 25 to 64 years exceeded motor vehicle crash deaths and suicides as a leading cause of injury death from 2008 onward. Likewise, unintentional overdose deaths outnumbered motor vehicle crash deaths in Australia in 2011. In Europe, rates have been stable since 2005, but most European countries also have high overdose rates. For example, overdose rates of more than 20 deaths per million are found in 14 of 30 European countries, and rates of more than 40 deaths per million in 7 countries. (https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4605170/)

With this in mind, MediBase was created with the intention to tackle these issues and reduce these risks, bettering the world.

What it does

MediBase is a medication assistant allowing people who have poorer eyesight, who don’t understand English well, or have trouble remembering to take safely take medication.

Get important information about a drug based on its Drug Identification Number, or DIN, found on every Canadian medication. Searching by this number returns information regarding the drug instantly, and allowing it to be starred.

Summaries and information of all your starred medications can be found on the medication tab. This includes a built-in text-to-speech function that says the summary out loud.

Conforming to the topic of accessibility, MediBase contains a large range of features including a colorblind-friendly theme, text-to-speech, full-site translation, push notifications, and a simple UI to navigate through it all.

a better list of features:

search medication by DIN number
- returns info about the medication, has option to add the medication to personal list allows you text to speech
- we were going to make it accept QR code scanning as people who don’t have the best vision might not be able to see/find the DIN number
- so we were thinking of proposing QR codes on the tops of medication bottles with the DIN number (to pharmacies) + and perhaps the individual intake instructions
- however, the QR code scanning react libraries kept yelling at us with errors
can save all your medication in one place
- navigate between medication where you can see details, have it spoken out loud, and remind you (currently daily) to take the medication - can add and remove
- (future versions will allow you to create a consumption schedule, put down consumption quantity/frequency, warnings [like don’t consume on an empty stomach] and amount left [to remind for refills])
reminds you to take medication
- uses desktop notifications
- (future versions will allow you to customize the intake schedule more - and will use push notifications when migrated to app)
entire website can be translated (TTS too!)
- profile page lets you switch languages
- text to speech can speak in other languages as well
UI is color-blind friendly
- has been run through Stark, an accessibility-detection service/program
- however, we plan to add increased color-blind friendly mode

How we built it

Perhaps in contrast to some groups, we spent a fairly significant amount of time on idea generation, and really only started to code on the second day of the hackathon. However, with 4 people, we were still able to accomplish very much in the remaining time.

Firstly, we needed to scour the internet for various APIs and figure out how to use them, including Canada's official DPD database api, free text-to-speech apis and translation apis. We ran into quite a few problems and often got hung up, but we were able to figure this stage out. We also built helper methods in tandem with these api calls and learned about various asynchronous techniques.

Next, using React.js, we built an unstylized template of the website, which was fairly simple with React's components, before later filling in and editing these components. At the same time, we also worked on the functionality of the website, dealing with cookies and adding interaction to the page.

The final step was to debug, test, and troll. No comment.

Challenges we ran into

There were a few notable challenges. Firstly, for many of us, this was the first time we used React.js, so we had to learn and familiarize ourselves with its structure. To add on to this, API calls were also difficult - not only did we need to find free APIs that were suited for our purpose, we also needed to familiarize ourselves with the asynchronous nature of javascript. Finally, when it came to cookies, there were many problems that we had to tackle.

Another notable problem was our tendency to tunnel vision, either on a particular idea or on finding/using APIs.

Accomplishments that we're proud of

We were very proud of the final product - this was perhaps one of the first times we used a rather complex library for building an entire application from the ground up. We also connected our application to various APIs, and despite the numerous headaches we encountered, managed to put them together in a functional and organized manner.

What we learned

Firstly, we realized how crucial planning was in any project - in our case we spent a lot of time planning and resource gather. In fact, when we started coding, we did so with only around 30 hours remaining. Even so, compared to what we had expected, the coding process was a lot more smooth than we thought, showing us the power of a good plan. However, we also often started discussing the specifics of an idea without actually making sure if we really wanted to do it, which resulted in a lot of wasted time. We also learned a lot about the power behind React.js, reusing its components and libraries to streamline our code. Even then, we did not use it to its full potential at all, but we hope to someday learn how to do so.

What's next for MediBase

(most of these we wanted to do, but didn't have time to)

more information for the medication
- tracking quantity for refill reminders
- ingredients
- purpose for medication
- warnings (eg. don't eat on empty stomach)
- instructions
- frequency (ex: [amount] every [x] at [time] starting [startdate] ending [enddate] - (optional)) - work with schedule
- last intake
schedule + notification
- can mark each time of consumption as complete
- take in data saying (ex: [amount] every [x] at [time] starting [startdate] ending [enddate] - (optional))
login/signup/logout
remove medication/edit medication
styling looks good on smaller screens as well
make into app
accept qr code instead of just DIN number
- people who don’t have the best vision might not be able to see/find the DIN number
- thought of proposing QR codes on the tops of medication bottles with the DIN number (to pharmacies) + and perhaps the individual intake instructions
- attempted, but the QR code scanning react libraries kept yelling at us with errors
more language options for tts and translate
keyboard shortcut for tts
more thorough and accurate translations
language options / popup on navbar
make it work with siri/amazon echo to ask like “did I take this already today”, “how much of this should i take”
add chatbot for asking questions about the medication