Filebase
HomepageFilebase DashboardDiscordBlog
  • 👋Welcome to Filebase!
  • Getting Started
    • FAQ
    • Service Limits
    • Getting Started Guides
      • Pin Your First File To IPFS
      • Developer Quick Start Guide
  • IPFS Concepts
    • What is IPFS?
    • What is an IPFS CID?
    • What is IPFS Pinning?
    • What is an IPFS Gateway?
  • IPFS Pinning
    • Pinning Files
    • Listing Files
    • Deleting Files
    • Event Notifications
  • IPNS Names
    • Managing Names
  • Dedicated IPFS Gateways
    • Managing Dedicated Gateways
    • Access Controls
    • Image Optimizations
    • Adding a Custom Domain
  • API Documentation
    • S3-Compatible API
      • Cross Origin Resource Sharing (CORS)
        • Create and Apply a CORS Rule to a Filebase Bucket
        • Deep Dive: Cross Origin Resource Sharing (CORS)
      • Pre-Signed URLs
    • Filebase Platform APIs
    • IPFS Pinning Service API
  • Code Development + SDKs
    • Code Development
      • Apache Libcloud - Python
      • Apostrophe CMS
      • AWS Lambda - NodeJS
      • AWS Lambda - Python
      • AWS SDK - Go (Golang)
      • AWS SDK - Java
      • AWS SDK - JavaScript
      • AWS SDK - .NET
      • AWS SDK - PHP
      • AWS SDK - Python
      • AWS SDK - Ruby
      • Code Examples
        • How To Utilize Filebase with NodeJS
      • DataCamp
      • Dart / Flutter
      • Django
      • Docker
        • Docker Volume Backup
      • Elixir Phoenix
      • Filebase NPM Package
      • Fog.io - Ruby
      • Google App Scripts
      • Integrated Haskell Platform
      • Laravel
      • Nuxt
      • Paperspace
      • Postman
      • Reading a JSON File
      • UNA
      • Unity
      • Uppy AWS S3 Plugin
      • Vue
      • Watcher for NodeJS
      • Webpack S3 Plugin
      • Xamarin
    • SDK Examples: Pinning Files and Folders to IPFS
      • AWS SDK for .NET
      • AWS SDK for Go
      • AWS SDK for JavaScript
      • AWS SDK for PHP
      • AWS SDK for Python
      • AWS SDK for Ruby
  • Archive
    • Content Archive
      • IPFS Getting Started Guide
      • Web Console Getting Started Guide
      • IPFS Tools
        • IPFS CLI
        • IPFS Desktop
        • IPFS Pin Sync
        • IPFS Pinning Service API
        • IPFS3up
      • Third Party Tools and Clients
        • Backup Client Configurations
          • AhsayCBS
          • BackupAssist Classic
          • BackupAssist ER
          • BackupNinja
          • BackupSheep
          • Bacula Enterprise Edition
          • CloudBacko
          • CloudBerry Backup
          • Cloudron
          • cPanel
          • Comet
          • Commvault
          • Duplicacy
          • Ghost IPFS Storage Adapter
          • IPFS Pinning GitHub Action
          • JetBackup
          • Kopia
          • MoveBot
          • MSP360 Online Backup
          • oDrive
          • Photos+ Cloud Library
          • qBackup
          • S3 Uploader for GitHub Actions
          • SimpleBackups
          • SnapShooter
          • Strapi Provider Plugin
          • Veeam
          • Wordpress
            • Media Cloud
            • XCloner
          • Zerto
        • CLI Tools
          • Ansible
          • Apache Pulsar
          • AWS CLI
            • How To Delete Data with AWS CLI
            • What is Multipart Upload?
          • Bash
            • Backup Files to IPFS with Bash
            • Laravel Backup with Bash
            • MongoDB Backup with Bash
            • PostgreSQL Backup with Bash
            • Wordpress Backup with Bash
          • cURL
          • Elasticsearch
          • IPFS-CAR
          • IPFScrape
          • IPGet
          • Jenkins
          • JFrog Artifactory
          • Kubernetes
            • Backup and Restore InFluxDB to Filebase with TrilioVault
            • CSI-S3
            • Kasten K10
            • Kerberos Vault
            • Longhorn.io
            • Stash for Kubernetes
            • Velero
          • Litestream
          • Minty
          • MongoDB
          • MoSMB
          • MySQL
          • Next.js .CAR File Upload
          • NFT Image Generator
          • NGINX S3 Gateway
          • Pinning Docker Images to IPFS
          • Pinning Encrypted Files to IPFS
          • PowerShell
            • Calculate the Size of Filebase Buckets using PowerShell
          • Rclone
            • Backing Up DigitalOcean Spaces to Filebase using Rclone
          • Restic
          • S3cmd
          • S3Express
          • S3FS-FUSE
          • S3QL
          • S3Surfer
          • S4cmd
          • SeaweedFS
          • Tableland
        • Content Delivery Networks
          • Bunny CDN
          • CloudFront CDN
          • Fastly CDN
        • File Management Client Configurations
          • Airbyte
          • Arq
          • Astiga
          • AWS Rekognition
          • AWS S3 Manager - iOS App
          • BucketAnywhere for S3 - Android App
          • CentreStack
          • CloudFlyer
          • Cloudfser
          • Couchdrop
          • CrossFTP
          • CyberDuck
            • How To Delete Data with CyberDuck
          • Dropshare
          • Duplicati
          • FileBrowserGO
          • Flexify.IO
          • ForkLift
          • Goofys
          • Joplin
          • LucidLink
          • MASV
          • Matrix Synapse
          • MinIO Gateway for S3
          • Mountain Duck
          • NetDrive
          • Nexfs
          • NextCloud
          • Nodeum
          • ownCloud
          • Plesk
          • Pure Storage FlashBlade
          • RaiDrive
          • S3 Browser
          • ShareX
          • SmartFTP
          • StableBit Cloud Drive
          • Storage Made Easy Enterprise File Fabric
          • WinSCP
        • NAS Device Configurations
          • Buffalo TeraStation
          • Datadobi DobiProtect
          • Netapp ONTAP Select
          • OpenDrives Atlas
          • Synology Hyper Backup
          • TrueNAS CORE
      • Knowledge Base
        • Deep Dives
          • Deep Dive: Blockchains
          • Deep Dive: Decentralized Compute
          • Deep Dive: Decentralized Digital Identity
          • Deep Dive: Decentralized Storage
          • Deep Dive: Erasure Coding
          • Deep Dive: Geo-Redundancy
          • Deep Dive: Metadata
          • Deep Dive: Metaverse
          • Deep Dive: NFTs
          • Deep Dive: Web3
        • Filebase eBooks
        • Filebase One-Pagers
        • Filebase Whitepapers
        • Web3 Tutorials
          • Alchemy
            • Alchemy: Build a dApp That Provides Real-Time Ethereum Transaction Notifications
            • Alchemy: Create a Full-Stack dApp
            • Alchemy: Create a Hello World Smart Contract
            • Alchemy: Create Your Own ERC20 Cryptocurrency
            • Alchemy: Decentralized Youtube
            • Alchemy: How to Create and Mint an NFT using Filebase
            • Alchemy: How to Mint an NFT Using Web3.js
            • Alchemy: Using The Alchemy SDK with NFTs Minted Through thirdweb
          • Agoric
            • Agoric: Create a DeFi dApp Using Agoric That’s Stored on Filebase
          • AirSwap
            • AirSwap: Track NFT Contract Addresses with AirSwap CLI
          • ArcBlock
            • ArcBlock: Running an ArcBlock Blocket Server on IPFS
          • Ankr
            • Ankr: Create a Truffle Project with Ankr and Filebase
            • Ankr: Deploy a Smart Contract on Polygon using Ankr that is backed up to Filebase
          • Avalanche
            • Avalanche: How To Launch a Generative NFT Collection With Avalanche and IPFS
          • Backing Up NFTs
          • Brownie
            • Brownie: Create and Mint an NFT Using Brownie
          • Bueno
            • Bueno: How to Create a Generative NFT Collection with Bueno
          • Cardano
            • Cardano: Submit Cardano Blockchain Transactions with Embedded Metadata Stored on Filebase
          • Ceramic
            • Ceramic: How to Host a Ceramic Node Using Decentralized Storage
          • Create-IPFS-app
          • Cosmos
            • Cosmos: Storing Cosmos Chain Governance Metadata on IPFS
          • DeCommerce
          • Ethereum Name Service
            • ENS: Configure an ENS Domain to use a Filebase IPFS Dedicated Gateway
          • Figment Datahub
            • Figment Datahub and Avalanche: Make an e-Voting dApp Using Figment Datahub, Avalanche, and Filebase
            • Figment Datahub and Celo Network: Create an ERC1155 NFT on the Celo Network using Figment Datahub and Objects Stored on Filebase
          • Flow
            • Flow: How to Create an NFT Marketplace with Filebase + Flow
          • Fauna
            • Fauna: Host an Application on IPFS with IPFS Dedicated Gateways
          • Ganache
            • Ganache: Create a dApp Hosted on IPFS
          • GUN
            • GUN: Create a Decentralized Chat App with GUN and IPFS
          • Hardhat
            • Hardhat: Creating an NFT Contract using Hardhat and Setting NFT Metadata using IPFS on Filebase
          • Harmony
            • Harmony: Deploy an HRC721 NFT on Harmony with IPFS
          • Hosting a Form on IPFS
          • iExec
            • iExec: Using iExec and Tee Worker to Create Apps that Use Datasets Stored on Filebase
          • Infura
            • Infura: Build dApp Frontends with Infura, React, and IPFS
            • Infura: Create an NFT Contract Factory with Metadata stored on IPFS
          • Lens Protocol
            • Lens Protocol: Build a Decentralized Social Media Network Stored on IPFS
          • LIT Protocol
            • LIT Protocol: Create a MintLIT NFT with LIT Protocol and IPFS
          • LivePeer
            • LivePeer: Mint a Video NFT with LivePeer
          • Macrometa
            • Macrometa: Track IPFS Files with Macrometa
          • Mina Protocol
            • Mina Protocol: Create a Simple zkApp with Mina Protocol and IPFS
          • NEAR Protocol
            • NEAR Protocol: Storing Off-Chain Data on IPFS using Filebase
          • NFTPort
            • NFTPort: Create an NFT Collection with NFTPort
          • Ocean Protocol
            • Ocean Protocol: Publish Data NFTs Stored on IPFS using Ocean Protocol
          • Pin Tezos Tokens Tool
          • Polkadot
            • Polkadot: Deploy a Polkadot dApp on Decentralized Storage
          • Polygon
            • Polygon: Building an App NFT With Polygon
            • Polygon: Make a Donation App with IPFS and Polygon
          • Python
            • Generating NFT Metadata with Python
          • QuickNode
            • QuickNode: Create a Token dApp using QuickNode
          • Remix
            • Remix: Create a Web App with Remix to Upload to Decentralized Storage
          • Remix IDE
            • Remix IDE: Creating Interactive NFTs with IPFS and Remix IDE
          • Secret Network
            • Secret Network: Create an NFT on Secret Network with Data Stored on IPFS
          • Stargaze
            • Stargaze: Create an NFT Collection Using IPFS and Stargaze
          • Starknet
            • Starknet: Create a HardHat Project Using A Starknet Plugin Hosted On IPFS
          • Studio 721
            • Studio 721: Create an NFT Collection with Studio 721 and IPFS
          • Solana
            • Solana: Minting an NFT Using Sugar, Candy Machine, and Filebase
          • Subsquid
            • Subsquid: Querying NFT Data using Subsquid and a Filebase IPFS Dedicated Gateway
          • Tailwind CSS
            • Tailwind CSS: Build an Image Gallery App with IPFS and Tailwind CSS
          • Tatum
            • Tatum: How To Mint NFTs on Solana with Tatum
          • Tezos
            • Tezos: Create an NFT on the Tezos Network using IPFS on Filebase
          • thirdweb
            • thirdweb: Build an NFT Loot Box with thirdweb and IPFS
            • thirdweb: Build an NFT Minting Page with thirdweb, IPFS, RainbowKit, and WAGMI
            • thirdweb: Create a Discord Bot That Gives Roles to NFT Holders
            • thirdweb: Create a Gated Website Using NFTs and IPFS
            • thirdweb: Create an NFT Marketplace with thirdweb and IPFS
            • thirdweb: Release an NFT Drop Using thirdweb and IPFS
          • useDApp
            • useDApp: Create a dApp using useDApp and IPFS
          • Unstoppable Domains
            • Unstoppable Domains: Create a Decentralized Website Using Unstoppable Domains and IPFS Folders
            • Unstoppable Domains: Deploy a Decentralized Blog Using Unstoppable Domains, Akash, and IPFS
            • Unstoppable Domains: IPFS Configuration
          • Vultr
            • Vultr: Store Bedrock Minecraft Worlds on Decentralized Storage
            • Vultr: Store Forge Minecraft Worlds on Decentralized Storage
            • Vultr: Store PaperSpigot Minecraft Worlds on Decentralized Storage
            • Vultr: Store Vanilla Minecraft Worlds on Decentralized Storage
          • Waffle
            • Waffle: Deploy a Smart Contract with Waffle That’s Stored on IPFS
          • Walt.id
            • Walt.id: Mint an NFT with Walt.id and Filebase
          • Web3 Toolbox
            • Web3 Toolbox: Building an NFT Drop With Web3 Toolbox
