[BOUNTY] Build dApp of Your Choice Using Waku (Decentralized Communication) and Vue.js

[fryorcraken]

Context

Waku Is Uncompromising Web3 Communication at Scale. A family of robust, censorship-resistant communication protocols, designed to enable privacy-focused messaging for web3 apps.

The JavaScript implementation of Waku, js-waku, enables web apps to utilize the Waku network for off-chain message transmission.

Disclaimer: Waku is experimental, you may find blocking issues while developing your web app. We will prioritize their resolution to unblock you, which means you may have to pause development until done. Thank you for your patience and understanding.

Your participation in this bounty is subject to your acceptance of our terms and conditions. Please see waku-org/bounties#applying-for-a-bounty for details.

Rewards

XXX DAI

Timeframe to Completion

1000 DAI.

Once the application is approved, the result must be submitted within 30 days.

Application Evaluation

To ensure you are selected for this bounty, provide the following information:

• Describe the approach you will take to tackle the bounty.
• A timeline within which you expect to deliver the bounty.
• Any previous relevant work you have done.

Bounty

This bounty specifies 3 deliverables, all needed to consider the bounty complete. Partial delivery of the bounty will not make you eligible for the prize. The deliverables are:

1. A simple web app written using {web framework}
2. A post on your blog to guide a reader through building the web app.
3. A tweet thread explaining how your web app works and leverages Waku for private, decentralized communications.

The bounty aims to inspire developers to build applications using Waku. This is why the web app's nature is up to the hacker. However, to push for creative use of Waku, we will not accept chat apps or chat features using Waku.

Your participation in this bounty is subject to your acceptance of our terms and conditions. Please see waku-org/bounties#applying-for-a-bounty for details.

Impact

The web ecosystem has a number of frameworks that each have different pre-configured bundler. To ensure a smooth dev ex for all web developer, it is best to not only test @waku/sdk against the last version of each framework but also provide examples on how @waku/sdk can be used with concepts unique of said framework (e.g. React Components).

It is difficult to have expert of all frameworks in a team, so best to outsource this to the community.

Deliverables

(1) Web App

Build a web app using Vue.js.

Acceptance Criteria

You must fulfil all the criteria below to consider the bounty valid:

• Must use best and idiomatic practices for Vue.js.
• Must use the latest stable version of Vue.js and @waku/sdk
• Must be a frontend only, browser web app (no backend, no NodeJS, no SSR, no lambda function otherwise it's not decentralized).
• Must not be a chat app or use Waku for chat messages. Be creative!
• Must use Waku for a core communication feature.
• The web app must be deployed on IPFS or permissionless decentralized storage solutions.
• In addition to that, you are free to host the website on a web server of your choice, such as GitHub pages (not mandatory)
• Must contain instruction to run the app locally.
• All code must be licensed under MIT+Apache2.0.

Please describe your idea as part of the application to ensure your submission will fulfil the criteria.

We may add high-quality submissions to our example repo.

(2) Blogpost

Write a blog guide that takes a reader through building your web app. The reader should be able to build a working web app by following your guide.

We recommend building a simple web app to make the guide easy to write and read.

The blog post must be licensed under CC0.

High-quality guides maybe be edited and added to the Waku docs at https://docs.waku.org/.

Acceptance Criteria

We prefer moderate-length articles, ideally between 1500 to 3000 words (excluding code). While not mandatory, we strongly encourage you to adhere to this guideline.

When relevant, reference concepts and definitions from our documentation (https://docs.waku.org) and provide a link to our community (https://docs.waku.org/community) for additional assistance.

Avoid submitting articles you have already published or have a high plagiarism score to existing ones.

(3) Twitter thread

Post a Twitter thread from your Twitter account that describes how the web app uses Waku.

For example, if you build a tic-tac-toe game, describe how your web app finds another player using Waku and then exchange the moves over Waku.

Acceptance Criteria

• The thread must tag the @Waku_org Twitter account.
• The thread must explain how Waku is enabling this use case/app.

Resources

Learn more about Waku at https://docs.waku.org/. Join our Discord to get support at https://discord.waku.org/. Various examples available at https://github.com/waku-org/js-waku-examples/.

[wolz-CODElife]

I would love to take up this bounty to create a Voting Poll web application using Vue.js that leverages Waku for private, decentralized communications.

Approach 🗺️:

To tackle this bounty, I plan to follow these steps:

1. Design and Development: I will design a user-friendly web application using Vue.js, ensuring that I adhere to the best and idiomatic practices for the framework. The app will allow users to create and participate in voting polls on various topics.
2. Integrating Waku: I will integrate the @waku/sdk into the application to enable secure and private communication between users to facilitate the exchange of poll-related data, such as voting choices and results while maintaining anonymity.
3. Deployment: The web app will be deployed on IPFS or another permissionless decentralized storage solution. I will also provide clear instructions for running the app locally.
4. Documentation: I will write a comprehensive blog guide that takes readers through the process of building the voting poll web app. The guide will be aimed at developers and will include detailed explanations, screenshots and code samples.
5. Twitter Thread: I will create a Twitter thread to explain how the web app utilizes Waku for private, decentralized communications. This thread will tag the "@Waku_org" Twitter account and provide insights into why Waku is a reliable choice for building this/similar solution(s).

Timeline 🗓️:

• Week 1: Designing the UI and setting up the Vue.js project structure.
• Week 1: Implementing the Waku integration for core communication features and testing the app.
• Week 2: Documenting the development process, creating the blog guide, and preparing the Twitter thread.
• Week 3-4: Finalizing the project, deploying the web app on IPFS, and submitting all deliverables.

Relevant Work 💼:

While I don't have previous experience with Waku, I have extensive experience in web development and as a technical writer. I am confident in my ability to learn and implement the necessary Waku integration for this project. Here are some of my past works:

• How to Build a Music Playlist with React, Spotify, and Fauna
• How to Mint NFTs Using Tatum NFT Express in JavaScript
• How to write an ERC-4626 token contract for yield-bearing vaults
• Improving Developer Experience With Dev Portals

I am excited about the opportunity to contribute to the Waku ecosystem and showcase the potential of decentralized communication protocols in innovative applications like the voting poll web app.

I look forward to the working on this exciting project.

[fryorcraken]

@wolz-CODElife apologies for the late replied, I somehow missed this. Feel free to join us on https://discord.waku.org/ to get more responsive.

Please proceed with the typeform: https://github.com/waku-org/bounties#applying-for-a-bounty to apply for the bounty.

[fryorcraken]

The app will allow users to create and participate in voting polls on various topics collected from public APIs.

Can you explain a bit more what you mean there? I am not sure to understand what is the intent of the API usage.

[wolz-CODElife]

A user can create an opinion for other users to agree or disagree with. For instance, in an event(developer conference) a speaker can open a poll on a particular controversy for the audience to share their views through the poll.

The public API provides various popular opinions for users on the platform to vote. The API usage isn't compulsory, it's just an added feature to bring up interesting topics.

[fryorcraken]

I understand that the API is just to assist the user in poll creation, is that right?

[wolz-CODElife]

Yes, and also suggesting ready-made polls to users.

[fryorcraken]

Bounty assigned to @wolz-CODElife

@wolz-CODElife application approved, you can start the work.

Please remember that blogpost and Twitter must be delivered to complete the bounty and get the reward.

[fryorcraken]

@wolz-CODElife how is it going?

[wolz-CODElife]

Hi Frank,

It's going well, @lordghostx has been very helpful. I should round up the app today or tomorrow, then start working on the How-to guide.

[wolz-CODElife]

Hi @fryorcraken,

After several back-and-forths with the waku-vue compatibility issue #1746, we found a solution around it.

Here are the deliverables for this bounty:

• Web App
  • Source Code: https://github.com/wolz-CODElife/waku-vue-poll
  • Live link: https://waku-vue-poll.vercel.app
• Blogpost
  • Source markdown: https://github.com/wolz-CODElife/waku-vue-poll/blob/master/docs/index.md
  • Hashnode draft link: https://hashnode.com/preview/6593640d357062ad80a52eac
• Twitter Thread
  • Draft: https://github.com/wolz-CODElife/waku-vue-poll/blob/master/docs/thread.md

[hackyguru]

Thanks for the submission @wolz-CODElife , reviewing it shortly 👍 will keep you updated

[wolz-CODElife]

Thank you

[vpavlin]

Hi @wolz-CODElife! Thanks for submission!

I went through the code, blog post and tested the app and have a few comments:

• Please add description of the app to the README of the repo
• I was a bit confused about how the app should actually work - my expectation was that when I create a poll it would get a unique ID which I could use to access it, so it took me a while to realize that a) the poll will be available in Polls section (could you maybe redirect there after the poll is created?) b) all the poll participants have to be online when it is create (i.e. I cannot ask people to join/vote in the poll after it is created) - so from usability perspective I am a bit concerned:)
• I am not very familiar with vue.js, but can you make /polls route accessible, so that when I reload I don't get 404?
• Any reason why you did not use Store to load past polls? Or at least use localStorage or IndexedDB (probabyl an overkill) to store polls that I have created/seen? (I see you are using localStorage, but my Polls tab is empty after reload)
• If 2 people send a vote at roughly the same time, how will you app handle that? IOW if I send a vote with value 1000 for option A and 0 for all the rest - will I simply overwrite everythign else or did you think about any mechanism to overcome this?
• I see you are calling waku.subscribe() on every handleVote - that shoudl not be necessary as subscribtion is active from the point of subscribing to filter protocol for particular contetTopic, so unless you need to subscribe for a different one, you only need to do it once (unless something fails etc, but in general, once at a startup is good)
• You say you use the address to show that the sender is the author of the poll, but to make that statement true, you'd actually have to use signatures, not just the address string

