Building a Decentralized Voting DApp: A Comprehensive Guide

Decentralized applications (DApps) have gained popularity due to their potential to revolutionize various industries, including voting systems. By leveraging blockchain technology, we can create secure, transparent, and tamper-proof voting platforms. In this article, we will guide you through building a decentralized voting DApp using Hardhat, including the smart contract code and a basic frontend. This guide assumes basic knowledge of blockchain, Ethereum, and web development.

1. Introduction 1.1. What is a Decentralized Voting DApp? A decentralized voting DApp is an application that allows users to cast votes on a blockchain. The decentralized nature ensures that the voting process is transparent, immutable, and resistant to fraud. Each vote is recorded on the blockchain, making it easy to audit and verify the results.

1.2. Benefits of Decentralized Voting
Transparency: Every vote is publicly recorded on the blockchain, making the process transparent.
Security: Blockchain's cryptographic nature ensures the integrity and security of the votes.
Immutability: Once recorded, votes cannot be altered or deleted, preventing tampering.

1. Setting Up the Development Environment 2.1. Prerequisites Before we start, ensure you have the following installed:

Node.js: JavaScript runtime for building the frontend.
Hardhat: Development environment for Ethereum.
Ganache: Personal blockchain for Ethereum development.
MetaMask: Browser extension for interacting with Ethereum.
2.2. Installing Dependencies
Install Hardhat and Ganache CLI using npm:

sh
Copy code
npm install --save-dev hardhat
npm install -g ganache-cli

1. Writing the Smart Contract 3.1. Smart Contract Overview The smart contract will handle the voting process, including candidate registration, vote casting, and result tallying. We'll use Solidity, a programming language for writing smart contracts on Ethereum.

3.2. Smart Contract Code
Create a new Hardhat project:

sh
Copy code
mkdir VotingDApp
cd VotingDApp
npx hardhat
Select "Create a basic sample project" and follow the prompts.

Create a new file Voting.sol in the contracts directory and add the following code:

solidity
Copy code
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Voting {
struct Candidate {
uint id;
string name;
uint voteCount;
}

mapping(uint => Candidate) public candidates;
mapping(address => bool) public voters;
uint public candidatesCount;

event Voted(address indexed voter, uint indexed candidateId);

function addCandidate(string memory _name) public {
    candidatesCount++;
    candidates[candidatesCount] = Candidate(candidatesCount, _name, 0);
}

function vote(uint _candidateId) public {
    require(!voters[msg.sender], "You have already voted");
    require(_candidateId > 0 && _candidateId <= candidatesCount, "Invalid candidate");

    voters[msg.sender] = true;
    candidates[_candidateId].voteCount++;

    emit Voted(msg.sender, _candidateId);
}

function getCandidate(uint _candidateId) public view returns (string memory name, uint voteCount) {
    Candidate memory candidate = candidates[_candidateId];
    return (candidate.name, candidate.voteCount);
}

}
3.3. Deploying the Smart Contract
Update scripts/deploy.js to deploy the Voting contract:

javascript
Copy code
async function main() {
const Voting = await ethers.getContractFactory("Voting");
const voting = await Voting.deploy();

await voting.deployed();

console.log("Voting contract deployed to:", voting.address);
}

main()
.then(() => process.exit(0))
.catch((error) => {
console.error(error);
process.exit(1);
});
Start Ganache CLI:

sh
Copy code
ganache-cli
Compile and deploy the contract:

sh
Copy code
npx hardhat compile
npx hardhat run scripts/deploy.js --network localhost

1. Building the Frontend 4.1. Setting Up React We'll use React for the frontend. Initialize a new React project:

sh
Copy code
npx create-react-app client
cd client
4.2. Connecting to the Blockchain
Install web3 to interact with the Ethereum blockchain:

sh
Copy code
npm install web3
Create a new file src/contracts/Voting.json and copy the ABI from the artifacts/contracts/Voting.sol/Voting.json file generated by Hardhat.

4.3. Frontend Code
Update src/App.js to include the following code:

javascript
Copy code
import React, { useEffect, useState } from 'react';
import Web3 from 'web3';
import VotingContract from './contracts/Voting.json';

const App = () => {
const [account, setAccount] = useState('');
const [candidates, setCandidates] = useState([]);
const [contract, setContract] = useState(null);

useEffect(() => {
const loadBlockchainData = async () => {
const web3 = new Web3(Web3.givenProvider || 'http://localhost:7545');
const accounts = await web3.eth.requestAccounts();
setAccount(accounts[0]);

  const networkId = await web3.eth.net.getId();
  const deployedNetwork = VotingContract.networks[networkId];
  const contract = new web3.eth.Contract(VotingContract.abi, deployedNetwork && deployedNetwork.address);
  setContract(contract);

  const candidatesCount = await contract.methods.candidatesCount().call();
  const candidates = [];
  for (let i = 1; i <= candidatesCount; i++) {
    const candidate = await contract.methods.candidates(i).call();
    candidates.push(candidate);
  }
  setCandidates(candidates);
};

loadBlockchainData();

}, []);

const vote = async (candidateId) => {
await contract.methods.vote(candidateId).send({ from: account });
const candidate = await contract.methods.candidates(candidateId).call();
setCandidates(candidates.map(c => c.id === candidateId ? candidate : c));
};

return (

Voting DApp

Your account: {account}

Candidates

{candidates.map(candidate => (
• {candidate.name} - {candidate.voteCount} votes vote(candidate.id)}>Vote
))}

);
};

export default App;
4.4. Running the Frontend
Start the React development server:

sh
Copy code
npm start
Open your browser and navigate to http://localhost:3000. You should see the voting DApp with the list of candidates and the ability to vote.

1. Conclusion Building a decentralized voting DApp involves creating a smart contract to handle the voting logic and a frontend to interact with the contract. By leveraging blockchain technology, the DApp ensures a secure, transparent, and immutable voting process. This guide provided a basic implementation to get you started. You can further enhance the DApp by adding features like candidate registration restrictions, vote result display, and more sophisticated frontend design.

Comments

[Nacho Colomina Torregrosa]

Hey, that's cool. I have a voting contract for the stellar soroban contract. You can check it here: dev.to/icolomina/using-tokenizatio....
It uses a soroban token to control who can vote (only address holding the token can vote).

[sourav maji]

That's cool