How I built a simple healthcare Dapp using Solidity & React

jeffreythecoder

Jeffrey Yu

Posted on August 23, 2022

How I built a simple healthcare Dapp using Solidity & React

Last weekend I attended NextStep Hacks, a hackathon sponsored by Ethereum. I was interested in blockchain for a long time, but this is my first time developing a blockchain project.

In two days, my teammate Akilesh and I learned the basics and built a simple healthcare Dapp, which ended up winning the 3rd place. Here I'll share how I built it and hopefully it will help you jump start with blockchain development ⏫

Inspiration

For decades, medical records are under the ownership of hospitals. It often it takes days to request a hospital to transfer a record, and sometimes impossible to transfer across countries.

Medical record transfer process

When I arrived at US for college, I tried to transfer records of Covid vaccination from China, but rejected by local hospitals. I had to take two more dozes of Pfizer and suffering days of side effects like fever 😣

That's why we built MedChain - a blockchain-based electrical medical records (EMR) decentralized application (Dapp).

How it works

MedChain is powered by IPFS, where patients’ medical records are stored on the distributed file system, not owned by any centralized entity.

A patient or a doctor can access the patient's records by interacting with a smart contract on the Ethereum blockchain. Here is a graph showing how the Dapp works:

Dapp interactions

The client first connects with MetaMask, and uses smart contract to mint a patient or doctor block, registered by the wallet address.

The client can upload a record file to IPFS, which address is linked to a patient block in ETH chain. The client can get all record addressed stored in a patient block from smart contract, and get a record file by its address from IPFS.

Setup

We chose Truffle, a powerful development tool for Ethereum, and React since it's our most familiar frontend framework.

We used Truffle React Box as a boilerplate for this project. It already has React context set up to connect with MetaMask and interact with Truffle.

To get a local blockchain network running on my computer, I set up Ganache and imported test accounts to MetaMask.

Write smart contract

For this project, we only need one Solidity smart contract called EHR. First I defined structures for medical record, patient, and doctor.

Smart contract structures

Then functions to register user. A doctor can register itself and register patients.

Smart contract register functions

Finally, functions to add and get records of a patient. Only a doctor can add records, but both doctor and patient can read records.

Smart contract records functions

To deploy the contract, run truffle deploy and EHR.sol will be deployed as EHR.json.

Connect React with smart contract

Skipping writing components, the important part of this React project is iteracting with the smart contract.

With ETH context provided in the boilterplate, it sets up Web3.js initialization for me. You can find the same logic as the following:

Web3.js init

Since the constants above are stored in context, I can use them easily in a register button component.

Register doctor

The same thing applies to register patient with the patient account as input.

Upload & Download record from IPFS

Another important part is uploading records to IPFS and pushing address to the smart contract. I used ipfs-http-client to handle this easily in React.

First I set up IPFS client using my Infura project. Infura is an infrastructure tool to use IPFS API.

IPFS client setup

After a doctor drags a file in the dropzone, FileReader reads it as a buffer and upload it to IPFS client.

Then I call addRecord contract method with the patient address and the hash returned by IPFS client. Lastly, call getRecords to refresh records.

Upload file to IPFS

Then a patient or doctor can download the record in one click.

Download IPFS file

Final product

You can check out our repo and our project on DevPost.

We hope our project help push revolutionizing the centralized ownership of medical records and let people own their health. Go blockchain 🚀

💖 💪 🙅 🚩
jeffreythecoder
Jeffrey Yu

Posted on August 23, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related