DEV Community

ntop
ntop

Posted on

How I create a Web3 project in 7 days.

I'm a totally newbie to the crypto world. I think most people in dev.to is same as me. As a web2 developer(they called us), this is the first time I know the term - Web3. What's web3? It confused me for a long time. If you ask me, I'll tell you that web3 is some tech stack from Ethereum, Which you can used to create DApp. (That's may not be right, I'm sure! And what is DApp?...)

Let's just throw away these confusing concept, I just tell what I did, What I learn.

What I did?

The project I created is a tool, which can be used to store money(crypto money) in NFT(What is NFT? 😂). You can play it at: https://redpacket.app/ .

I use react to create the frontend ui, and use web3js to interact with the Ethereum.

What I learn?

  1. Ethereum
  2. Solidity
  3. Web3js

Ethereum is a blockchain, as you known blockchain is just an unchanged database. What Ethereum different from normal database is that Ethereum can run code, the code running on Ethereum called Smart Contract. So if you want to write something like a small program, in Ethereum world, you should write smart contract(like android's apk, or iOS's ipa).

Smart contract use Solidity as it native language. Solidity is a little like javascript, here is some code snippet:

/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 */
contract Storage {

    uint256 number;

    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }

    /**
     * @dev Return value 
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}
Enter fullscreen mode Exit fullscreen mode

These code above store a number in the Ethereum blockchain. When you deployed the Solidity program(or smart contract) to Ethereum, how to use it? When we create an android application, we can install it in our smart phone, and open it/play it. But ethereum has no mobile application, if we want to play the program, we should use some library, one of these libraries is web3js. So you can also see web3js as a library to interact with ethereum.

Web3js provide api to call method of the smart contract. The last thing is to write some ui, then people can use it more friendly. I use react to create the website, at dev.to everyone know react, so I wont talk it more.

Here is the architecture

Now, you known the architecture of a mini DApp.

End

I always want to try some new tech, and blockchain is my new favor! There are so many concept in the crypto world, I'm sinking and enjoying.

One more thing: If someone know what I'm doing and have a MetaMask wallet, you can play the small project at develop mode: https://redpacket.app/send#dev at dev mode, you can switch to Ropsten testnet.

Sourecode:https://github.com/NFTRedpacket/redpacketv1

Top comments (0)