What Are We Going to Build

Overview of the NFT Marketplace Project

In this video, we provide a preview of the full NFT Marketplace application we’ll be building. The app is a simple yet functional decentralized NFT marketplace powered by two smart contracts. Here’s what to expect:

1. Landing Page (Marketplace View)

This is the main page where users can:

• View listed NFTs along with:
• Name
• Description
• Price
• Click the "Buy" button to purchase NFTs.

If you attempt to buy an NFT that you already own, an error message will appear:

"This NFT is already owned by you."

2. Wallets Page

The Wallets section displays all NFTs owned by the connected user.

• Upon navigation, it first shows a loading state: "Loading NFT data..."
• After loading, it renders your NFTs.
• Clicking on a listed NFT:
• Opens its detailed view, including:
• Type
• Supply
• Owner
• If the NFT is already listed, you'll see:
• The listing price
• An option to cancel the listing
• Clicking on an unlisted NFT:
• Opens the detailed view.
• Shows the option to sell the NFT by entering a custom price.

3. Contract Info Page

This page displays the metadata of the deployed smart contracts used in the application:

• NFT Collection Contract (for minting):
• Name
• Description
• Symbol
• Fee recipient
• Seller fee basis points
• Marketplace Contract (for sales):
• Name
• Description
• Symbol

4. Minting Page

On the Mint page, users can:

• Enter:
• Name
• Description
• Image URL
• Click Mint to create their own NFT.
• Once minted, they can navigate to the Wallets page to list the newly minted NFT for sale.

Summary

Through this section of the course, you'll build a fully functional NFT marketplace with:

• NFT minting
• Wallet integration
• NFT listing and cancelation
• Metadata display from smart contracts
• A real-world front-end built with React and integrated with Thirdweb