MediDoc: Efficient Paperless Medical Treatment Management System - DOHackathon Submission
Tags: dohackathon, django
Published: 2021-01-10 19:36:30

## What I built

MediDoc - an efficient medical treatment management system.

### Category Submission: 

**Built for Business**. The target customers of this app are governments and connected hospitals.

### App Link

https://medi-doc-njgqo.ondigitalocean.app/

### Description

This is an end to end application for medical treatment management.

A typical treatment case in hospital:
- Take admission in a hospital
- Hospital prescribes some medicines in a paper and the patient
  (or the family of the patient) has to buy it from a pharmacy
- Hospital asks the patient to get some diagnosis (say, MRI, X-ray, etc.), and it is performed in a diagnosis center. The patient gets the scanning done and finally brings the result back to the hospital. S/he may have to wait quite some time in the diagnosis center to get paper-works done and get those scanning results.

So as we can see, there are quite a few manual steps in the flow of work, and in many places, paperwork is involved.

MediDoc is a web app that tries to get rid of this paperwork and thus making the whole process much more efficient.

In this web app, there are 4 types of users:

- Normal user (or patient)
- Hospital
- Pharmacy
- Diagnosis Center

Only admins can add hospital, pharmacy, and diagnosis type of users. Admins ideally should be the government-appointed personnel, who can approve hospitals, pharmacies, and diagnosis centers after checking their license. Admins can also add more admins.

### Screenshots

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/3rbuij55svhk2yxnqjn6.png">
  <figcaption>Log In</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/nahjs3darc37mfbr7usr.png">
  <figcaption>Medical Sign Up</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/4yiz9itjmchcuxrxqpwv.png">
  <figcaption>Dashboard (only available to admin)</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/7rg159319ygpps72btg7.png">
  <figcaption>Add User</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/rs21qhdnv5q41pfevu8n.png">
  <figcaption>Successfully Added User</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/7m2mtlz2drhiamik2fp2.png">
  <figcaption>Add Admin</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/kagvset51xhg3q3zdp54.png">
  <figcaption>Search Medical User</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/my21dngp22hcx9tejuov.png">
  <figcaption>Homepage - Recent Cases, Search and Bookmarked Cases</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/c5w7ao42tofiwsandy5z.png">
  <figcaption>All Cases</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/61vh49an61rxdbkdxvrf.png">
  <figcaption>Search Cases</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/3lsss9byoumlxy6v6waw.png">
  <figcaption>A Case</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/20nftgjwxq9i1w4cjhj8.png">
  <figcaption>Edit Description</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/8s86lqc4vty3of8wdljl.png">
  <figcaption>Add Comment</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/em18qbdn9ap39s0rkj6p.png">
  <figcaption>Edit Comment</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/d8c7k36rv0g4kb6z0nh7.png">
  <figcaption>Add User to Case</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/3kph3rr8v6f91tsnkl6l.png">
  <figcaption>Upload File</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/gpyc2vff6p7gf61edqzo.png">
  <figcaption>Library</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/r90ko89p855ppyij9gtu.png">
  <figcaption>Error Page</figcaption>
</figure>

### Demo

{% youtube WRCYPjLRN00 %}

### Salient Features

- **Access Level:** Once a user is added, they will see their kind of data only. For example, a pharmacy can see only prescription-related comments and files. In this way, they only get to see what is relevant to them. It is up to the hospital and patient to provide relevant information to different types of users.
- **My Library**: If we think a file will be useful later, we can add it to our library by clicking on the + button on the file. It can be accessed by clicking on the profile icon in the top right and then clicking on the library. One can remove files from the library as well.
- **Maintain Case Activity:** Once a case is resolved, it can be marked as inactive by clicking on the `EDIT` button in the description panel, and unchecking the `Is active` checkbox. The case will no longer show up on the recent cases list.
- **Search for Hospitals, Pharmacies, and Diagnostic Labs**

### Next Steps

- Create public APIs, so that other apps can consume data of this web app
- Add billing feature

### Advantages

