Understanding the Tech Stack for Web3 DApp Development: A Guide

Introduction

"Ileolami, what is dApp? Why is everyone talking about dApp?” These were Sharon's questions after listening to my conversation with a blockchain developer. "Calm down, Sharon, I will explain everything to you," I responded with a smile. Sharon's curiosity made me take the time to explain everything in detail.

Are you as curious as Sharon, or are you already a developer wanting to start building in web3? This article is for you. In this article, you will learn the tech stack needed for web3 dApps and the role of RPC in dApps including SaaS like dRPC with practical examples and guides.

Be ready to get your hands dirty!

Overview of Web3 dApp Development

Web3 is a version of the web that primarily promotes and advocates for the adoption of “Decentralization” and “Freedom.” This means that people can build and interact with technology without having to follow strict rules or fear losing their identity, money, or audience because no single entity controls the system.

Web3 applications are called Decentralized Applications(dApps). These are applications that are built and operate with a web3 tech stack. This ensures that no single entity has control over the entire system, promoting transparency, security, and user sovereignty.

dApps distribute data and logic across multiple nodes, enhancing resilience and trust. Smart contracts—self-executing contracts with the terms of the agreement directly written into code—replace traditional back-end logic, ensuring that transactions are transparent, immutable, and automated.

Core Tech Stack For dApp Development

Blockchain Networks

Blockchain networks consist of many nodes (computers) working together to communicate and record transactions. Each transaction is divided into blocks, and these blocks are connected chronologically to form a blockchain. This structure ensures that once data is recorded, it cannot be manipulated or deleted without network consensus, providing a high level of security and transparency. Some of the blockchain networks include Bitcoin, Ethereum, Solana, Polkadot, etc.

A typical illustration of how blockchain networks work is shown below ⬇️

                ┌─────────────────────────────────────────┐
                │                                         │
                │           Blockchain Network            │
                │                                         │
                └─────────────────────────────────────────┘

                ┌───────────────┐     ┌───────────────┐     ┌───────────────┐
                │    Block 1    │ ───>│    Block 2    │ ───>│    Block 3    │ 
                │  (Hash: 000)  │     │  (Hash: 123)  │     │  (Hash: 456)  │
                │  Prev: N/A    │     │  Prev: 000    │     │  Prev: 123    │
                └───────────────┘     └───────────────┘     └───────────────┘
                      ▲                   ▲                      ▲
                      │                   │                      │
                ┌──────────┐         ┌──────────┐           ┌──────────┐
                │  Node 1  │         │  Node 2  │           │  Node 3  │
                │ (Miner)  │         │          │           │ (Miner)  │
                └──────────┘         └──────────┘           └──────────┘
                      │                   │                      │
          ┌────────────┴───────┐   ┌──────┴──────────────┐   ┌──────┴──────────┐
          │                    │   │                     │   │                 │
          ▼                    ▼   ▼                     ▼   ▼                 ▼
  ┌──────────────┐       ┌──────────────┐         ┌──────────────┐        ┌──────────────┐
  │  Full Ledger  │      │ Full Ledger  │         │ Full Ledger  │        │ Full Ledger  │
  │  Copy (Node 1)│      │ Copy (Node 2)│         │ Copy (Node 3)│        │ Copy (Node 4)│
  └──────────────┘       └──────────────┘         └──────────────┘        └──────────────┘

            Distributed Ledger             Consensus Mechanism              Distributed Ledger
                 (Blockchain)              (Proof of Work/Stake)                (Blockchain)

Smart Contract Programming Langauges

Smart contracts are self-executing programmable codes written to perform specific tasks based on defined terms and conditions. For example, you and your friend decide to bet $100 on an athlete winning a race. The agreement is that if the athlete wins, the supporter of that athlete takes all the money; otherwise, the other person wins the bet. In this case, the smart contract acts as the agreement. Once the race is over, if the athlete wins, the money is released immediately to the person who supported them.

Smart contracts automatically enforce and execute the terms of an agreement when the conditions are met, eliminating the need for intermediaries. These contracts are deployed on blockchain networks and function as the backend of decentralized applications (dApps).

Programming Languages for Writing Smart Contracts

Different blockchain networks support different programming languages for writing smart contracts. Here, you will learn more about some of the most widely used languages and the networks that support them:

1. Solidity: Solidity is the most widely used language for writing smart contracts, especially on Ethereum. It’s a high-level, statically typed language that is influenced by JavaScript, Python, and C++.
2. Clarity: Clarity is a decidable smart contract language, meaning that the outcome of contract execution is predictable, which adds a layer of security. It is used mainly with the Stacks blockchain to build smart contracts that interact with Bitcoin.
3. Rust: Rust is a systems programming language that’s known for its performance and safety. It’s commonly used in high-performance blockchains like Solana and Polkadot, where speed and efficiency are critical.
4. Vyper: Vyper is designed to be a simpler and more secure alternative to Solidity, with a focus on auditability and security. It reduces complexity by excluding certain features available in Solidity, making it easier to write secure code.
5. Golang: Go, also known as Golang, is a statically typed, compiled language known for its efficiency and concurrency features. It’s often used in blockchain projects that require robust back-end services, such as Hyperledger Fabric and the Cosmos SDK.

Deployment Tools

Deployment Tools are essential tools that provide a structured environment for building decentralized applications (dApps). These streamline tasks like testing, deployment, and interaction with blockchains.

They are:

• Truffle: A popular development framework for Ethereum for web3 developers to simplify the development lifecycle for EVM-based applications. It offers a suite of tools for smart contract development, testing, and deployment.

• Hardhat: is an Ethereum development environment that focuses on smart contract development, providing features like debugging, task automation, script running, compile your contracts and run them on a development network.

• Foundry: is a smart contract development kit that provides a comprehensive suite of tools for building and deploying decentralized applications (dApps) on the Ethereum blockchain.

• Anchor: A framework for developing Solana programs, simplifying the process of writing and deploying smart contracts.

• Solana CLI: A command-line interface for interacting with the Solana blockchain.

• Block Explorer: are essential tools for navigating and understanding blockchain networks. They provide a user-friendly interface to explore transactions, addresses, and other relevant data. e.g Etherscan, Solana Explorer, Polygon Scan, BscScan, Avalanche, Cardano etc.

Front-End Development and Integration Tools

While smart contracts power the backend of a dApp, the front-end is what users interact with. Front-end development tools and frameworks are essential for creating user-friendly interfaces that communicate with smart contracts on the blockchain.

They are:

• Javascript frameworks and libraries: These are used to build the functionality of User interface and experinece. E.g React.js, Next.js, Vue.js, React native etc.

• Css Frameworks and Libraries: These are used to style and beauitfy the UI to make is appealing E.g., TailwindCSS, Bootstrap, MaterialUI, fontawesome, etc.

• Web3.js: web3.js is a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.

• Ether.js: It is often used to create decentralized applications (dapps), wallets and other tools and simple scripts that require reading and writing to the blockchain.

• Viem: Viem is a low-level TypeScript Interface for Ethereum that enables developers to interact with the Ethereum blockchain, including: JSON-RPC API abstractions, Smart Contract interaction, wallet & signing implementations, coding/parsing utilities and more.

• Wagmi: wagmi is a development tool for EVM-based blockchains that provides over 20 React hooks for interacting with wallets, contracts, and transactions.

• Scaffold-Eth: Scaffold-ETH is an open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.

• Solana web3.js

Wallet and Wallet Intergration SDK

Wallets are important in dApps as they manage users’ private keys, enabling them to sign transactions and interact with the blockchain. Wallet integration SDKs provide a streamlined way to connect users' wallets with the dApp, allowing secure and seamless interactions.

Some of them are:

1. MetaMask: MetaMask allows users to store and manage account keys, broadcast transactions, send and receive Ethereum-based cryptocurrencies and tokens, and securely connect to decentralized applications through a compatible web browser or the mobile app's built-in browser.
2. Trust Wallet: is a multi-chain self-custody cryptocurrency wallet and secure gateway to thousands of Web3 decentralized applications (dApps).
3. WalletConnect: WalletConnect gives developers the tools to build user experiences that make digital ownership effortless, intuitive, and secure.
4. Thirdweb: thirdweb is a platform that provides a suite of tools for building, launch and manage a Web3 project with provide SDKs, hooks etc.
5. RainbowKit: RainbowKit is a React library that makes it easy to add wallet connection to your dapp. It's intuitive, responsive and customizable.

Decentralized Storage

Decentralized storage solutions are used to store off-chain data, such as files, metadata, and large datasets, in a manner that aligns with the web3’s decentralization. Decentralized storage is distributed across multiple nodes, ensuring security, redundancy, and censorship resistance.

For examples:

1. IPFS: IPFS is one of the leading storage dApps in Web3 due to its unique solutions and popularity. It solves most issues that limit the present storage system by providing a secure and permanent storage system.
2. Arweave: Arweave is a decentralized file storage protocol where stored data will perpetually exist on chain.
3. Orbit DB: Orbit DB is a peer-to-peer database for web3.
4. Chain Safe: Chainsafe is an R&D web3 company building protocols, web3 games, and interoperability. It provides a Web3 games development suite and provides secure decentralized file storage backed by the Filecoin network.
5. Filecoin: Filecoin is a decentralized storage network for humanity to perpetually keep data.

