A Hands-on Guide to Building Your First Decentralized Application

What is a DApp?

A DApp, or De-centralized Application, is a software application that runs on a distributed computing system, most commonly the blockchain. Unlike traditional applications that run on centralized servers, DApps operates on a decentralized peer-to-peer network to resist censorship from central authorities and have no single point of failure. This decentralized nature is achieved through smart contracts, self-executing contracts with the terms of the agreement directly written into source code. Smart contracts replicate the logic of the DApps.

Prerequisites

Before diving into DApp, ensuring you have some foundational knowledge is essential. This will help you understand the steps we'll be taking and enable you to troubleshoot any issues that might arise.

Basic Web Development skills

• HTML (HyperText Markup Language): This is the standard markup language for documents designed to be displayed in a web browser. You should be familiar with creating basic structures using tags like <div>, <a>, and <input>.
• CSS (Cascading Style Sheets): CSS describes how HTML elements are displayed. A basic understanding of selectors, properties, and values will be beneficial. For instance, you should know how to set the background color of an element or style a button.
• JavaScript: As the scripting language that powers the dynamic aspects of web pages, a foundational knowledge of JavaScript is crucial. You should be comfortable with variables, functions, and event handling. For our DApp, JavaScript will play a pivotal role in connecting our front end to the blockchain.

Please note that this ‘vanilla’ approach is not used anymore. Developers use frameworks like Next.js for the front end, TailWind CSS for styling, and Hardhat for smart contract development. With that being said, in this tutorial, we demonstrate the ‘old school’ approach to give you a solid foundation so you can be comfortable moving to more advanced technologies.

Blockchain concepts

While not strictly necessary for this tutorial, a general understanding of blockchain concepts can provide valuable context. If you're new to decentralized blockchain, here are some key ideas to be aware of:

• Smart contracts: self-executing programs where the terms of agreement or conditions are written into lines of code. They run on the blockchain and are immutable once deployed unless designed using an upgradable pattern, but this is not our case.
• EVM (Ethereum Virtual Machine): The EVM is the runtime environment for smart contracts in Ethereum. It's a global, decentralized computer where each operation is replicated across thousands of nodes in the Ethereum network.
• EVM-compatible chains: These blockchains have been designed to be compatible with Ethereum's EVM. This means they can execute smart contracts and DApps developed for Ethereum without any or minimal modifications. Examples of EVM-compatible chains include Binance BNB Chain, Polygon, and Avalanche. The Sepolia testnet we'll be using is the Ethereum testnet designed to test DApps; it allows us to develop without spending real funds.
• MetaMask: This is a crypto wallet and gateway to blockchain Dapps. For our DApp, MetaMask will serve as the bridge between the user and the blockchain, allowing them to interact with our smart contract.

If you're unfamiliar with these concepts, don't worry! The tutorial is designed to guide you step by step. However, a bit of background reading can enhance your understanding and experience.

Tools and technologies

This tutorial leverages a combination of tools and technologies to build our DApp. Each plays a pivotal role in ensuring our DApps runs smoothly and interacts seamlessly with the blockchain.

Overview of key Tools:

• Ethers.js provides tools to interact with the Ethereum blockchain. It allows us to connect our front end to our smart contract, send transactions, and query the blockchain.
• Solidity is the language to write smart contracts for the Ethereum blockchain. It's statically typed, supports inheritance, and is designed to target the EVM.
• MetaMask is a crypto wallet and gateway to blockchain DApps. It's a browser extension that improves user experience via interacting with the DApps on the Ethereum blockchain, managing their accounts, and signing transactions.
• Sepolia testnet provides a testing environment similar to Ethereum but without real-world value. This allows DApp developers to test their DApps without spending real Ether.
• Remix IDE is an open-source web and desktop application that helps in smart contract development, written in Solidity language for the Ethereum blockchain. It provides features like testing, debugging, and deploying smart contracts and has a built-in static analysis module to identify vulnerabilities. This tutorial uses the Remix IDE to deploy the smart contract to the Sepolia testnet.

Setting up the development environment:

Installing Node.js

• Node.js is a runtime environment that lets us run JavaScript code server-side. It's essential for our development central server.
• Download Node.js and follow the installation instructions for your operating system.

Check out Web3 Node.js: From zero to a full-fledged project to learn more about establishing a Web3 Node.js project

Installing lite-server:

Once Node.js is installed, we can use its package manager, npm, to install other tools.

Open a terminal or command prompt and run the following command to install lite-server globally:

 npm install -g lite-server

This lightweight development server serves our web page. It reloads it live as we make changes.

