Build a Decentralized Voting Dapp with Next.js, TypeScript, Tailwind CSS, and CometChat

What you will be building, see the live demo at sepolia test net and the git repo.

Introduction

Imagine a world where technology and democracy intersect, where the power of decentralized systems meets the voice of the people. This is the future of voting, and you can help shape it.

In this guide, we will teach you how to build your own decentralized voting dapp using Next.js, TypeScript, Tailwind CSS, and CometChat. These cutting-edge technologies will allow you to create a secure, user-friendly, and engaging voting system that anyone can use.

Whether you're a coding beginner or a seasoned developer, this guide has something for you. We'll start by explaining the basics of decentralized voting and then walk you through the process of building your own dapp step-by-step.

By the end of this guide, you'll have the skills you need to create a decentralized voting dapp that can change the world.

What you'll learn

• How to set up your development workspace for Dapp development.
• How to use Next.js, TypeScript, Tailwind CSS, and CometChat to build a decentralized voting dapp
• How to secure your Dapp with smart contract logics
• How to make your Dapp user-friendly using Tailwind CSS
• How to enhance your Dapp code base with TypeScript
• How to integrate your Dapp with NextJs SSR
• How to engage users with your Dapp using real-time chat

Who this guide is for
This guide is for anyone who wants to learn how to build a decentralized voting dapp. Whether you're a coding beginner or a seasoned developer, you'll find something useful in this guide.

We're excited to help you build the future of voting. Let's get started!

Prerequisites

You will need the following tools installed to build along with me:

• Node.js
• Yarn
• MetaMask
• React
• Solidity
• CometChat SDK
• Tailwind CSS

Please check out this video to learn how to set up your MetaMask for this project, it will be an important step to follow through this tutorial.

Installing Dependencies

Clone the starter kit and open it in VS Code using the command below:

git clone https://github.com/Daltonic/tailwind_ethers_starter_kit dappVote
cd dappVote

Next, update the package.json with the snippet below.

Next, run the command yarn install in your terminal to install the dependencies for this project.

Configuring CometChat SDK

To configure the CometChat SDK, please follow the steps provided below. Once completed, make sure to save the generated keys as environment variables for future use.

STEP 1:
Head to CometChat Dashboard and create an account.

STEP 2:
Log in to the CometChat dashboard, only after registering.

STEP 3:
From the dashboard, add a new app called Play-To-Earn.

STEP 4:
Select the app you just created from the list.

From the Quick Start copy the APP_ID, REGION, and AUTH_KEY, to your .env file. See the image and code snippet.

Replace the NEXT_PUBLIC_COMET_CHAT placeholder keys with their appropriate values.

NEXT_PUBLIC_COMET_CHAT_APP_ID=****************
NEXT_PUBLIC_COMET_CHAT_AUTH_KEY=******************************
NEXT_PUBLIC_COMET_CHAT_REGION=**

The .env file should be created at the root of your project.

Configuring the Hardhat script

Navigate to the root directory of the project and open the "hardhat.config.js" file. Replace the existing content of the file with the provided settings.

This code configures Hardhat for your project. It does this by importing essential plugins, setting up networks (with localhost as the default), specifying the Solidity compiler version, defining paths for contracts and artifacts, and setting a timeout for Mocha tests.

The Smart Contract File

The subsequent sections outline the process of crafting the smart contract file for the DappVotes project. Before you delve into the steps below, create a new folder called contracts at the root of this project and a new file inside of it called DappVotes.sol .

Next, do the following inside the just created file:

1. Begin by initiating a new contract named DappVotes, adhering to the MIT licensing standards.
2. Employ the Counters library from OpenZeppelin to facilitate the management of counters for polls and contestants.
3. Define two Counter instances: totalPolls and totalContestants, privately tracking the overall count of polls and contestants.

Here is the smart contract logic and we will look at what each function and variables do.

The DappVotes contract comprises essential structures that underlie its functionality:

1. PollStruct: A structure encapsulating details of a poll, including its ID, image URL, title, description, vote count, contestant count, deletion status, director address, start and end timestamps, and more.
2. ContestantStruct: This structure holds information about contestants, such as their ID, image URL, name, associated voter, vote count, and an array of voter addresses.