Role of Remote Procedure Call (RPC) in dApp Development

According to Alchemy, Remote Procedure call(RPC) is a lightweight software communication protocol, which allows a program (the client), to communicate with a remote program (the server) hosted on a different network without needing details about the server’s network.

In a short term, RPCs act as interfaces between dApp on one computer (the client) and program B (the server), built on a different blockchain network. RPC allows dApps to interact with blockchain networks and feed dApps the required data needed to function as expected e.g. Viewing account status, sending transactions etc.

RPC is made up of Node and Endpoint.

• RPC Node: These are servers that allow dApps to submit remote procedure calls. RPC nodes as the backbone of a blockchain network. They validate and relay transactions, ensuring the integrity and security of the networks.

• RPC endpoints act as communication channels between RPC clients (web applications) and RPC nodes, providing an interface for clients to interact with the blockchain.They use URL protocol such as **[Hypertext Transfer Protocol (HTTP) ](https://hop.extrahop.com/resources/protocols/http/#:~:text=What%20is%20HTTP%20(Hypertext%20Transfer,on%20the%20World%20Wide%20Web)**or WebSocket(WS) to serve dApps requested data.

The Role of RPC Includes:

1. Interacting with Blockchain Network: RPC serves as a communication bridge between dApps and blockchain networks, ensuring easy interaction and information exchanges.
2. Executing Smart Contracts: when dApps needs to execute a smart contract, an RPC is employed to send a request to the server. The node then runs the contract’s code on the network and the result is sent to the dApp.
3. Real-Time Data Fetching: through RPC, dApps get real-time data from the blockchain such as transaction status, event logs, or block information. Users can have reliable information from the blockchain network.
4. Node Management: RPC coordinates the synchronization process between blockchain nodes to maintain a consistent and correct ledger.

An illustration of the communication process between dApp and blockchain networks is shown below:

                 +--------------------------------------------------+
                 |                                                  |
                 |            Decentralized Application (dApp)      |
                 |                   (Client)                       |
                 |                                                  |
                 +--------------------------------------------------+
                                   |
                                   | Makes an RPC Call
                                   v
                 +--------------------------------------------------+
                 |                                                  |
                 |             Blockchain Node                      |
                 |                 (Server)                         |
                 |                                                  |
                 +--------------------------------------------------+
                                   |
                                   | Processes the Request
                                   v
                 +--------------------------------------------------+
                 |                                                  |
                 |            Blockchain Network                    |
                 |     (Handles Smart Contracts, Ledger Data)       |
                 |                                                  |
                 +--------------------------------------------------+
                                   |
                                   | Fetches/Executes Data
                                   v
                 +--------------------------------------------------+
                 |                                                  |
                 |         Response with Requested Data             |
                 |                                                  |
                 +--------------------------------------------------+
                                   | 
                                   |    Returns Data to dApp
                                   v
                 +--------------------------------------------------+
                 |                                                  |
                 |            Decentralized Application (dApp)      |
                 |                   (Client)                       |
                 |                                                  |
                 +--------------------------------------------------+

                 +--------------------------------------------------+

In order to simplify the complexity of setting RPC nodes and endpoints, RPC node providers (Software as a Service) takes aways the burden from developers such as dRPC. They provides developers with configured RPC endpoints that can be used to interact with blockchain deveopers.

dRPC serves as a gateway for Web3 developers and users to access a distributed network of independent third-party partners and public nodes. It is designed to distributed workload and ensure that requests are handled efficiently, no matter how busy the web3 ecosystem becomes.

It offers the following features:

1. Personalized Support: dRPC provide personalized support to meet your specific needs as a developer or enterprise. This ensures you can quickly resolve issues and optimize your RPC usage based on your unique requirements.
2. Advanced Analytics: You can access in-depth analytics that provide insights into your API usage. This includes metrics on Total Requests by the network, Distribution of requests among providers, Consumption overview, Distribution of requests by key, etc., allowing you to better monitor and optimize your dApp interactions.
3. Important Notifications: it offer notifications for critical events and updates, such as when a node goes down or when there are changes in the network that could affect your dApp. This keeps you informed and allows you to take proactive measures.
4. MEV Protection: It also includes protection against Maximal Extractable Value (MEV) attacks, helping secure your transactions from being front-run or manipulated by malicious actors, thereby safeguarding the integrity of your dApp's operations.
5. No Rate Limit: Unlike many other RPC providers, it offer services with no rate limits, allowing unlimited API calls. This is particularly beneficial for high-traffic dApps that require consistent and unrestricted access to blockchain data.
6. Unlimited API Keys: It allows you to generate unlimited API keys, making it easier for you to manage access across multiple projects or teams without the stress of sharing or reusing keys, ensuring secure and scalable access control.
7. Crypto Payments: It also support payments in cryptocurrency, providing a flexible and decentralized method for paying for RPC services.

Implementing Practical Examples Using dRPC

How to Create an Account

1. Visit dRPC, and Click on the Connect button.

2. You can either create an account using your gmail account or wallet; it is recommended to use your wallet instead.

Ensure you’ve already have a wallet extension installed on your browser

3. Grant access by clicking on sign a message to continue
4. After you’ve grant dRPC to access your wallet, you will see your dashboard as seen below. Congratulations, you’ve successfully create an account on dRPC🎉

How to Create an API Key

1. Click on create new button on your dashboard.
2. Enter the name of your key(name of your project), and click on create.
3. You will be navigated to another page; click on Key settings
4. Scroll down, you will see API Key, and click on the clipboard icon 📋to copy your API Key

Congratulations, you’ve successfully create your API Key for your dApp 🎉

How to Generate Endpoints

1. Go to your dRPC dashboard.
2. Click on the API Key name you created earlier, mine is Image save app
3. You will be navigate to the another page showcasing the various Blockchain networks’ endpoints under the Endpoints.

4. Choose any blockchain of your choice(based on the blockchain network you are deploying your dApp to).
5. Select the chain network’s mode either mainnet or testnet
6. Select the RPC endpoint URL protocol of your choice, either HTTP or WS.

7. Click on the clipboard icon 📋to copy the Endpoint.

Note: the endpoints always end with the API keys

Congratulation, you’ve successfully generate an RPC endpoint for your dApp 🎉

How to Know Your Enpoint Analytics

1. Click on Stats on the Navbar in your dashboard

2. Under the Overview page, you will see stats based on Total Requests by network, Distribution of request among providers, Consumption overview and Distribution of requests by key.

3. Under Detailed Stats , you see detailed stats on Method calls over time, Latency by network(average) and Method.

4. Under Error log. This log contains requests with errors for the last 3 days, which can be opened and viewed in detail.

How to Add Funds to Your dRPC Account

1. Go to your dashboard.

2. Click on Upgrade on the nav bar.

3. You see a pop up Add Fund showing the Input field and the amount of CU you will receive based of the inputed amount.

Another interesting feature about dRPC is that you can pay in any cryptocurrecncies of your choice

4. Click on the dropdown icon beside the cryptocurrency name.

5. Select the token of your choice.

6. The Amount of CU you will receive display automatically as soon as you are entering the amount.

7. Proceed to pay and the amount will be deducted from your connected wallet automatically.

Congratulation, you’ve successfully add funds to your dRPC account 🎉

How to Check Balance

1. Go to your dashboard.
2. Click on Setting on the Navbar, and Click on Billing .

You will see your Current balance and Transaction history

How to Build an Coffee Payment dApp dRPC API Key and Endpoint

Now that you understand the core fundamental tech stack for dApp development and the role of RPC like dRPC, it's time to put this knowledge into practice. You will learn how to build a Coffee Payment dApp.

Overview

The Coffee payment dApp is a decentralized application built using React.js and dRPC API key and Endpoint. This project demonstrates how to create a simple dApp that allows users to make payment easily from their wallet on the Ethereum network.

The dApp leverages smart contracts to faciliate payment, retrieve total number of coffee sold and total amount of ether made in decentralized manner, ensuring security, transparency, and immutability.

Features

• Payment: Users can payment from the wallet.

• Retrieve Coffee price, Total Coffee sold and Ether received.

• Price In USD: The dApp also convert the price of coffee and ether received to USD using Coingecko API.

• User-Friendly Interface: A simple and intuitive frontend built with React.js, Vite.js, Typescript, Web3.js and TailwindCSS for easy interaction with the dApp.

Follow the detailed tutorial below to get started.

1. How to deploy a smart contract to Ethereum Network using dRPC API Key and Endpoints.
2. How to integrate Smart contract to Frontend.

Conclusion

Web3 applications are changing the industry by enabling developers to create apps that emphasize autonomy, decentralization, and transparency. This article has provided you with a comprehensive understanding of the tech stack required for building dApps and the crucial role of RPC like dRPC in their development.

By now, you should feel inspired to dive deeper into web3 and start building your projects. For further learning, search for "WEB3" on HackerNoon and explore the excellent content from other writers.

If you found this article helpful, please like, share, and comment.

References

58 Top Development Frameworks

List of 29 Decentralized Storage Tools(2024)

Wikipedia

What are Blockchain RPC Node Providers?

What is an RPC Node?

A Guide to Using RPC Nodes for Better Blockchain Development

5 Best Dymension RPC Providers in 2024

Next Article →