November 3, 2022

How to build a digital product for Web 3.0

We’ll walk you through the fundamentals of dApps development.

Neil Graham

Neil Graham

Former Copywriter at Z1

How to build a digital product for Web 3.0
🍪
We use cookies to enhance your browser experience. By using this website you agree to our Cookie Policy.

The internet has become so interconnected with us that we can now barely imagine a world without it. However, social, political, and economic flaws still need to be addressed. Will dApps be the answer to building a better internet?

Web 1.0

“I have no desire to be a part of the internet”. These were the now infamous words of NBC anchor Katie Couric on the Today Show in 1994 when discussing the future and the potential of the World Wide Web—Web 1.0—with her fellow anchors. Ironically, she would later share the clip on her Instagram account in April 2018 with the caption, "Remember when we didn’t know what internet was? Crazy to think about now, right?".

It is crazy. Many of us are from the last generation to live without the internet, and the first to live with it.

We can still recall its introduction, perhaps with a slight shudder, including the ever-lasting dial tone, the frustration of being disconnected when someone picked up the landline, the five-minute wait for a web page to load, the five-hour wait to download a song, the outrageous multi-colored fonts, and the lawless, Wild West-nature of AOL chat rooms.

Despite the initial ridicule (and buffering time), there was excitement in the air. The future had arrived. Built as read-only using raw HTML, we now had a decentralized content delivery network where users could consume information like never before.

Web 2.0

As the internet’s popularity expanded, so did its reliance and the need for dynamic, engaging content that was responsive to user activity. There was a requirement for it to become faster, more dependable, and more accessible. But as Douglas Rushkoff pointed out in 2010, “Far from freeing people and ideas from hierarchies, the digital realm reinforced central control on a whole new level”. The Internet became more regulated and more centralized.

This next stage of evolution brought us Web 2.0, a transition inspired by user experience, mass production, and mass consumption. Companies such as Facebook and Google helped drive this development by creating social media platforms, search engines, and internet-enabled devices, including smartphones and laptops.

The web matured into a read-write network where people could create and publish their own content, - be it blogs, videos, or podcasts - interact with friends, strangers, and even celebrities; while online businesses began to grow exponentially beyond any imagination, and information was now instantaneously accessible.

Developers had moved from raw HTML to more advanced technologies, namely JavaScript, AJAX, and HTML5, and began focusing on the integral concepts of rich web application, web-oriented architecture, and social web.

Web 3.0

Presently, the internet has become so interconnected with the way we live our lives that we can now barely imagine a world without it. However, although it has served us well, and has undoubtedly launched us into the future, there are still many flaws—mainly social, political, and economical—that need to be addressed.

“Web 1.0 was the era of content consumption, Web 2.0 of content creation, and Web 3.0 is defined as the age of property, or ownership.”
Héctor Giner, Z1's CEO and Cofounder.

With a handful of behemoth corporations owning most of the internet, and with users having to surrender their data in exchange for participation, we are now seeing steps being taken to decentralize this power and give it back to its users. Developers and entrepreneurs are already designing and planning for this latest iteration of web development - Web 3.0. a.k.a Web3.

Z1 co-founder and CEO, Héctor Giner, describes the evolution, “The crypto world, and blockchain technology like NFTs, enables or generates tools that make that community connect in a unique way. It's a direct connection between creators, distribution, and ownership business models. Web 1.0 was the era of content consumption, Web 2.0 of content creation, and Web 3.0 is defined as the age of property, or 'ownership'; the user can be the owner of what they consume and that is a differential value.”

Based on blockchain technology, Web 3.0 is a new iteration of the World Wide Web, and, although still in its early days, we are starting to see a variety of products emerging such as cryptocurrencies, Non-Fungible Tokens (NFTs), and Decentralized Applications (dApps). With a focus on decentralization, these products are managed and maintained by its users as well as the pre-defined rules as agreed upon by its members.

So, how do you begin to craft a digital product for Web 3.0?

1. A solid grasp of Web 2.0 fundamentals

A vertical structure with an orange circle inserted between one of the blocks, illustrated by Z1.

Z1’s VP of Engineering, Javier Borrego, is currently working on several Web 3.0 products for our clients, including a chat app aiming to be the Web3 alternative to Discord called Console. When asked how and where to begin crafting a digital product for this latest iteration of the World Wide Web, he says, “It’s important to analyze whether or not the product is most suited for Web 3.0. Are you doing it because it’s fashionable? Or is it because Web 3.0 is the best place for it? In many cases, Web 2.0 is still the most efficient platform.”

