Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb

đŸ”„ Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb

You will finally understand what DAO is and will be able to build web 3 yourself

Content

What you will learn?

  • How to create your own cryptocurrency;
  • How to build your DAO web 3 application powered with your cryptocurrency;
  • How to build Jamstack application using NextJs;
  • How easy to create layouts without CSS using ChakraUI;

Join Medium with my referral link – Vitalii Shevchuk

Glossary

  • HOA — is the Homeowners Association. In other words, the group of homeowners took responsibility for managing the community. They provide the restrictions and rules in the community and own the budget to address community needs.
  • DAO — Decentralized Autonomous Organization. The blockchain application automates decisions through the consensus between participants. Usually owns the treasury in cryptocurrency value.
  • NextJs — The js framework that allows you to build server-side rendering and static web applications using React.
  • ChakraUI — component library gives you the building blocks for constructing React applications.
  • Thirdweb — SDK for building smart contracts, has plenty of ready-to-use contracts like NFT collections, tokens, and of course DAO.

Intro

Recently I have received a notification from my HOA:

Your monthly HOA payment was increased 20$ to cover the community project needs

My heart was broken 💔 because of multiple reasons:

  • I have no idea what exactly the projects we have;
  • There is no transparency on the budget and how it is split among the projects;
  • And I was not even asked if I am ok with that;
  • But the most horrible reason is 20$ more, it is minus 240$ a year, or 24000$ in 100 years, that is a lot. Especially when you plan to live longÂ đŸ€·â€â™‚ïž.

Of course, you can be more active, join the board and discuss the proposals and decisions. Sure, it may work, but there is still a lack of transparency, as money is charged from all the homeowners. As a result, all of them have to participate in decision-making, or even in making proposals, in a pure democracy.

Wait a minute, there is such a thing as DAO. The Decentralized Autonomous Organization has:

  • Treasury with crypto;
  • The consensus decision-making process with the ability to set a vote value (which could be higher for board participants);
  • Everyone can make a proposal;
  • If the proposal is accepted the funding can be allocated automatically through the blockchain transaction;

Proof of Concept

I have dived deep to discover the possibilities and features that our HOA DAO has to have, let’s list a couple of them:

  • Everyone should be able to create a proposal;
  • A proposal has to have an expiration date;
  • There will be 3 votes types: For, Against, and Abstained;
  • After voting, the user can not vote using the same wallet id;
  • If consensus is archived, the proposal can be executed automatically;

Let’s take a look at how the final product will look like:

Let’s start to build this beauty 👧

Creating your own cryptocurrency

If you haven’t set up your metamask, do it first. We will use the Rinkeby test network, so don’t forget to get some faucet (test ETH).

Let’s get some money 💰

Would be so cool if you could make real money in the same way.

Now, let’s go to the thirdweb and deploy our first contract — which will be the governance token. It is simply a cryptocurrency that participants will use to manage our HOA DAO treasury (budget), and it will be used for voting. Go to the dashboard and click deploy new contract.

Find the contract named token, and hit Deploy now button

Now let’s tune some settings

  • Name and Symbol — HOA_COIN
  • Description: This is a governance coin for HOA Dao
  • Network: Rinkeby

Now pull the trigger and click Deploy

Our HOA_COIN was created

And we can Mint our first crypto, let’s start with 1000 😜

Congrats 🎉 we are rich now, and we can even see our crypto in metamask wallet. Click on import token:

Here we need to paste the HOA_COIN token address, we can copy it from the contract settings:

Cool, magic happens and we can see the amount of our cryptocurrency in our wallet

We wrapped up the cryptocurrency and own some assets now. In the next step, we will launch our DAO project and use the coin as the currency of the web 3 application.

Building your DAO smart contract

We have some virtual money now, it is the time to spend them a bit. We are going to create the HOA DAO where we will manage our HOA_COIN budget.

Let’s open the third web dashboard again and create a vote contract. ClickCreate new contract

And Deploy Now

