How to Build a Full Stack NFT Marketplace on Ethereum with Polygon and Next.js – [2021 Tutorial]



🚨 Update – Be sure to install ipfs-http-client@50.1.2 instead of ipfs-http-client for this to work properly

🙂 Subscribe to my channel:

🔵 Follow me on Twitter:


Clickbank Promo Tools

🔗 Step by step article:

🔗 Source code

In this video, you’ll learn how to build a full stack NFT marketplace on Ethereum with Solidity, Polygon, IPFS, Next.js, Ethers.js, and Hardhat.

We’ll start from scratch, creating a new project and installing the dependencies. We’ll then write and test out the smart contracts. Once the tests have passed, we’ll write the front end code to connect the smart contracts.

After testing on a local network, we’ll deploy to the Matic / Polygon network using a custom RPC provider (Infura).

0:00 – Introduction
3:00 – Project initialization and configuration
17:40 – Creating an Ethereum wallet
21:20 – Coding the NFT smart contract
28:19 – Coding the Market smart contract
58:50 – Testing the contracts
1:10:57 – Updating _app.js
1:14:35 – Updating the home page
1:35:24 – Deploying to a local node
1:39:47 – Coding the create-item page
1:58:00 – Coding the my-assets page
2:03:10 – Coding the creator-dashboard page
2:09:25 – Deploying to Matic Mumbai Testnet
2:20:40 – Conclusion

source

45 thoughts on “How to Build a Full Stack NFT Marketplace on Ethereum with Polygon and Next.js – [2021 Tutorial]

  • January 21, 2022 at 1:51 am
    Permalink

    Nader single handily changing my life with his content.

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Shouldn't the smart contracts comply with ERC standards

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    What vscode theme are you using? I could not find it

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Which editor are you using

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hey, I've got a question that I can't seem to find an answer to. Why would I use Counters library instead of having a simple uint256 private field and use that as a counter instead? I can do uint256 itemId = ++counter; instead of doint counter.increment(); uint256 itemId = counter.current();

    Is it considered a good practice to use this library instead of a simple uints? Does it presents some kind of a threat? I'm talking about solidity version 0.8 or higher, where we don't have the int overflow problem anymore.

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Excellent Sir!

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Why is nobody talking about how these tests are not actually testing anything?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Epic!!! That was awesome work. Thanks for sharing your knowledge.

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    got error when npx hardhat test — > all the .sol file that we imported it says asre "File outside of allowed directories"
    When I compiled the contacts NFT and NFTMarket they compile fine without erros. Just with "npx hardhat test" that we do at at 01:06:00 in the video I get the error. Fixed the error by moving node_modules/@openzeppelin inside contracts directory. Never had this issue. I am wondering what is causing it

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    can you make a video on creating a Binance NFT Marketplace?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    this is a freakin awesome tutorial. I'm blown away by Hardhat, thanks for the introduction

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hi Nader..if i am correct we deploy same contract on ethereum and polygon network. Then token id counters are seperate for both networks..i mean same contract will work in silo on their reapective network..also one can mint same image on both networks..still item sold on polygon will not mark same item sold on ethereum …bcz cntrct address is dfrnt..is my understnding crrct..thanks.

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    When Minting – I'm getting an error of "let value = event.args[2]" Anyone else able to offer a solution here?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    I am facing problem when i run npx hardhat test the error comes" Error: too many arguments: in Contract constructor (count=1, expectedCount=0, code=UNEXPECTED_ARGUMENT, version=contracts/5.5.0"… Do anyone knows where is the problem ?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hello sir I'm having an error on the code invalid contract address on index.js file const market contract

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hey Nader, Is the idToMarketItem[i+1] correct logic? Because you're just looping through a length of unsoldItemCount, but that does not guarantee that the index is going to equal an index of an unsold item right?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hi man you are great, could you make a video about a staking platfom for our nfts … nowadays the staking feature is very appreciated in NFTS … thanks a lot

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Is this suitable for someone who know nothing about web3?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hey Nader, great content as always. I'm interested in what extensions you use in VSCode for Solidity development, would you mind sharing?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Thanks. But got a question, how u stock all the element transactions in a database ? And if it possible, what kind of data base do you use ?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Awesome video. Just subscribed

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Nader Dabit? More like Nader Da-Boss.

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Wow Dalal Street Mumbai Is Growing Faster than Wall Street

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Great video! was so excited to try it out. I'm a complete noob so it was really difficult for me to get any of it going. Like the resources you used. I don't know how to get any of them

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    hello Nader i am using visual studio code and Tailwind is not working….on macbook

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hey great video man! I’m curious, would you want to team up? I’m working on a massive unique and original NFT collection. If not then maybe you’d like to be an influencer and get some of the giveaways. Would like your thoughts.

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Your video is really really helpful for beginners like me.
    Thank you so much!

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hi, thanks for the Awesome Tutorial, i have question, i have developed my own market place, how i will charge a comission when i buy any Nft, means how amount is shared with the market place owner ?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Thank you!!!! 👍🏼

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hey help me there is a error saying that
    Type error : cannot read the property of undefined (reading '2')
    When am making nft through matic
    Btw in network localhost everything going well

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    I know that some people first code the marketplace and then inside of it store NFT's addresses. In your case you coded a little different: you store a marketplace address inside a NFT. My question is, why do we have to store marketplace's address inside an NFT? Are there any advantages in your approach? Or any other reason why you choose to do so?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    we also design and combine NFT ART. We sold them on fiverr and earned a good income. We have uploaded the nft collections we sell to our page.

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Why is my tailwind not configuring properly? OS : ubuntu

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Thanks for putting together this great tutorial. It takes tons of resources to put out quality content like this so I really appreciate you putting in the time. I want to see your channel blow up so my only suggestion would be to follow the flow of real world development rather then going down the page directly from your notes. As an example in real life, the work flow would look something like this 1) create the page under the pages folder in next.js and actually go to the page 2) create the compents and see if anything shows up on the screen 3) write the handlers to interact with the backend and click the buttons to make sure things are working. This would trully help us understand how you think about these things and get feedback more immediately (in alternative to coding for 45 minutes to then see what is working). Other than that you're well on your way to be the next Brad Traversy 😉

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hi sir, may i know why do we need to store the currentItem into storage? MarketToken storage currentItem = idToMarketItem[currentId];

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Can I compile this contract with solana? Btw great video!

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    After seeing your video I am will be entrepreneur

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    When im installing things nothing works. I tried looking into installing yarn, tried different ways. Cant get it to work. Im opening terminal in visual studio. Any idea what im doing wrong?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Do you have something that demonstrate how to pay for a NFT using a ERC20?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Salam Nader. Thanks for the video, and I personally thank you for sharing such useful knowledge.
    But hey, before hopping into the content I just wanted to make sure that I'm in a right place.
    Is this video going to teach us how to create an NFT marketplace like for example Opensea?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Hey, great video, thank you for sharing all of this ! I have a question still.. do we need 1 only nftadress ? even if an other creator wants to list a new nft ?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    The IDE plugin that keeps recommending the new line of code is really confusing actually

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    At 50:49 Line No. 103 we can also check for the sold property of the MarketItem, right?

    Reply
  • January 21, 2022 at 1:51 am
    Permalink

    Thank you so much! I love this tutorial

    Reply

Leave a Reply

Your email address will not be published.

%d bloggers like this: