Voting dApp (Frontend)

Project Preview

We will be building out the frontend components of our Voting dApp in this quest! Before we dive into the coding aspects, here’s a preview of what you will be building throughout this quest.

The Voting dApp will comprise 2 pages namely the landing page and create proposal page!

Landing Page

Preview of Landing Page

Application which will first allow users to connect to the application using their Portkey wallet!

Next, users will be able to join the DAO by clicking on "Join DAO". Once the user has successfully joined the DAO, they will be able to create proposals and vote on proposals created by other members of the DAO!

Create Proposal Page

Preview of Create Proposal Page

This is the "Create Proposal" page of our Voting dApp application which allows users to fill in details of their proposal such as the title, description and the vote threshold (votes required for the proposal to pass).

Now that you have a better understanding of what we will be building, let’s set up the project!

📄️ Project Setup

To begin, let’s clone the frontend project repository from GitHub. Proceed to run the following command in the capstone_aelf directory.

📄️ Configure Portkey Provider & Write Connect Wallet Function

In this step, we will be configuring our Portkey provider such that users are able to connect their Portkey wallets to our application and interact with our deployed voting smart contract!

📄️ Write Initialize Smart Contract & Join DAO Functions

In this step, we will be writing the Initialize and Join DAO functions!

📄️ Write Create Proposal Function

We will be writing the Create Proposal function in this step!

📄️ Write Vote & Fetch Proposals Function

In this step, we will be writing the Vote and Fetch Proposals functions to wrap up our frontend components of the Voting dApp!

📄️ Run Application

In this step, we will run the Voting dApp application!