In order to proceed with vote contract creation, we need to copy the token contract address. You can find it when you open the Code tab

Now let’s make some settings in our vote contract:

  • Name: HOA DAO;
  • Description: The DAO of your HOA;
  • Governance token address: (the address of the token contract);
  • Network Rinkeby (Ethereum test network);
  • Voting period — 6570. How long do members have to vote on a proposal when it’s created? We will set it to 1 day = 6570 blocks
  • Voting Delay — 0. After a proposal is created, when can members start voting? For now, we set this to 0 — immediately.
  • Voting Quorum — 0. The minimum % of the total supply that needs to vote for the proposal to be valid after the time for the proposal has ended.
  • Proposal token threshold — 1. What’s the minimum # of tokens a user needs to be allowed to create a proposal? If set it to 0. Meaning no tokens are required for a user to be allowed to create a proposal.

Sweet we created our HOA DAO, and in the next step, we will start to code our web 3 application.

Coding the HOA DAO web 3 application

We are at the most interesting part of development now. Here we start to build the application using NextJs, React, and ChakraUI. First, we are setting up the project.

yarn create next-app --typescript
>What is your project named? next-hoa-dao

Then let’s add a couple of dependencies

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 react-icons

It includes Thirdweb SDK and ChakraUI packages.

Alright, coding time, let’s go 🏃

We can start with creating 2 config files that will store our constants, including contract addresses

next-hoa-dao-app/pages/config/constants.ts

https://medium.com/media/d417a05830494b9f37a3fc232497e349/href

/Users/vitaliishevchuk/Documents/projects/next-hoa-dao-app/pages/config/contracts.ts

https://medium.com/media/666f23d970ec21e4e7305a2a6505c72f/href

Looks good, next we start to work on our components

next-hoa-dao-app/pages/_app.tsx

https://medium.com/media/740fadf7a06d34fab27ed739bb752e50/href

We don’t have MainLayout yet, let’s create components folder and set it up there:

next-hoa-dao-app/pages/components/MainLayout.tsx

https://medium.com/media/5837230672ac930e7feaa34d3f8cef2a/href

We still missing CreateProposalButton and ConnectMetamaskButton, let’s create it:

next-hoa-dao-app/pages/components/CreateProposalButton.tsx

https://medium.com/media/65db1e20cf578340c89da2ce6c9cbf00/href

next-hoa-dao-app/pages/components/ConnectMetamaskButton.tsx

https://medium.com/media/09333b88f15276dbdc0fe62bd5619563/href

The next we need to work on is our proposals component, which we will call it ProposalList.

next-hoa-dao-app/pages/components/ProposalList.tsx

https://medium.com/media/b6da63f7d5e66f0e44dca855b666b78d/href

And finally, our main page, which is located here

next-hoa-dao-app/pages/index.tsx

https://medium.com/media/47682c9d182dda437e0eb95ef30bc117/href

That is pretty much it, you are a hero if you went through the tutorial and reached this point. You can download and play with the project yourself with the Github link below:

Github Link

GitHub – Vitashev/next-hoa-dao-app

Conclusion

Hope it was not too overwhelming. The key takeaway here is that blockchain could be used in decision making process which enrich management and democracy. And you learned about the tools that will help you to build your own autonomous organization. If you want to give a credit to the efforts that were spent on this tutorial, share some love ❀ with the clap👏 and follow me for the future content.

Get an email whenever Vitalii Shevchuk publishes.

Learn More

Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Vitalii Shevchuk

đŸ”„ Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb

You will finally understand what DAO is and will be able to build web 3 yourself

Content

What you will learn?

  • How to create your own cryptocurrency;
  • How to build your DAO web 3 application powered with your cryptocurrency;
  • How to build Jamstack application using NextJs;
  • How easy to create layouts without CSS using ChakraUI;

Join Medium with my referral link - Vitalii Shevchuk

