How to Build a Decentralized Full Stack App in Ethereum and React 🔥

Akshar Takle
Jan 17, 2018 · 5 min read

With cryptocurrencies gaining popularity and new applications based on blockchain technology popping up everyday, I decided to write my own application to get a better understanding of the blockchain technology.

Blockchain is an emerging technology in its very early stage of development. Being a front end developer I wanted to develop a blockchain app with modern web frameworks but did not find a solid source to get started. After trying out different approaches for more than couple of days, I was finally able to put all the pieces together and make a complete application. In this post I have shared the process of developing such an application.

We will use Ethereum as our blockchain platform to make a movie rating application using create-react-app. We will write, compile, deploy and interact with smart contracts and create a working frontend for it !

Note: This post does not explain the blockchain concepts rather it focusses on developing applications using this technology. If you need an understanding of what blockchain technology is, you can refer to these great articles by Preethi Kasireddy:

I know what is Ethereum. How to build great apps with it?

Lets get some hands on development then !


Setting up Environment:

npm install -g truffle

Truffle is a development and testing framework for Ethereum with which you can compile, test and deploy smart contracts on Ethereum network.

npm install -g ethereumjs-testrpc

First we will set up our backend with truffle:

mkdir movieRatingApp //make a project directorycd movieRatingAppmkdir rating // backend foldercd rating truffle init //initialize a new truffle project 

This will create necessary files and folders to create and deploy smart contracts.

Smart Contracts

We will start by writing our smart contract called Rating.sol, then we will compile and interact with it by using truffle console.

Inside contracts directory create a new file called Rating.sol with the following code:

Deploy and Truffle Console

To deploy our newly created contract we need to add a file 2_deploy_contract.js file under migrations folder. After creating this file add the following code to it:

The first line prepares our Rating contract to be compiled and migrated on our specified network. We then deploy the truffle artifact giving three movie names as parameters for our constructor in the contract.

Inside our backend directory, open up truffle.js and add the following code:

With this we will be able to modify and deploy our contracts within the test or ethereum main network.

Lets start our testrpc:

testrpc 

You will see a list of 10 accounts and their private keys. testrpc is listening at port 8545. This is the location where we will be migrating our smart contract.

Inside rating folder, type truffle compile.

truffle compile

This will create a new folder called build. This build folder contains JSON objects that will be used to deploy our smart contracts. Finally run truffle migrate

truffle migrate

As we are connected and running our testrpc on the same port we will see our smart contracts deployed successfully. Now that we have deployed our contract we can interact with it within the truffle console

truffle console

Lets see where the contract was deployed:

Rating.address

We will get the address where the contract was deployed in the network. Lets note down few things that we will need in order to connect this contract with our frontend.

inside the truffle console, run

JSON.stringify(Rating.abi)

We are accessing the Application Binary Interface of our contract which is a list of functions in our contract in JSON format. This will be used to interact with our contract later.

Copy the returned contents of abi without the single quotes and the contract address at some place.


Linking Frontend

We will be using create-react-app tool to bootstrap our application. If you dont have it installed, run:

npm install -g create-react-app

Within our movieRatingApp folder run

create-react-app appui

This will create a react application within appui folder. Inside our appui folder open up package.json and add web3 dependency as shown:

Navigating into appui folder, install the new dependencies and then start the server:

npm installnpm start

Now, we will utilize web3 api to interact with our Rating smart contract on the testrpc network.

Inside appui/src create a new file called setup.js and add the following fields into it.

Replace the ratingABI and ratingAddress values with previously noted values.

In here, we:

  • Instantiate a new Web3 instance
  • Connect the instance to our blockchain (testrpc at localhost:8545)
  • Export the configuration so that we can make api calls from our app

Now our work is to only write the frontend part.

Frontend

Edit App.js, ShowMovies.js and ShowMovies.css files with the following code:

Now, if you go to localhost:3000 you should see a screen similar to this:

localhost:3000

When we click on the names of movies, transactions will be recorded on our blockchain and rating will be updated. You can check this in your testrpc window after up voting for a movie. Thats it! We have developed a blockchain application 🙌

Wrapping Up:

We saw how to write, compile and deploy smart contracts on the Ethereum network using the truffle framework. We then successfully linked our frontend to interact with the contract utilizing the web3 api. If you need to refer to the original source code, here is the github link.

I hope reading this post was enjoyable and useful. If you think this is helpful for someone else, do not forget to share. Also let me know your thoughts on this. Cheers! 🍻 🍻

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade