Decentralized voting system

I'll provide you with a complete step-by-step guide to run the blockchain voting project.

Step-by-Step Setup Guide

Step 1: Install Prerequisites

1.1 Install Node.js

# Download and install Node.js (v16 or higher) from nodejs.org
# Verify installation
node --version
npm --version

1.2 Install MetaMask

Go to metamask.io
Install the browser extension
Create a new wallet or import existing one

1.3 Install Truffle and Ganache

# Install Truffle globally
npm install -g truffle

# Install Ganache CLI globally
npm install -g ganache-cli

# Verify installations
truffle version
ganache-cli --version

Step 2: Create Project Directory

# Create project directory
mkdir blockchain-voting
cd blockchain-voting

# Initialize npm project
npm init -y

Step 3: Install Project Dependencies

# Install main dependencies
npm install next@14 react@18 react-dom@18 web3@4 typescript@5
npm install @types/node@20 @types/react@18 @types/react-dom@18

# Install Truffle dependencies
npm install truffle@5.11.5 @truffle/hdwallet-provider@2.1.15

# Install UI dependencies (if using the provided components)
npm install @radix-ui/react-progress @radix-ui/react-tabs @radix-ui/react-alert-dialog
npm install @radix-ui/react-avatar @radix-ui/react-badge @radix-ui/react-card
npm install lucide-react class-variance-authority clsx tailwind-merge
npm install tailwindcss@latest postcss@latest autoprefixer@latest

Step 4: Setup Project Structure

Create the following directory structure:

blockchain-voting/
├── contracts/
├── migrations/
├── app/
├── lib/
├── components/
├── hooks/
└── build/ (will be created after compilation)

Step 5: Copy the Code Files

Copy all the code files I provided earlier into their respective directories:

contracts/Voting.sol
contracts/Migrations.sol
migrations/1_initial_migration.js
migrations/2_deploy_voting.js
truffle-config.js
lib/web3.ts
lib/voting-contract.ts
app/page.tsx
package.json

Step 6: Setup Tailwind CSS

# Initialize Tailwind
npx tailwindcss init -p

# Create tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7: Setup Next.js Configuration

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      net: false,
      tls: false,
    }
    return config
  },
}

module.exports = nextConfig

Step 8: Start Ganache

Option A: Ganache CLI (Recommended for this tutorial)

# Start Ganache with deterministic accounts
ganache-cli -p 7545 -d -m "abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about"

Option B: Ganache GUI

Download Ganache GUI from trufflesuite.com/ganache
Create new workspace
Set RPC Server to HTTP://127.0.0.1:7545
Set Network ID to 5777

Step 9: Compile Smart Contracts

# Compile the contracts
truffle compile

You should see output like:

Compiling your contracts...
===========================
> Compiling ./contracts/Migrations.sol
> Compiling ./contracts/Voting.sol
> Artifacts written to ./build/contracts
> Compiled successfully using:
   - solc: 0.8.19

Step 10: Deploy Smart Contracts

# Deploy to Ganache
truffle migrate --reset

Important: Note the contract address from the deployment output:

2_deploy_voting.js
==================

   Deploying 'Voting'
   -------------------
   > transaction hash:    0x...
   > contract address:    0x5FbDB2315678afecb367f032d93F642f64180aa3  # <-- Copy this address
   > block number:        2
   > account:             0x...
   > gas used:            1234567

Step 11: Update Contract Address

Open lib/voting-contract.ts and update the CONTRACT_ADDRESS:

// Update this line with your deployed contract address
const CONTRACT_ADDRESS = "0x5FbDB2315678afecb367f032d93F642f64180aa3" // Your actual address here

Step 12: Configure MetaMask

12.1 Add Ganache Network to MetaMask

Open MetaMask
Click network dropdown (usually shows "Ethereum Mainnet")
Click "Add Network" → "Add a network manually"
Fill in:
- Network name: Ganache Local
- New RPC URL: http://127.0.0.1:7545
- Chain ID: 1337
- Currency symbol: ETH
Click "Save"

12.2 Import Ganache Account

In MetaMask, click account icon → "Import Account"
Select "Private Key"
Copy a private key from Ganache output (the first account is usually the contract owner)
Paste and import

Step 13: Create Required UI Components

Since the project uses shadcn/ui components, create the basic component files:

# Create components directory
mkdir -p components/ui
mkdir -p hooks

Create basic component files (simplified versions):

import React from 'react'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'outline' | 'secondary' | 'destructive'
  size?: 'default' | 'sm' | 'lg'
}

export const Button: React.FC<ButtonProps> = ({ 
  children, 
  className = '', 
  variant = 'default',
  size = 'default',
  ...props 
}) => {
  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50'
  
  const variants = {
    default: 'bg-blue-600 text-white hover:bg-blue-700',
    outline: 'border border-gray-300 bg-white hover:bg-gray-50',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    destructive: 'bg-red-600 text-white hover:bg-red-700'
  }
  
  const sizes = {
    default: 'h-10 px-4 py-2',
    sm: 'h-9 px-3',
    lg: 'h-11 px-8'
  }
  
  return (
    <button 
      className={`${baseClasses} ${variants[variant]} ${sizes[size]} ${className}`}
      {...props}
    >
      {children}
    </button>
  )
}

import React from 'react'

export const Card: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <div className={`rounded-lg border bg-white shadow-sm ${className}`}>
    {children}
  </div>
)

export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <div className={`flex flex-col space-y-1.5 p-6 ${className}`}>
    {children}
  </div>
)

export const CardTitle: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className}`}>
    {children}
  </h3>
)

export const CardDescription: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <p className={`text-sm text-gray-600 ${className}`}>
    {children}
  </p>
)

export const CardContent: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <div className={`p-6 pt-0 ${className}`}>
    {children}
  </div>
)

Create other required components similarly (Badge, Progress, Alert, Avatar, Tabs).

Step 14: Create Toast Hook

import { useState } from 'react'

interface Toast {
  title: string
  description: string
  variant?: 'default' | 'destructive'
}

export const toast = ({ title, description, variant = 'default' }: Toast) => {
  console.log(`${variant.toUpperCase()}: ${title} - ${description}`)
  // In a real app, you'd show a toast notification
  alert(`${title}: ${description}`)
}

export const useToast = () => {
  return { toast }
}

Step 15: Start the Application

# Start the Next.js development server
npm run dev

The application should now be running at http://localhost:3000

Step 16: Test the Application

Open the app in your browser at http://localhost:3000
Connect MetaMask - Click "Connect MetaMask" button
Switch to Ganache network if not already selected
Register to vote - Click the register button
Cast your vote - Select a candidate and vote
View results - See real-time vote counts

Troubleshooting Common Issues

Issue 1: "MetaMask Not Found"

Make sure MetaMask extension is installed and enabled

Issue 2: "Failed to connect to voting contract"

Verify Ganache is running on port 7545
Check that contracts are deployed successfully
Ensure contract address is updated in voting-contract.ts

Issue 3: "Transaction failed"

Make sure you have ETH in your MetaMask account (Ganache provides test ETH)
Check you're on the correct network (Ganache Local)

Issue 4: "Compilation failed"

Ensure Solidity version matches in contracts and truffle-config.js
Check for syntax errors in smart contracts

Issue 5: "Network connection issues"

Restart Ganache
Redeploy contracts with truffle migrate --reset
Refresh MetaMask and reconnect

Additional Commands

# Reset and redeploy contracts
truffle migrate --reset

# Run contract tests (if you create test files)
truffle test

# Check contract status
truffle console

This should get your blockchain voting system up and running! Let me know if you encounter any specific issues during setup.

I'll provide you with a complete step-by-step guide to run the blockchain voting project.

Step-by-Step Setup Guide

Step 1: Install Prerequisites

1.1 Install Node.js

# Download and install Node.js (v16 or higher) from nodejs.org
# Verify installation
node --version
npm --version

1.2 Install MetaMask

Go to metamask.io
Install the browser extension
Create a new wallet or import existing one

1.3 Install Truffle and Ganache

# Install Truffle globally
npm install -g truffle

# Install Ganache CLI globally
npm install -g ganache-cli

# Verify installations
truffle version
ganache-cli --version

Step 2: Create Project Directory

# Create project directory
mkdir blockchain-voting
cd blockchain-voting

# Initialize npm project
npm init -y

Step 3: Install Project Dependencies

# Install main dependencies
npm install next@14 react@18 react-dom@18 web3@4 typescript@5
npm install @types/node@20 @types/react@18 @types/react-dom@18

# Install Truffle dependencies
npm install truffle@5.11.5 @truffle/hdwallet-provider@2.1.15

# Install UI dependencies (if using the provided components)
npm install @radix-ui/react-progress @radix-ui/react-tabs @radix-ui/react-alert-dialog
npm install @radix-ui/react-avatar @radix-ui/react-badge @radix-ui/react-card
npm install lucide-react class-variance-authority clsx tailwind-merge
npm install tailwindcss@latest postcss@latest autoprefixer@latest

Step 4: Setup Project Structure

Create the following directory structure:

blockchain-voting/
├── contracts/
├── migrations/
├── app/
├── lib/
├── components/
├── hooks/
└── build/ (will be created after compilation)

Step 5: Copy the Code Files

Copy all the code files I provided earlier into their respective directories:

contracts/Voting.sol
contracts/Migrations.sol
migrations/1_initial_migration.js
migrations/2_deploy_voting.js
truffle-config.js
lib/web3.ts
lib/voting-contract.ts
app/page.tsx
package.json

Step 6: Setup Tailwind CSS

# Initialize Tailwind
npx tailwindcss init -p

# Create tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create app/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 7: Setup Next.js Configuration

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      net: false,
      tls: false,
    }
    return config
  },
}

module.exports = nextConfig

Step 8: Start Ganache

Option A: Ganache CLI (Recommended for this tutorial)

# Start Ganache with deterministic accounts
ganache-cli -p 7545 -d -m "abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about"

Option B: Ganache GUI

Download Ganache GUI from trufflesuite.com/ganache
Create new workspace
Set RPC Server to HTTP://127.0.0.1:7545
Set Network ID to 5777

Step 9: Compile Smart Contracts

# Compile the contracts
truffle compile

You should see output like:

Compiling your contracts...
===========================
> Compiling ./contracts/Migrations.sol
> Compiling ./contracts/Voting.sol
> Artifacts written to ./build/contracts
> Compiled successfully using:
   - solc: 0.8.19

Step 10: Deploy Smart Contracts

# Deploy to Ganache
truffle migrate --reset

Important: Note the contract address from the deployment output:

2_deploy_voting.js
==================

   Deploying 'Voting'
   -------------------
   > transaction hash:    0x...
   > contract address:    0x5FbDB2315678afecb367f032d93F642f64180aa3  # <-- Copy this address
   > block number:        2
   > account:             0x...
   > gas used:            1234567

Step 11: Update Contract Address

Open lib/voting-contract.ts and update the CONTRACT_ADDRESS:

// Update this line with your deployed contract address
const CONTRACT_ADDRESS = "0x5FbDB2315678afecb367f032d93F642f64180aa3" // Your actual address here

Step 12: Configure MetaMask

12.1 Add Ganache Network to MetaMask

Open MetaMask
Click network dropdown (usually shows "Ethereum Mainnet")
Click "Add Network" → "Add a network manually"
Fill in:
- Network name: Ganache Local
- New RPC URL: http://127.0.0.1:7545
- Chain ID: 1337
- Currency symbol: ETH
Click "Save"

12.2 Import Ganache Account

In MetaMask, click account icon → "Import Account"
Select "Private Key"
Copy a private key from Ganache output (the first account is usually the contract owner)
Paste and import

Step 13: Create Required UI Components

Since the project uses shadcn/ui components, create the basic component files:

# Create components directory
mkdir -p components/ui
mkdir -p hooks

Create basic component files (simplified versions):

import React from 'react'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'outline' | 'secondary' | 'destructive'
  size?: 'default' | 'sm' | 'lg'
}

export const Button: React.FC<ButtonProps> = ({ 
  children, 
  className = '', 
  variant = 'default',
  size = 'default',
  ...props 
}) => {
  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50'
  
  const variants = {
    default: 'bg-blue-600 text-white hover:bg-blue-700',
    outline: 'border border-gray-300 bg-white hover:bg-gray-50',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    destructive: 'bg-red-600 text-white hover:bg-red-700'
  }
  
  const sizes = {
    default: 'h-10 px-4 py-2',
    sm: 'h-9 px-3',
    lg: 'h-11 px-8'
  }
  
  return (
    <button 
      className={`${baseClasses} ${variants[variant]} ${sizes[size]} ${className}`}
      {...props}
    >
      {children}
    </button>
  )
}

import React from 'react'

export const Card: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <div className={`rounded-lg border bg-white shadow-sm ${className}`}>
    {children}
  </div>
)

export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <div className={`flex flex-col space-y-1.5 p-6 ${className}`}>
    {children}
  </div>
)

export const CardTitle: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <h3 className={`text-2xl font-semibold leading-none tracking-tight ${className}`}>
    {children}
  </h3>
)

export const CardDescription: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <p className={`text-sm text-gray-600 ${className}`}>
    {children}
  </p>
)

export const CardContent: React.FC<{ children: React.ReactNode; className?: string }> = ({ 
  children, 
  className = '' 
}) => (
  <div className={`p-6 pt-0 ${className}`}>
    {children}
  </div>
)

Create other required components similarly (Badge, Progress, Alert, Avatar, Tabs).

Step 14: Create Toast Hook

import { useState } from 'react'

interface Toast {
  title: string
  description: string
  variant?: 'default' | 'destructive'
}

export const toast = ({ title, description, variant = 'default' }: Toast) => {
  console.log(`${variant.toUpperCase()}: ${title} - ${description}`)
  // In a real app, you'd show a toast notification
  alert(`${title}: ${description}`)
}

export const useToast = () => {
  return { toast }
}

Step 15: Start the Application

# Start the Next.js development server
npm run dev

The application should now be running at http://localhost:3000

Step 16: Test the Application

Open the app in your browser at http://localhost:3000
Connect MetaMask - Click "Connect MetaMask" button
Switch to Ganache network if not already selected
Register to vote - Click the register button
Cast your vote - Select a candidate and vote
View results - See real-time vote counts

Troubleshooting Common Issues

Issue 1: "MetaMask Not Found"

Make sure MetaMask extension is installed and enabled

Issue 2: "Failed to connect to voting contract"

Verify Ganache is running on port 7545
Check that contracts are deployed successfully
Ensure contract address is updated in voting-contract.ts

Issue 3: "Transaction failed"

Make sure you have ETH in your MetaMask account (Ganache provides test ETH)
Check you're on the correct network (Ganache Local)

Issue 4: "Compilation failed"

Ensure Solidity version matches in contracts and truffle-config.js
Check for syntax errors in smart contracts

Issue 5: "Network connection issues"

Restart Ganache
Redeploy contracts with truffle migrate --reset
Refresh MetaMask and reconnect

Additional Commands

# Reset and redeploy contracts
truffle migrate --reset

# Run contract tests (if you create test files)
truffle test

# Check contract status
truffle console

This should get your blockchain voting system up and running! Let me know if you encounter any specific issues during setup.

Step-by-Step Setup Guide

Step 1: Install Prerequisites

Step 2: Create Project Directory

Step 3: Install Project Dependencies

Step 4: Setup Project Structure

Step 5: Copy the Code Files

Step 6: Setup Tailwind CSS

Step 7: Setup Next.js Configuration

Step 8: Start Ganache

Step 9: Compile Smart Contracts

Step 10: Deploy Smart Contracts

Step 11: Update Contract Address

Step 12: Configure MetaMask

Step 13: Create Required UI Components

Step 14: Create Toast Hook

Step 15: Start the Application

Step 16: Test the Application

Troubleshooting Common Issues

Additional Commands

Button Component

Card Components

Badge Component

Progress Component

Alert Components

Avatar Components

Tabs Components

Toast Hook

Utils

Layout & Globals

Step-by-Step Setup Guide

Step 1: Install Prerequisites

Step 2: Create Project Directory

Step 3: Install Project Dependencies

Step 4: Setup Project Structure

Step 5: Copy the Code Files

Step 6: Setup Tailwind CSS

Step 7: Setup Next.js Configuration

Step 8: Start Ganache

Step 9: Compile Smart Contracts

Step 10: Deploy Smart Contracts

Step 11: Update Contract Address

Step 12: Configure MetaMask

Step 13: Create Required UI Components

Step 14: Create Toast Hook

Step 15: Start the Application

Step 16: Test the Application

Troubleshooting Common Issues

Additional Commands

Button Component

Card Components

Badge Component

Progress Component

Alert Components

Avatar Components

Tabs Components

Toast Hook

Utils

Layout & Globals