Link to Code

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.

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:

• Node.js web server using Express.js
• Web user interface using Vue along with Bootstrap Vue for the UI components
• Parcel 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:

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.

"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! 🎊)

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.

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.

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