Get a Sepolia RPC node with Chainstack

‍
An RPC node allows you to communicate with a blockchain and set up a Sepolia node using Chainstack; this node will be used in your MetaMask wallet.

Chainstack provides unified access to multichain node and data APIs, distributed compute and storage space, identity management and security testing, and the ever-expanding list of services and tools to build amazing DApps across all prominent Web3 protocols.

• Sign up with Chainstack.
• Deploy a node.
• View node access and credentials.

‍

Setting Up MetaMask with the Sepolia testnet:

1. If you haven't already, install the MetaMask extension for your browser.
2. Open MetaMask and set it up with a new or existing Ethereum account.
3. To connect to the Sepolia testnet, click the network dropdown menu (usually set to Ethereum Mainnet by default) at the top of the MetaMask window.
4. Select Custom RPC and enter the details for the Sepolia testnet.

• Network name: Sepolia Chainstack
• New RPC URL: The HTTPS URL you find in your Chainstack console
• Chain ID: 11155111
• Currency symbol: ETH
• Block Explorer URL: https://sepolia.etherscan.io/ (Optional)

Once connected, you can get test Sepolia tokens from the Chainstack Faucet to use in your DApp.

A faucet is an application that distributes testnet tokens. This is an important part of the ecosystem, allowing developers to acquire tokens easily. Note that testnet tokens have no monetary value. The Chainstack faucet distributes cryptographic tokens on various testnets and even exposes an API for developers to include the faucet in their development workflow.

With these tools and your development environment set up, you're well-prepared to dive into the creation of your DApp!

Project structure

Building a DApp involves orchestrating various components, each with its distinct role, to create a cohesive application. Let's break down the files we'll be crafting for our DApp and understand their purposes:

Overview of key files:

index.html:

• Purpose: This file is the backbone of our DApp front end. It defines the structure of our webpage, including elements like buttons, input fields, and display areas.
• Content: Contains the HTML markup that lays out the visual components of our DApp. It's where users will interact with our Dapps, inputting data and triggering blockchain transactions.

style.css:

• Purpose: While index.html provides the structure, style.css gives it life and aesthetics. This file dictates the visual style of our DApp.
• Content: Contains CSS rules and properties that style our HTML elements. This includes color schemes, layouts, and responsive designs to ensure our DApp looks polished and user-friendly.

script.js:

• Purpose: The dynamic functionality of our DApp resides here. This file bridges the gap between our front end and the blockchain, enabling user interactions to translate into blockchain transactions.
• Content: Contains JavaScript code that leverages the ethers.js library. It handles events like button clicks, interacts with our smart contract, and updates the front end based on blockchain data.

SaveString.sol:

• Purpose: A smart contract is at the core of our app; it governs the logic and rules of our DApps on the blockchain.
• Content: Written in Solidity, this file defines the contract that allows users to save and retrieve strings on the blockchain. It contains functions, state variables, and rules for interacting with the stored data.

By understanding the role of each file, we can better visualize how they interplay to form our DApp. As we progress through the tutorial, we'll delve deeper into the content of each file, crafting our application piece by piece.

Building the front-end

The front end of our DApp is the visual user interface that users will interact with. It's built using standard web technologies: HTML for structure, CSS for styling, and JavaScript for functionality. Let's break down each component:

Create a new directory where you want to host your project; use your favorite IDE.

Creating the basic HTML structure

The HTML code lays out the structure of our DApp. In the new directory, create a new file named index.html and paste the following code:

Here's a breakdown:

Document structure: The <!DOCTYPE html> declaration defines the document as HTML5. The <html> element is the root element of an HTML page, and the lang="en" attribute declares English as the language of this document.

Head section: Inside the <head> tag, we have:

• Meta tags for character set, compatibility, and viewport settings.
• A link to the external CSS stylesheet,style.css, which we’ll make next.
• Scripts for the ethers.js library (which allows us to interact with the Ethereum blockchain) and our own JavaScript file, script.js.
• The title of our DApp and a meta description for search engine optimization.

Body section: The <body> tag contains all the visible content of our DApp:

Header: Introduces our DApp with a title and subtitle.

Main content: This is divided into several sections:

• An informational paragraph about the DApp.
• A section to connect the user's MetaMask wallet.
• An input section where users can input and save a string to the blockchain.
• A section where users can retrieve the string they saved.

Each section is clearly labeled and organized, making it easy for users to understand and interact with the DApp.

If you open the terminal in the directory, you can already serve and see the page in the browser, but there is no styling yet, so it would not be organized. You can serve it with the lite-server command; then, you can open it in the browser at http://localhost:3000.

Note that we import the ethers library using a CDN (Content Delivery Network), which is not the best practice security-wise, but it’s a good way for prototypes and proof of concepts.

‍

Styling with CSS

In the same directory, create a new file named style.css and paste the following code:

/* Define common variables */
:root {
  --flex-center: {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  };
}

body {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

.center {
  text-align: center;
}

/* Use a more descriptive class name */
.grid-layout {
  display: block; /* Changed from grid to block */
}

/* Combine common properties */
.grid-item {
  @apply --flex-center;
}

.info-section {
  /* Removed grid-area definition */
}

.connect-section {
  background-color: #ffd700;
  padding-bottom: 0.625rem;
  @apply --flex-center;
}

.input-section {
  background-color: DodgerBlue;
  padding-bottom: 0.625rem;
  @apply --flex-center;
}

.retrieve-section {
  background-color: Tomato;
  @apply --flex-center;
}

/* Centering text for titles */
h1,
h2,
h3 {
  text-align: center;
}

a {
  padding-bottom: 0.625rem;
}

/* Centering content within each section */
.info-section,
.connect-section,
.input-section,
.retrieve-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; /* This will ensure that even the text within p tags and other elements is centered */
}

/* Centering the input field */
.input-section input {
  margin: 10px 0; /* Adding some margin for spacing */
  align-self: center; /* This will center the input field if the parent is a flex container */
}

button {
  width: 150px;
  padding: 8px;
  border-radius: 10px;
  background-color: #18e9db;
  color: #7c7272;
  border: none; /* Removing the default border */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: all 0.3s ease; /* Smooth transition for all properties */
}

button:hover {
  background-color: #2980b9; /* Darker shade of the original color */
  color: #e5d4d4;
  transform: scale(1.05); /* Slightly scale the button */
}

button:active {
  transform: scale(0.95); /* Slightly reduce the size when the button is actively clicked */
}

label {
  padding: 20px;
}

Here is a breakdown:

Styling with CSS

Defining common variables: The root pseudo-class defines global CSS variables. The -flex-center variable combines common flexbox properties to center content horizontally and vertically.

:root {
  --flex-center: {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  };
}

Basic styling: The entire webpage's default text alignment and font are set. The primary font is Arial, with Helvetica and sans-serif as fallbacks.

body {
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

.center {
  text-align: center;
}

Layout styling: The .grid-layout class sets the elements to display as block-level, occupying the entire width of their parent container. Despite its name, it doesn't utilize the CSS Grid system but behaves like standard block elements such as <div> or <p>.

.grid-layout {
  display: block;
}

Section styling: Each section of the DApp (information, connection, input, and retrieval) is styled with distinct background colors. The @apply rule is used to apply the -flex-center styles to these sections.

.connect-section {
  background-color: #ffd700;
  padding-bottom: 0.625rem;
  @apply --flex-center;
}

.input-section {
  background-color: DodgerBlue;
  padding-bottom: 0.625rem;
  @apply --flex-center;
}

.retrieve-section {
  background-color: Tomato;
  @apply --flex-center;
}

Text centering: All titles (h1, h2, h3) and content within each section are centered.

h1, h2, h3 {
  text-align: center;
}

.info-section, .connect-section, .input-section, .retrieve-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center; /* This will ensure that even the text within p tags and other elements is centered */
}

Input fields and button styling: The input field is centered and given some margin for spacing. The button styling provides a blue background with white text, a smooth interaction transition effect, and no default border. On hover, the button darkens and slightly enlarges, while on active click, it reduces in size for a tactile feedback effect.

.input-section input {
  margin: 10px 0;
  align-self: center;
}

button {
  width: 150px;
  padding: 8px;
  border-radius: 10px;
  background-color: #3498db; /* Added a default background color for demonstration */
  color: #ffffff; /* Added a default text color for demonstration */
  border: none; /* Removing the default border */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: all 0.3s ease; /* Smooth transition for all properties */
}

button:hover {
  background-color: #2980b9; /* Darker shade of the original color */
  transform: scale(1.05); /* Slightly scale the button */
}

button:active {
  transform: scale(0.95); /* Slightly reduce the size when the button is actively clicked */
}

Label styling: Labels are given additional padding for better spacing and readability.

label {
  padding: 20px;
}

This CSS ensures the DApp is visually appealing and user-friendly, with precise centering, spacing, and distinct colors for different sections.

We are still missing the JavaScript logic, but we’ll focus on the smart contract as we need it set up first.