Powered by GitBook
On this page
  • What is a dApp?
  • What is Figment DataHub?
  • What is Avalanche?
  • 1. Login to your Figment Datahub console. Select ‘Create App’ to create a new Avalanche app.
  • 2. Give your app a name, select ‘Staging’ for the environment, then select ‘Avalanche’ for the network.
  • 3. Once you’ve created your app, take note of the API key.
  • 4. Next, we need a Filebase IPFS bucket.
  • 5. Select ‘Buckets’ from the left side bar menu, or navigate to console.filebase.com/buckets.
  • 6. Enter a bucket name and choose the IPFS storage network to create the bucket.
  • 7. Next, download and install S3FS-FUSE on a Linux or macOS system.
  • 8. Set up an Access Key file for use with S3FS-FUSE.
  • 9. Mount your bucket.
  • 10. Now, navigate into the mounted Filebase bucket.
  • 11. Next, create a new folder to house your e-Voting app scripts and navigate inside of it.
  • 12. Initialize your npm workspace:
  • 13. Then install the required npm dependencies:
  • 14. Next, initialize a boilerplate project with truffle:
  • 15. Open the truffle-config.js file that was created with the truffle init command. Replace the contents of that file with the following:
  • 16. Next, create a .env file. In this file, we’ll need a few values:
  • 17. In the contracts directory, create a new file called Election.sol. In the file, enter the following content:
  • 18. Create a new file in the migration directory named 2_deploy_contracts.js. Enter the following code into this file:
  • 19. Then, compile the contracts with truffle:
  • 20. Before deploying the contracts further, make sure your Avalanche wallet has enough funds.
  • 21. Run the migrations to deploy your Election contract:
  • 22. Now let’s move on to creating a simple UI for interacting with our e-Voting dApp. Create a new src directory and navigate inside of it.
  • 23. Make a new server.js file and input the following code into the file:
  • 24. Make another new file called index.html with the following content:
  • 25. Then, make another new file called index.js with the following content:
  • 26. Start the e-Voting dApp with the following command:
  • 27. You can view your dApp at http://localhost:3000/ and interact with the webpage we created with the files in the src directory.

Was this helpful?

  1. Archive
  2. Content Archive
  3. Knowledge Base
  4. Web3 Tutorials
  5. Figment Datahub

Figment Datahub and Avalanche: Make an e-Voting dApp Using Figment Datahub, Avalanche, and Filebase

Learn make an e-Voting dApp Using Figment Datahub, Avalanche, and Filebase.

PreviousFigment DatahubNextFigment Datahub and Celo Network: Create an ERC1155 NFT on the Celo Network using Figment Datahub and Objects Stored on Filebase

Last updated 9 months ago

Was this helpful?

What is a dApp?

A dApp is a decentralized application that can operate autonomously, typically through the use of smart contracts, and runs on blockchain networks.

What is Figment DataHub?

Figment DataHub is a platform that enables developers to create decentralized applications (dApps) using the powerful and unique features of blockchain technology without having to be experts on the wide variety of blockchain protocols.

What is Avalanche?

Avalanche is a decentralized, open-source blockchain that has smart contract functionality.

In this guide, we’ll use Figment Datahub to create an API key that we’ll use to create a decentralized application on the Avalanche blockchain. We’ll also utilize S3FS-FUSE to mount a Filebase IPFS bucket locally to our system so that we can store our dApp source files.

Prerequisites:

This guide was written and tested using Ubuntu 20.04. Commands and workflow may vary depending on your operating system.

