Building a DApp as a Web3.0 Developer: Web3, DApp, ERC20 Tokens, IPFS Explained

Intro

Web3, Dapps, ERC20 Tokens, and NFTs… it feels like these terms are on track for this year’s Technology’s Bingo Card. But what are these buzzwords, and how do they work?

web3 dapp social media joinspace smart contract
(JoinSpace – Web 3.0 Social Media DApp)

Context: Over the past year, I have been diving into the interesting world of Blockchain and developing a few Web3.0 Projects.

Including a Reddit Alternative Web3.0 Social Media DApp, where users can earn tokens, and Tip eth based on upvotes of their content posted.

This post would explain the key fundamentals behind the upcoming DApp.

In this article, we would go over quite a few concepts starting from the evolution of the internet to web3.0. We’ll also, cover what are DApps?, DApps Architecture, ERC20 Tokens, NFTs, and how data is stored on the Blockchain.

It’s a long one, So let’s begin!

Web 1.0 vs Web 2.0 vs Web 3.0

The Internet: An information-free superhighway designed to connect computers across the world, Through the internet users can gain and share information, as well as communicate from anywhere with a connection. But how did we get to this stage?

In order to understand where we are with web 3.0, let’s understand where the web first started, with Web 1.0. Although there are no official dates, The Web evolution can be characterized by the following.

History of the Web Evolutions – Web 1.0

old-internet

Web 1.0 can be characterized as the first iteration of the Internet. A static, read-only page. Web 1.0 consisted of sites serving static content to the user.

Revolutionary for the time, users could collect knowledge on anything, by navigating around and through a series of documents connected by Hyperlinks.

Web 1.0 was read-only meaning a user was typically served a static page. You could not interact with the site, apart from clicking on different documents.

As a result, Users were seen as consumers of content, whereby the creator was usually the developer behind the site. (Approx. 1991 – 2004)

In fact, the first website was published by Tim Berners-Lee, 1991. Dedicated to information on the world wide web. A site providing anexplanation of how to set up your own website.

Web 2.0 – Era of Internet Interaction

Fast Forward to around 2004, where we saw an adoption of websites providing user interactivity. Characterized by the ability for users to interact with the web, Web2.0 started off simply as a user being able to change the state of a website, which lead to ordering books, flights booking with a backend database.
Fast forward to the present time, and now the user can create and earn money, order meals from apps, gig economy, and freelancing.

Web 2.0 refers to the current iteration, and what most technologies we use daily operate on.

Knowledge hasn’t been spread faster on information, allowing people to experience events in real-time.

As a result, web 2.0 can be characterized by the participants being both the Consumers and Creators through web interation.

However, over time we’ve seen a degree of centralization of services where a few corporations make up what we use every day. Whereby in most cases, you don’t have control of your data, or how it is stored.

Additionally, certain business models operate on collecting personal data on users to sell to advertisers. In effect, making us the product.

Web 3.0 – Era of Decentralization

So, What’s Web 3.0?

The big fundamental difference between web2 vs web3 is Decentralization.

Web 3.0, however, being a loose term refers to  a decentralized, secure internet where people can exchange money and information without the need of an unnecessary middleman like banks or a payment system.” – You become the owner of digital goods.

Web3 ideally enhances the internet experience we have today, by providing a few other characteristics, such as:

Decentralized Application that runs on Blockchain

  • Verifiable, Trusties, Permissionless, Self-governing, and Robust
  • Not Centralised by any authority. Peer to Peer.

This Twitter thread also provides an argument for web3:

Web 3 Use Cases:

There are many examples of existing applications running on web3 including DAO’s, DeFi, and DApps. (we’ll cover DApps shortly). In the meantime, below are some real-world examples of Web3 applications:

aave-logo
AAVE – Example of a DeFi Open Source Liquidity Protocol

Decentralized Finance (DeFi):

AAVE (Defi Liquidity Protocol) – where users can Stake earn APY, on cryptocurrencies. Or make loans, or even Flash loans.

Media:
Odysse – where you can earn tokens as you post and watch as an alternative to YouTube. -Early

What Are DApps:

A DApp is a Decentralized Application.

DApps are similar to everyday apps that perform a utility for the user. In fact, the user interface is identical to a normal website or App.

