Helping patients to get their medicine - Twilio x DEV Hackathon submission
Tags: twiliohackathon
Published: 2020-04-29 21:27:41

---
title: Helping patients to get their medicine - Twilio x DEV Hackathon submission
published: true
description: Kuracado - my submission to the Twilio x DEV Hackathon!
tags: twiliohackathon
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/kfm7fdecpuxxz35bk8d0.png
---

#### Link to Code
{% github nvignola/kuracado %}

#### 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
### &alpha;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](https://dev-to-uploads.s3.amazonaws.com/i/5uxxfhsjjih7hvaqioqt.png)

If you are curious and you want to see it in action, check out the [video](#demo)

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](https://github.com/marak/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:
- Node.js web server using [Express.js](https://npm.im/express)
- Web user interface using [Vue](https://npm.im/vue) along with [Bootstrap Vue](https://npm.im/vue) for the UI components
- [Parcel](https://parceljs.org/) bundler

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/ijnbp3a6xyo5fxznxbla.png)


#### 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](https://dev-to-uploads.s3.amazonaws.com/i/xi9e2z0t9jose82ekab6.png)


#### "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:
- https://github.com/frinyvonnick/node-html-to-image 

And...(Ta-Da! 🎊)

![The 'printed' receipt](https://dev-to-uploads.s3.amazonaws.com/i/vzrd5fahnikbhq3xng67.png)

#### 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](https://dev-to-uploads.s3.amazonaws.com/i/uccuveqouguywnl2y2p9.gif)


### 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](https://dev-to-uploads.s3.amazonaws.com/i/h05gzsgk4nxgmk21nn3a.png)

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
{% youtube sSJlsbYCp6M %}<a name="demo"></a>

## 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](https://github.com/marak/Faker.js/)