I'll read the blogpost and the X thread again, but those look generally good and informative

The

[wolz-CODElife]

Thanks @vpavlin for taking the time to review my submission.

Here are my responses to your comments:

• [x] I'd add app descriptions to README
• [x] I can redirect users to the poll list after creating a new poll
• [x] Participants have to be online, the mantra of this app is "Poll in Real Time" as it was coined from https://kahoot.com/ for events. Users have to join the poll before the game starts.
• [x] The /polls route showing 404 was most likely a deployment issue, I'd resolve that.
• [x] Again the idea of this app(Kahoot) is a short-lived session polling system, that allows attendees of a particular event to join a poll, and once the poll ends they don't have access to it again. However, for the sake of this bounty, I have implemented storage of past polls using localStorage.
• [x] For race conditions, that's why I called the subscribe() method before updating the vote, with a hope to get the most updated vote counts before writing a new one. I'd appreciate if you could suggest a better approach to this.
• [x] Calling waku.subscribe() in handleVote was my solution to race conditions, but since once at startup is okay, I will see other methods.
• [x] I will implement the message signing, I just felt it was an overkill and wanted to keep the implementation as simple as possible.

[wolz-CODElife]

Hi @vpavlin I've checked off all the items on your comment, please see to confirm that it meets your expectations appropriately.

Thanks.

[vpavlin]

• For race conditions, that's why I called the subscribe() method before updating the vote, with a hope to get the most updated vote counts before writing a new one. I'd appreciate if you could suggest a better approach to this.
• [x] Calling waku.subscribe() in handleVote was my solution to race conditions, but since once at startup is okay, I will see other methods.

Interesting thought, not sure if you are familiar with PubSub Pattern - this is how Waku works, so once you subscribe you will (in ideal world:) ) recieve all the published messages for the given content topic. But there is no promise about order. Calling subscribe again does not "force" delivery of messages either.

Generally the approach to overcome this is to use something like Event Sourcing Pattern where instead of sending the whole state, you publish state changes and then reconstruct the state based on these "diffs". IOW instead of sending

{
  "poll": "XYZ",
  "options: {
    "x": 1,
    "y": 10
  }
}

you'd do

{
  "poll": "XYZ",
  "type": "vote",
   "option": "X"
} 

And then you'd reconstruct the state based on the list of "updates".

I think it's fine for this bounty to leave it as it is, but it might be worth for your own sake to look at these patterns for the future:)

I'll go through everything once more, but I think it looks pretty good right now!

[wolz-CODElife]

Thank you @vpavlin, I've come to understand how PubSub Pattern works, and the relationship with subscribe().

I agree with Event Sourcing Pattern as a good solution for this case. Would be helpful in the future.

Thanks again. Let me know if I can proceed with publishing the content, and any other thing required.

[vpavlin]

I just noticed incorrect statement in the X thread:

Participants exchange votes and poll updates directly,

The communication would rarely be direct in Waku, messages travel through the relay nodes which allows Waku to preserve privacy - since there is no explicit sender (or link to sender) or recipient and you don't know who you want to send the message to, you cannot communicate with them directly - hope it makes sense:) IOW the sentence should be Participants exchange votes and poll updates over Waku network.

