Description: This project focuses on polling, in which registered users can create polls and submit their votes. The voting transactions for this Web3-based application will be saved on a blockchain network.
-
- Blockchain network: Ethereum-testnet (but simply you can change some few things and deploy it to Ethereum-mainnet)
- Web3 Authentication (Non-custodial auth): Web3Auth
- Google OAuth to use in Web3Auth provider: Google cloud portal
- Smart Contract: Solidity 0.8.17
- Compiling with Hardhat.js
- Then deploying the contract file, interactions to/from blockchain network through Ethers.js
- Provider: Alchemy
- Backend: Strapi CMS - Community version (Node JS based CMS), and connected with the MySQL database.
- Frontend: React JS
- Beta version
- https://polling.spritle.com
Screenshot:
converted.mp4
- Clone the repositories from github
- Create your wallet account in Ethereum blockchain network with Metamask tool
- From their you can get your private-key and public address
- After you installed metamask in your mozilla-firefox browser, then change the network from 'Ethereum' (mainnet) to 'Goerli test network'
- To deploy and do the transactions on Ethereum-testnet network, you need a testnet currency/token, and you can get it from Goerli Faucets. This GoerliETH can only be used in Goerli test network
- Alchemy is one of the provider for Ethereum network. For more
- Create your Alchemy account if you dont have
- Then create a new DApp in Alchemy dashboard - "Apps" menu
- Set CHAIN to Ethereum
- Set NETWORK to Goerli for testnet, Mainnet if for production usage
- After the app creation, you can get the API key from VIEW KEY button
- In Google cloud portal, create a new credentials for our app, and configure the following:
- Give Authorized Javascript Origins of your frontend origin and redirect URLs
- After you created the credentials, you'll get this app's credential-clientID
- Create your web3auth account, if you don't have. Web3Auth dashboard
- Once you signed-in with your account, choose "Plug and Play" side-menu and create a new project. Then select EVM based chain on the settings
- It will give you the clientID and Secret code. Copy it for your reference
- Because of we are using Google's authentication, select "Custom Auth" from side-menu, and create a "new verifier". And configure as follows:
- Login provider: Google
- Google ClientID: paste your copied credential-clientID (In previous step you have created in google cloud page)
- Go to polling-smart-contract repo folder and run the following commands
npm installnpx hardhat compile
- It will compile the contract code, and you can find the ABI and Binary of the compiled codes as a json file in
./artifacts/contracts/Polling.sol/Polling.json - Copy this file's full location path to use in
Polling-Dapp/.envfile, and set it for the variable "CONTRACT_ABI"
- Go to polling-dapp repo folder and run the following commands
npm install --force
- Then copy .env.example file to .env file and modify the file with your key values:
HOST=0.0.0.0- IP address the backend service going to run. 0.0.0.0 is recommended for expose it on all the available IP's on the host server
PORT=1337- Port on which the server should be running
APP_KEYS="toBeModified1,toBeModified2"- Look into Strapi doc
API_TOKEN_SALT=tobemodified- Look into Strapi doc
ADMIN_JWT_SECRET=tobemodified- Look into Strapi doc
JWT_SECRET=tobemodified- Look into Strapi doc
ALCHEMY_KEY=addYourKeyHere- Key copied from the Alchemy dashboard
ACCOUNT_PRIVATE_KEY=addYourEthereumWalletPrivateKey- Private key copied from metamask wallet
NETWORK="goerli"- If you ready to deploy it to Ethereum's Mainnet, change it to mainnet
CONTRACT_ABI=[yourPollingSmartContractCompiledLocation]- Copied from the polling-smart-contract repo step, after the compilation
- In the root of this repo folder dump.sql file will be there, import it to your MySQL server
- In
/config/database.jsfile, give your database's credentials to connect with the DB. Here I have used with MySQL database - To run the project as a dev environment
npm run develop
- This will run the service in all interface's IP in 1337 port
- Goto http://localhost:1337/admin
- Create your super-admin account
- Create your API token to set it for all the frontend calls, Settings => API Tokens => Create new API Token
- You'll get a token key, copy that for your referecnce. this key will be used in polling-dapp-frontend
- Set role-Authenticated to full permissions, on controller test-collections
- set role-Public for test-collection/contractExpire API alone
- Goto http://localhost:1337/admin
- Go to polling-dapp-frontend folder and run the following commands
npm install --force- Copy the .env.example file and as .env and modify it with your keys:
REACT_APP_WEB3AUTH_CLIENTID- Copied client-id from Web3Auth's Plug and Play app page
REACT_APP_GCP_CLIENT_SECRET- Copied client-secret id from Google console's Credentials page
REACT_APP_BACKEND- Backend's (Strapi CMS - nodejs service) URL
REACT_APP_LOGIN_ADAP_LOGO- Login adapter's logo URL you wish to add
REACT_APP_BACKEND_TOKEN- API Token created on Strapi CMS, for authorize the REST calls
REACT_APP_BLOCKCHAIN_ACCOUNT- Whether it can use Each user's private key to do the transactions on ethereum or use the default account. If True
npm run start
- This will run the front-end service in all interfaces's IP in 3000 port
- Create your wallet account in Ethereum blockchain network with Metamask tool
Look into the video for usage.
Because of we are using Ethereum's testnet network, all the requests for transactions will take 5-10 seconds depending on the network traffic.
If you are facing any issues, please raise the issue.
- Ethereum's sample codes from documentation page
- Strapi NodeJS CMS
- Web3Auth's docs