Build an NFT Marketplace dApp

In this project, we will learn how to create an NFT marketplace dApp using Next.js, Tailwind CSS, and ethers.js.

You will learn to:

Build an NFT marketplace for buying and selling NFTs.

Integrate Ethereum blockchain with web application.

Store NFT metadata on IPFS.

Implement secure transactions.

Skills

Blockchain Development

Web 3.0 App Development

Decentralised Applications

Prerequisites

Basic knowledge of web development using Next.js

Understanding of blockchain concepts and Ethereum

Familiarity with the Solidity programming language and ethers.js

Technologies

Next.js

Hardhat

Ethereum

JavaScript

Project Description

As the digital landscape embraces NFTs, understanding the mechanics behind them is a valuable skill. NFTs are unique digital assets that are indivisible and cannot be replicated. This project aims to prepare learners with the ability to develop an NFT marketplace dApp using technologies like Next.js, Tailwind CSS, and ethers.js.

This project has been designed as a guided journey for learners. In this project, we’ll learn to connect to the Ethereum network through MetaMask and create a user-friendly interface for NFT trading. We will also gain practical experience utilizing the IPFS to store and retrieve NFT metadata.

After completing this project, we will gain the expertise to confidently navigate the NFT marketplace dApp development.

Project Tasks

Introduction

Task 0: Get Started

Task 1: Smart Contract Overview

Develop the Project Structure

Task 2: Set Up Pinata IPFS Gateway and MetaMask

Task 3: Develop the Header Component

Task 4: Develop the Footer Component

Task 5: Set Up Global Notifications

Connect to the MetaMask

Task 6: Create a React Context for MetaMask

Task 7: Add a Button to Connect MetaMask

Mint NFT

Task 8: Build a Form to Collect the NFT Metadata

Task 9: Store the NFT Metadata into IPFS

Task 10: Mint the NFT

Display Minted NFTs

Task 11: Fetch the Minted NFTs from the Smart Contract

Task 12: Display NFTs on the Home Page

Trade NFTs

Task 13: Implement NFT Trading

Task 14: Display the Purchased NFTs

Congratulations!

Relevant Courses

Use the following content to review prerequisites or explore specific concepts in detail.