loading...
Cover image for Helping patients to get their medicine - Twilio x DEV Hackathon submission

Helping patients to get their medicine - Twilio x DEV Hackathon submission

nvignola profile image Nico Vignola ・4 min read

Link to Code

GitHub logo nvignola / kuracado

Kuracado - The treatment app

Kuracado logo

Kuracado

Helping patients to get their medicine. Project for Dev.to - Twilio hackathon.

About

Its goal is to facilitate the process of getting the receipt from the doctor and sequentially getting the medicine from the pharmacy.

Kuracado offers a dashboard through which the doctor can communicate and put in communication the patients, and the pharmacy. It offers also a shipping monitoring when the pharmacy sends the medicine to the patient.

How it works

This application is a demo that assumes the existence of an actual database containing all the data regarding the actors involved in the system.

Every time a user sends a message to the WhatsApp Sandbox, the webhook is called and the server collects the data The application uses the AJAX polling technique to continuously fetch new messages from the server.

Once the receipt is ready and transformed from HTML code to an image, it is sent to…

Category Submission:

COVID-19 Communications

The starting point

Kuracado - Esperanto for 'treatment'.
I had the idea for this app after what happened to me. Three months ago I had to do invasive heart surgery. When back home, I couldn't go out anymore, first because I was too weak due to the surgery and the long convalescence period and second because of the coronavirus.

I needed medicine for my anticoagulation therapy. I called the doctor and he shipped the receipt at my place, which took 4 days to arrive. But then I had to face another challenge, go to the pharmacy to get the pills.

Not an ideal situation, considering that I can't go out and that I'm living on the 5th floor without an elevator. It is a good training session though.

How can we handle these situations? Building a tool where patients, doctors, and pharmacies are connected.

Brick by brick

αlpha stage

So, the idea is to connect them, but how?
The application I thought about should allow:

  • a patient to send messages to the doctor
  • the pharmacy:
    • to receive messages from the doctor
    • to text the patient when the medication has been sent
  • the doctor to write receipts and text the patient and the pharmacy This way it is assured that every piece is connected and that they can communicate.

Behind the scene

If you are curious and you want to see it in action, check out the video

The main control resides in the dashboard that is managed by the doctor. Here he/she can:

  • receive the messages in realtime from the patients
  • write the receipt
  • send the receipt to the patient and the pharmacy
  • monitor the status of the shipment

For the message part, SMS came in my mind first. Thing is that I wanted to send the receipt as an image or a pdf.
I've tested the MMS but my phone didn't handle it as expected, the content was blocked (probably because I'm living in Germany for three years and I still use my Italian contract). Turned out that I also pay 0.50€ for every MMS I received 🤯.
What now? I've found the solution that fits my needs looking at Twilio's products: Whatsapp Sandbox!

Now it is time to put everything together.

⚠️ Disclaimer ⚠️

All the data that are displayed (names, addresses, etc...) are randomly generated using Faker.js.
The phone numbers are hidden for privacy reasons.
This project is a demo that assumes the existence of an actual database containing all the data regarding the actors (doctors, patients and pharmacies) involved in the system.

ßeta stage

The application is divided into two parts, client and server.
Tech stack:

Archiving realtime messaging

WebSocket API right? Nope. For this, I've opted for an AJAX polling. For the sake of simplicity and time constraints, I've avoided configuring the server to receive WS connection. The AJAX polling accomplishes what is needed.
Here is what happens behind the scene:

Polling messages

One sandbox to rule them all

I've been using only one Whatsapp sandbox. To let communicate the pharmacy with the client I had to use the sandbox as a proxy. So actually when a message is received, the server checks the phone number and if it matches the pharmacy one, it sends the message to it.

Phone views. Patient + Pharmacy

"Printing" the receipt

At this point, the doctor is going to send the receipt to both patient and pharmacy. In the beginning, I've thought to send a PDF. There are many JS libraries for this purpose, but I wanted something easy to configure and use.
I have started thinking to create an extra page in which I could have built the receipt template with Html and then take a screenshot of the page (with Puppeteer).
This option was causing too much overhead. Luckily this world is populated by amazing people, and I've found the solution:

And...(Ta-Da! 🎊)

The 'printed' receipt

Status update

The last features I've implemented are:

  • showing if a patient already received the receipt
  • showing if the pharmacy shipped the medicine

Both of those features happen in realtime. The first one when the doctor sends the receipt and the system transforms the HTML code to image. The second one when the pharmacy text the patient.
In the following animated gif, it is possible to see the icons change in action.

Updating the status of the receipt and shipping

Release 🎉

As always, many things can be improved but the final result brings the basic functionality that I've planned in the beginning. It has been fun to work on Kuracado and I also feel emotionally attached to it.

Kuracado Dashboard

I strongly suggest to try out the application downloading the code and playing with it.
Otherwise, to get a general idea of how the app works, check out this video:

Demo

Additional Resources/Info

Template used as a base for the receipt: https://github.com/sparksuite/simple-html-invoice-template
Library to transform HTML to image: https://github.com/frinyvonnick/node-html-to-image
All the schema are built with https://excalidraw.com/
The icon pharmacy is from svgrepo: https://www.svgrepo.com/svg/102720/pharmacy
The song of the video is from Bensound: https://www.bensound.com/royalty-free-music/track/ukulele
Data (names, address, etc...) is randomly generated with Faker.js

Posted on by:

nvignola profile

Nico Vignola

@nvignola

Serial curious, sailor, and video game addicted. Recently forged stress resistance playing Don’t Starve Together. All seasons trekker, guitar player with acoustic soul.

Discussion

markdown guide