How to create a decentralized application (dApp) using Solidity and Web3.js

The concept of decentralization isn't new, but its application through blockchain technology has transformed how we think about building software. Unlike traditional applications hosted on centralized servers, a decentralized application—commonly called a dApp—operates on a peer-to-peer network, typically using Ethereum or another blockchain protocol.

Developing a dApp might sound complex at first, but once you grasp the building blocks—especially Solidity for smart contracts and Web3.js for connecting the frontend with the blockchain—it becomes not only approachable but actually quite exciting. In this article, I'm going to walk you through the real-world process of building your first dApp using Solidity and Web3.js, just like I did the first time I stepped into this space.

What Really Makes an Application "Decentralized"?

Before writing a single line of code, it’s important to wrap your head around what “decentralized” truly means in a technical context. When I started learning, this was the concept that really reshaped the way I thought about software development.

A decentralized application stores and executes its backend logic on a blockchain rather than a server. That logic is governed by smart contracts, which are immutable, autonomous scripts deployed on a blockchain. This means once your dApp goes live, no single entity—not even you—can change its logic arbitrarily. That’s where the magic and the responsibility lie.

The frontend, however, remains similar to traditional web apps and is typically built with HTML, CSS, and JavaScript. The main difference is that instead of fetching data from a REST API, the frontend talks directly to the smart contract using Web3.js or Ethers.js.

Setting Up the Foundation: Development Environment

For anyone venturing into dApp development, getting your development environment right is critical. Personally, I like using Visual Studio Code as my IDE, and for Ethereum development, Hardhat and Remix have both proven incredibly useful.

When I was first learning, Remix was my starting point. It's browser-based and allows you to test and deploy contracts quickly. But once I got more comfortable, Hardhat became my go-to tool because of its flexibility and plugin ecosystem.

To get started locally, you’d usually install Node.js, initialize your project with npm init, and install the following:

bash

npm install --save-dev hardhat
npm install web3

After that, run npx hardhat to scaffold your project, choosing the basic sample project to start experimenting.

Writing Your First Smart Contract with Solidity

When I wrote my first smart contract, it felt almost magical. Solidity, the primary language for Ethereum contracts, resembles JavaScript and C++, so if you have experience with either, you’ll feel at home.

Let’s walk through a simple example—a basic contract to store and retrieve a message on the blockchain:

solidity

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MessageStorage {
    string private message;

    function setMessage(string memory newMessage) public {
        message = newMessage;
    }

    function getMessage() public view returns (string memory) {
        return message;
    }
}

What you’re seeing here is a minimalist contract with two functions: one to set a string and another to get it. The public and view keywords define how other entities can interact with these functions. Deploying this to a testnet like Rinkeby or Sepolia allows you to experiment with real blockchain behavior without risking actual assets.

Deploying to a Blockchain Using Hardhat

Deploying to a blockchain network was the point where things started to feel real for me. That’s when I could see my code functioning immutably and verifiably.

With Hardhat, you create a deploy script under scripts/deploy.js. Here’s how you might deploy the MessageStorage contract:

javascript

async function main() {
    const MessageStorage = await ethers.getContractFactory("MessageStorage");
    const contract = await MessageStorage.deploy();
    await contract.deployed();
    console.log("Contract deployed to:", contract.address);
}

main().catch((error) => {
    console.error(error);
    process.exitCode = 1;
});

To deploy, run:

bash

npx hardhat run scripts/deploy.js --network goerli

Make sure your hardhat.config.js is properly configured with your network settings, including your Infura or Alchemy API keys and wallet private key (use .env for storing them safely).

Creating the Frontend: HTML, JavaScript, and Web3.js

The next layer of your dApp is the frontend, and this is where Web3.js steps in. Web3.js is a JavaScript library that allows your frontend to communicate with the Ethereum network via the user's browser wallet (like MetaMask).

Here’s a simple HTML and JS integration that connects to MetaMask and lets users interact with your contract:

html

<!DOCTYPE html>
<html>
<head>
    <title>Simple dApp</title>
</head>
<body>
    <h1>My First dApp</h1>
    <input id="message" type="text" placeholder="Enter message"/>
    <button onclick="setMessage()">Set Message</button>
    <button onclick="getMessage()">Get Message</button>
    <p id="displayMessage"></p>

    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script>
        let web3;
        let contract;
        const contractAddress = "YOUR_DEPLOYED_CONTRACT_ADDRESS";
        const abi = [/* ABI goes here */];

        window.addEventListener('load', async () => {
            if (window.ethereum) {
                web3 = new Web3(window.ethereum);
                await window.ethereum.enable();
                contract = new web3.eth.Contract(abi, contractAddress);
            } else {
                alert("Install MetaMask!");
            }
        });

        async function setMessage() {
            const accounts = await web3.eth.getAccounts();
            const message = document.getElementById('message').value;
            await contract.methods.setMessage(message).send({ from: accounts[0] });
        }

        async function getMessage() {
            const result = await contract.methods.getMessage().call();
            document.getElementById('displayMessage').innerText = result;
        }
    </script>
</body>
</html>

Once MetaMask connects to your dApp, it acts as a gateway to the blockchain. This small snippet lets users store a message on the blockchain and retrieve it—all in a trustless, decentralized way.

Working With Gas, Transactions, and Wallets

One of the trickier concepts for beginners (it definitely was for me) is understanding gas. Every interaction with a smart contract costs gas, paid in ETH. Think of it like fuel that powers your contract execution.

When testing, always use testnets to avoid spending real ETH. Tools like MetaMask faucets and Alchemy are invaluable during this stage.

And never hardcode private keys or secrets directly into your scripts. I learned this the hard way during an early project. Always use dotenv to safely manage environment variables and secrets.

Handling Events and Listening on the Frontend

Another feature that changed how I designed dApps was event listeners. Solidity lets you emit events from the contract, which can then be captured in real-time by the frontend.

Here’s how you can modify the MessageStorage contract to emit an event:

solidity

event MessageUpdated(string newMessage);

function setMessage(string memory newMessage) public {
    message = newMessage;
    emit MessageUpdated(newMessage);
}

And in Web3.js:

javascript

contract.events.MessageUpdated()
    .on('data', event => {
        console.log("Event received:", event.returnValues.newMessage);
    });

This makes your dApp more responsive and interactive. For instance, users can get instant feedback when a blockchain transaction is confirmed, instead of refreshing or polling manually.

Deploying to IPFS and Going Fully Decentralized

If you’re aiming for full decentralization, you don’t stop at the backend. You also need to host your frontend on a decentralized network like IPFS (InterPlanetary File System) or Fleek.

With IPFS, your frontend is stored as a hash-addressed file, making it censorship-resistant and persistent.

To deploy:

bash

npm install -g ipfs
ipfs init
ipfs daemon
ipfs add -r build/

Then share the IPFS hash, which users can access via a gateway like https://ipfs.io/ipfs/YOUR_HASH.

Common Pitfalls and Real-World Tips

I’ve made my fair share of mistakes, and if you’re just starting out, here are a few hard-learned lessons:

• Gas estimation is not always accurate. Always test functions under different conditions.

• Contract updates require redeployment. Once a contract is deployed, it cannot be modified. Think modularly or use upgradeable proxies.

• Users are impatient. Blockchain transactions take time, and UX matters. Show clear loading states and transaction status.

• Debugging Solidity is hard. Learn to use tools like Hardhat console and Tenderly for inspecting contract behavior.

Security Considerations in Smart Contract Development

Security in smart contracts isn’t optional—it’s absolutely critical. Remember that every line of code you write, once deployed, is open for everyone to inspect and exploit.

Avoid common pitfalls like:

• Reentrancy attacks

• Integer overflows/underflows

• Insecure external calls

• Lack of access control

Solidity versions after 0.8.0 have built-in overflow protection, but you should still use auditing tools like Slither, MythX, or OpenZeppelin’s Defender. And when possible, always get a second pair of eyes (or more) on your code before going live.

Where to Go From Here

After deploying your first working dApp, you’ll realize there’s a vast ecosystem still waiting to be explored—DeFi protocols, NFT platforms, DAOs, and even Layer 2 scaling solutions like Arbitrum and Optimism.

Web3 is evolving fast, and tools like Foundry, Ethers.js, The Graph, and ZK-rollups are expanding what’s possible every day. The best advice I can give is to keep building, keep shipping, and keep reading smart contracts of popular dApps. It’s one of the best ways to learn.

Conclusion

Building a decentralized application using Solidity and Web3.js can feel overwhelming at first, but once you get your hands dirty and deploy your first smart contract, everything starts to click. From writing your logic in Solidity, deploying with Hardhat, connecting the frontend using Web3.js, and finally hosting your app on IPFS—each piece plays a vital role in bringing your dApp to life.

The key is to approach it with curiosity and patience. With every project, you’ll deepen your understanding and discover new patterns that work best for you. And who knows—your next dApp might just be the next big thing on the Ethereum network.