Glossary

  • HOA — is the Homeowners Association. In other words, the group of homeowners took responsibility for managing the community. They provide the restrictions and rules in the community and own the budget to address community needs.
  • DAO — Decentralized Autonomous Organization. The blockchain application automates decisions through the consensus between participants. Usually owns the treasury in cryptocurrency value.
  • NextJs — The js framework that allows you to build server-side rendering and static web applications using React.
  • ChakraUI — component library gives you the building blocks for constructing React applications.
  • Thirdweb — SDK for building smart contracts, has plenty of ready-to-use contracts like NFT collections, tokens, and of course DAO.

Intro

Recently I have received a notification from my HOA:

Your monthly HOA payment was increased 20$ to cover the community project needs

My heart was broken 💔 because of multiple reasons:

  • I have no idea what exactly the projects we have;
  • There is no transparency on the budget and how it is split among the projects;
  • And I was not even asked if I am ok with that;
  • But the most horrible reason is 20$ more, it is minus 240$ a year, or 24000$ in 100 years, that is a lot. Especially when you plan to live longÂ đŸ€·â€â™‚ïž.

Of course, you can be more active, join the board and discuss the proposals and decisions. Sure, it may work, but there is still a lack of transparency, as money is charged from all the homeowners. As a result, all of them have to participate in decision-making, or even in making proposals, in a pure democracy.

Wait a minute, there is such a thing as DAO. The Decentralized Autonomous Organization has:

  • Treasury with crypto;
  • The consensus decision-making process with the ability to set a vote value (which could be higher for board participants);
  • Everyone can make a proposal;
  • If the proposal is accepted the funding can be allocated automatically through the blockchain transaction;

Proof of Concept

I have dived deep to discover the possibilities and features that our HOA DAO has to have, let’s list a couple of them:

  • Everyone should be able to create a proposal;
  • A proposal has to have an expiration date;
  • There will be 3 votes types: For, Against, and Abstained;
  • After voting, the user can not vote using the same wallet id;
  • If consensus is archived, the proposal can be executed automatically;

Let’s take a look at how the final product will look like:

Let’s start to build this beauty 👧

Creating your own cryptocurrency

If you haven't set up your metamask, do it first. We will use the Rinkeby test network, so don't forget to get some faucet (test ETH).

Let’s get some money 💰

Would be so cool if you could make real money in the same way.

Now, let’s go to the thirdweb and deploy our first contract — which will be the governance token. It is simply a cryptocurrency that participants will use to manage our HOA DAO treasury (budget), and it will be used for voting. Go to the dashboard and click deploy new contract.

Find the contract named token, and hit Deploy now button

Now let’s tune some settings

  • Name and Symbol — HOA_COIN
  • Description: This is a governance coin for HOA Dao
  • Network: Rinkeby

Now pull the trigger and click Deploy

Our HOA_COIN was created

And we can Mint our first crypto, let’s start with 1000 😜

Congrats 🎉 we are rich now, and we can even see our crypto in metamask wallet. Click on import token:

Here we need to paste the HOA_COIN token address, we can copy it from the contract settings:

Cool, magic happens and we can see the amount of our cryptocurrency in our wallet

We wrapped up the cryptocurrency and own some assets now. In the next step, we will launch our DAO project and use the coin as the currency of the web 3 application.

Building your DAO smart contract

We have some virtual money now, it is the time to spend them a bit. We are going to create the HOA DAO where we will manage our HOA_COIN budget.

Let’s open the third web dashboard again and create a vote contract. ClickCreate new contract

And Deploy Now

In order to proceed with vote contract creation, we need to copy the token contract address. You can find it when you open the Code tab

Now let’s make some settings in our vote contract:

  • Name: HOA DAO;
  • Description: The DAO of your HOA;
  • Governance token address: (the address of the token contract);
  • Network Rinkeby (Ethereum test network);
  • Voting period — 6570. How long do members have to vote on a proposal when it’s created? We will set it to 1 day = 6570 blocks
  • Voting Delay — 0. After a proposal is created, when can members start voting? For now, we set this to 0 — immediately.
  • Voting Quorum — 0. The minimum % of the total supply that needs to vote for the proposal to be valid after the time for the proposal has ended.
  • Proposal token threshold — 1. What’s the minimum # of tokens a user needs to be allowed to create a proposal? If set it to 0. Meaning no tokens are required for a user to be allowed to create a proposal.

