Build a Decentralized Voting Dapp with Next.js, TypeScript, Tailwind CSS, and CometChat
Tags: web3, blockchain, nextjs, tutorial
Published: 2023-09-01 13:43:49

What you will be building, see the [live demo](https://dapp-vote-three.vercel.app/) at sepolia test net and the [git repo](https://github.com/Daltonic/dappVote).

![Landing Page Shows All Active Polls](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693417992602_0.png)

![Shows the Voting Page](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693417992909_1.png)

![Shows Live Group Chat for discussing about the ongoing elections](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693417992227_2.gif)



## 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](https://try.cometchat.com/oj0s7hrm5v78)
- 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.

{% embed https://www.youtube.com/watch?v=qnudOwva0fM %}



## 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.


{% gist https://gist.github.com/Daltonic/25de1303d3135651121349978917f436 %}


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


## Configuring CometChat SDK

To configure the [**CometChat SDK**](https://try.cometchat.com/oj0s7hrm5v78), 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**](https://try.cometchat.com/daltonic) Dashboard and create an account.

![Register a new CometChat account if you do not have one](https://paper-attachments.dropboxusercontent.com/s_7D1A1D37F80B0518526730B73F3D0FC0AFE5FAF04B436DD20141EBE7A3684566_1692168014160_cometchat1.png)


**STEP 2:**
Log in to the [**CometChat**](https://try.cometchat.com/daltonic) dashboard, only after registering.


![Log in to the CometChat Dashboard with your created account](https://paper-attachments.dropboxusercontent.com/s_7D1A1D37F80B0518526730B73F3D0FC0AFE5FAF04B436DD20141EBE7A3684566_1692168070940_cometchat2.png)


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

![Create a new CometChat app - Step 1](https://paper-attachments.dropboxusercontent.com/s_7D1A1D37F80B0518526730B73F3D0FC0AFE5FAF04B436DD20141EBE7A3684566_1692168196068_cometchat4.png)

![Create a new CometChat app - Step 2](https://paper-attachments.dropboxusercontent.com/s_7D1A1D37F80B0518526730B73F3D0FC0AFE5FAF04B436DD20141EBE7A3684566_1692168247756_cometchat5.png)


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

![Select your created app](https://paper-attachments.dropboxusercontent.com/s_7D1A1D37F80B0518526730B73F3D0FC0AFE5FAF04B436DD20141EBE7A3684566_1692168307217_cometchat6.png)


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

![Copy the the APP_ID, REGION, and AUTH_KEY](https://paper-attachments.dropboxusercontent.com/s_7D1A1D37F80B0518526730B73F3D0FC0AFE5FAF04B436DD20141EBE7A3684566_1692168367367_cometchat7.png)


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.



{% gist https://gist.github.com/covelitein/316a79b2c830256f35ec60a7926a47af %}


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.


{% gist https://gist.github.com/Daltonic/bebd9c89648958a1bdd1f379152c55f5 %}


**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!**](https://dappmentors.org/membership)


![Dapp Mentors Academy](https://paper-attachments.dropboxusercontent.com/s_A669F6C723766110FAA73EBE4FA93F72A0924D07056B57BA53C0E19195292853_1692355875217_Screenshot+2023-08-18+at+11.50.50+AM.png)

## 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.


{% gist https://gist.github.com/Daltonic/c6a91aa385853802ee5160c0ab9aa304 %}


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.


{% gist 
https://gist.github.com/Daltonic/bf39404280fd94b0dff1b76cff7b89b2 %}


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.

![Activities of Deployment on the Terminal](https://paper-attachments.dropboxusercontent.com/s_95E5B376EA7D56400134387A4ABCBB8612C903A22CB8FFB5FE3936C174654F13_1681314007681_0RFvAh6Q.png)


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.


{% embed https://www.youtube.com/watch?v=zP1kWDGrxW4 %}



## 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 Navabar Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693508517422_Screenshot+2023-08-31+at+8.01.48+PM.png)


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:


{% gist https://gist.github.com/Daltonic/60bcdfa13efd3d7965c22968fed5201b %}



## Banner Component
![The Banner Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693508835165_Screenshot+2023-08-31+at+8.07.09+PM.png)


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:


{% gist https://gist.github.com/Daltonic/429601d79d9d3bda5a6ec3533aa6e929 %}



## Create Poll Component
![The Create Poll Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693518913795_Screenshot+2023-08-31+at+10.55.08+PM.png)


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:


{% gist https://gist.github.com/Daltonic/10ff9618572c668db97700067604ed8f %}



## Polls Component
![Polls Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693512792053_Screenshot+2023-08-31+at+9.13.06+PM.png)


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:


{% gist https://gist.github.com/Daltonic/2fdd8ee3eef80d6862b91114c168f42c %}



## Footer Component
![The footer component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693513059720_Screenshot+2023-08-31+at+9.17.35+PM.png)


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.


{% gist https://gist.github.com/Daltonic/41164e03383d4537aa8ad861fdc04064 %}


## Details Component

![The Details Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693514701185_Screenshot+2023-08-31+at+9.44.55+PM.png)


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:


{% gist https://gist.github.com/Daltonic/5f7d83da123b91733ade4caea319868d %}



## Update Poll Component
![The Update Poll Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693519480075_Screenshot+2023-08-31+at+11.04.35+PM.png)


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:


{% gist https://gist.github.com/Daltonic/156c78cd0388590e4f583fc94dba1090 %}



## Delete Poll Component
![The Delete Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693519657193_Screenshot+2023-08-31+at+11.07.31+PM.png)


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:


{% gist https://gist.github.com/Daltonic/35c5cd7bb8d43cefb53b3c27e6477e46 %}



## Contest Poll Component
![The Contest Poll Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693519225484_Screenshot+2023-08-31+at+11.00.19+PM.png)


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:


{% gist https://gist.github.com/Daltonic/6b30cf179640d1a1875dff7d284f312d %}



## Contestants Component
![The Contestant Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693518577521_Screenshot+2023-08-31+at+10.49.32+PM.png)


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:


{% gist https://gist.github.com/Daltonic/fd8428e39483b28b198dc81d092192a8 %}



## Chat Button Component
![The Chat Button Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693559969193_Screenshot+2023-09-01+at+10.19.22+AM.png)


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:


{% gist https://gist.github.com/Daltonic/b560e3048c17d31ae741d16c66979bf1 %}



## Chat Modal Component
![The Chat Modal Component](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693560290368_Screenshot+2023-09-01+at+10.24.44+AM.png)


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:


{% gist https://gist.github.com/Daltonic/45277140d936fc55b1b085e0e57a747a %}



## 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:


{% gist https://gist.github.com/Daltonic/bf6c176e52493ca256faa241ebe2e810 %}


**Want to learn how to build an Answer-To-Earn DApp with Next.js, TypeScript, Tailwind CSS, and Solidity?** [**Watch this video now!**](https://youtu.be/Ubom39y5jX8)


{% embed https://www.youtube.com/watch?v=Ubom39y5jX8 %}


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 page](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693561155438_Screenshot+2023-09-01+at+10.39.10+AM.png)


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:


{% gist https://gist.github.com/Daltonic/52dd3e91564cb050029d5ae892f37a1c %}



## Polls Page
![The Polls Page](https://paper-attachments.dropboxusercontent.com/s_FA476D7374E6CEC27646A06E778692D69139B87B6572CBCE5D5981F4B16AFB17_1693561801815_Screenshot+2023-09-01+at+10.49.54+AM.png)


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:


{% gist https://gist.github.com/Daltonic/211556502656a8bba7948dd69a37b471 %}



## 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.


{% gist https://gist.github.com/Daltonic/6cfefcf0787aa22fbfba8610db902c7d %}


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.


{% gist https://gist.github.com/Daltonic/0d1a851fe8580b76fa2c369202f6ceec %}


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.


{% gist https://gist.github.com/Daltonic/011944ecf355f6a24aaae99c5376f181 %}


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.


{% gist https://gist.github.com/Daltonic/2aecf556d40bde4e83d5d0f079c698ea %}


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.


{% gist https://gist.github.com/Daltonic/6e4826c03eee0803fbea9c3bffaa3335 %}



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:


{% gist https://gist.github.com/Daltonic/8bcedf4d66664a3218de5260b572a80c %}


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:


{% gist https://gist.github.com/Daltonic/f47ab6667674683f2908b07400584efd %}


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:


{% gist https://gist.github.com/Daltonic/6c344f7cb08c0aa591a0264551a3d408 %}


Before you finish up the project create a folder called `assets/images` and [add the images found in this link](https://github.com/Daltonic/dappVote/tree/main/public/assets/images) 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. 

{% embed https://www.youtube.com/watch?v=QdomOLGBTdY %}


I hope you found the tutorial helpful. If you did, please [**subscribe to my YouTube channel, Dapp Mentors**](https://www.youtube.com/@dappmentors?sub_confirmation=1), for more tutorials like this and [**visiting our website for additional resources**](https://dappmentors.org/). 

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](https://dappmentors.org/), 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**](https://www.youtube.com/@dappmentors?sub_confirmation=1) 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](https://discord.gg/PgFDUVT6n9)
Twitter: [Follow](https://twitter.com/iDaltonic)
LinkedIn: [Connect](https://www.linkedin.com/company/dapp-mentors)
GitHub: [Explore](https://github.com/Daltonic)
Website: [Visit](https://dappmentors.org/)