“It’s important to analyze whether or not the product is most suited for Web 3.0. In many cases, Web 2.0 is still the most efficient platform to build your digital product.”
Javi Borrego, Z1’s VP of Engineering.

If you and your team decide that Web 3.0 is the right place for your product to grow, you would still need to have a solid grasp of the fundamentals of Web 2.0. In particular, it would be necessary to understand web technologies such as Next.js, React.js, and JavaScript in order to be able to connect your product to the blockchain. Javier: “Even though Web 3.0 is new technology, many aspects such as frontend development still rely on Web 2.0 computing languages.”

2. The blockchain, where your product resides

A Z1's simple illustration of a row of overlapping circles of varying sizes, led by a huge orange circle.

Assuming your developers are already well-versed in Web 2.0, you would then need to learn, at least, the basic architecture and processes of blockchain. This is is important because it’s through blockchain, and the rules developed within it, that your product will reside. 

Blockchain works by having the technology and its users authenticate any given transaction by an authorized participant. In turn, this creates a block that contains detailed information about the transaction data, including a hash of the previous block, and a timestamp that shows when the block was mined and validated. The data within the latest block is then delivered to every node in the network.

Blockchain technology can be considered an important milestone in the evolution of the internet. 

Z1’s Héctor Giner reiterates that “Although many people are still uncertain about the stability of cryptocurrencies and NFTs, blockchain technology can be considered an important milestone in the evolution of the internet.”

3. dApps

A network of nodes with an orange circle behind it by Z1.

A dApp is a decentralized application that runs on a blockchain system autonomously through the use of ‘smart contracts’ and they allow users to carry out transactions and interact with a blockchain network such as Ethereum. It’s most likely that your Web 3.0 digital product will be in the form of a dApp, therefore, learning how these function would be the next part of the process.

They are visually very similar to applications built on Web 2.0, with their backend code that defines the business logic, and their frontend code that defines the UI logic. However, they run on a decentralized Peer-to-Peer network, meaning there is no centralized database for the app state nor a centralized web server for the backend logic. Instead, they are maintained by nodes on a state machine i.e. a blockchain.

dApps are maintained by nodes on a state machine i.e. a blockchain.


You would need to upload the backend code onto a shared state machine, such as Ethereum, which is upheld by the rules in place set by the members of the network using P2P nodes and smart contracts. Although Ethereum isn’t the only available state machine, many developers are turning to it first as there seems to be more information on its architecture as well as plenty of tech support available.

The simplest place to upload the frontend would be on a decentralized storage network. For many users, it isn’t cost effective to store everything on the blockchain as many fees are incurred for maintaining nodes and making changes. 

Many developers are turning to Etherum first as there seems to be more information on its architecture as well as plenty of tech support available.

One way to avoid these costs is to store data on a distributed file system such as the InterPlanetary File System (IPFS), a protocol and peer-to-peer network for storing and sharing data. It works using a cryptographic hash called a CID, which is a content identifier that enables the network to identify and retrieve each file in a global namespace that connects all computing devices. Popular alternatives include Filecoin and Swarm.

4. Understanding smart contracts

Several stacked rectangles in a pyramid shape with an orange diamond at the top.

Smart contracts are programs stored on a blockchain, which implement the rules of the state machine and process any changes made to the state when predetermined conditions are met. This concept is one of the most important to master when it comes to building your Web 3.0 product.

Although your dApps’ frontend functions in a similar way to its role within Web 2.0, it also communicates with the logic set by smart contracts. 

Each node on a state machine stores the code and data of each smart contract. Therefore, any node on the blockchain can request a transaction, which in turn, will be executed by a miner who will then complete the transaction and implement the changes to the rest of the network. Consequently, smart contracts are self-verifying and self-executing, as well as robust and resistant when it comes to manipulation.

One of the most common languages used for building and creating smart contracts is Solidity, a computing language that was originally inspired by JavaScript and C++, and although designed by the Ethereum Network, is compatible with various blockchain systems.  

Smart contracts are self-verifying and self-executing, as well as robust and resistant when it comes to manipulation.

In general, each blockchain system uses particular languages for deploying smart contracts and making changes. For example, Clarity is a ‘non-Turing’ language that was constructed by Blockstack for their Stacks blockchain and also operates on the Bitcoin blockchain.

5. Testing smart contracts

An orange circle with elements of scientific analysis superimposed on it.

Smart contracts are immutable, meaning once the code has been shipped, it can’t be edited, so before deploying them, it is essential to test them as much as possible. This is a big change for most developers who are used to iterative development. 

However, there are plenty of testing libraries that allow developers to simulate their dApps, and therefore, be able to spot any errors in code as well as to gauge the UI and UX. Popular frameworks for running, testing, executing commands, and inspecting states include Remix, Mocha, Chai, and Ganache.

6. Deploying smart contracts

An orange circle illustration with a trail of movement to the right from which black diamonds of different sizes appear.

Once the testing is complete and you are ready to deploy your smart contracts to the Ethereum network, for example, you can use Hardhat or Truffle, two of the most popular tools for contract deployment. However, this costs ether (ETH) and will be subject to gas fees. 

‘Gas’ is the measurement of computational effort used to execute commands on Ethereum, and with each transaction on the network, you are charged a fee for this effort. In order to finalize deployment of the smart contract, you will need access to an Ethereum node.

Any node can request for a transaction to be executed, however, setting up a new Ethereum node is extremely time consuming and can incur large gas fees, therefore, many developers either turn to public nodes or via an API key using a third-party service such as Infura, Alchemy, and Quicknode

Every provider compatible with Ethereum uses a JSON-RPC specification, which is a stateless, lightweight, and remote procedure call protocol that defines the logic and ensures smart contract rules are implemented.

7. Signing transactions

A network of nodes with an orange circle behind it where one of the nodes is open.

The next step would be to ‘sign’ the transaction. You can do this using your private key with a signer such as Metamask, which is a tool designed to facilitate key management and transaction signings.

It is essential to sign each transaction on the blockchain with a one-time confirmation code because it verifies and authorizes the transaction. Many developers turn to Metamask for signing because it is also a provider to the blockchain as it connects to nodes managed by Infura, therefore, reducing reliance on further third-party providers.

8. Master the concept of the wallet

A wallet full of orange circles of different sizes.

Wallets are essential for interacting with the blockchain as it allows users to complete transactions quickly and securely, thanks to its signature, using currencies such as Bitcoin and Ether. There are an array of wallets available, however, due to its multifunctionality, many use Metamask to access their wallet through a browser extension or mobile app.

To connect the frontend of your dApp with blockchain smart contracts, both Web3.js and Ethers.js libraries can be used to implement the Ethereum API. Web3.js connects with local or remote Ethereum nodes using HTTP and Websockets as well as any other communication protocols while Ethers.js connects the JavaScript frontend with smart contracts.

Why should I build my product on Web 3.0?

Although it’s not clear how successful this latest iteration of the internet will be, there are a number of reasons why so many developers are hoping it triumphs. Firstly, decentralization is key. This is about ownership, and being in control of your data and not having the internet governed by a small number of giant corporations. It’s also about security and knowing that there are a number of failsafes in place to protect your information. Neither governments, businesses, nor other individuals will be able to control servers and services, and no one will have the capability to manipulate one’s identity. 

What’s more, although many of the advantages focus on the individual and decentralization, Web 3.0 relies on community and collaboration. Javier Barrego explains, “It’s being created by developers, which means it’s very intuitive and there’s a great support network that encourages sharing and learning. There is transparency to everything.”

Why Web 3.0 could fail

While many see Web 3.0 as the future of the internet, Javier is keen to point out that, “At the moment, Web 3.0 is not taking over from Web 2.0, nor is it competing against it. It’s simply another way to develop.” 

With Web 2.0 remaining the most popular iteration for a while, the instability and uncertainty surrounding Web 3.0 means there is less confidence in its support communities, and businesses may be deterred from investing in such technology until the pathway is clearer. 

The carbon footprint generated by submarine cables, antennas, and data centers as well as the manufacturing of such components, including installation, and the impact of electricity use, is a concern.”

In addition, there is a huge amount of data to store, which will be severely time consuming, not to mention, expensive, but above all else, it could be unhealthy for our environment. The carbon footprint generated by submarine cables, antennas, and data centers as well as the manufacturing of such components, including installation, and the impact of electricity use, is a concern.

Despite this, Web 3.0 certainly has its cynics. Elon Musk referred to it in a tweet from December 2021 saying it ‘seems more marketing buzzword than reality right now’ while former Twitter CEO, Jack Dorsey, claimed ‘It’s ultimately a centralized entity with a different label’. Renowned software engineer, Stephen Diehl, called the concept out on his personal website when he described it as ‘a vapid marketing campaign that attempts to reframe the public’s negative associations of crypto assets into a false narrative about disruption of legacy tech company hegemony.’

Back to the future

In November 2021, Bitcoin was valued at $69,000 per unit, but by June 14 2022, its value had dropped 67% to $21,000 per unit. Many skeptics, including the legendary Warren Buffet, may see this as proof that crypto is ultimately doomed to fail, however, blockchain technology offers a lot to be positive about.

 Only time will tell. Just ask Katie Couric.