Users can cast votes without concerns about metadata harvesting

We might want to mention that this is not the case in this simplified implementation as messages travel over network unencrypted, so you are leaking your address and vote to anyone looking:) But that's ok for the simple example, just want to clear up expectations for other people who might think everything is automatically encrypted (which it is not!)

[wolz-CODElife]

Thanks for pointing my attention to these, I've corrected the necessary information. Please let me know if there are any other things needed, and if I can proceed to publish the content.

[vpavlin]

It seems like https://waku-vue-poll.vercel.app/ does not have the latest version - when I run locally, it asks for a signature when creating a poll, but the deployed version does not.

Otherwise, I am fine with the result" Thanks a lot for this submission!

[wolz-CODElife]

It seems like https://waku-vue-poll.vercel.app/ does not have the latest version - when I run locally, it asks for a signature when creating a poll, but the deployed version does not.

I just tested the deployed version, and it asked to sign polls: .

So. I'd proceed to publish.

[vpavlin]

Hmm..I tried hard reload, cleaned up localStorage and cookies, disconnected and reconnected the wallet, but still does not ask for signature.

I see this error in console. No idea what's the problem:D

[wolz-CODElife]

I redeployed, hard reloaded too, cleaned up cache, disconnected and reconnected the wallet and I can sign polls without any issue:

[vpavlin]

Damn, this is so weird @hackyguru @fryorcraken can you guys try it? Feels like my Metamask must be messed up as the dapp gives me completely random values as addresses

Btw, @wolz-CODElife could you maybe add a check for that (address provided by window.ethereum not being actual address) and make it clear that the address is incorrect/unusable to the user (me)?:D

EDIT: I just tried in a fresh installation of Brave and the behaviour is the same - it originally showed up fine, but when I disconnected and tried to connect again, I get random values instead of an address

[wolz-CODElife]

Wow, this is weird.

@vpavlin I've added a check, and everything seems to work fine on my end.

[vpavlin]

:facepalm: I was looking at old code, looking at the latest - I se where the random values come from - you actually have a code for that:D So the real question is, why is my MetaMask not giving you accounts.

And I believe the reason is that you are only asking for available/connected accounts, but not actually requesting the connection - see ethereum.request({ method: "eth_requestAccounts" }) call in https://dev.to/inancakduvan/connect-metamask-wallet-javascript-h1f

When I call that in the console, it would pop up Metamask asking me to connect to the website and then it would correctly resolve the address.

[wolz-CODElife]

I used to get a "deprecation warning" when I used ethereum.request({ method: "eth_requestAccounts" }) before. Hence, why I used ethereum.request({ method: "eth_accounts" }).

But eth_requestAccounts works just fine now, you can try it again.

[LordGhostX]

Hi @vpavlin, I decided to give it a try, and it works fine on my end

Signing before creating polls:

Account address displaying:

[wolz-CODElife]

Great! Thank you @LordGhostX

[vpavlin]

@LordGhostX awesome! Thanks for trying - would you mind checking one more thing? Try to disconnect the wallet and then connect it again to see what happens - I feel like that's what broke it for me, but not sure:)

[LordGhostX]

Initial connection:

Disconnecting from MetaMask:

Reconnecting:

cc: @vpavlin

[vpavlin]

Super weird, but it works for me now as well:D I tried to disconnect, reconnect, clear up everything multiple times and it seems to work fine. Very strange

[wolz-CODElife]

Wow! Glad it works now :)

Am I good to publish?

[vpavlin]

Yup, seems all is good!

[wolz-CODElife]

I have published the deliverables:

• Live app: waku-vue-poll.vercel.app
• Blog posts:
  • https://blog.wolzcodelife.com/build-a-dapp-using-waku-decentralized-communication-and-vuejs
  • https://dev.to/wolzcodelife/build-a-dapp-using-waku-decentralized-communication-and-vuejs-1nnf
• Twitter Thread: https://x.com/wolz_codelife/status/1751955673603002459?s=20

[fryorcraken]

Payment done.

[hackyguru]

@wolz-CODElife wanted to check if you'd consent for the blog post article to be shared on the Waku blog :) this can be an amazing resource for other devs, so we wanted to add more visibility to it by publishing the tutorial on our blog

[wolz-CODElife]

Hi @hackyguru!

That'd be great, please feel free to publish the tutorial on the Waku blog.