2. Give your app a name, select ‘Staging’ for the environment, then select ‘Avalanche’ for the network.

Then use the ‘Create App’ button to create your new Avalanche app.

3. Once you’ve created your app, take note of the API key.

We will reference this API key later.

4. Next, we need a Filebase IPFS bucket.

Select ‘Create Bucket’ in the top right corner to create a new bucket.

6. Enter a bucket name and choose the IPFS storage network to create the bucket.

Bucket names must be unique across all Filebase users, be between 3 and 63 characters long, and can contain only lowercase characters, numbers, and dashes.

8. Set up an Access Key file for use with S3FS-FUSE.

Set up a credentials file for S3FS at ${HOME}/.passwd-s3fs. You will need to save your Filebase Access and Secret keys to this file and give it owner permissions. You can do so with the following commands:

echo ACCESS_KEY_ID:SECRET_ACCESS_KEY > ${HOME}/.passwd-s3fs

chmod 600 ${HOME}/.passwd-s3fs

9. Mount your bucket.

You can mount a Filebase IPFS bucket with the command:

s3fs mybucket /path/to/mountpoint -o passwd_file=${HOME}/.passwd-s3fs -o url=https://s3.filebase.com

  • mybucket: name of your Filebase bucket

  • /path/to/mountpoint

10. Now, navigate into the mounted Filebase bucket.

cd /path/to/mounted/bucket

11. Next, create a new folder to house your e-Voting app scripts and navigate inside of it.

mkdir evoting

cd evoting

12. Initialize your npm workspace:

npm init

13. Then install the required npm dependencies:

npm install express dotenv @truffle/hdwallet-provider --save

14. Next, initialize a boilerplate project with truffle:

truffle init

This command sets up our initial project structure, which includes a contracts folder that will house our smart contracts, and a migrations folder for deployment functions.

15. Open the truffle-config.js file that was created with the truffle init command. Replace the contents of that file with the following:

require('dotenv').config();
const HDWalletProvider = require("@truffle/hdwallet-provider");

//Account credentials from which our contract will be deployed
const mnemonic = process.env.MNEMONIC;

//API key of your Datahub account for Avalanche Fuji test network
const APIKEY = process.env.APIKEY;

module.exports = {
  networks: {
    fuji: {
      provider: function() {
            return new HDWalletProvider({mnemonic, providerOrUrl: `https://avalanche--fuji--rpc.datahub.figment.io/apikey/${APIKEY}/ext/bc/C/rpc`, chainId: "0xa869"})
      },
      network_id: "*",
      gas: 3000000,
      gasPrice: 470000000000,
      skipDryRun: true
    }
  },
  solc: {
    optimizer: {
      enabled: true,
      runs: 200
    }
  }
}

16. Next, create a .env file. In this file, we’ll need a few values:

  • Input your Avalanche API key that we took note of earlier.

The format is as follows:

MNEMONIC="avalanche-wallet-mnemonic"
APIKEY="your-api-key"

17. In the contracts directory, create a new file called Election.sol. In the file, enter the following content:

pragma solidity >=0.4.21 <0.6.0;

contract Election {
  //Structure of candidate standing in the election
  struct Candidate {
    uint id;
    string name;
    uint voteCount;
  }

  //Storing candidates in a map
  mapping(uint => Candidate) public candidates;

  //Storing address of those voters who already voted
  mapping(address => bool) public voters;

  //Number of candidates in standing in the election
  uint public candidatesCount;

  //Adding 2 candidates during the deployment of contract
  constructor () public {
    addCandidate("Filebase Robot");
    addCandidate("Figment Robot");
  }

  //Private function to add a candidate
  function addCandidate (string memory _name) private {
    candidatesCount ++;
    candidates[candidatesCount] = Candidate(candidatesCount, _name, 0);
  }

  //Public vote function for voting a candidate
  function vote (uint _candidate) public {
    require(!voters[msg.sender], "Voter has already Voted!");
    require(_candidate <= candidatesCount && _candidate >= 1, "Invalid candidate to Vote!");
    voters[msg.sender] = true;
    candidates[_candidate].voteCount++;
  }
}

This is a solidity smart contract that will allow us to view the candidates and their standing in the election.

18. Create a new file in the migration directory named 2_deploy_contracts.js. Enter the following code into this file:

const Election = artifacts.require("./Election.sol");

module.exports = function (deployer) {
  deployer.deploy(Election);
};

19. Then, compile the contracts with truffle:

truffle compile

Any time you make changes to the Election.sol file, you will need to recompile the contract.

20. Before deploying the contracts further, make sure your Avalanche wallet has enough funds.

21. Run the migrations to deploy your Election contract:

truffle migrate --network fuji

22. Now let’s move on to creating a simple UI for interacting with our e-Voting dApp. Create a new src directory and navigate inside of it.

mkdir src

cd src

23. Make a new server.js file and input the following code into the file:

var express = require('express');
var app = express();

//JSON file for deployed contract and network information
const electionJSON = require('../build/contracts/Election.json')

require("dotenv").config();

app.use(express.static("./"));

app.get('/', (req,res) => {
    res.send('index.html');
});

app.get('/electionJSON', (req,res) => {
    res.send(electionJSON);
});

app.listen(process.env.PORT || 3000, () => {
    console.log('Server started at 3000');
});

24. Make another new file called index.html with the following content:

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Election</title>
  </head>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

  <body>
    <div style="width: 40%; margin: 50px auto" class="card">
            <!-- Account address will be rendered here -->
            <center id="account" style="margin-top: 20px"></center>

            <!-- Loading will appear until blockchain data is loaded -->
            <center id='loader' style="margin:20px;">Loading...</center>

            <br><br>

            <!-- Blockchain data would appear here -->
            <div id="content" style="display:none" class="container" style="margin-top:30px;">
                <!-- Table for fetching election data of the candidates -->
                <table class="table table-bordered">
                    <tr>
                        <td>#</td>
                        <td>Name</td>
                        <td>Votes</td>
                    </tr>
                    <tbody id="candidateResults">

                    </tbody>
                </table>

                <!-- Form to submit vote to a candidate -->
                <form onSubmit="App.castVote(); return false;" style="display:none">
                    <div class="form-group">
                        <label>Select Candidate</label>
                        <center>
                            <select class="form-control" id="candidatesSelect">
                                <option>Select here...</option>
                            </select><br>
                            <input type="submit" class="btn btn-primary" value="Vote">
                        </center>
                    </div>
                </form>

                <!-- This would appear and form will be hidden if the address has already voted -->
                <div id="hasVoted" style="display:none; text-align: center">
                    <b>Thank you for voting !!!</b>
                </div>
            </div>
        </div>
  </body>

  <!--jQuery CDN-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <!--web3 module for interacting with blockchain-->
  <script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.34/dist/web3.js"></script>

  <!--Truffle Contract module for interacting with smart contract in javascript-->
  <script src="https://rajranjan0608.github.io/ethereum-electionVoting/src/contract.js"></script>

  <!--Our custom javascript code for interaction-->
  <script type="module" language="javascript" src="index.js"></script>
</html>

You can change the styling of this code to reflect your candidate's names, different colors and themes, and even photos of each candidate.

25. Then, make another new file called index.js with the following content:

