How to Create an NFT Marketplace with Next.js and thirdweb

in this video I'm gonna go over how to go ahead and create your very own nft Marketplace on the polygon blockchain we're going to be using a couple contracts from third web and we're going to go ahead and actually create our own Marketplace app now nft Marketplace allows people to go ahead and list their nfts up for sale and it allows anyone with a connected wallet to the marketplace to go ahead and purchase an nft that they select that is on sale first thing we're going to do is really quickly create a sample nft collection that we're going to go ahead and list on our Marketplace we're going to go ahead and also create our Marketplace smart contract and we'll go ahead and then use third web SDK to go ahead and create our very own Marketplace app before we jump into the video I want to let you know that currently 70 all of the amazing people like yourself that watch their webs YouTube videos are still not subscribed to the channel so before we begin I'd love to ask you a favor if you get any value out of these videos I'd really appreciate it if you subscribe to the third Web Channel and a little tip is we're going to be airdropping 10 users who have subscribed to the third Web Channel a very special nft every week so let's get started and first let's go ahead and jump on to third web's website and create our nft collection so right now I am on third web's website I am on the dashboard I have my wallet and everything connected I don't have any contracts yet so what we're going to do is we're going to go to deploy a new contract right here in the top right and what we're going to do is scroll down a little bit into this nfts section here and you'll see nft collection so we'll go ahead and click on that and once in there we'll go ahead and hit deploy now in the top right corner we'll give this a name we'll just call this test collection we'll give it a little symbol just put test and we'll just put this as a test collection for our Marketplace and then oh let's go ahead and connect our wallet because it's not connected here and fill out the information up top now in the bottom area here Network and change we're going to make sure we are on the Mumbai test net this is polygons test net blockchain and I highly suggest that whenever you're creating a project or anything that you use test net make sure everything works prior to you deploying on mainnet so again we're going to be using the Mumbai test net let's go ahead and hit deploy wait till our transaction pops up and to then we'll go ahead and confirm it all right looks like we have successfully deployed our contract you can see up here we have a section for nfts which we don't have any right now but what we're going to go ahead and do is mint three nfts so that we can go ahead and list those nfts on our Marketplace so up here in the right corner we're going to hit mint I'm just going to call this item number one and we're going to upload a file I have some sample nft artwork right here that I'm going to choose from I'm not going to give it a description or any properties right now I'm just going to give it a name and image and then we're going to go ahead and mint that wait for that transaction to come up let's go ahead and confirm it all right looks like we have successfully minted our first nft here I'm going to go ahead and do this for two more nfts and we'll continue from there all right there you go we have successfully minted our three nfts here you can see item one two and three in our different images for nfts here so this is going to be again our sample collection that we're just going to list on our Marketplace to make sure that our listings work now I'm going to go ahead and go back to third webs dashboard the next thing we need to do is go ahead and create our Marketplace smart contract so we're going to go up to deploy a new contract again in the top right you can see marketplaces up here in the popular category but if it's not there if you scroll down a little bit more there is a marketplaces category here and you have our Marketplace smart contract so we click on that and we hit deploy now in the top right let's go ahead and name our Marketplace we're just going to call this Mumbai Marketplace because it's going to be on the Mumbai test net and we're just going to say this is a test Marketplace again make sure down below your network and chain that you select is the Mumbai test net and we'll go ahead and hit deploy all we need to do is confirm our transaction here and we have successfully now deployed our very own Marketplace smart contract you can see up here we have our listings which right now we don't have anything but we'll go ahead and create some listings in a little bit you also have permissions this is where you can actually set certain permissions to your Marketplace contract so you can actually get what wallets can actually list items on the marketplace you can also determine what assets or what nft collections can be listed on the marketplace meaning if you have your own nft collection and you're looking just to create a Marketplace for your own collection you can just make it so that people can only list nfts from your collection in this Marketplace but we're going to leave this all open here we're going to go back to our listings and we're going to create listings with the nfts that we just created so we hit create listing here it should load our nfts that we just minted the three of them you can see right here if I select one we can go ahead and list them on our Marketplace so we're going to do a direct listing we're going to keep it in Matic and for this one I'm just going to put point zero one and we'll go ahead and create that listing now for your first listing like any other Marketplace you're going to have to first confirm a transaction that gives access to the nfts so that the marketplace has access to go ahead and sell them hit confirm on that one and then the second transaction of course will be the actual transaction confirming the listing on our smart contract and we'll confirm that one all right we have successively listed our first item or nft on our Marketplace again I'm going to do this for the two other nfts and we'll continue from there all right there you go we now have our three nfts listed you can see item one two and three the listing IDs right here and the listing price I made them all different so point zero one point zero three and point zero five so now that we have some nfts listed when we create our Marketplace app we'll be able to pull these down and be able to display them on our Marketplace so let's go ahead and let's do that now let's open up our terminal and let's go ahead and create our Marketplace app so we're going to use the third webs CLI here so I'm going to put MPX third web and I'm going to do at latest to get the latest version and we're going to do create right we are creating an app I'm just going to name this Mumbai [Music] test smart Market and this is going to be a polygon so it is evm we're going to be using next.js and a typescript for this project all right and once that completes we'll go ahead and change directory to our project and let's go ahead and open this up in vs code all right so now that we have our project open if we go to Pages first thing we're going to do is go to our app.tsx file and under this active chain ID here we're going to change this from mainnet to Mumbai because we created our contracts on the Mumbai test net next thing we're going to do is if we look at index.tsx you're going to see a bunch of templated code here we're going to actually remove some of this so within the main Tags I'm going to go ahead and remove everything and what we'll do is we'll just add a header and we'll just say Mumbai Marketplace and then what we'll also do is add a connect wallet UI component from third web as well so that someone a user can go ahead and connect their wallet to our Marketplace so let's go ahead let's open up our terminal here and I'll just write yarn Dev and let's go ahead and open this up and take a look at it so as you can see here we have our header Mumbai Marketplace and we have our connect wallet so we can actually select like metamask and it'll go ahead and connect our wallet to our Marketplace okay so now that we have that set let's go ahead let's grab our listings from our smart contract so what we're going to do is we're going to create a variable here and we're going to name it contract and what we're going to do is use third webs use contract and what we're going to pass through this is the contract address of our Marketplace and we'll also Define that it is a Marketplace contract so let me go ahead let me grab my Marketplace contract so if you go back to your third web dashboard and you go to your Marketplace smart contract in the top left you'll have the contract address you can just click to copy we'll go back and we'll paste it right there right so we have our contract here now the next thing we need to do is get our listings from our smart contract so what we're going to do is we're going to grab our listings and what we're going to do is use third webs use active listings and use active listings is going to take a contract so we'll just go ahead and pass our Marketplace contract there now what we can do is we can get the data and we can also check if it is loading now the data we're going to go ahead and just give it the name nfts because that is going to load our active nft listings okay so now that we have our contract set up and we're getting our active listings let's go ahead and display them in our Marketplace so first thing we're going to do is check to make sure that our nfts or active listings are done loading so as long as it is not loading what we'll do is we will it's not loading we will display our nfts here but if it is loading what we'll do is show a quick just uh loading text right now when it is done loading what we want to do is of course display our nfts that are listed so what what we will do is map through our nfts so we have n of T's and what we'll do is map our nfts and for each n of T we'll go ahead and create our own little nft listing and what we'll do is return first what we'll do just to test everything is we'll just go ahead and return the name of the nft so what we can do to get the name is nft dot under asset we have our assets name so again we're checking to make sure that is loading right here is completed so if it not is loading we'll go ahead get our nfts we'll map through it and right now we'll just display the name of our nfts if it is still loading it will go ahead and show our loading text here so if we come back to our site here you can see loading it's grabbing our nft listings and it should then display are three items which is item one two and three which are our Three N of T's that we have listed here so we know that we can grab our listings let's go ahead let's grab a little bit more because right now it's just showing the name and people don't know what the nft looks like and they don't have a way to buy the nft first let's add an image let's use uh another third web component here called media renderer and media renderer what it will do is display the image of the nft so we do need to give it a source which is going to be nft dot asset dot image and we'll go ahead and we'll give it a height of 200 pixels and a width of 200 pixels and let me go ahead and put this in my div here so put it above our asset name we'll also put our asset name into some paragraph tags and under that we'll also need to display the price of the nft to display the price we'll say price under your nft you have a buyout currency value per token and under that we can display that value there so what it'll do is it'll get the listing value and display the value and this is in Matic so we'll put Matic at the end so again we're going to display the image over nft we have our name of the nft and then it'll display the price of our nft so if we come back here instead of just showing the names we should see a little bit more information about our nft listings you can see again our image the name of it and then the price and of course that is for each nft that we have here and the last thing we need to do is now give the option for someone who is on the marketplace to go ahead and purchase the nft what we'll do is We'll add a button to each listing and the button will just say buy now now the button will go ahead and we'll add an on click here so for a button here we're going to write a async function and that function is going to call the Buy so let's do a try catch here that way we can catch any errors and we'll alert any of the errors as well what we're going to do is we're going to await our contract and under our contract we have a buyout listing and a buyout listing if we look here takes a big number and the quantity um of how much nfts we are going to purchase so it is going to take the big number of the listing ID now in order to get a big number we can just type in big number from ethers and we're going to do bignumber Dot from and what we're going to do is pass our nft listing ID so if we do nft dot ID it'll get our listing ID and we'll also pass the quantity which they are only purchasing one nft so we'll go ahead and put one so again on when they click the buy now button uh we'll await the contract and the contract has a buyout listing that is going to get we're going to pass the list ID and then the quantity of the nft being purchased so we come back to our Marketplace here and we load our nfts again we will now have a buy now button and what I will do is just to show you here uh right now our okay let's go back to our nft collection you can see the owners of all three of these nfts are the wallet that I use to create them so I'm going to go to our Marketplace I'm going to connect with a different wallet so I'm not connected to a different wallet on our Marketplace and what we'll do is let's go ahead and buy this first nft here so if I hit buy now it should bring up a transaction here and you can see 0.01 is the cost if I reject that and if I check the other ones real quick if I do the second one here it'll show 0.03 here so we know it's pulling up the right prices so let's go ahead let's just buy this first one here we'll confirm that transaction all right and you can see that it went through so if we were to reload our Marketplace here you can see we now currently have only two listings and if we come back to our nft collection here you can see our first nft item that we purchased has now been transferred to the new owner and there you have it we went ahead and created our very own nft Marketplace on the polygon or Mumbai test net and we went ahead and listed some nfts up for sale and we confirmed that with a buy now button that someone can go ahead and purchase the end of T and the nft would go ahead and transfer to the new owner I hope you folks enjoyed this tutorial video if you did don't forget to hit the like button hit the Subscribe and until next time see ya

Channel: thirdweb

Views: 10,932

Keywords: nft marketplace development, nft marketplace tutorial, nft marketplace react, nft marketplace project, nft marketplace solidity, nft marketplace explained, nft marketplace clone, nft marketplace morales, nft marketplace smart contract, nft marketplace wordpress, nft marketplace dapp, nft marketplace gamestop, nft marketplace binance, nft marketplace delevopment, nft marketplace react native

Id: ToA62ZpR0Ys

Length: 16min 42sec (1002 seconds)

Published: Wed Jan 04 2023