Sweet we created our HOA DAO, and in the next step, we will start to code our web 3 application.

Coding the HOA DAO web 3 application

We are at the most interesting part of development now. Here we start to build the application using NextJs, React, and ChakraUI. First, we are setting up the project.

yarn create next-app --typescript
>What is your project named? next-hoa-dao

Then let’s add a couple of dependencies

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 react-icons

It includes Thirdweb SDK and ChakraUI packages.

Alright, coding time, let’s go 🏃

We can start with creating 2 config files that will store our constants, including contract addresses

next-hoa-dao-app/pages/config/constants.ts
/Users/vitaliishevchuk/Documents/projects/next-hoa-dao-app/pages/config/contracts.ts

Looks good, next we start to work on our components

next-hoa-dao-app/pages/_app.tsx

We don't have MainLayout yet, let’s create components folder and set it up there:

next-hoa-dao-app/pages/components/MainLayout.tsx

We still missing CreateProposalButton and ConnectMetamaskButton, let’s create it:

next-hoa-dao-app/pages/components/CreateProposalButton.tsx
next-hoa-dao-app/pages/components/ConnectMetamaskButton.tsx

The next we need to work on is our proposals component, which we will call it ProposalList.

next-hoa-dao-app/pages/components/ProposalList.tsx

And finally, our main page, which is located here

next-hoa-dao-app/pages/index.tsx

That is pretty much it, you are a hero if you went through the tutorial and reached this point. You can download and play with the project yourself with the Github link below:

Github Link

GitHub - Vitashev/next-hoa-dao-app

Conclusion

Hope it was not too overwhelming. The key takeaway here is that blockchain could be used in decision making process which enrich management and democracy. And you learned about the tools that will help you to build your own autonomous organization. If you want to give a credit to the efforts that were spent on this tutorial, share some love ❀ with the clap👏 and follow me for the future content.

Get an email whenever Vitalii Shevchuk publishes.

Learn More

Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Vitalii Shevchuk


Print Share Comment Cite Upload Translate Updates
APA

Vitalii Shevchuk | Sciencx (2022-06-05T12:36:47+00:00) Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb. Retrieved from https://www.scien.cx/2022/06/05/building-hoa-dao-application-with-web-3-stack-nextjs-chakraui-and-thirdweb/

MLA
" » Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb." Vitalii Shevchuk | Sciencx - Sunday June 5, 2022, https://www.scien.cx/2022/06/05/building-hoa-dao-application-with-web-3-stack-nextjs-chakraui-and-thirdweb/
HARVARD
Vitalii Shevchuk | Sciencx Sunday June 5, 2022 » Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb., viewed ,<https://www.scien.cx/2022/06/05/building-hoa-dao-application-with-web-3-stack-nextjs-chakraui-and-thirdweb/>
VANCOUVER
Vitalii Shevchuk | Sciencx - » Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/05/building-hoa-dao-application-with-web-3-stack-nextjs-chakraui-and-thirdweb/
CHICAGO
" » Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb." Vitalii Shevchuk | Sciencx - Accessed . https://www.scien.cx/2022/06/05/building-hoa-dao-application-with-web-3-stack-nextjs-chakraui-and-thirdweb/
IEEE
" » Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb." Vitalii Shevchuk | Sciencx [Online]. Available: https://www.scien.cx/2022/06/05/building-hoa-dao-application-with-web-3-stack-nextjs-chakraui-and-thirdweb/. [Accessed: ]
rf:citation
» Building HOA DAO application with Web 3 Stack: NextJs, ChakraUI, and Thirdweb | Vitalii Shevchuk | Sciencx | https://www.scien.cx/2022/06/05/building-hoa-dao-application-with-web-3-stack-nextjs-chakraui-and-thirdweb/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts