Building Decentralized Full Stack App in Ethereum

0
369
Cryptocurrency mining equipment, isometric ethereum digital currency extract, blockchain system dark blue vector illustration

As the Blockchain continues to enhance its capabilities more and more people are adopting this technology. So we also take a step forward and in this article, we will tackle an important issue in the democratic government. Here we will try to build a demo application in Ethereum which will showcase an election between two candidates.

Need for Decentralized Voting App

Using this private Blockchain technology only the authorized person could cast his vote and that too only once. The vote once entered cannot be altered as it is a distributed technology and each of the transaction is verified by every single node in the network. In case anyone wants to hack the account he should have a 51 % control over the network. So the system is transparent, secure and auditable.

Initially, a person has to have an account with a wallet with some Ether. The user connects to the network and then pays a small transaction fee for casting a vote known as gas.

Pre-requisite Applications to be Installed

There are a few of the applications needs to be installed on your computer to build the decentralized application.

  1. Node Package Manager

It comes with node.js and you can check whether NPM is installed on your computer by running this command:

  1. Truffle Framework

As you know that any Ethereum program is mostly written in Solidity and Smart Contracts are written. So Truffle is a box of tools which allows a user to write, enable and deploy the Smart Contract. The command to install Truffle is shown below:

  1. Ganache

It is a local in-memory Blockchain. You can download it from here:

https://truffleframework.com/ganache

You can have access to 10 local accounts and it has 100 fake ethers.

  1. Metamask

In order to connect the computer to the Blockchain network, you need to install the metamask which is an extension for the browser. it will connect the local Ethereum to the account which is to be created by the user. Just search for Metamask Extension Google Chrome. An alternative to Metamask is Web3.js.

Let’s Start

Now we will see how we can build the app.

  • Create a project directory using the command:

  • Now install the project Truffle box and we will use Pet Shop Box. Install using the command:

The directory which will be created is shown below:

Decentralized Full Stack

  • In the contract directory, you just created you have to create a new contract. Command for creating a new contract: $ touch contracts/Election.sol

Creating the List of Candidates

Now we have to build the code for every candidate that is up for election. Each candidate has a list of attributes like name, identity, vote count, etc.

So there are multiple candidates and we have to build up the attributes for each candidate with the help of Solidity Struct. Then we will create a mapping to store the attributes of several candidates and add a counter to see a number of candidates.

Decentralized Full Stack

  • After we have built the code, now is the time to deploy it to the Blockchain. So we will migrate the contract with the help of the following command: $ truffle migrate –reset

We have now completed the first part i.e. to make the record for a candidate. Now we will build the code for the client-side which will talk to smart contract.

Client Side code:

No problem if you are not a front-end developer. You just have to replace the code of “index.html” with the below code. These are HTML and JavaScript codes.

Decentralized Full Stack

  • Now the index.html file has been replaced, we have to replace “app.js” content with the below code:

Decentralized Full Stack

The above code sets up web3.js, initializes the contracts and then renders the function. After this code you have to migrate this code to for the deployment in the Blockchain by the following command: $ truffle migrate –reset

You can start the development server form this command:

You have to login into your metamask to see the results. After you have run this code you will see the following window in your browser:

Decentralized Full Stack
Casting of Votes

Now we will learn how to make a code which will cast the vote. For this, we will define a mapping called “voters”. Adding of the candidate is done in private because everyone is not authorized to add a voter to the database.

In this code, the “vote” function will increase the candidates vote by1 and will keep a record that the voter has voted only once. We confirm this by reading the address of the account “msg.sender”. The following below code illustrates the casting of vote by a voter.

  • The below code assures us that there is no double voting for a candidate.

After these codes the application in the front-end will look something like the picture shown below:

There is an option to select the candidate and click on the vote button.

As some amount of gas is required for the voting then you will see a metamask pop-up as shown below when you cast your vote:

Decentralized Full Stack

Now you have successfully cast your vote. You just have to click on the submit button and your vote will be registered.

Watch Events

Now we have to update the count in the client side also to know whether the voter has voted for the particular candidate or not. For doing so we have to write the following code as shown below.

Declare an Event

We have to trigger the event “voted” inside of the “vote”. For this write the following code:

 

As we know that we have to migrate these codes into the Blockchain so run the following command:  $ truffle migrate –reset

Conclusion

So in this article, we learned how we can build our full stack decentralized application in Ethereum. We also discussed the basic requirements needed to deploy the Blockchain to the network. Make sure that you write all the code in the Solidity language only as we have used only solidity and metamask to connect our browser to the internet.

LEAVE A REPLY

Please enter your comment!
Please enter your name here