paint-brush
Learn Web 3.0 by actually Deploying an Application on it: Hands-On Approach (IPFS + Ethereum)by@Niharika3297
6,848 reads
6,848 reads

Learn Web 3.0 by actually Deploying an Application on it: Hands-On Approach (IPFS + Ethereum)

by Niharika SinghJune 2nd, 2018
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

“Decentralised web” or “Web 3.0” have become buzz words now because they’ll bring about revolutionary changes in present-day industry. But how many of us actually know about Web 3.0?

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Learn Web 3.0 by actually Deploying an Application on it: Hands-On Approach (IPFS + Ethereum)
Niharika Singh HackerNoon profile picture

“Decentralised web” or “Web 3.0” have become buzz words now because they’ll bring about revolutionary changes in present-day industry. But how many of us actually know about Web 3.0?

In this article, I have covered salient features of Web 3.0. After earning the basic understanding of Web 3.0, we will together deploy an application on IPFS. The application has a Solidity smart contract which runs on Ethereum Virtual Machine. The combination of Ethereum + IPFS is what makes the application truly decentralised.

Let’s Get Started!

Why Web 3.0 Matters to Us?

Web 1.0 was the birth of the internet and most of the happenings on the internet were very static. There wasn’t any interactivity. A person remained completely anonymous and privacy remained intact because no critical transaction ever took place. The internet was static as hell! Nothing like what we can even imagine today. Then came in Web 2.0 in 1990s. Web 2.0 gave rise to giants like Alphabet, Amazon, Microsoft etc. There came in insane amount of interactivity on the Internet but privacy of a person went for a toss.

Nothing is protected and private on the Internet. Nothing.

Web 3.0 urges to bring back the privacy of the user by giving user complete control over his/her data. Web 3.0 vouches for democracy rather than monopoly of few giants. Web 3.0 is all about decentralisation rather than centralisation. The shift from Web 2.0 → Web 3.0 will be gradual. It won’t happen overnight. But, the best way to pace it up is to bring awareness among people. The current business requirements will change when user’s requirements will change. The user needs to realise that they’re the boss of their data! If anybody earns money out of their data, it should be them.

If you use the product for free; you are the product.

Source: BigChainDB

Features of Web 3.0

→ No central point of control: Companies like Google, Microsoft, Amazon will no longer have control over your data. No governmental body will be able to block websites and restrict services. Blockchains like Ethereum will hale.In short, middlemen would be completely out of the equation.

→ Ownership of data: End users will regain complete control of data and have the security of encryption. At present, big companies like Amazon and Facebook have massive data warehouses storing information worth billion dollars to improve their services.

→ Dramatic reduction in hacks and data breaches: Because data will be decentralized and distributed, hackers would find a hard time finding a single point of entry into the system.

→ Interoperability: Applications will be easy to customize and device-agnostic, capable of running on smartphones, TVs, automobiles, microwaves and smart sensors. At present, applications are OS-specific, and are often limited to a single operating system. For instance, many Android cryptocurrency wallets are unavailable on iOs, causing frustration for consumers who use multiple devices. It adds expenses for developers tasked with issuing multiple iterations and updates of their software.

→ Permissionless blockchains: Wealth and other digital assets can be transferred cross-border, quickly and efficiently, anywhere in the world.

→ Uninterrupted service: Account suspension and distributed denial of service are dramatically reduced. Because there’s no single point of failure, service disruption will be minimal. Data will be stored on distributed nodes to ensure redundancy and multiple backups will prevent server failure or seizure.

Check out the awesome Internet of Blockchain Foundation for more!

Time for some hands-on learning!

For sake of saving time and length of the article, I’ve already prepared the basic code. To get started, git clone the repository from my Github page.


niharrs/Blockchain-Voting_Blockchain-Voting - Powered by Ethereum_github.com

This is a basic polling applications which holds a polling competition between Friends and How I Met Your Mother. (These two are very famous American TV shows.) I’m personally fond of Friends!

To run the application smoothly make sure you have the following installed:

  1. NodeJS
  2. Truffle Framework
  3. Ganache
  4. Metamask Chrome Extension

MAKE SURE GANACHE IS RUNNING ALL ALONG.

To run the application, open up your Console and enter the following commands:

$ npm install

$ truffle migrate --reset

$ npm run dev

The first command will install the necessary packages from package.json file.

The second command deploys smart contract on the EVM.

The third command fires up the localhost server.

You should see something like this on your screen:

Let’s see the Election.sol smart contract in Contracts folder:

The problem with the present application is that it is hosted on localhost which is centralised.

The idea is to move this over to IPFS.

To do that, first you need to install IPFS.

Then run the following commands on your terminal:

$ ipfs init

$ ipfs daemon

Now we need to put the JSON contract files and Src folder in a separate folder named Dist . Create it.

To do that, run the following commands (will work if you’re on MacOS), else maybe do it manually.



$ mkdir dist$ rsync -r src/ dist/$ rsync -r build/contracts/ dist/

Now we need to swarm for IPFS peers

$ ipfs swarm peers

Now we finally add the Dist folder to IPFS.

$ ipfs add -r dist/

Copy the hash for dist that is the last one in this list. Now we need to publish the hash


$ ipfs name publish QmaikVh9TuP3QCZwi4efAgHxRUniQzhNz5yN7b3KggALsc$ ipfs name publish {hash}

This command may take a minute.

Now let’s access our application on IPFS!

Point your web browser to: gateway.ipfs.io/ipfs/{hash}

For me, it is:

gateway.ipfs.io/ipfs/QmaikVh9TuP3QCZwi4efAgHxRUniQzhNz5yN7b3KggALsc

You should see this (have patience):

The irony!

Now let’s vote!

I VOTED FOR FRIENDS and it works perfectly fine for me!

If you want to use my application, go to and cast your vote.

https://gateway.ipfs.io/ipfs/QmaikVh9TuP3QCZwi4efAgHxRUniQzhNz5yN7b3KggALsc/ : Link to vote!

You can use different accounts to vote using MetaMask and Ganache.

This is a full blown decentralised application.

If you liked the tutorial, please share it.

If you have any question, please ask in the comment or mail me at [email protected]