Mappings play a crucial role in managing the contract's data:

1. pollExist: A mapping linking poll IDs to a boolean value indicating their existence.
2. polls: A mapping connecting poll IDs to their respective PollStruct data, recording comprehensive poll information.
3. voted: A mapping linking poll IDs and voter addresses to indicate whether a voter has cast their vote.
4. contested: A mapping connecting poll IDs and contestant addresses to indicate whether a contestant has contested.
5. contestants: A nested mapping associating poll IDs and contestant IDs to their respective ContestantStruct data, storing contestant-related details.

To facilitate user interaction and transparency, the contract emits the Voted event whenever a vote is cast, capturing the voter's address and the current timestamp.

The contract consists of various functions that enable the creation, management, and retrieval of poll and contestant data:

1. createPoll: This function facilitates the creation of a new poll by initializing a PollStruct with relevant information, ensuring the provided data is valid.
2. updatePoll: Allows the director of a poll to update its details, ensuring authorization and valid input.
3. deletePoll: Enables the director of a poll to mark it as deleted, given certain conditions are met.
4. getPoll: Retrieves detailed information about a specific poll using its ID.
5. getPolls: Returns an array of active polls, excluding deleted ones.
6. contest: Enables users to contest in a poll by adding contestant information to the contract.
7. getContestant: Retrieves detailed information about a specific contestant in a poll.
8. getContestants: Returns an array of contestants for a particular poll.
9. vote: Allows users to cast their votes for contestants in a poll, considering eligibility, timing, and conditions.
10. currentTime: An internal utility function that returns the current timestamp with adjusted precision.

By following these steps, you will establish a functional structure for the DappVotes smart contract, ready to manage polls, contestants, and voting interactions seamlessly.

Unleash your web3 potential with Dapp Mentors Academy!

• Learn from expert blockchain developers
• Access over 40 hours of premium content
• Get exclusive NFT insights
• Join our vibrant Discord community

Start your journey today for just $8.44/month!

The Test Script

The DappVotes test script has been meticulously designed to comprehensively assess and validate the functionalities and behaviors of the DappVotes smart contract. Below is a systematic breakdown of the primary tests and functions covered within the script:

1. Test Setup:

   • Before executing any tests, the script prepares essential contract instances and sets up addresses for testing purposes.
   • It initializes parameters and variables that will be used throughout the test cases.
   • The contract is deployed, and several signers (addresses) are assigned for simulated user interactions.

2. Poll Management:

   • This section encompasses the testing of poll creation, update, and deletion within the DappVotes smart contract.
   • Under the Success category, a series of tests evaluate different scenarios to confirm the successful execution of these poll management functions.
   • The should confirm poll creation success test validates the creation of a poll by checking the list of polls before and after creation, and confirming the attributes of the created poll.
   • The should confirm poll update success test demonstrates the successful update of a poll's attributes and validates the change.
   • The should confirm poll deletion success test ensures the proper deletion of a poll by verifying the list of polls before and after deletion, and confirming the deletion status of the poll.

3. Poll Management Failure:

   • This section encompasses negative test scenarios where poll creation, update, and deletion should fail.
   • The tests under Failure confirm that the contract correctly reverts with appropriate error messages when invalid or unauthorized actions are attempted.

4. Poll Contest:

   • Within this section, the test cases focus on contesting in a poll, which involves entering as a contestant.
   • Under Success, the should confirm contest entry success test verifies that contestants can successfully enter a poll, and the number of contestants is accurately recorded. It also checks the retrieval of contestants' information.
   • The Failure tests address scenarios where contest entry should fail, such as attempting to contest a non-existent poll or submitting incomplete data.

5. Poll Voting:

   • This section evaluates the process of casting votes in a poll for specific contestants.
   • Under Success, the should confirm contest entry success test demonstrates successful voting by contestants and validates the accuracy of vote counts, voter addresses, and associated avatars.
   • The Failure tests address scenarios where voting should fail, such as trying to vote in a non-existent poll or voting in a deleted poll.