However, the fundamental difference between a web2.0 website and a DApp, is that DApps have their backend code deployed to the blockchain, known as Smart Contracts.

“DApps use the Ethereum blockchain for data storage and smart contracts for their app logic”.
– Ethereum.org”.

A smart contract is like an excecutable set of rules. That is stored on-chain where it’s visible for all to see.

The key characteristics of a smart contract are that Smart contracts are immutable. Once a DApp/smart contract is deployed on the Ethereum Network it’s for all to view and interact with.

How Do DApps work?

web2 architecture diagram
Simplified Web 2.0 Architecture (Frontend and Backend)

In web 2.0, we usually build applications that run on a centralized server whereby the data is owned by the company and the app is operated by a central authority.

Typically, when we build a web application. (Consisting of a Frontend, Backend) the web application is deployed where the backend code resides on a centralized cloud hosting service like AWS, where it is managed and scaled to your needs.

Take Ethereum as an example, (however, there are many Blockchains that replicate a similar architecture.

web3 architecture diagram simplified
Simplified Web 2.0 Architecture (Frontend interacting with the Blockchain)

For a decentralized app on the blockchain, your backend code is contained in a smart contract and deployed to the Blockchain, usually written in the Solidity language.

The smart contract can be viewed as a piece of code that executes a logic/application and lives on the blockchain that we can interact with across multiple wallets.

Applications that interact with a Smart Contract on a Blockchain, are known as Decentralized apps. Or a DApps for short. (Hence the name).

Due to its immutable nature, once DApps/ Smart Contracts are deployed on the Ethereum network you can’t change them.

In summary, DApps are decentralized applications where the backend of the application is deployed to the Ethereum Blockchain known as Smart Contracts. Users interact with the front end to interact with data on-chain.

Advantages of a decentralized blockchain include:

  1. Free from Censorship (Can’t be removed) – With Blockchain’s decentralized nature, there’s no centralized single point of failure
  2. Built-in Payments – Send Payments to any wallet
  3. Secured by Cryptography
  4. Open Source – Encourages transparency

A Smart Contracts code, transaction history, and user activity can be seen on a Block Explorer, such as Etherscan.io. Here’s the Smart Contract for JoinSpace (Social Media DApp).

Social Media DApp:

web3 dapp social media joinspace smart contract
A Reddit Base Media DApp – JoinSpace (like Reddit but on Web3)

JoinSpace.xyz – An example of DApp I’ve developed that runs 100% on-chain.
Users can earn tokens with upvotes, Tip eth, and own their content store on the Blockchain. Create a community known as subspace “s/” in relation to “/r” for subreddits.

Other use cases of DApps, include DAO, Arbitrage Trading, and many more that are being developed.

How do can we develop a DApp?

spongebob thinking developing dapps on ethereum

Building a DApp requires a few different pieces a few tools and can be its own separate article on its own. However, this is the overview of building a DApp on the Ethereum Blockchain.

Note: The following developer stack focuses on Ethereum based DApps using JavaScript/NodeJS. However, below are some tools that Support Python.

Front End – ReactJS is a front-end JavaScript library for building web applications (alternatively HTML, JavaScript). Similar to any 2.0 web application.

solidity logo
Solidity

Back End
Solidity is an object-oriented, high-level programming language used to write Smart Contracts. You can test and deploy your Smart Contract with Remix, a browser-based compiler.

Web Client Libraries:

Ether.js – Proves your applications a way to interact with the smart contract.  to communicate with the End User and Smart Contract on the Blockchain. Two popular libraries. (Note: Ethers is supported on JS Only)

Note: for Python developers,  web3py, and web3js are also popular alternatives.

MetaMask:

metamask logo
MetaMask

Handles account management and connects the currently active user to the blockchain. Once a user has connected their MetaMask wallet, we (developers), can interact with the Globally available Ethereum API (window.ethereum).

Provider: A provider links to a running node which talks to the Ethereum network

Infura API – Provided you wish to deploy to a Testnet like Ropsten. As well as providing access for Ethereum and IPFS networks based on its hosted Ethereum node cluster.

Frameworks: for testing, debugging Smart Contracts, creating a local blockchain instance, and deploying scripts:

  • JS Developers: Hardhat – Ethereum development environment for professionals
  • Python Developers: Brownie – Python-based development and testing framework.

Note: Before going into the Rabbit whole of DApp development. It would help to get a fundamental understanding of the Blockchain Stack, such as Ethereum miners and nodes.

Great, so we now got our Front End and Solidity Contract Deployed to the blockchain. Let’s now take a deep dive into how our DApp would interact with our Smart Contract Deployed to Blockchain.

How does the DApp Front End interact with Smart Contracts?

web3 architecture diagram generic
Web 3.0 DApp Architecture

A Provider, allows a Dapp to communicate with smart contracts deployed on the blockchain. This allows our DApp to read the state/data stored on the Smart Contract.

However, If we wish to write to the same state, we’ll need to “sign” the transaction with our private key – validating that the transaction came from a genuine public wallet address. Known as a signer.

Note: A signer is not required when reading from the blockchain, only when submitting a transaction

How to Connect a wallet to a DApp

web 3 connected wallet
(Frontend UI – Connecting a User Wallet to DApp)

Unlike web2.0, where a user’s credentials are stored on a centralized database. With Web3.0 the end-user owns all their data. There isn’t a need for a developer to collect the username or password. 

With Web3.0, the end-user would require connecting to a browser extension such as MetaMask in order to make their wallet’s details available to a DApp.

Metamask stores the user’s private key in the browser, whenever the front end-user needs to sign a transaction, e.g buy a token, the MetaMask window is invoked.

The end-user has a public address that can receive payments and a private key that can sign transactions to interact with the blockchain to send payments mint tokens etc.

web3, dapps, erc20 and nft's explained - window.ethereum
(window.ethereum global environment – in browser console)

Once a user has connected their MetaMask wallet, the DApp can interact with the Globally available Ethereum API (window.ethereum) to access details regarding the wallet.

pani and kalm meme crypto

Note: Your private key is used to sign cryptographic hashes with your wallet. This is why as a user/ wallet holder it’s important to keep your private keys secure.

Once a private key is compromised anyone with access has full control over your wallet!

We have covered what is a Dapp, how to build DApps, and the Web3.0 DApp architecture. Let’s take a detour into the world of tokens and Cryptocurrencies.

ERC20Token – The Cryptocurrency Mania

ERC20 Tokens – the technology standard behind your favorite projects. From decentralized stablecoins such as DAI to the moon-seekers of SHIBA. And yes, ERC20 Tokens can be a whole much more than dog coin projects. Let’s take a dive.

What is a Token?
A token can represent any virtual asset within the Blockchain. Whether being a point in an online game. No. of points to a user’s profile, lottery tickets, and of course, cryptocurrency.

that allows developers to build token applications.

ERC20 presents a token standard and helps keep track of Fungible tokens. Meaning, each token has the exact same properties (both in type and value) when compared to another token. No one token has special behaviors over the same token equivalent.

I.e, an ERC20 Token named ABC. One ABC Token is always equal to all the other ABC tokens. As a result, this makes ERC20 Tokens ideal for mediums of exchange currency, staking, and voting rights.

In order for a Smart Contract to be called an ERC20 Token Smart Contract, the Smart Contract would need to comply with the ERC20 token standard.  (Ethereum Request for Comments 20)

web3, dapps, erc20 and nft's explained - solidity remix functions
Minting ERC20 Token Functions

Examples of the methods and events that would need to be implemented:

  • Transfer() – Transfer tokens from one account to another account /wallet address.
  • balanceOf() – Get the current token balance of the account
  • totalSupply() – Total supply available on the blockchain network (e.g. mainet).
  • approve() – Approve whether a token amount can be spent or transferred by a third-party account. E.g. use for AirDrops etc.
web3, dapps, erc20 and nft's explained - erc20 solidity token
Smart Contract Code to Mint an ERC20 (no really, that’s all!)

Constructing an ERC20 Token Contract has been made simpler with OpenZepplin which provides a security audited contract template. where we can inherit the methods where we can change the name, symbol, and decimals. These tokens are sent to an address specified during the minting process.

jpow-money-printer

Which can make anyone their own JPOW. This may explain the 13,000+ Tokens deployed on the Ethereum main net. It’s important to note, some are only designed to part you from your cash. Given that, anyone could literally recreate your smart contract, name, ID, and symbol. It’s important to verify the contract address, and whether it’s legitimate.

By default: ERC20 uses 18 decimals. Where 1 Eth, is equal to 10^18. Or (1 Ether = 1,000,000,000,000,000,000 wei).

You can have a look at an example of an ERC20 Smart Contract in Remix.

An example use case of a DApp would be a social media platform rewarding a user a certain amount of tokens for the number of upvotes given by the other users who like the creator’s content. (We’ll discuss Ethereum scaling/ current limitations later in the article).

NFTs and the Cryptocurrency Craze

bape-nft's

Bore Ape Yatch Club, NFT

Ah, yes, we’ve now hit the Crescendo of the current Crypto Craze. Welcome to the world of NFT’s where digital arts and collectibles are being immortalized on the Blockchain, Artists, celebrities, and influencers alike selling digital arts for an are eye-watering sum to buyers. However, NFT’s do get a fair share of a bad rep. It should be emphasized that Digital art is just a one-use case of using an NFT.

What’s an NFT?

picture of mona lisa an non fungible
Non-Fungible Painting, Mona Lisa

NFTs stands for non-fungible token. For the purpose of a high-level overview, non-fungible means the item in question is unique and can’t be placed. An example of a non-fungible in the real world can involve assets such as Land, your passport, or an original piece of art. Something unique like the Mona Lisa.

Which in turn is the exact opposite of what fungible is. A fungible item in the real world is an item that you can readily replace with an equivalent time. A Dollar bill is a great example. $1 is $1, or a piece of gold can be easily replaceable with another piece.

Taking the real-life art piece into the digital world means the art piece retains its unique characteristics of the real world. This can expand to concert tickets, unique fashion collectibles, etc.

TL; DR is NFT inherits unique properties of the real world. The scarcity of the item increases value. Based on Supply & Demand.

So how does this work with NFTs?

erc 721 contract solidity
(ERC721 Solidity Contract Snippet – Create your NFT for your DApp)

On a high level, information about the NFT is stored on the blockchain e.g., where it can be accessed off-chain.

From a developer’s perspective: An NFT is essentially a unique ID associated with the metadata URI. The association happens, with the “tokenURI” inside the Smart Contract deployed on the blockchain. And similar to how fungible tokens follow an ERC20 token standard. NFT’s follow a separate standard known as ERC721 to mint your own NFT’s.

The following social media, I’m developing known as JoinSpace would involve ERC721 Standard to mint NFTs

This perfectly leads us to how data is stored on the blockchain. E.g. images etc.

Strong Data on the Blockchain – Introducing IPFS

web3 architecture diagram generic ipfs store data on blockchain
(Web 3.0 DApp Implementation of Off-Chain Storage with IPFS)
web3, dapps, erc20 and nft's explained - IPFS logo

Unlike current software web2.0 where we can store data on a centralized database. Storing data on the blockchain would not be practical, and in fact, very expensive (if possible).

As a result, Data is primarily stored off-chain with decentralized networks like IPFS.

“IPFS, (Interplanetary File System) is a distributed system for storing and accessing files, websites, applications, and data.” – ipfs.io

A peer-to-peer network for storing and sharing data in a distributed filesystem. Like how BitTorrent works.

When we require direct access to an image, the current internet (web2.0) requires you to put in the full URL address you’ll like to access. This is called location-based addressing. Every piece of content has its own unique address which is located where some server could serve the image to your browser.

The problem is that it leads to a single point of failure. If an image, information, or your favorite video. Gets deleted there’s no easy way of retrieving the file. This could be important for political censorship.

How can we store blockchain data off-chain with IPFS?

web3, dapps, erc20 and nft's explained - solidirty image hash

IPFS uses content-based addressing. Content-based addressing means that every file has its own address.

When files are uploaded to IPFS, each file is split into smaller chunks that are cryptographically hashed, a unique figure print is created called a CID (content identifier).

The interesting part is you can access any images using the URI. E.g. Filename: Ethereum-logo

Here’s an example of Ethereum’s logo uploaded to IPFS. (Look at the URI above – interesting, isn’t it?!)

This CID acts as a permanent record of the file. Due to its distributed nature when a user views or downloads your file. They also store a cache or copy of your content. Hence the more people view your content the more distributed the image becomes.

how to upload image to blockchain using ipfs cid
Image Uploaded to IPFS to retrieve the CID

Given, that storing would be very expensive, the NFT represents a link to that image, which points to the content uploaded URI off-chain.

This can be a simple as storing the uploaded CID to the blockchain. IPFS solves this by passing the image through a hash function to provide you with a CID.

QmdyaWz9KGcGPrbBgUTYysqTL9XienaiHgh8Bou65hrFvP

https://ipfs.infura.io/ipfs/<CID>, where, the CID is the hash of the image.

Your meta URI can be accessed – E.g. View this image of the ETH Logo:

https://ipfs.infura.io/ipfs/QmdyaWz9KGcGPrbBgUTYysqTL9XienaiHgh8Bou65hrFvP

ethereum logo stored in ipfs
This image was pulled via IPFS – inspect the URL 🤯

This is essentially how Images works are stored “on-chain”. By storing the IPFS URI along with the image properties. Meaning, you “own” the transaction which has the record of the CID address. This means, you theoretically “own” the image. As you (the user) own is the receipt of the transaction stored on the blockchain.

The Current Web3 social media DApp, JoinSpace.xyz being developed incorporates IPFS. So, you can upload your own images or mint your own “NFT”.

Note: In some cases, NFT has been found to be using a URL to a Google Drive or cloud storage. The issue here is that anyone can replace the contents of the image after being sold.
Meaning you can receive an image that is different from what you bought. Or worse, a seller could simply delete the image. As a result, you own a transaction to a link that doesn’t exist.

As with Prometheus bringing fire to Humans. These new technologies such as ERC721/NFTs can bring new innovations / new industries – how they would be used would be down to the user. Which leads us to if Web3 is just hype?

Web3 Scepticism – Is web 3.0 all Hype?

Web3, DApps, and blockchain, in general, we’re still relatively in the early stages of web3/Dapps. And it’s definitely going to be the new Buzzword, and there are valid arguments for Blockchain ability to scale

With all-new technologies, it’s always good to have a cautious optimism to them and evaluate the best and worst case. There are valid arguments against web3 such as Former Twitter CEO, Jack Dorseys comments on Web3:

Although this article doesn’t go into detail on the arguments against web3 the above Twitter thread does point out some main points such as insider’s ownership and scalability.

While on that point, this leads us to the current limitations of the Ethereum Blockchain.

Blockchain / Dapp / Smart Contract Limitations:

Before being accused of spreading FUD, while the Blockchain provides a whole array of potential and realized advantages. There are current issues and limitations faced:

Hacks and Vulnerabilities – Although there are great frameworks and smart contract standards, such as Open Zeppelin. Your Smart Contract is only as good as you program it.

Given that Smart contracts can be viewed. Blackhat Hackers have the opportunity to probe through your code for weakens and vulnerabilities. One example is the DAO, Hack of 2016.

ethereum gas fees are too high meme
(taking out your £5 ETH profit)

Gas Fees – Specifically for the Ethereum network. High Gas fees are a notorious issue, with some gas fees costing more than the transaction itself. However, with the upcoming Eth2.0 and release of ZK-Rollups, these issues are hoped to be resolved/ significantly reduced.

User Experience – This may be subjective but worth noting specifically to DApps. When any transaction is required to be written on the blockchain, this would require a new window confirming the transaction – typically via MetaMask or a similar Wallet Provider. This may lead to bad UX for new users.

Scaling: At this current stage, the Ethereum Blockchain is known for its scale issues. Leading to other scaling solutions such as Polygon, (a Layer 2 Scaling solution).
We’ll cover this more in the next post about Building a Social Media DApp on Web 3.0.

Summary: 

Web3 has its use cases for specific applications, and there would be a tonne of upcoming new products and services that would provide value to a specific use case.

We’ve covered a lot. From Web3.0, DApp, ERC20 Tokens, NFTs to IPFS. Either way, DApps is going to be an interesting technology to watch unfold, such as the use of DAO’s for crowdfunding.

If you’re interested in DApp Developing here’s a Full Stack Ethereum Development Guide.

Or if you have any innovative ideas worth contributing join the discord on the social media DApp being developed known as JoinSpace – (an alternative to Reddit, on Web3)

Consider Supporting by Tipping Eth: 0x231543214c0FaaD6570c9bbFAe0Eb07DA0fc8E10

Leave a comment