A Comprehensive Guide to Building a Web3 Marketplace Dapp on Linea 🌐✨

Overview of Creating a Marketplace DApp 👤💻

As a crypto enthusiast, you may find the development of decentralized applications (dApps) particularly intriguing. This year, an increase in dApps indicates a deeper integration of blockchain technology into various sectors. Within this context, decentralized marketplaces have gained prominence, allowing direct peer-to-peer trade without intermediaries. Utilizing the Linea framework, based on Layer 2 zkEVM technology, this guide focuses on how to craft a straightforward marketplace dApp, detailing both front-end and smart contract aspects.

Deciphering the DApp Structure 🏗️

The foundation of your marketplace dApp revolves around three key components: smart contracts, the user interface, and blockchain connectivity. The smart contract operates to manage listing items, processing purchases, and transferring ownership. Simultaneously, the front-end serves as the interactive interface where users engage with the smart contract functionalities. You will connect with the Linea blockchain using the Metamask Software Development Kit (SDK) alongside Wagmi and Infura as your Remote Procedure Call (RPC) service providers.

Preparing Your Development Environment ⚙️

Begin by establishing a monorepo to maintain the project effectively:

mkdir web3-marketplace-linea
cd web3-marketplace-linea
pnpm init

Next, create a pnpm-workspace.yaml file in the root directory:

packages:
  - 'packages/*'

Your workspace structure should look like this:

packages
├── site         # Frontend application utilizing Next.js, Tailwind CSS, and Shadcn UI
└── blockchain   # Smart contracts crafted with Hardhat

Proceed to initialize a Hardhat project in the blockchain folder:

cd blockchain
npx hardhat init

Select the TypeScript option when prompted to set this up effectively.

Crafting the Smart Contract 📜

The smart contract you will design needs to handle the intricacies of the marketplace, such as item listings, ownership, and transactions:

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

contract Marketplace {
    struct Item {
        uint id;
        string name;
        uint price;
        address payable seller;
        address owner;
        bool isSold;
    }
    uint public itemCount = 0;
    mapping(uint => Item) public items;
    mapping(address => uint[]) public ownedItems;

    function listItem(string memory _name, uint _price) public {
        require(_price > 0, "Price must be greater than zero");
        itemCount++;
        items[itemCount] = Item(itemCount, _name, _price, payable(msg.sender), msg.sender, false);
        ownedItems[msg.sender].push(itemCount);
    }

    function purchaseItem(uint _id) public payable {
        Item storage item = items[_id];
        require(_id > 0 && _id <= itemCount, "Invalid item ID");
        require(!item.isSold, "Item already sold");
        require(msg.value >= item.price, "Insufficient funds");

        item.seller.transfer(msg.value);
        item.owner = msg.sender;
        item.isSold = true;
    }

This smart contract effectively lays the groundwork for a decentralized marketplace where users can list items, make purchases, and transfer ownership, with all transactions securely recorded on the blockchain.

Deploying Your Smart Contract 🚀

Set up a deployment module within the ignition directory:

import { buildModule } from "@nomicfoundation/hardhat-ignition/modules";
const MarketplaceModule = buildModule("MarketplaceModule", (m) => {
  const marketplace = m.contract("Marketplace");
  return { marketplace };
});
export default MarketplaceModule;

Don’t forget to update your .env file with your Infura key and private account key:

INFURA_API_KEY=your_infura_api_key_here
ACCOUNT_PRIVATE_KEY=your_account_private_key_here

Deploy your smart contract to the Linea test network:

npx hardhat ignition deploy ignition/modules/Marketplace.ts --network linea-testnet

Creating the Frontend with Next.js and Shadcn UI 🌐

Initiate your Next.js project within the site directory:

mkdir site
cd site
npx create-next-app@latest .

During setup, select TypeScript, ESLint, Tailwind CSS, and App Router options. Install Shadcn UI CLI:

npx shadcn-ui@latest init

Next, generate a wagmi.config.ts file to manage blockchain connections:

import { http, createConfig } from "wagmi";
import { lineaSepolia } from "wagmi/chains";
import { metaMask } from "wagmi/connectors";

export const config = createConfig({
  chains: [lineaSepolia],
  connectors: [metaMask()],
  transports: {
    [lineaSepolia.id]: http(),
  },
});

Create a constants.ts file that includes the contract address and ABI:

export const CONTRACT_ADDRESS = "your_contract_address_here";
export const ABI = [/* ABI array here */];

Develop frontend components and ensure they are connected to the smart contract using Wagmi and the Metamask SDK. Comprehensive instructions can be explored in the full guide available on the Linea platform.

Run the development server by executing:

npm run dev

Your Next.js application complemented by Shadcn UI will now be operational at http://localhost:3000.

Through this guide, you have successfully built a simple decentralized marketplace dApp on Linea, utilizing zkEVM technology for enhanced scalability and affordability. The journey included environment setup, smart contract scripting, deployment, and frontend integration, laying a fertile ground for further enhancements and feature integrations.

Final Thoughts 🔥

In the evolving landscape of Web3, the skills you have gained in developing and deploying a decentralized application are invaluable. This year, as the technology matures, such foundational capabilities will enable exciting advancements and opportunities within the cryptocurrency realm.