Through this organized and detailed breakdown, the critical functionalities of the DappVotes test script are explained, illustrating the purpose and expected outcomes of each test scenario. The test script, when executed, will comprehensively validate the behavior of the DappVotes smart contract.

At the root of the project, create a folder if not existing called “test”, copy and paste the code below inside of it.

Run the following commands to have your local blockchain server running and also test the smart contract:

• yarn hardhat node
• yarn hardhat test

By running these commands on two separate terminals, you will test out all the essential function of this smart contract.

The Deployment Script

The DappVotes deployment script is designed to deploy the DappVotes smart contract to the Ethereum network using the Hardhat development environment. Here's an overview of the script:

1. Import Statements:

   • The script imports the required dependencies, including ethers for Ethereum interaction and fs for file system operations.

2. main() Function:

   • The main() function serves as the entry point for the deployment script and is defined as an asynchronous function.

3. Deployment Parameters:

   • The script specifies the contract_name parameter, which represents the name of the smart contract to be deployed.

4. Contract Deployment:

   • The script uses the ethers.getContractFactory() method to obtain the contract factory for the specified contract_name.
   • It deploys the contract by invoking the deploy() method on the contract factory, which returns a contract instance.
   • The deployed contract instance is stored in the contract variable.

5. Contract Deployment Confirmation:

   • The script waits for the deployment to be confirmed by awaiting the deployed() function on the contract instance.

6. Writing Contract Address to File:

   • The script generates a JSON object containing the deployed contract address.
   • It writes this JSON object to a file named contractAddress.json in the artifacts directory, creating the directory if it doesn't exist.
   • Any errors during the file writing process are caught and logged.

7. Logging Deployed Contract Address:

   • If the contract deployment and file writing processes are successful, the deployed contract address is logged to the console.

8. Error Handling:

   • Any errors that occur during the deployment process or file writing are caught and logged to the console.
   • The process exit code is set to 1 to indicate that an error occurred.

This DappVotes deployment script streamlines the process of deploying the smart contract and generates a JSON file containing the deployed contract address for further utilization within the project.

In the root of the project, create a folder called “scripts” and another file inside of it called deploy.js if it doesn’t yet exist. Copy and paste the code below inside of it.

To execute the script, run yarn hardhat run scripts/deploy.js in the terminal, ensure that your blockchain node is already running in another terminal.

If you require additional support with setting up Hardhat or deploying your Fullstack DApp, I recommend watching this informative video that provides guidance and instructions.

Developing the Frontend

To start developing the frontend of our application, we will create a new folder called components at the root of this project. This folder will hold all the components needed for our project.

For each of the components listed below, you will need to create a corresponding file inside the components folder and paste its codes inside it.

The Navbar Component

The Navbar component provides navigation and wallet connection. It displays a navigation bar with the title "DappVotes" and a button to connect a wallet. The button changes appearance on hover. The component uses Redux and blockchain services for wallet connectivity and state management. Observe the codes below:

Banner Component

The Banner component is a React component that displays a centered banner with a main title and description. The title emphasizes the concept of "Vote Without Rigging." The description explains the nature of a beauty pageantry competition.

Below the description, there's a button labeled "Create poll." Upon clicking this button, if a wallet is connected, it triggers an action to open a create poll modal. If no wallet is connected, a warning toast is shown, reminding the user to connect their wallet. The component uses Redux for state management, and React Toastify for displaying notifications. See the code below:

Create Poll Component

The CreatePoll component presents a modal form for users to create polls. It collects inputs for poll details such as title, start and end dates, banner URL, and description. Upon submission, it validates, converts data, displays creation status with animations, and handles errors. The user-friendly interface aids in creating polls within the application. See the code below:

Polls Component

The Polls component displays a list of polls in a grid layout. Each poll includes the title, truncated description, start date, poll director's address, and an "Enter" button. Poll avatars are displayed alongside the information. Clicking the "Enter" button redirects the user to a detailed page for the poll. The component also uses helper functions for formatting and truncating text. The Polls component takes an array of PollStruct objects as a prop and maps through them to create individual Poll components with the relevant poll data. See the codes below:

