Skip to content

Latest commit

 

History

History
143 lines (59 loc) · 3.6 KB

README.md

File metadata and controls

143 lines (59 loc) · 3.6 KB
Raw

Smart Doodle

Smart Doodle is an ethereum blockchain based poll application demo. The idea of smart doodle is to help newbees like me to understand how to build a dapp.

Smart Doodle is a backend-free, on blockchan, free-sql-storage, reactjs powered app, currently is running on the github page using Ethereum testnet.

Installation

You can install this app in you local environment:

git clone https://github.com/kkx/smart_doodle.git

cd smart_doodle

npm install

npm start

You can also test it online using our demo(You will need a ethereum browser like mist or chrome plugin metamask to get a lightwight ethereum client, otherwise you must run you ehtereum client locally using the port 8545):

Project description

This is just a very basic voting app with a bit of web ui.

Once you dapp is loaded in your browser you can perform 3 types of actions with following restrictions:

  • create a poll event

    • One user/account/address can only host 1 poll event in the sametime, the address of the poll event is the host account address

    • User can recreate event anytime he wants to, the previous poll event would be removed.

    • A poll event can have as maximun 10 options by now

  • search a poll event

    • search a poll by introducing host address

  • vote on a poll

    • User can vote a poll only once, and the poll history would be recorded

Tech

This project is based on following tech stack:

How to create the contract

It is dead simple thanks to truffle,

truffle compile

truffle migrate(truffle migrate --reset)

Make sure you have your cliente node started before running these comands. In the development, testprc is recommended.

Tricky part of buiding dapps which i learned through this project

  • Solidity does not support to return a dynamic array o structure

  • you can not clear the whole mapping unless you know all the keys, in such usecase you should use an array to track things.

  • metamask injects the web3 object after the page is fully loaded, you need to avoid to perform any blockchain related operation until the web3 object is injected. In my case i had to force js loading after the html loaded completely.

    • 
  <script type="text/javascript">

    function downloadJSAtOnload() {

        var element = document.createElement("script");

        element.src = "/smart_doodle/static/bundle.js";

        document.body.appendChild(element);

    }

    if (window.addEventListener)

        window.addEventListener("load", downloadJSAtOnload, false);

    else if (window.attachEvent)

        window.attachEvent("onload", downloadJSAtOnload);

    else window.onload = downloadJSAtOnload;

  </script>

  • As pointed out in metamask documentation, all blockchain operations must be asynchronous with some exceptions. This can be troublesome for frontend newbee like me.

Conclusion

IMO Dapp is like a normal app with the particularity of having a shared database which is online always. Your operations in this app is asynchronous and expensive :D, but it is middleman-free!