Building a Blockchain DApp using truffle, React, Next.js and MobX (part I)

Screenshot from the live app.

This post will walk you, a React developer, through building your first distributed app on the Blockchain.

It seems like everyone in the tech industry (well almost everyone) talks about Bitcoin, Blockchain and distributed apps. This got me intrigued, so I wanted to build something useful using this technology to better understand what are the challenges and opportunities in this space. This post is the first of two describing my experience of building my first distributed Ethereum Blockchain app.

I’ll go over the steps needed to build a Smart Contract, how to compile and deploy it to a local Blockchain network and how to build a server side rendering React app in order to interact with our contract.

Before getting into the code I would suggest one to go over Ethereum Overview on truffle website to get some concepts and terms down before proceeding.

In this post I’ll go over:

1. Setting up The Development Environment
2. Writing and Testing a Smart Contract
3. Compiling and deploying our Smart Contract

Our DApp (decentralized application)

As the fall tv season just started in the US, we would like to use the Blockchain (Ethereum) as an efficient way to handle the mapping of a user’s and their favorite tv shows.

The app displays a list of shows coming from rotten tomatoes unofficial API. Split into three categories: Fresh, New and Popular.

A special section in the app “Bookmarks” displays a list of user’s favorite shows which are currently stored on the Blockchain.

Users are able to add or remove shows from their Bookmarks section. Every time a user adds or removes a show a Smart Contract function is invoked and the change is stored on the Blockchain.

The front-end app is a server side rendering React app powered by Next.js, for state management we’ll use MobX, styling and layout will come from the awesome tachyons project and in order to interact with the Blockchain we’ll write a Smart Contact in solidity, write tests for it in JavaScript and deploy it locally using truffle.

Setting up The Development Environment

Make sure you have node, git and nvm install before starting this.

First we need to install TestRpc and Truffle:

• npm install -g ethereumjs-testrpc
• npm install -g truffle

Now clone the app and install the dependencies:

//clone the repo
git clone git@github.com:liors/tvdapp.git
// Navigate to within the directory
cd tvdapp
//install dependencies
yarn install

Implementing the Smart Contract

Our app uses the Blockchain in order to store user’s favorite shows. In order to do that we need to implement a Smart Contract that acts as its backend logic and storage.

Under the /contracts directory you can find a Bookmark.sol file:

If you’re new to solidity (like me) their docs site has a “solidity by example” section which I found very useful.

A bit about the contract. We start by declaring a contract which we name Bookmark. The contract has two public APIs.

1. bookmark — which except a string that represent a show. I choose to store a JSON that will be reuse in our app UI. As another approach one could store a reference ID to some external storage.
2. getBookmarks — which will return an array of shows per account.

Testing the Smart Contract

You can write tests to Smart Contracts in either solidity or JavaScript.

For JavaScript tests Truffle uses the Mocha testing framework and Chai for assertions.

Under the /tests directory you can find a bookmark.js file:

In order to run the tests you first have to have a local instance of testrpc. Once your EthereumJS TestRPC session start you can execute the tests:

yarn test

Let’s go over the cases we would like to cover:

1. A case when a client requests to bookmark a show — In this case we first get the instance of our contract, then call the public API ‘bookmark’ which except a string as it’s first argument and a configuration object that includes the ‘from’ attribute. We then call the second getBookmarks public API as a result we get back a promise which when resolved should contain the show (string) we pass to the bookmark function.
2. A case when a client requests to bookmark a list of shows — Same as our first use-case, but now we want to make sure we can store a list of shows, as such we will first bookmark few shows by passing an array of JSON objects and call our getBookmarks function to verify our Smart Contract is valid.

Deploying our Smart Contract to a local Blockchain

We have just implemented and tested our Bookmark Smart Contract, it’s time to compile it and migrate (deploy) it to our test network.

Compilation

Solidity is a compiled language, meaning we need to compile our Solidity to bytecode for the Ethereum Virtual Machine (EVM) to execute.

1. Start a new terminal window and invoke the testrpc module we installed globally:

testrpc

This starts a local Ethereum blockchain instance.

2. Now let’s compile the Smart Contract we implemented:

truffle compile

This will compile our .sol file(s). You should see the output of this compilation as JSON(s) files in build/contracts folder.

Deploying/Migration

I’ve used the default migration file provided when you run truffle init. You can find it under /migrations/1_initial_migration.js.

Under the /migration folder you can also find 2_deploy_contracts.js. This file requires our Smart Contract i.e., Bookmark.sol and deploy it:

const Bookmark = artifacts.require('./Bookmark.sol')
module.exports = deployer => deployer.deploy(Bookmark)

In order to execute this script run:

truffle migrate

We have just deployed our contract to a local Blockchain network!

In the next post we’ll go over our React app and see how we can use Next.js, MobX and web3.js to build a UI that interacts with our Smart Contract we just implemented.

The complete code for this app is available on github.

A live version of the app is deployed here — Please make sure your browser can run DApps, I’ve been using MetaMask chrome extension.

Thanks for reading. Hope this is helpful.