Footer Component

The Footer component displays social media icons and copyright information for a webpage. The icons link to LinkedIn, YouTube, GitHub, and Twitter profiles. The copyright text shows the current year and the message "With Love ❤️ by Daltonic." The component's layout is responsive and visually appealing.

Details Component

The Details component displays detailed information about a poll, including the poll image, title, description, start and end dates, director, vote and contestant counts, and edit and delete buttons (if the user is the director and there are no votes). It also displays a "Contest" button if there are no votes, which opens the contest modal. The component uses Redux for global state management and the Image component from Next.js for responsive images. See the image below:

Update Poll Component

The UpdatePoll component presents a modal form to edit the details of an existing poll. Users can modify the poll's image, title, description, start date, and end date. The component fetches and displays the current data of the selected poll.

Upon submission, it validates inputs, updates the poll information on the blockchain, and provides transaction status feedback through toast notifications. This component efficiently interacts with blockchain services, Redux state, and user inputs to facilitate poll updates. See the code below:

Delete Poll Component

The DeletePoll component offers a confirmation modal to delete a specific poll. When the user clicks the delete button, the component interacts with blockchain services to delete the selected poll's data. It utilizes Redux state for user authentication and modal state management.

After deleting the poll, the component redirects the user to the home page and provides transaction status feedback through toast notifications. This component effectively handles poll deletion, interacts with blockchain services, manages modal display, and provides user notifications. See the code below:

Contest Poll Component

The ContestPoll component displays a modal form for users to enter a contest for a specific poll. Users input their contestant name and an avatar URL. Upon submission, it validates the inputs, initiates the contest transaction, and displays transaction status with animations. The component interacts with the application's blockchain services and Redux state management, providing a seamless contest entry experience. See the code below:

Contestants Component

The Contestants component renders a list of contestants for a poll, including their images, names, voter information, voting buttons, and vote counts. It uses the contestants array and poll object to render each contestant's information.

Each Contestant sub-component represents an individual contestant and includes the following:

• Image: The contestant's image.
• Name: The contestant's name.
• Voter information: A truncated version of the voter's wallet address who voted for the contestant.
• Voting button: A button to vote for the contestant. The button is disabled if the user has already voted, the poll has not started, or the poll has ended.
• Vote count: The number of votes the contestant has received.

The component also includes error handling and visual feedback to prevent voting in specific scenarios. This component allows users to view and participate in the voting process for contestants in the poll. See the code below:

Chat Button Component

The **ChatButton** component provides a dynamic dropdown menu for various chat-related actions based on the user's authentication status and the poll's group status.

Users can perform actions like signing up, logging in, creating a group, joining a group, viewing chats, and logging out. These actions interact with CometChat services for user and group management, and the component ensures proper feedback through toast notifications.

It also uses Redux to manage global state for user and group data, enhancing user interaction with chat functionalities within the application. See the code below:

Chat Modal Component

The ChatModal component provides a user-friendly interface for real-time chat within a group. It fetches and displays existing messages, listens for new messages, and allows users to send and receive messages. It also provides message timestamps, sender identification, and identicons. The component integrates with Redux to manage the chat modal's display state and maintains proper UX through toast notifications. See the code below:

CometChat NoSSR Component

Lastly for the components, is the CometChatNoSSR component which initializes CometChat and checks the user's authentication state on the client-side. It dispatches the user data to Redux for further use in the application. See the code below:

Want to learn how to build an Answer-To-Earn DApp with Next.js, TypeScript, Tailwind CSS, and Solidity? Watch this video now!

This video is a great resource for learning how to build decentralized applications and earn ether.

Now that we have covered all the components in this application, it is time to start connecting the different pages. Let's start with the homepage.

To start developing the pages of our application, go to the pages folder at the root of your project. This folder will contain all the pages needed for our project.

Home Page

The Home component renders the home page of this application. It uses Redux to manage global state, fetches poll data from the server, and defines the HTML structure of the page. This page bundles the Navbar, Banner, CreatePoll, Polls, and Footer components together.

