dApp Development: Building Full-Stack Decentralized Applications

mkdir my-dapp && cd my-dapp
mkdir contracts frontend

# Initialize smart contract project
cd contracts
npm init -y
npm install --save-dev hardhat @nomicfoundation/hardhat-toolbox
npx hardhat init

# Initialize frontend
cd ../frontend
npx create-react-app .
npm install ethers @web3-react/core @web3-react/injected-connector

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;

contract Voting {
    struct Proposal {
        uint256 id;
        string name;
        uint256 voteCount;
    }
    
    mapping(address => bool) public hasVoted;
    Proposal[] public proposals;
    bool public votingOpen;
    
    event Voted(address indexed voter, uint256 indexed proposalId);
    event VotingOpened();
    event VotingClosed();
    
    constructor(string[] memory _proposalNames) {
        for (uint256 i; i < _proposalNames.length; i++) {
            proposals.push(Proposal(i, _proposalNames[i], 0));
        }
        votingOpen = true;
    }
    
    function vote(uint256 _proposalId) external {
        require(votingOpen, "Voting is closed");
        require(!hasVoted[msg.sender], "Already voted");
        require(_proposalId < proposals.length, "Invalid proposal");
        
        hasVoted[msg.sender] = true;
        proposals[_proposalId].voteCount++;
        
        emit Voted(msg.sender, _proposalId);
    }
    
    function closeVoting() external {
        require(votingOpen, "Already closed");
        votingOpen = false;
        emit VotingClosed();
    }
    
    function getProposals() external view returns (Proposal[] memory) {
        return proposals;
    }
    
    function getWinner() external view returns (uint256 winningProposal, string memory winnerName) {
        uint256 winningCount;
        for (uint256 i; i < proposals.length; i++) {
            if (proposals[i].voteCount > winningCount) {
                winningCount = proposals[i].voteCount;
                winningProposal = i;
                winnerName = proposals[i].name;
            }
        }
    }
}

const { ethers } = require("hardhat");

async function main() {
  const proposals = ["Alice", "Bob", "Charlie"];
  const Voting = await ethers.getContractFactory("Voting");
  const voting = await Voting.deploy(proposals);
  await voting.waitForDeployment();
  
  const address = await voting.getAddress();
  console.log("Voting deployed to:", address);
  
  // Save ABI and address for frontend
  const fs = require("fs");
  const artifact = require("./artifacts/contracts/Voting.sol/Voting.json");
  fs.writeFileSync(
    "../frontend/src/contracts/Voting.json",
    JSON.stringify({ address, abi: artifact.abi }, null, 2)
  );
}

main().catch(console.error);

// src/App.js
import { useState, useEffect } from "react";
import { ethers } from "ethers";
import VotingArtifact from "./contracts/Voting.json";

function App() {
  const [provider, setProvider] = useState(null);
  const [signer, setSigner] = useState(null);
  const [account, setAccount] = useState("");
  const [contract, setContract] = useState(null);
  const [proposals, setProposals] = useState([]);
  const [hasVoted, setHasVoted] = useState(false);
  
  async function connectWallet() {
    if (window.ethereum) {
      const provider = new ethers.BrowserProvider(window.ethereum);
      const accounts = await provider.send("eth_requestAccounts", []);
      const signer = await provider.getSigner();
      
      setProvider(provider);
      setSigner(signer);
      setAccount(accounts[0]);
      
      const contract = new ethers.Contract(
        VotingArtifact.address,
        VotingArtifact.abi,
        signer
      );
      setContract(contract);
      
      // Load proposals
      const proposals = await contract.getProposals();
      setProposals(proposals);
      
      // Check if user voted
      const voted = await contract.hasVoted(accounts[0]);
      setHasVoted(voted);
    }
  }
  
  async function castVote(proposalId) {
    try {
      const tx = await contract.vote(proposalId);
      const receipt = await tx.wait();
      
      if (receipt.status === 1) {
        setHasVoted(true);
        const updated = await contract.getProposals();
        setProposals(updated);
      }
    } catch (error) {
      alert("Vote failed: " + error.message);
    }
  }
  
  return (
    <div>
      <h1>Decentralized Voting dApp</h1>
      
      {!account ? (
        <button onClick={connectWallet}>Connect Wallet</button>
      ) : (
        <div>
          <p>Connected: {account.slice(0, 6)}...{account.slice(-4)}</p>
          
          <h2>Proposals</h2>
          {proposals.map((proposal, i) => (
            <div key={i}>
              <span>{proposal.name} - {proposal.voteCount.toString()} votes</span>
              {!hasVoted && (
                <button onClick={() => castVote(i)}>Vote</button>
              )}
            </div>
          ))}
          
          {hasVoted && <p>You have already voted.</p>}
        </div>
      )}
    </div>
  );
}

export default App;

// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

function TransactionManager({ txState, setTxState }) {
  return (
    <div>
      {txState.status === "pending" && (
        <div>
          <p>Waiting for wallet confirmation...</p>
        </div>
      )}
      
      {txState.status === "submitted" && (
        <div>
          <p>Transaction submitted!</p>
          <p>Hash: {txState.hash}</p>
          <a href={`https://etherscan.io/tx/${txState.hash}`} target="_blank">
            View on Etherscan
          </a>
          <p>Waiting for confirmations...</p>
        </div>
      )}
      
      {txState.status === "confirmed" && (
        <div>
          <p>Transaction confirmed!</p>
          <p>Block: {txState.blockNumber}</p>
          <p>Gas used: {txState.gasUsed}</p>
        </div>
      )}
      
      {txState.status === "error" && (
        <div>
          <p>Transaction failed: {txState.error}</p>
        </div>
      )}
    </div>
  );
}

// Usage in App.js
async function castVote(proposalId) {
  setTxState({ status: "pending" });
  
  try {
    const tx = await contract.vote(proposalId);
    setTxState({ status: "submitted", hash: tx.hash });
    
    const receipt = await tx.wait();
    setTxState({
      status: "confirmed",
      blockNumber: receipt.blockNumber,
      gasUsed: receipt.gasUsed.toString(),
    });
    
    // Reload data
    const voted = await contract.hasVoted(account);
    setHasVoted(voted);
    const updated = await contract.getProposals();
    setProposals(updated);
  } catch (error) {
    setTxState({ status: "error", error: error.message });
  }
}

// hardhat.config.js
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();

module.exports = {
  solidity: "0.8.19",
  networks: {
    sepolia: {
      url: process.env.SEPOLIA_URL,
      accounts: [process.env.PRIVATE_KEY],
    },
  },
};

# Deploy contract to Sepolia
cd contracts
npx hardhat run scripts/deploy.js --network sepolia

# Build frontend
cd ../frontend
npm run build

# Deploy frontend to Vercel or Netlify
# npx vercel --prod