How I built a simple healthcare Dapp using Solidity & React
Jeffrey Yu
Posted on August 23, 2022
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.
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:
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.
Then functions to register user. A doctor can register itself and register patients.
Finally, functions to add and get records of a patient. Only a doctor can add records, but both doctor and patient can read records.
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:
Since the constants above are stored in context, I can use them easily in a register button component.
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.
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.
Then a patient or doctor can download the record in one click.
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 🚀
Posted on August 23, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.