// App would contain all the necessary functions for interaction
var App = {
  loading: false,
  contracts: {},

  // Main function to be called first
  load: async () => {
    await App.loadWeb3();
    await App.loadAccount(); 
    await App.loadContract();
    await App.render();
  },

  // Loading web3 on the browser
  loadWeb3: async () => {
    if(typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
      App.web3Provider = web3.currentProvider;
    }else {
      window.alert("Please connect to Metamask");
    }

    if(window.ethereum) {
      window.web3 = new Web3(ethereum);
      try {
        await ethereum.enable();
      }catch (error) {
        console.log(error);
      }
    }else if(window.web3) {
      App.web3Provider = web3.currentProvider;
      window.web3 = new Web3(web3.currentProvider);
    }else{
      console.log('Non-Ethereum Browser detected');
    }
  },

  // This function would load account from Metamask to our dApp
  loadAccount: async() => {
    await web3.eth.getAccounts().then((result)=>{
      App.account = result[0];
      console.log(App.account);
    });
  },

  // This function would help in loading contract to App.election
  loadContract: async () => {
    // Static pre-deployed contracts should be handled like this
    const election = await $.getJSON('/electionJSON');
    App.contracts.election = TruffleContract(election);
    App.contracts.election.setProvider(App.web3Provider);
    App.election = await App.contracts.election.deployed();
  },

  // This function will be called after the browser is ready for blockchain interaction
  render: async() => {
    if(App.loading) {
      return;
    }
    App.setLoading(true);
    $('#account').html(App.account);
    App.renderCandidates();
    App.setLoading(false);
  },

  // This will render blockchain data to the frontend.
  renderCandidates: async() => {
    var candidatesCount = await App.election.candidatesCount();

    $("#candidateResults").html("");
    $("#candidatesSelect").html("");

    for(var i=1; i <= candidatesCount; i++) {
      const candidate = await App.election.candidates(i);

      const id = candidate[0];
      const name = candidate[1];
      const voteCount = candidate[2];

      var candidateTemplate1 = "<tr>"+
                                  "<td>" + id + "</td>" +
                                  "<td>" + name + "</td>" +
                                  "<td>" + voteCount + "</td>" +
                              "</tr>";      
      $("#candidateResults").append(candidateTemplate1);

      var hasVoted = await App.election.voters(App.account);
      if(!hasVoted) {
        $("form").show();
        $("#hasVoted").hide();
      }else {
        $("#hasVoted").show();
        $("form").hide();
      }

      var candidateTemplate2 = "<option value='"+i+"'>" + name + "</option>";
      $("#candidatesSelect").append(candidateTemplate2);
    }
  },

  // This function will call vote() on Fuji testnet
  castVote: async() => {
    const candidateID = $("#candidatesSelect").val();
    await App.election.vote(candidateID, { from: App.account });
    App.renderCandidates();
  },

  setLoading: (boolean) => {
    App.loading = boolean;
    const loader = $('#loader');
    const content = $('#content');
    if(boolean) {
      loader.show();
      content.hide();
    }else {
      loader.hide();
      content.show();
    }
  }
};

// Driver function to initiate the blockchain interaction
$(() => {
  window.addEventListener('load', ()=>{
    App.load();
  });
});

window.App = App;

26. Start the e-Voting dApp with the following command:

node server.js

Congratulations! You’ve created an e-Voting app that is powered by blockchain and stored on decentralized storage!

1. Login to your console. Select ‘Create App’ to create a new Avalanche app.

To do this, navigate to . If you don’t have an account already, , then log in.

5. Select ‘Buckets’ from the left side bar menu, or navigate to .

7. Next, S3FS-FUSE on a Linux or macOS system.

ACCESS_KEY_ID is your Filebase Access key, and SECRET_ACCESS_KEY is your Filebase Secret key. For more information on Filebase access keys, see .

on the Avalanche network and enter your mnemonics in the .env file.

Use the to get more test funds for use.

27. You can view your dApp at and interact with the webpage we created with the files in the src directory.

MetaMask
Install Node.js and npm
Avalanche Network
Avalanche Faucet.
Transfer AVAX Between X-Chain and C-Chain
Sign up
Figment Datahub
console.filebase.com
sign up
console.filebase.com/buckets
download and install
here
Create an account
Avalanche Faucet
http://localhost:3000/