To follow up with this component, replace the content of the index.tsx file in the pages folder with the code below:

Polls Page

The Polls component is a dynamic page that displays details about a specific poll. It uses Redux to manage global state, fetches poll and contestant data from the server, and defines the HTML structure of the page.

This component bundles the **Footer**, **Navbar**, **Details**, **Contestants**, **UpdatePoll**, **DeletePoll**, **ContestPoll**, **ChatModal**, and **ChatButton**, making up the structure of the poll page.

To proceed, create a new folder called polls inside the pages directory. Then, create a file named [id].tsx. Make sure to use the exact pattern, as this is required by Next.js to create a dynamic page. See the code below:

The Redux Store

Managing data from the blockchain and smart contracts across components and pages can be difficult. That's why we use Redux Toolkit to manage data across all components and scripts. Here is the unique setup of Redux Toolkit:

• Create a global states script to manage all states
• Create a global actions script to manage all states mutations
• Bundle the states and actions in a global slices script
• Configuring the global slices as a store service
• Wrap the store provider into your application

Step 1: Defining the Redux States
Create a folder called store at the root of the project. Create another folder called states inside the store folder. Create a file called globalState.ts inside the states folder and paste the code below into it.

This code defines the initial state for Redux. It includes properties like wallet for user Ethereum wallet info, various modals' visibility states, an array for polls, poll for selected poll data, group for chat group info, contestants for poll contestants, and currentUser for the logged-in user details. These properties store data that can be accessed and updated globally across the application.

Step 2: Defining the Redux Actions
Create another folder called actions inside the store folder. Create a file called globalActions.ts inside the actions folder and paste the code below into it.

These Redux actions define functions to modify the global state. They receive a state object and a payload from an action. Each action corresponds to a specific state property and sets it to the payload's value. These actions are used throughout the application to update various global state properties like wallet, modal states, polls, group, contestants, and currentUser, enabling dynamic changes to the application's state as needed.

Step 3: Bundling the states and actions in a slice
Create a file called globalSlices.ts inside the store folder and paste the code below into it.

This Redux slice named global combines initial state and reducers from globalActions and GlobalStates . It creates actions and a reducer for the global state. The globalActions object contains action creators, and the globalSlices.reducer handles state updates based on these actions, simplifying state management for the global slice of the application.

Step 4: Configuring the slices as a store service
Create a file called index.ts inside the store folder and paste the code below into it.

This Redux store is configured using @reduxjs/toolkit. It incorporates the globalSlices reducer into the store, allowing access to global state management throughout the application. The configureStore function initializes the store with the specified reducer, enabling efficient state handling via Redux.

TypeScript Interfaces

The interfaces used across this application are defined in the type.d.ts file in the utils folder at the root of the project. This file defines the data structures used in the application. Create a folder called utils and within it a file called type.d.ts and past the codes below into it.

1. TruncateParams: Contains parameters for truncating text, including the input text, the number of characters to keep at the start and end, and the maximum length.
2. PollParams: Represents parameters for creating a poll, including image, title, description, start and end times.
3. PollStruct: Describes the structure of a poll object with attributes like id, image, title, description, votes, contestants count, deletion status, director, start and end times, timestamp, avatars, and voters.
4. ContestantStruct: Represents the structure of a contestant in a poll, including attributes like id, image, name, voter, votes, and a list of voters who voted for them.
5. GlobalState: Defines the shape of the global application state with properties for wallet, modal states (create, update, delete, contest, chat), poll-related data (polls, poll, group, contestants, current user).
6. RootState: Specifies the root state structure, primarily containing the globalStates property, which encapsulates the global application state.

The App Services

To add web3 and chat features to our application, we will need to create some services. Create a folder called services at the root of the project and create the following scripts inside of it:

• blockchain.ts: This script will connect to the Ethereum blockchain and manage web3-related tasks.
• chat.ts: This script will handle chat-related tasks, such as connecting to CometChat and sending/receiving messages.

Ensure to copy and paste the codes below to their respective files.

Blockchain Service
This blockchain service interacts with a smart contract using Ethereum. It includes functions like connecting to the Ethereum wallet, creating, updating, and deleting polls, contesting polls, voting for contestants, and fetching poll-related data. See the code below:

The key components in this service include:

• Ethereum Connection: It connects to the user's Ethereum wallet using MetaMask or a JSON-RPC provider if MetaMask is not available.
• Poll and Contestant Operations: It allows creating, updating, and deleting polls, contesting polls, and voting for contestants, with error handling.
• Fetching Data: Functions for fetching poll data, poll lists, and contestant data from the smart contract.
• Utilities: Utility functions like truncating text, formatting timestamps, and structuring poll and contestant data for consistency.
• Global State Management: It uses Redux to manage the global state, enabling components throughout the application to access and modify data like the user's wallet, polls, and contestants.

This service plays a crucial role in the application's interaction with the Ethereum blockchain, enabling users to participate in polls and contests securely and transparently.

Chat Service
This chat service integrates the CometChat SDK into the application for real-time chat functionality. See the codes below:

It performs several key functions:

1. Initialization: The service initializes CometChat with the provided application ID and region, subscribing to user presence updates and establishing a socket connection.
2. Authentication: It provides functions for user login and signup, which are essential for accessing chat features.
3. User Management: Functions for checking the user's authentication state and logging out are included.
4. Group Management: The service allows the creation of new groups, fetching group information, and joining groups.
5. Messaging: It supports sending and receiving text messages in groups, providing a real-time chat experience. The listenForMessage function enables the app to react to incoming messages.
6. Error Handling: Throughout these functions, error handling is implemented to manage and report errors effectively.
7. Lazy Loading: The CometChat SDK is loaded lazily (only when the application is running in the browser), ensuring efficient resource utilization.

This service enables users to engage in real-time group chat within the application, enhancing the user experience and facilitating communication between participants.

The App Component

This component manages both the pages and the sub components in this NextJs application. It conditionally render child components based on the showChild state. It initializes CometChat, provides Redux store access, and displays toast notifications via the ToastContainer. This conditional rendering ensures that CometChat initializes only on the client side.

Head to the pages folder, open the _app.tsx file and replace its content with the code below:

Before you finish up the project create a folder called assets/images and add the images found in this link to this folder.

Congratulations on following this tutorial on how to build a decentralized voting dapp with Next.js, TypeScript, Tailwind CSS, and CometChat!

You can run yarn dev on another terminal to see that every aspect of the app works correctly and then yarn build to build the application. Also ensure that your local blockchain node is running and the smart contract deployed already to the network.

The video tutorial is also available below.

I hope you found the tutorial helpful. If you did, please subscribe to my YouTube channel, Dapp Mentors, for more tutorials like this and visiting our website for additional resources.

Till next time all the best!

Conclusion

In conclusion, this comprehensive tutorial has walked you through the process of developing a decentralized voting dapp with Next.js, TypeScript, Tailwind CSS, and CometChat. The objective of this article was to provide a step-by-step guide to building a feature-rich and interactive application, enabling users to create, participate in, and manage polls while also facilitating real-time group chat functionality.

Key highlights of this tutorial include the development of various frontend components, setting up a robust Redux store for global state management, defining TypeScript interfaces for structured data, and creating essential app services for blockchain interaction and chat integration. The tutorial's culmination is the App Component, which orchestrates the seamless operation of pages and subcomponents.

By following this tutorial and leveraging the provided resources, you are well-equipped to embark on your journey in web3 development, harnessing the power of blockchain and chat technologies to create innovative and engaging decentralized applications.

About Author

I am a web3 developer and the founder of Dapp Mentors, a company that helps businesses and individuals build and launch decentralized applications. I have over 7 years of experience in the software industry, and I am passionate about using blockchain technology to create new and innovative applications. I run a YouTube channel called Dapp Mentors where I share tutorials and tips on web3 development, and I regularly post articles online about the latest trends in the blockchain space.

Stay connected with us, join communities on
Discord: Join
Twitter: Follow
LinkedIn: Connect
GitHub: Explore
Website: Visit

Comments

[Gospel Darlington]

Drop your comments here, I will like to get your thoughts!