How I built a simple healthcare Dapp using Solidity & React
Tags: blockchain, javascript, react, tutorial
Published: 2022-08-23 15:18:00

Last weekend I attended [NextStep Hacks](https://nextstep2022.devpost.com/), 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tns6ejgqiwnc48sdxk6u.jpg)

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

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](https://trufflesuite.com/), a powerful development tool for Ethereum, and React since it's our most familiar frontend framework. 

We used [Truffle React Box](https://github.com/truffle-box/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](https://trufflesuite.com/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u40h3qz69fj4sesmy8qy.png)

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

![Smart contract register functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2tlilleb59frc6fv179.png) 

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

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mmqdb5zp46bw6lyz4h3.png)

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

![Register doctor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm861hcg8gomhcqlckh9.png)

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](https://www.npmjs.com/package/ipfs-http-client) to handle this easily in React.

First I set up IPFS client using my Infura project. [Infura](https://infura.io/) is an infrastructure tool to use IPFS API.

![IPFS client setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63cr1ra7uv3x6oqug0eo.png)

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

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

![Download IPFS file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p9k0iq5wzt6bitxqxuy.png) 

## Final product

{% youtube vdmgFRl_jOs %}

You can check out our [repo](https://github.com/JeffreytheCoder/med-chain) and our [project](https://devpost.com/software/medchain-k4wzry) on DevPost. 

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