- Zero paperwork, a patient fills the required information (blood group, allergies, etc.) during sign up
- No paperwork for prescriptions as well
- Documents (e.g., x-ray scan) can be saved in my library and referenced later
- Past case histories can be referenced for similar cases in future
- Patients no longer have to wait to fill in forms and then to obtain results from diagnostic labs. Labs can upload the documents (say, X-ray) once it is processed.

### Link to Source Code

[ayan-b/MediDoc](https://github.com/ayan-b/MediDoc/)

### Permissive License

[MIT](https://github.com/ayan-b/MediDoc/blob/main/LICENSE)

## Background
<!-- (What made you decide to build this particular app? What inspired you?) -->

My inspiration comes from a real-world experience when I visited a hospital a few years ago. There I observed at a significant amount of time is wasted in duplicated paperwork activities (for example, submitting the same documents in both hospital and diagnosis lab) which can be automated using technology.
I also came across [this thread](https://twitter.com/dhh/status/1324000909886545920) a couple of months ago which asserted my belief that this is not a local issue!

### How I built it 
<!-- (How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?) -->

I have used DigitalOcean app platform, database, and DigitalOcean spaces in this project.

Deploying Django with the DigitalOcean Apps Platform was fairly straightforward. The app platform easily identified that this is a Django through the presence of the `wsgi.py` file. Deploying Django is also thoroughly documented and thus I didn't encounter any hiccups.

After connecting my GitHub repo with the app platform, the only thing I had to change was the run command: `gunicorn --worker-tmp-dir /dev/shm medidoc.wsgi`. I have also used some environmental variables:

1. `DJANGO_SECRET_KEY` for well ... DJANGO_SECRET_KEY
2. I also have another environment variable `IS_PROD` (default to `False`) which is used to control the static file hosting.
3. Since in MediDoc users can upload media, I also had to create DigitalOcean spaces and add the following configuration variables to my `settings.py` file.
```python
if IS_PROD:
    DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
    AWS_S3_REGION_NAME = 'nyc3'
    AWS_S3_ENDPOINT_URL = f'https://{AWS_S3_REGION_NAME}.digitaloceanspaces.com'
    AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
    AWS_STORAGE_BUCKET_NAME = 'medidoc'
    AWS_S3_OBJECT_PARAMETERS = {
        'CacheControl': 'max-age=86400',
    }
    AWS_LOCATION = 'media'
    AWS_S3_ADDRESSING_STYLE = 'virtual'
    AWS_QUERYSTRING_EXPIRE = 7 * 24 * 60 * 60
    AWS_S3_BUCKET_AUTH = False
```

In the end, I have the following environment variables:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ro9g909php6yz2as78a.png)

Through the hackathon, I learned a lot about Digital Ocean and deploying a production-ready app!

### Try It Out

To try it out, please create a patient account [here](https://medi-doc-njgqo.ondigitalocean.app/accounts/signup) and a medical account [here](https://medi-doc-njgqo.ondigitalocean.app/accounts/signup/medical) (note that admin has to approve the medical accounts, so please wait a bit, or use the admin account below to approve!).

Alternatively, you can use the following demo medical accounts:
- devto-hospital
- devto-diag
- devto-pharmacy

the patient account:
- devto-patient

and the admin account:
- devto

Password for all of them is: medidocpass@abc

I would love to hear your feedback. Let me know what you think!

### Additional Resources/Info

**Backend**:

- [Django](https://www.djangoproject.com/)
- [Material Form](http://docs.viewflow.io/material_forms.html) for rendering forms

**Frontend**:

- [MaterializeCSS](materializecss.com/) framework

### Credits

- Favicon by [Icons for Free](https://icons-for-free.com/doctor+drug+health+healthcare+hospital+icon-1320167777175921163/)
- Chest x-ray <span>photo by <a href="https://unsplash.com/@cdc?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">CDC</a> on <a href="https://unsplash.com/s/photos/x-ray?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
- Hand xray <span>photo by <a href="https://unsplash.com/@owenbeard?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Owen Beard</a> on <a href="https://unsplash.com/s/photos/medical?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>