Build a full stack NFT Marketplace using Solidity & Next js | Rahul Agarwal | Skillshare
Search

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Build a full stack NFT Marketplace using Solidity & Next js

teacher avatar Rahul Agarwal, Flutter Developer & Trainer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Course Introduction

      0:48

    • 2.

      Create a new hardhat project

      10:27

    • 3.

      Alchemy and Metamask Keys

      8:45

    • 4.

      Creating NFT marketplace contract

      10:29

    • 5.

      Functionality to create a market item

      7:14

    • 6.

      Functionality to mint a new token id

      10:54

    • 7.

      Functionality to fetch unsold market items

      7:06

    • 8.

      Functionality to fetch items owned and listed

      7:51

    • 9.

      Functionality to resell and cancel market item

      9:16

    • 10.

      Unit test to deploy the contract

      9:13

    • 11.

      Unit test to mint and list nft

      17:57

    • 12.

      Unit test to execute market sale

      7:32

    • 13.

      Unit test to resell market item

      8:52

    • 14.

      Unit test to fetch market items

      7:35

    • 15.

      Unit test to cancel market listing

      4:01

    • 16.

      Writing the deployment script

      5:43

    • 17.

      Setup and start working on Next js

      16:40

    • 18.

      Function to load NFT

      15:13

    • 19.

      Function to buy NFT

      15:26

    • 20.

      Setup Pinata IPFS keys

      9:41

    • 21.

      Function to upload file to Pinata

      13:36

    • 22.

      Function to list NFT in market

      25:35

    • 23.

      Function to fetch NFTs owned or bought

      14:07

    • 24.

      Function to fetch NFTS listed in market

      5:09

    • 25.

      Function to cancel and resell NFT

      6:51

    • 26.

      Test the complete application

      11:39

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

84

Students

--

Projects

About This Class

If you are a part of the cryptocurrency space, there is a chance you might have heard of this trending digital asset known as NFT. This course covers everything you need for a decentralized NFT application according to the ERC721 standard. Users will be able to sell and purchase NFTs with Ether in our marketplace.

You’ll learn how to build a full stack NFT marketplace on Ethereum with Solidity, IPFS, Next.js, Ethers.js, and Hardhat. We’ll start from scratch, creating a new hardhat 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. NFT metadata will be stored on Pinata which is an IPFS based storage.

Prerequisites

To be successful in this guide, you must have the following:

  1. Node.js and VS Code should be installed.

  2. Metamask wallet extension should be installed in your browser with some test Goerli ethers in it.

  3. Basic knowledge of Solidity, hardhat and Next js required.

The stack

In this course, we will build out a full stack application using:

Web application framework - Next.js
Solidity development environment - Hardhat
File Storage - Pinata
Client Library - Ethers.js

Meet Your Teacher

Teacher Profile Image

Rahul Agarwal

Flutter Developer & Trainer

Teacher

Hello, I'm Rahul. I am skilled in building cross platform application using Flutter. I am freelance developer as well as conduct workshops to share my knowledge with the community.

See full profile

Level: Intermediate

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: If you are part of the cryptocurrency space, there is a chance you might have heard of this trending digital asset known as NFT. This course covers everything you need for a de-centralized NFT application, according to the ERC 721 standard, users will be able to sell and purchase NFP is weed eater in our marketplace. The first part of the course covers writing and testing of smart contract using solid. The inherited other half will be focused on building the UI using next, chairs and Tailwind CSS, an estimator, that data will be stored on pinata, which is an IPFS based storage. By the end of the course, you will learn all the concepts required to apply for a web developer job or even build your own startup in the blockchain industry. So without wasting any more time, enroll now and let's get started. 2. Create a new hardhat project: Hi, welcome to the very first video of the course, where we're building a NFT marketplace from scratch. So in this video, we will discuss about the course roadmap as well as set-up our development environment. As you can see on the screen, there are various steps involved in this course. The first step is to set up the development environment using hardhead. Then we will create a smart contract that tracks and stores and if the data. Then after we will write unit tests to make sure our smart contract is working properly. The fourth step will be to deploy the smart contract to that test network. After that, we will work on the front-end and we will use next years for that. Then to interact with a deployed smart contract. We will use a test.js and MetaMask. And finally, we will test the complete working of the application so that you can show this project in your portfolio. Before moving forward, make sure you have installed MetaMask and have some test. Golly, it tears in your account. I'm not going to set up again. Please watch any tutorial on it and continue with that course. So my task is just a very simple process. Then after to get that test, call it test, there are some faucets that you can google and enter your address. That's it. So now here you can see the whole tech stack of our decentralized application. That is solidity we are working on itanium is hardhat. We will be using in future as the blockchain node provider. It test.js, that's it. These are the things which we will be using. Now, let's start working and that we have to create a new hardhead project. So what is hard, hard hard hat is an environment developers use to test, compile, deploy, and debug decentralized applications based on their Italian blockchain. If you want to know more, you can go in their official website as well. You can see this is hardhead. And here you can read more if you want. I will just start creating a new folder and name it. Nft, market place. Dap. That's it. Then inside it, I will create, I will open a new terminal. And the first thing we have to do is create an NPM project using this command npm in it. What? It will then empty npm project. That's it. Then I will simply install hardhead using this command save dev hard hat. That's it. It will just take a few seconds. Now to create a hardhead project, we will use n p x hardhead command. It will give us the boilerplate code. I will just press enter. Then I will create a JavaScript project entered. And then that's it. After that, hardhead is telling us to install these dependencies. But this is an update which is just a one-week back. So I am more comfortable in styling that dependencies separately. That is hard at where full hired hard eaters, which makes hardhead compatible with test and help us to interact with the smart contract. So I will just write npm install save dev. First thing I will do is. The night that it now make labs slash, I'd had full rate to find 0, then space. Again. It tedium that a 3. Then chai 4. Then, then I will use again. Now make labs. Had ethers 0. And finally ethers that it by 0 and press Enter. If we get any added, we will just solve it. But in the official documentation, you can see everything here, how to run. And this is npm install save that, then we will use, then we add using NP x hard hat. Then we are creating a JavaScript project. That's it. Here, the add installing that tool box. But I am just installing all the dependencies separately. That's the difference. It will take some time. Now, let's open our project in the VS code. I will just simply write code space. It will open that folder in our VS Code Editor. In that package or Jason, you can just shout cross check everything is installed. R naught, that is very full. Ito's Di Italian wasteful eaters and Hardhead. So everything is installed. Also. Make sure you have extensions installed at these extensions. It is Dart. Then I have next year snippets as well. Then I have this tailwind CSS installed. Then also there is this new plug-in. It is hard hat. I've installed this as it is from gnomic conditions that is the official installed this as well. So that's it for this video. In the next video, we will configure the inferior and MetaMask settings. Thank you. 3. Alchemy and Metamask Keys: Hi, welcome back. In this video we will set up in fewer and my damask in our project. Hardhead gives us few folders and files. We will understand all of those step-by-step. But let's go to hardhead dot config dot js and make sure we are pointing our network to correlate Italian test network. For that to work, we need caudally it TDM node URL and a wallet address. As I already have accounts, I wouldn't be creating a new accounting inferior end MetaMask. You can Google it and do it on your own. It's very simple and straightforward process. Let's open our browser and go to infuse. But IO. After signing in, we have to create a new project. Network will be this. We have three API formerly itanium and just simply name it NFT marketplace and click on Create. Then here, just change the main two core Lee network and simply copy this URL. Then. In the hardhead conflict file, you simply write below this solidity, you simply write networks. Then like this. And have curly network. Now, paste that keys. We want paste this waste dose directly in our code. We will be using some libraries. The first library we will use is that dot ENV package. Because it is not recommended to paste those sensitive information directly in their application as those can be misused by others. The second library we will be using is appends a plane, which is a library of modular, reusable, secure, smart contracts for the Italian network and return in solidity. It allows to leverage standard, tested and community reviewed contracts. You can search, opens up link if you want to. Like this. If you want, you can directly search it and read on your own what it does. I will simply append that and write npm. Install Zeplin slash contracts and not ENV. Let's enter. Now, just cross check. Everything is now installed. Okay. After installation we have to create a dot ENV file, that is dot ENV file. And bass staff following keys, that is our inferior as well as our public key. I will just create a variable called n few. Url is equal to like this. And second wallet. But I read k is equal to this. Dot ENV is directly in that root directory, not inside any contracts or test and all. Now go and paste those keys. First is inferior URL, and second is that MetaMask key. You can install my thomas by going to my Thomas.io website and install the extension for your browser. Then simply click on the mask. Then enter your password. Then go to Settings. Just wait. First, I will click on this second account. I will write account details. Then export private key. And daddy are password. Press, Enter, and copy this key. Make sure you do not share this key with anyone else. It is a very personal key. It has to be secured. Then just paste it inside here and save it. Now you don't have to use it. After this. Go to hardhead dot config dot js, and make the following changes. Here. In the URL. At the very top, you just simply require dot, dot ENV, dot ENV, dot config. Just simply write it. Then inside that girly the URL, you simply have to write process dot ENV. In Beulah URL, it is the variable name. And in accounts, you will simply have to re, within the square brackets process dot ENV, war led. But I read key. That's it. So this is how we configure our network to the godly. Also, you can write hard hat as well. If you want to test it in the local environment, it's up to you. I will prefer curly as I know, that everything is working in this code. So that's it for this video. In the next video, we will be creating our smart contract. Thank you. 4. Creating NFT marketplace contract: Hi, welcome back. Let's create our first smart contract. Simply create a new file inside the contracts folder and name it NFT market, dots soul. Then as always, we have to mention the solidity compiler and now we have 0.8.9. Saintly copy these two lines and paste it here. Then create our contract using the contract keyword and name, NFT. Market, place. Like this. Now, we have to import our dependencies. The first import will be opens a plane on track, slash, deals, counters, dots. So then the next thing we have is gone tracks slash slash, C, 721, lash extensions, ELC 721, URIs, old age. And finally, we have we have this that is contracts token, ERC 721, ERC 721 dot. And now we have to inherit with ERC URI storage, that is 71 URL storage. And the first thing we will do is create some variables using this counter, that solubility these counters, counters dot counter. Then the first when I read variable will be token IDs. That is number of DOMS ever created. And second, Would it be counters, start counter. But I read items sold, number of items sold. Now, you can also search this open Zeplin and then ERC 2721 and read The functioning what it does. Then here you can see C7 to T1. Here you can see what we are using this counters than ES is 721 token and all different different versions. It's important to know which version to reduce or what we're using. We're using different version. I can see all the documentations get updated time to time. But dagger functionality will be same. The next variable I will do is that listing price, which will be 0. Here's 01 E third. And this is what we have to be to list their NFT on our marketplace. So this is the commission or what? Not the commission. It is just a listing fees. Then we will have a variable known as owner that is not off the smart contract. Now let's create a constructor. That is, it will run only once when we are using this year C7 to T1. And we have to use this things. That is, we have to give name C, you have to give it a name and a symbol. I will just simply name it. Mad Towers. Tolkien's, and give symbol met up. In that constructs a constructor. We're not accepting anything, but we will make sure the owner is the person who is deploying this smart contract. So this code is required when we are inheriting to this. So this is not being written by us. This is prewritten pretty written by open Zeplin library. That's it. Now, let's continue. So now I will create a struct, which will be market item. Struct is just our own datatype. It is just a collection of primitive data types. Primitive integer, address, boolean, all this. So what should one NFT or the market item will consist? It will consist that token ID. Then it will have the address of payables seller, that it will have the address of owner at that moment. Then it will have tab price and a boolean, which is that is sold or not. And now we will have a mapping as well. That is, the uint8 integer will map to the market item, that is this one. And we will, it will be a private variable and we will name it id2. Market item, that is, the token ID is being mapped to the market item. If we give that token ID, it will give us the whole structure that is hold all the information. The next thing we will create an event that is market item, created event. It will have similarly all the same thing. That is un 56 indexed. Can id, then address, address, owner, then UN rights. And Boolean sold. Events, just called so that it is being saved at the blockchain publicly. You can read more about what that events or how to emit an event. And if you don't know the basics of solidity. So that's all the code for today in this video. In the next video, we will write certain functionalities to perform certain task. Thank you. 5. Functionality to create a market item: Hi. Now let's start working on the functionalities. Fun. The first function we will create is to get that listing price. So just like fun churn, get listing price. Bleak view returns. It is turning you into 56. And it will simply return the listing price variable, which is this one. So the comment, just write the command returns listing, place of the contract, listing price of the market even right. Then the next functionality will be due. Date. Listing. Simply Wanchun, listing rice. Now, this is this renew and nesting place. Blake. We have to make sure that only the owner can update the listing price. So we have to write owner is equal to message sender. If it is not, then simply write on Lee. Market place, owner can date listing price. And if it is the owner, then we will simply change that listing price. This listing price, that's it. These are the basic functionalities. Now the files, the next functionality will be different channel D to create a market item. So simply let's say funtion. Create market Item. Then it will be a private function. I will let you know why. It will accept two things. That is un to 56 Token ID. We will create this token ID. The next video. And next thing is you and 56 place. So this function accepts these two things. Now, let's have some modifiers. That is, what are the requirements? The first requirement is price should be greater than 0. If it is not, then we will write must be greater than 0. Then next requirement is message that value should be equal to the listing price. As we add listing the market item, the user has to pay some fees. Price must be equal to this thing. Price. Now, let's do that mapping id2 market item. The idea will be token ID. And in this token ID we are saving a market, a DOM object, or you can say this structure. It accepts OpenID, then message sender. Then this stage that is the owner will be this smart contract like now, because it is not transferred. Then price and Boolean value false. That is, it is not being sold yet, it is just being transferred. Now, we will assume Greg transfer message sender address, this token ID. And then we will make this function that is this event market item created. And it accepts arguments, just tokenizing message, sender. Address. This, then ice and false. So this was now functionality to create the market item is Token ID. We will meet in the next function. Then we have some modifiers that these requirements. Then in this mapping, we are saving this value. It is a token ID. That way that is the seller is the message that sender and buyer. It is their own node that or who owns this is this, that is the contract, this smart contract interests. And you might be thinking from where this transfer from Chinese coming, this transfer function is coming from the append sapling library. So it is an inbuilt function. If you want to know more, you can read about that transfers, safe transfer, all these methods. But that's it for this video. See you in the next session. Thank you. 6. Functionality to mint a new token id: Hi. In this video, we'll create the functionality to mint a new token, as well as create a market sale for minting in new token. Let's read that comment. Means a token and list it in the market place. Okay? Now the function, it will accept, first of all, definition, name, every layer, name it, create token. It will accept a string memory token, URI, you and 56. Off price. That is, what is the image URI, as well as what is the price of that NFT. This will be a public function. It will be a payable and it will return that dog can id. That said. The first thing we have to do is increment token ID, that is here. This is our variable. Inside this counter code, we have this function that is dot increment is predefined in the open Zeplin. It will simply increment by one, that is 0 to 11 to two, like this. Now, next thing we will do is get the current token ID. That is Ids dot current. It will simply after incrementing, we will get that current and that is from 0, it will become one. And then here we will get the one, that's it. Then we will use them main functionality given us by open Zeplin really meant it to the message sender. And we will have a new and we will also send that token ID. Then you will set token URI. Can you add? It will have a new token ID, token URI. And then now we will use this idiot market item function. So that is why we make it private, because we will be calling it internally. That person cannot call this function directly. First, he should have this token ID and all. It will simply accept new token ID and that price. And finally, we will return the token ID. And again, these functions are coming from the append Sapling the library. If you want, you can go and research what is moving toward this set token URI and all. But this code is predefined fermenting. And here we are calling this function, which will transfer this token. That is first it has been minted to the message that sender, and then it will get transferred from message that send that to this smart contract. And that is why. And that is how it will be listed on the Marketplace On behalf of the evidence on behalf that is from the owner to this new unit. Like this. Later on you will understand more. Now. The next thing or the next functionality we will create is mediating. The sale of a market glaze item. You can also understand like transfer. It will transfer ownership of the item as well as funds between parties involved. Okay, so let's start writing. It will be a fun Chen. I will name it create market, sale. It will just accept that token ID. It will be a public function and it will be a payable function. Now, let's start writing you int I is equal to ID market. We have that token ID. From that, we will get there. But after NFT, like this, then address we'll get the seller dress idea to market. Then Token ID dot seller. Now we will have some modifiers, that is requirements. First requirement or down lead requirement. Is it this message dot value should be equal to the price of the NFT. That is wild buying the NFT, it must transfer that correct amount. Skin plays in our diode to complete the purchase. Okay? Now, if it is alright, then we will just make the changes. Id to market item. Token ID node is equal to. Now we will do some change that is updation. I'm just simply, I will just simply write here like this. Will be now payable message sender. Now and it will change, does sold to true. And then it will make, the seller will address the address of this. It is address 0, that is now no one is that sale seller. It is already being sold. And this means empty address. That is that address belongs to know what. Now we will increment the items sold. It is here, increment this one as it is now being sold. Then we will use that transfer function, a function given us by the open Zeplin will transfer the ownership. This contract message sender. And this tokenizing. Next thing, we will just transfer the funds that is pay. Well, now we will get that is owner of the smart contact. Us, really get that listing price. When someone is NFT, it is 0 something 0.001. And also does seller will get the price of his NFT as he was selling debt NFT in our marketplace like this. That's it. So this was the fungi. That is, this is the function required to make a market sell. Here we are calling this function. So I hope you have understood. If not, please try to Google whatever you are confused in. Because these dot transferred in all comes from the solidity basics. That's all for this video. See you in the next session. Thank you. 7. Functionality to fetch unsold market items: Hi, welcome back. In this video, we will work on the functionality to fetch unsold items. First, let's write a comment that is returns on unsold market items. Let's name it. French market items. I have name it fetch market items because in the home page, that is, when the user goes to the website, that first page will fetch all the items which are listed in that market. And if they are listed in the market, that means they are all unsold. Equally be a public function. It will just return or that is viewed. You all these variables. It will not make any changes that so it's view. And it will return an array of market item and we have to give my money equation. Now, let's do some calculations. Item count will be Ids dot current. Okay? And sold item count. Will we do that is item count. This token ID is the current minus I, sold, not current. So what is the logic behind this? Suppose they are to tell then NFP is in that market and six are being sold. That means sole item count will be four. That's why this subtraction. And now we have to loop through our array. So we will like current index. Let's give a capital I like it that way. Current index is equal to 0. Then let's have an empty array which will contain our landmark eight items. Is it good to new market items array, and this will be land and sold item count. This. So this is an empty array. We will push items here and then return this array. Let's have a for loop. Yeah, you int I is equal to 0. I less than item count I plus, plus. Then if, let's say if statement. If I did do market item I plus one, because it will start from one owner is equal to address of this contract. That is, it is not being solely at since we are changing the owner here if it's being sold. So if it is the, then current id, id will be I plus one. And then we will simply have this smart kid and I'm storage current. I is equal to id to cutting tidy. And here it's mentioned here because since the token ID is also starts from 0, so this I will be same as that token ID. As we also increment Token ID here. When we are creating a token. Then we will have this items variable, empty array in that current index that is 0. See if this item, then we will increment the current index. That is, next time the item will be stored into one in the index since 0 is already filled up by this. And this will just go on loop. And at the end, after the for-loop, we will return data items like this. We will return this item. So this is how we fetch the market items. I hope you have understood. If not, please make sure you stop the video and try to understand the logic behind the code. As it is the only thing which matters that you understand the core concepts, how to write functions on your own. That's it for this video. Thank you for watching. 8. Functionality to fetch items owned and listed: Hi. In this video we'll work on the functionality to fetch. Nft is owned as well as created by the user. Let's work on the first functionality, which will be turns on the items that a user has purchased. Okay? Now, give that function name. Fetch my lefties. It will be a public function. Returns. It will return an area of market items. Then let's start with getting it to delight them. Count. Count is equal to. So can IDs that current. Then you end item count. I will explain all that code. Just keep writing. You in. Current index is equal to 0. Now, the first thing we have to do is get the number of items. That is the number of NFT is owned by the user. Here we get that name number by this calculation. But now we have to do a for loop like this. It is for you int I is equal to 0. I less than del item count I plus, plus if id2 market I plus one, that owner is equal to message dot sender. Then we will increment this item count plus equal one. In this way, we will get that total number of FTEs of this, that is, of which the owner of owner is the user. And after getting it, then we will do the same thing as above, like my kid item. Mammary, I guess, is a good meal. Market item. Now, the length of the array will be item count. This item count it is the length we did this part, let's say. Then I will have a for loop. You int I equal to 0. I less than item count. We have to look through everything. I plus, plus. If AD to market item. I plus one is equal to that is that's one dot o is equal to message sender. Then we will increment the current. We will have this current AD. As before. It will work as work is that token ID. Then we will get the item. We will get the item from our mapping AD. Then insert that item in our items empty array, that is current index is equal to current item. And finally, we will increment the current index. And then we will return the items. So this will fetch the items that the user has purchased. Now, the next function will be somewhat similar, so I will just copy it and paste it here. It will return only items that the user has listed in that marketplace. So I will limit batch items listed. Then it will be a public view returns some memory. The hotel item companies like a little token ID dot current item count 0, current index 0. Then I will have you and I. There's ten to delight them. Count I plus, plus. If id2 market item here, it will be seller that we want on lead us, on lead dose. We use already selling them. I says dot sender, item count plus one. Then we have is empty at a bar I is equal to 0, I less than total item count I plus, plus. If I did the market player ID to market item here, it will be seller. The message sender. You inked current ID. Is it good to hear? It will work as it will work as the id. As that is all that. They also start from 0, then one, then two, then three, that soy, it is the only reason. Then we will get the, get that item from the mapping. Insert that in our empty array here, and then return that item. That's it. So this is their functionality to fetch any of these created, or you can say listed by the user. So I hope you have learned and enjoyed a lot. That's it for this video. See you in the next session. Thank you. 9. Functionality to resell and cancel market item: Hi, it's time-related. The last two functionalities that these two resell as well as can see a NFT listing. So let's comment first. Allows user to cell A2 can have chased. When Jim resell can you into 56 Token ID. During your 56 price? It will be a public function, will be a payable. Now, there will be some requirements. The first two columns will be a D2 market item. Id. Dot owner should be the message dot sender. Is how can he sell someone else's NFT? Only item on that again, this operation. Then next requirement, we need to allocate item. So id dot, not, not this. I will simply say message dot value should be listing price because here again, you are really stink that NFT, so you have to pay the listing price. Plays must be equal to this thing. Race. If these requirements are fulfilled, now simply make the updation that this token ID is equal to false. Then simply copy it. Paste it three times. The second will be a swing, be the place. If someone changes, the price, will be payable. Message sender. Oh, no. Oh no, it will be again. This contract address. Now again, it is now transferred to this contract address. Then we will decrement the items sold as that soil properties, again listed. And we will transfer that ownership. That is message sender. Address. This contract can aiding. So this is how we write the functionality to resell it token. Now, it's time. We write that functionality to cancel a listing. That is someone list there, NFP to the marketplace. And then they taught, no, I don't want to sell it. I want to own it again. Know that this function will allow them to do that. You can sell their market listing. One Chen can sell them. Listing. This will have, you went though 56 token idea again, that is which token I need to cancel. It will simply be a public function. Here. That requirements will be. First thing it will be the same. That is ID token. Here. We'll mention that token ID and then we will write whether the seller is the message that sender or not. If not, then we will show on Lee Sellers can perform this operation. And the second requirement will be added to market item. So can id dot soul, whether we have to make sure it's not being solely at on the can sell a terms which are not yet. That's it. These requirements are fulfilled. Then simply, we will do the updation in the mapping. That is Token ID, that is equal to owner will be again this message that sender ID that seller, seller will be null. That is address, which is 0 address. And then ID. Token ID not sold, will just simply make it sold. The item is simply got sold to the user itself. We can just say item dot increment because we, we will get our shared. That is the listing price. Now it's up to the not audit. Use it whether he wants to sell it or not because already has paid us that listing price. So we will just transfer that listing price to us that is the owner of the smart contract. Transfer listing price. And we will transfer the ownership from this address to the message sender, not Token ID. So that's the functionalities are now ready. Our smart contract is completed. I hope you have learned a lot here. If not, make sure you don't go forward, but try to understand what this keyword does, what this keyword does, that basic concepts. In the next video, we will work on the unit testing to make sure all these functions are working, prefer working properly before deploying it to the test network. But that's all. Thank you. 10. Unit test to deploy the contract: Hi, welcome to the new module where we will work on the unit testing since Blockchain is immutable. So before deploying our contract, we write unit tests to make sure all our functions and variables in our smart contract are working. And they turning the correct values. We will be using Mocha Chai library for this purpose. So now let's get started. In that test folder, create a new file and name it NFT market. Cheers. It requires some laboratories that is within the child library. We will require we will require this expect. And we will, we will require it to us from the Harvard had library. Like this. I hope you know how to write test in. That is in more card shy because these are the basics. I'm not I wouldn't be explaining very much. Let's name this. Describe is just used to group or you can say nest our test cases. This is how we write it. Mocha uses hooks to organize this structure. One of them is this description. It will be des, cry. Like this. It will be described. Now have, let's have some way it was if the market then lead, smile NFT did n. If D minor. Then let listing, praise and lead. Contract or no, desert. All variables. Led by Entrez left lead NFT, market actress like this. And if the marketer address and we will have the auction price, auction price, you can just say the selling price. I'm just writing it in a constant so that it will be easy to android. A third, like this. We'll just write it in Henrik details. Now. The first thing we will do is use a before each hook. Simply, this is a hook which will perform before every test case. So we just have to write it once. Here. We will read dest to deploy the contract. Let's have NF2 market is equal to await. Eaters dot get contract factory. Our car. Our contract name is NFT marketplace. Than NFT market is equal to await. Nf2 market, not deploy. This is the deployment code. We will wait until it's been deployed. Then we will get downmarket address and we will store it in this variable that is NF2 market dot address. Then we will get some test addresses that is contract or not. And by the Jezreel get from eaters that gets sinus like this. This will be dummy accounts given us by the hardhead environment. You can say, yes, the environment. Then we will have listing price is equal to await. If the market dot. Here, we will now call this function that is get listing price. And now we're able to call it with this instance that is NFT deployed instance. Then we will simply GnG toString it is listing price da2, string, like this. And next thing we will do is just create a function which will help us to mint enlist NFT. Let later on. When we are testing, we don't have to write this code again and again. Meant list. And if D is equal to a sink, it will accept this token URI. Auction price balanced transaction. This is the state variable, is equal to await, NFT market dot create two candidates we're now calling this function create token will send that token URI, selling price. And we have tours. So make sure we are sending the listing price. Then we will get Daddy see, await transaction that weight balanced coin ID to receipt. That events. 0 dot dot token ID. You might be thinking, Wait, I'm just explaining. You might be thinking what is that? You might be thinking what is this? So when we are waiting for this transaction, it is going to save it here. And when we printed it is if you want to console dot log receipt, then you will get it is being nested. That is, there will be maps there already is. So we are just getting that token ID from it. That's it. So this is the base of our unit test. In the next video, we will write each and every test cases. So see you in the next session. 11. Unit test to mint and list nft: Hi, welcome back. In this video, we will write the unit desk to enlist a and F d. So let's start with the describe. That is, as we know, we can desk using this club, we can nest our or we can nest our group test and all. This will be main and list a new NFT token. Then funtion. First thing I will do is const token URI is equal to, is equal to. I will just have a domain. Though. Can you add HTTPS, then? Some token that you are? That's it. This is just a dummy. Later on we will use real token URI. The first case that is using the ID on the first test case will, we should reward if price is 0. This is the first test case. Let's say a sink. We expect. Now we will use to expect from the child library. Expect. We will simply use this meant and list NFT. We would send that token URI, end up price. We will send 0. And simply, it will be to be reverted weight. And what message we will get, we will get this message. Price must be greater than 0. This paste it here. This is the first test case. That second test case will, we should reward if listing place is not correct. Sinc function. First thing we will called create NFT. When Chen Here, const Token ID is going to await, sorry, I just remove it. And now they await. Expect. Nft, market dot, create token. Here. Just send can you add then auction price and in value, simply send 0 to be in work deadweight. Just wait. Another will be rewarded with and play. Now, copy, this place must be equal to the listing price. Now you might be thinking why I didn't use this maintain list NFT function. Because here we are changing this value. But here we're not accepting any value as a parameter. So I just statically call this Create Token function. It is a public function, so we can call it. That's it. Now, let's at least these two test cases. And before that, I would like to delete this lock and our test cases. Yes, they did a day later than in the scripts. Also. Simply delete is deployed and cheese. Okay, so now we have just the NFT marketplace. Okay. Now bring the command line in that folder first set and px, I'd had compile. Let's see what we have to mandatory install this toolbox. Okay, just do it. Npm, install gnomic labs foundation hard edge to the box. Yellow some node modules and highlight conflict that is here as well. It's been required. That is the reason my dad had been started and see if again we get any editor or not. Okay, In Sweden stand. Now, let's compile again and see what it gives us. Okay, also, I have some mistake that is 170 line decrements. Spelling is wrong. The claimant I'll say this willingness to use either now, hardhead were full. We are harder matches. Let's see. Hard hat. Just try to check our testing. See, these two are working. And if you want, you can just remove one of those. Or if you want, you can use gnomic foundation. Child matures. It's up to you, but right now it's just a warning. It won't disrupt the code. Now, the next test case will be eight. Should create an NFT with the correct node. And so can URI sink when Chen. This first skit that token ID, token ID is equal to await. Maintain list NFT. We have this token URI above. Then we'll get the main dead. So can you, or is it going to do a read MFT market that token URI? Can I do const or node and trace is equal to await the market dot o node of token ID. So these two are pretty defined inside the contract. That is, we can get that by sending the two Canadian. Next thing is to just check, that is expect owner address to equal to the f d market address. And second thing, expect mean dead token URI equal to token URI. That's it. This is the test case here. Third test case and final test case in this desk grab group will be should meet market item created after successfully this thing of NFT. This sinc function. Then simply we will add const transaction is equal to await NFT OR gate dot create token. So can you RA auction price? Value will be listing price. Then let guns. The seat is equal to transaction dot weight. Expect. Before this weight. Just this token ID. Same thing that we see the events. That argument's not Canadian. And then we will expect transaction to animate. It will emit that event. First we have to write the contract instance, and then what it will emit. It will emit here that this, this, this thing, mark market item created with arguments. Can I do contract or node address? And if the market address, auction price and sold will be false. That said, let's say, Well, again, let's try to test it. In really big number. Argument. Should check. What is this added. Maintain list will accept two things. I forgot to send. Oxygen praise as well. Let's save it. And again, let's try. Okay. So Alda for test cases and now correct. So we're reassured that those functionalities are working at least. In the next video, we will write more test cases. Thank you for watching. 12. Unit test to execute market sale: Hi, welcome back. In this video, we will create our next dex test that is to execute markets cell. Again, that's how we describe. Make sure we distinguish a separate test cases. That is, here we will add, Execute, say, of a market, Place item. Then funtion. Again, let's have a token URI. These, we can copy this only. In copy this. Then let's have the first test case which will be should revert if auction. When a is not correct. As saying const new NFT token is equal to await meant enlist NFT token, URI and auction place. Then we'll do x, x and f d market connect, biota desk because now we have to change their address. The seller cannot buy it. Then if we create market, sale, markets sale, new NFT token value, we are just sending random value not to be reverted weight. And here it will get diverted with this. That is submit Does can craze like this. Okay. Then next test case will be by a new token. Oh, no. Entries. Saying again, we will have const, new NFT token is equal to await. Meant enlist NFT token URI and auction place. Then we will add const. Owner address is equal to await NF2 market. Or none of it will be const or know of this token when it is listed. So now we will expect, now the owner is the market place. Address. It is here we will expect, expect, oh, no address dot equal to, equal to NFT marketplace. I dress, marketed dress. And then we will what? We will just create the market sale that is NFT. Market dot connect will connect with the byte address. Dot create market silver will buy it. New NFT token value, auction price. And after that, we will check the new node. And dress is equal to await NFT market dot o nat off new NFT token. Here. Now the new owner is the byte address. We have to check this is working or not. Expect new owner address to equal to buy at address that address. Okay. Now let's check whether it is working properly or not. Yes. So this case is also correct. That is first thing which has submitted the auction price wrong. When we are buying it, we are not sending the correct amount. And then the next case, we make sure that the transfer of ownership is working properly. That's it. So that's it for this test unit test. In the next video, we'll continue working on further desk to make sure our contract is that is not faulty or is any or there is no bug in it. Thank you. 13. Unit test to resell market item: Hi, welcome back. In this video, we will write a unit test to resell a market item. As you share like that is clay was here. We will write g sale of a good place item. Then function. Let's have this token URI. Then the first case will, we should revert if the current owner are listing price is not correct. Now here, let's have the new NFT token is equal to await maintained list, NFT token, URI, and auction price. Then we will simulate await, NFT market dot connect by Red Dress. Create, market sale. New NFT token. Value will be auction price. Then we will have the expect that this expect. Now understand this. Here. We have maintained, that is maintained that token with the address of the contract owner. But in the next line, we are trying to, or you can say, we have just bought dot token and now the owner is that byte address. Now if we try to resell that is NFT market dot token. And now we are trying to resell it with that contract owner address since we're not using dot connect. And here, as you can see, new NFT token auction price, value listing place as we are trying to list it again. This will be reverted, that is to be reverted weight. Here you can see it is saved here. Only item or not can perform this operation. Make sure it is reading the codes. And the next thing we will do is awake. Expect NFT, market dot connect, buyer address, dot resell token. Okay? Yeah, we can see we have everything, okay, that is new NFT token, then auction price than value. But we are sending the listing price wrong. It is 0, then it should be rewarded with to be dead weight. You can see here, it should be reverted weight. Price was equal to listing price like this. Okay? This, this test case is located this we have this to expect statement here. Then next test case will be to make sure that reselling is working. It is by a new token. And then resell it. Yeah, I will just have these two lines. That is new NFT token is equal to maintain list on that day. Then we are trying to connect up by address to create the markets sale. Now we will do const token. Owner. Address is equal to await NFT market owner of new NFT token. Now, here we will check. Now the new node is the buyer. Address. Expect on I'll address to equal. By it. I dress dot address. Okay, now it's simple. This is simply a market sale. Then what we will do, we will lose NFT market connect, bad address. We will again resell that token to the contract. It is the marketplace, new NFT token, auction price, value listing price. And then we will have new token is a good rate if the market that are not new NFT token. And now here, now the new owner should be the market place address because again, it is being resettled. They that is the owner want to resell it to the market. It is Expect new token owner to equal. And if the marketplace, okay, let's save it and test it out. Let's see whether this desk cases working on now. See the resale aftermarket play item is also working smoothly and flawlessly gaze no added. So that's it for this video. Let's continue this unit testing series. There will be further writing where one or two videos only. Then after we will deploy this contract. Thank you. 14. Unit test to fetch market items: Hi. In this video, we will write a unit test to fetch market items. Let's start with a describe statement. Then we will have full name which fetch might get glaze items. As you shall. We will have this domain. And also if you want it, you can just write it here as well. It's up to you here. But I'm just setting it inside every desk. Crab claws. Let's have the first unit test of Disney scope. It is it should match. The correct number of unsold items. Will just really meant three N of t is this dog can you array. And now auction plays. I will just copy two times. Now we have three items in their marketplace. Lead and sold. Items is equal to await. And F D, market that market items. Let's see where is this function? See we have this fetch market items. And then I will just write expect. And sold items. Dot length will be is equal to three as we have 3.5 days. Then the next case should be, should garlic, number of items that they user has chased. Let's have led. Nft token is equal to await meant enlist NFT token URI, auction price. Then we will again meant to LFTs. Now, what I will do is I will create a market sell it is NF2 market dot connect. I will use, I will write the byte address. Then. Create market sale. Okay? And I give that token, I did it this NFT token ID. Then you will be less. Think I'm just buying it. So rarely will be auction price. Okay? Now, I will simply led by our total items is equal to await NFT connect via dress. Now I will call fetch. My NFC is this one, which my NFT is. Simply expect. This is buyer total items dot length. I expect this to be equal to one, since I only bought one NFT and others are still lifted it is these two are still listed in the marketplace. So this is how we test that, whether it's working or not. And that third test case will be should correct number of items listed by a user. That this makes sure that that particularly users number of items that are correct. I will simply meant like this. Then the third one, I will connect with NFT market, dot, connect with the biologists. That is key. List. This in the marketplace. Create token. Then. So can URI, auction price, value, listing price. Now, let own listings is equal to await. And if the market. Now here we can see there is this patch items listed, but that is by a particular user. Now we are trying to make the fetch items which are listed by the contract owner, not the buyer address. The contract owner has listed to n of t is simply expect. Owner listings. Dot length should be equal, equal to two. That's it. Let's save it and now test it. See all the test cases. Okay? So now we are sure that at least that market and that is the fetching of downmarket items are working properly. That's all for this video. See you in the next video, which will be the final video of this testing series. And Q. 15. Unit test to cancel market listing: Hi, welcome to the final video of that testing module, where we will write a unit test tube can sell market listing. Now, let's read the describe statement. It will be can still get place listing. When Chen can you. Let's get the token URI. Let's have the, this case. It is, should say, and return the correct number of listings. Let's have NFT. Token is equal to 08. Maintain list NFT. We have the token URI and auction price. Then we want to create tokens. They will just copy this, connect by address dot create token. We want to create that token using that buyer address. And the first one was created from the contract and it is owner of the contract interests. Now let's let unsold items is equal to await NFT market that market items expect. So like terms dot length should be equal to three, is equal to three. Then what we will do, we will cancelled one of the product that is one of their listing. Using can sell them listing. And we will simply send the token ID. And then we will let, let new item. So we will do a wait NFT market that fetch market items. That is how many I listed now in the market simply await. Expect new unsold items that land should be equal to two since when is now canceled. Let's see that this thing is working or giving us some aerator. Yes. So everything is working. All the test cases have passed. So now we can relax because there is no error in our smart contract. In the next video, we will simply deploy the smart contract to correlate test network. And then further on we will work on the front end. Thank you. See you in the next video. 16. Writing the deployment script: Hi, welcome to this new module where we will write the deployment script or our smart contract. Just close this test file. We don't need it anymore. In the scripts folder, Let's create a new file and name. We deploy ab.js. And let's start writing the code. At first, we will require a terse on the hardhead laboratory. Then let's have a main function. Here. We just have to deploy our contract as we did it in the test file. Just like contract factory is equal to await eaters dot get contract factory. It will be, let's see. Again, I don't want to make any mistake. Copy it, paste it to const contract is a contract fact radar deploy. And every contract deployed console dot log on track. They like to have on track and to insist just console log it. Because make sure to save the address to use later. In front-end. Then we will just create another function. Since it's an async function, we will just say run main is equal to a sink. Then we will have a try catch block. May await main Ross's exit if everything is okay, then exit. If not, then console.log the editor and process that exit. Weight one. And finally, this runway in function. But this is how we write the deployment script. It will be seen for most of the projects. You just have to change this name to your contract name, and that's it. You can just copy, paste this code in your other files as well. Now, to deploy our smart contract, we have to use a command which is and px. I'd had run. Then inside scripts for ladies, deploy that js. But after that, we have to mention the network as well with this dash, dash network and then o'clock name is correlate. These go live. We have mentioned in the iodide dot config file and then press Enter. It might take some time. So our contract is being deployed to this address. Make sure you copy it. Because in the next video, when we are creating a Next JS product project, we will use this address. Also, if you want, you can just make sure to verify dates. They're going to go lay ITO scan, then simply paste your address here. Now you can see this is this address being under block, blockchain 39 seconds ago. So we have this contract created that said, this is how you deploy your contract. Thank you. 17. Setup and start working on Next js: Hi, welcome to the new module, where we will work on the user interface. Now the smart contract portion is done. We can start building out the UI. We will be using next JS, which is a React framework. But to create the next js app, we simply have to use this command, that is Bx. Create. Next app and name it client. Also. Now in order to interact with our diploid contract rate x. And we just have to say, okay, now it's installing. Now in order to interact with that deployed smart contract, we will need two things. That is first is contract address, which we have here, and that Amy, I now to get the EPA, we simply have to copy this file that is in the artifacts. We have the contracts. And in their contracts we have this NFT market marketplace dot json file. We simply have to copy it. And then let's see where they stand. Know that Glenn folder. Okay. Now it's done. Let's see their claim for let's see we have oblique pages, styles, our listings. So here is just simply create a new folder and name it ABI. And paste that JSON file here like this. Okay? And also for that contract address in that client folder, I will create a new file and name it. Config dot J S. Here. Yeah, I will have two variables. First, we export const, contract address. And the second thing we will need is the URL that is const in fewer. Url is equal to like this. For the contract address, simply print this one and paste it here. The infusion. You just have to go here. Same thing, managed key and copy this URL and paste it here. This is the main net. No, I don't need them in net. Let's see. I need the latest network. Okay. The inferior URL as well. Now, with next years, we will use a CSS framework known as tailwind is a utility for CSS framework that makes it easy to add styling, and create goo, good looking websites without a lot of work to install that tailwind dependencies. First, we have to go to the client directory, cd to client and type this command, npm. Install the deal when CSS at Delhi latest CSS latest, fix and direct latest. This. And just press Enter. Know more about Tailwind and all. You can simply write. Next chess. A living. Here. You can simply read the documentation says, well, we will do these changes. Now as you can see, what the command and all via have installed, installed. The packages just, I will check it once, okay. Okay. Now we will create the configuration files needed for Tailwind to work with me next year is that is Tailwind dot config dot js file and post sss dot config dot js file. And we can do it by running this command and bx. When CSS in this, that's it. We have this files now. Next, configure our template content part in Tailwind dot config dot js here. As you can see, this line, we simply have to copy this. We have chairs, dx and we have this line. You simply have to copy this line from this website that is tailoring CSS and how to install the next years. And paste it here like this. And then delete that coding style slash, global CSS that is here. Here, delete this and replace it with this line of code. This week, this line of code, that's it. This is how the configuration is done. Then we will in style, few dependencies required, which will be required later on. In that Glenn for less simply write npm install tree model space XES. Web tree model allows you to connect your app too many wallet providers such as Coinbase, MetaMask, wallet connect, and XES makes it easy to run as synchronous HTTP request to rest, endpoint and perform the operation. We will use XES to fetch data to the DOM API later on. So now simply let's run our next JS application using npm run dev. Okay, let's go. And simply the URL localhost 3 thousand. And you can see we have our next js app running. So that configuration part is done. Let's work on the next GS front-end portion. Remove everything in index.js file, which is inside pages here. We have index.js file. We remove everything and start with importing dependencies. That is important. Ethers. Ethers. Then Import, use and affect gamma use state from React. Then we have two input x, z OS from us. Then we have to import tree model, three model. Then we will import contract and dress. And that is from here. I'm talking about these studies, contract address and a URL in the URL from the config file like this. And finally, I will import that NFT marketplace from that is that contract instance from the ABA using this dataset. We have the ABA and then we have NFT marketplace dot json file. This file we are exporting by default is NFPA. The spelling is wrong. And if the marketplace distinct. Now, let's have an export default. I hope, you know a little bit tough react and next year is because this won't teach you, is to do really is all about NFT marketplace return. We have this div. Simply. We have, we'll come to, Let's see if I save it. What happens? See, we have this welcome to home. I know it's not looking good right now. But that's the first thing. Let's work on down navigation portion, which will be persistent across all pages. To set up this, we have to go to this ab.js file, which is inside the pages. And here we simply have to return multiple things. So first of all, you just don't delete it, just cut it. Then inside here, we will have a div and just paste it below. And above this component, we will have our navigation in this nav. Now I will start using Tailwind CSS that is bordered by adding six. Then I will have a p tag Meta worse. And if the store, I will give some padding to this as well, className text. For Excel. On the very top. I will import link from next link. Then I will simply have a empty div, which will be flex margin top four. And then I will start having my link. This link should F. And inside that link, I will have an anchor tag. Name it home. Let's have some class names that is margin-right or text being 500. Like this. And now just simply copy this and paste it three times. The next HF will be create NFT. It will be margins six. And I will limit sell, sell, NFT. Then the next SELF will be my. If these and I will simply name is my NFT. The last navigation will be Creator dashboard. Dashboard. Simply say, well, now let's check our website. See, we have this home. It is looking decent. I won't say this is the best design, but our focus will be more on the complete implementation of that NFT marketplace. You can change the design later on using whatever snippets or code you get on the internet, It's up to you. So that's it. For this video. In the next video, we will work on the functionality to show NFP is here from the blockchain. Thank you. 18. Function to load NFT: Hi. In this video, we will work on the med tech to load NFT. So let's first start with some variables. And if D is set, and if these is local to use state, we will use the React hook and give it empty at the very beginning. And that's seconds. State will be loading state. Set. Loading state is equal to u state. And at the very beginning we will simply write not loaded. Because this will, we will show a loading indicator or a text while we are fetching from the blockchain. Now, let's start with our function. We will name it, Lord. And if these, so the first thing we will do is have a provider, new eaters, the high dose dot JSON RPC provider. And second thing we will have an instance of our market contract. Contract. Then the first parameter takes the contract address. Second, it takes the ABA. And tired it takes the pro hided it is here we are using the JSON RPC. You can Google what is, what does the JSON RPC and all does. But in simple terms here, it will just, it won't authenticate the user using the Meta mask. Since v has just fetching all the data, not some particular data related to the user. Then let's have that data. We will call that function in our contract, which is named Miss pet market items. So these are Alda, that is all. Nft is. This is what it does. Also this this load NFT should trigger whenever someone comes to our website, that is the first thing. We will use the US effect hook and call this function like this. And it should be called only once. So here, these are just react concepts. Next thing, what we will do is here we are getting an array of items that we will firstly convert it, convert them to an object. Or you can say this a JavaScript object, only. The const items as well to await rami start. Here. We have this data dot map. Inside it. We have a sink. I like this. Now. First thing, let's get that token, URI. Market contract. Token URI. We will simply send that token ID and with that, we will get the token URI. Or you can say that HTTP URL. Then. Now we will use the x z OS library. It is XES get token URI. Then we have that price. Let's convert it to string. That is, eaters. Do deals that format. Units. I dot price dot two string. Okay, now let's create an object, JavaScript object. The first one we praise, that can be Token ID. It will be I, can ID number, then seller, a seller. Then we have the owner, the owner. Then we have the image. Image we will write like metta dot data, dot name. And description will be met the data description. And then we will simply return the item. So what it does is it just create an array of items, objects. So this mapping simply needs and a variable, you can set these items and store everything in that area. And finally, what we will do is said that NFT state with this items variable and set the loading state to simply loaded. Like this. This stuff function to make sure we are loading the LFTs from the blockchain. The next thing what we will do is here we will do some return changes. That is here. If, if loading state is equal to not loaded, then it will simply return one lastName, bx two in d. That is begging at the x-axis, reading why then y-axis? X is three x. These are all tailwind CSS. And we'll simply write weight loading. And if loading state is equal to loaded, but also and if D is that length is not there, that is, it says 0. Then we will return again another H1. But here we will simply write no items in marketplace. Okay? And if both are false, then we will return simply to them home. But this we will configure in later on videos. Now let's save. Let's see if j is in the editor. When everything is working. Let's see, we have some edit here. Let's differentiate. Let's see. I think we might have made some mistake, could not detect network. Let's try it again. I think we don't have it installed. I think this might be the case. Let's see is can be an issue here because I cannot see eaters. Let's install it first. Vm in star interests. Okay, let's see. Now we have e tos in style. Let's do npm run dev. Let's check out the gain. Just give me some time. I will see what is the edit. Okay, I caught the error. Here. In that JSON RPC URL, you have to enter your inferior URL, which you are getting from the config file. We'll just copy this and paste it here. That's it. That was the issue. And now you can see if I refresh as well. It shows no item in the marketplace. But that's it for this video. Thank you. 19. Function to buy NFT: Hi. In this video we will write the function to buy a NFT. So below this, let's write sinc function by NFT. We will send here the NFT data as a parameter. Then. Now we will use the Web three model to connect to MetaMask. Earlier we will not connecting to my Damasio just statically using JSON RPC and calling that function. But here we will need user address volley they dress that is why the const connection is equal to await tree model dot connect. Then const Hadar is equal to mu. It turns start provider dot web triploid at this time. And we have to send this connection. Then what we will do is make sure that the user is connected to that network. They will do get Network is equal to await provider dot get network. Then we know that the net chain ID, that is its ID is five. So we will simply have a check. If get network dot j not equal to garlic chain ID, then you will have an alert dialog, which will say you are not connected to a network. And then we will return from here. We won't execute that function. And if it is, okay, then we will sign the transaction. Does signer. To provide get sign-on. Then we will have the contract instance, new ethers dot contract. And then we will have that. We should send the contract address, then that ABI. And then the signer. Then we will parse that price using eaters dot util, dot bars, units, NFT, not brace, dot, two string. Like this. Then we will have that transaction equal to await. One track dot the name of that uncheck index smart contract is create market sale. And now we have to send that token. And if the token ID, as well as that value, that is the price of that token. Then we will rate for this transition to complete. And after that we will load NFT again so that it will refresh the page. So this is the functionality to buy a new NFT. Then we have to return the HTML or the UI. If the user load and FDA, then there should be some UI to low dose and FTEs are displayed on those. And if D is a simply, let's start. Let's start here. With this. Dave. I will give some styling. Flex. Justify center. Then the class name here, again inside there it will with Dave will no padding at the x axis, y. And I will use this custom styling, that is, max, will be 1600 bucks. You can change the styling according to you, according to your wish. Let's have grid. Create. One. In smile says, it should be great. To enlarge devices. It should pay grade four. Then we have padding. Top is equal to four. Okay? Now, we will loop through that and Nephthys, the state, the desert. That's why I've used these curly braces because we're not doing some logical work. I would like NFT is that map. Then in this we will give, get a single NFT as well as the index. You can hover over it. See, we get the index as well. Now, Let's start with a div. We have to get that g is equal to the index. Then last name is equal to border, shadow around that. And then overflow hidden like this. Now here we will bring the image, so we have to import image from next image here, the very top. We will use that image. You can just close it here. The image source will be NFT, that image, that is dot image, because here we have this image object. We will give the name, that is NFT dot name. Then weight is equal to 300, height equal to 200. Then we will have a place holder as well. It is placeholder and we'll write blur. That is still the major shore, make it blur. And then blurred data URL. Yeah. We have placed image. That is, you can see I have placed an image in that client. Then public see, I've pasted this image from the Internet. It's simple placeholder. And it's the extension dot PNG. And then the layout will be responsive like this. Okay? Then I will have another div below, below that image. Classname, just give it some padding. Then when you graph style will be 64, Excel, class name. Next, Excel aren't semi bold. And here it really display the NFT, that name. Then we will have another div, will have Stine, I, 70 pixel. Then comma overflow will be hidden. Inside it. We will have p tag and 2.5 class of text, a 400. And it will display the NFT description. Okay? After that, we will just a button for triggering this by NFT function. Now below this, these two div that is inside the main div will have another div. It will have className, reading for background, black than glass name, text, excel, margin bottom, or aren't, bowl. Next, white. Here we will show that if d, that price rate eat in their current. And below this, that these side-by-side or no, I will say below this will show a button which will write by now. And let's give some styling to this as well. I know these are a lot of codes, but you have to do it. Wait. Bag, that is background color being 500. Text, white, bowl, bedding y-axis to reading x-axis to end. Rounded. But that's all that designing class name and all. Now we will simply write the onclick. Onclick will trigger the function by n f d, t. It will trigger by an F D and it is accepting a meter. We have to send the NFT data. That's it. That's it. This is the code or the external portion of displaying the NFT on the home screen. If you want, you can just pause the video and recheck it again with their code. And if they're in future, we have some error. We will obviously solve it. Thank you, That's it for this video. 20. Setup Pinata IPFS keys: Hi. In this video, we will work on creating a new listing for the marketplace. So before that, we must have that keys are set up in the data in our application. It will help us to upload our NFT image and other datas on IPFS. For that, let's go to pinup dot dot cloud than simply if you don't have an account, click on sign up, I will just login. After that. Since I already have an account, I'm directly send to my dashboard. If you want, you can just pause the video and create a new account. Now, we should get the API keys for upload. For that, simply click on the right top corner. Then API keys, then new key. Now simply allow it. Then set the max animal key can be used. Just leave it. I will just name it. And if the market place like this, then I will click on Create Key. Now, just make sure you don't close this modal window because this secret key will be shown only once. The API key you can see later on as well, but this secret will be seen only ones. So simply copy this secret API key. Go to the config dot js file, where we already have in fewer and contract address. Here, simply write export const. First I will write key, and then I will write export const, data, secret. The secret, just paste it. And also copy that key as well. That's it. Now we can close this and also click on Done here. Now you are all set. Let's go to the code editor. And in the pages, just create a new screen and name it. Create. If d is dot js, just remember to give the same name. You give it here, that is here. This is create NFP, then make it. Suppose NFT is, it's fine. Just rename it. And if D, because obviously we are creating one and theta time. And this is how next year is navigation works. They ultimately go to the file name corresponding to this. Now here in this page, users are allowed to create enlist LFTs. They will be able to upload and save the images to IPFS as well as they can set metadata and price of item. Let's start with some imports. Use date. I'm react. And import. It hurts from ether's not hardhead. That input. Use the router as well later on, Let see it, we'll use it or not. Next. And outdoor than import the tree model three model. Now we will import the constants from the config file. First one is I would just go and copy paste. Here we will require contract address, then comma pinata keys. Then pinata secret, come up with another secret. Config. Then I will import NFT, market, place them here and just make sure everything is correct. Then I will import x z plus x z OS. And finally, I will import image from next image. Next leg, let, let's export our AP, CS, a default, name it, create an F D. Then let's start with some variable declaration that this file URL. And then set file URL to use date. And then reading files, it will hold a value of null. Then. Now we will use something like input. Update. Input is we're going to use date. But here, now we will have a structure like that is an object and we will D structure it later on. This election. These we will write in the text field and save it here. Then we will have that outer, which will reuse router. And then we'll have their loading state. Set. Loading state. They use date. The first thing is the first state will be not load, not loading. K. Also have to know more about the pinata APIs. You can simply go to. That is pinata darks painting. Here. You can see. Here we can see how we will do the things that, that is, what are the endpoints, how to pin file will use? We will use disoriented as I guess. It depends like we will pin Jason as well and we will pin the image file is written. You will understand later on, but make sure you read these two section. Thank you. That's all for this video. See you in the next session. 21. Function to upload file to Pinata: Hi, welcome back. In this video, we will work on the function to upload files stupid data. Let's start. But I think a sinc function image upload. We will send it as a parameter here from the input file. Here. We'll just get phi is equal to E dot target dot files 0. This is how we get the file from the input field. Then let's have a try. Catch block. Will console dot log the editor. Now, in that try, Let's have const. Data is good to new data object. And then simply we will form a theta dot append. Append file. By that is the selected file. Now, we will have it will send the z OS, that is XES HttpRequest. Result. Y is equal to await z OS. Then inside it, Let's have mattered as forced than URL will be http slash api dot pinata, dotCloud slash slash. When F capital phi to IPFS. This I get from the documentation. Then data will be form data. Here we are just uploading the file. Not dumb Italy dynode headers. In the headers, we will authenticate with pinata key. We pinata key. Then. Pinata secret. Apa, E will be now does secret. And finally, content type. And here the C will be capital. Content type is multi-part form data. This is the content Content-Type. When we're uploading a file. That's it. After that, we will create the image URL, that is for the pinata. Just type Shift plus not shift only directly the point that is below the escape keyword, we have this. Simply write HTTP S Gateway, pinata, Cloud slash, IPFS slash. Now, paste this. We will get the CAD. That is, I think content. I just forgot something. It was CAD. In pinata content identifier. You will get that. Aesthetically geht es phi dot data dot B. Ipfs hash. And finally set file URL to this image URL. In simple words, this is the URL we get when we upload the file in Pinyin. So that user can point to that location and show the image. So this function simply upload image two, IPFS. This does on this function only does that work? Now? Then next function we have to create is to upload the metadata as well as metadata includes title, description and price. Let's do that. Sinc function. Collude to IPFS. Now lets the structure name, description and price from input, which is an object. Now we will simply check if name is empty, our description is empty. Odd. Rice as well as file URL is empty. Then it will just return from here. If not, then we will change diluting state to loading like this. And now let's have a try catch block. And uploading. Why? I don't know. Okay. In that try catch block, Let's do JSon data. Is it going to do Jason dots, stringify, have been not. My data. These also are domain from the documentation. You can read the documentation and understand how we are uploading this JSON file. Name. Name will be the variable name dot json. This is the file name. And then we not. Content will be jet json like name. Description. And image will be file URL. Like this. After this JSON data. Now let's upload this JSON file as well to the IPFS. Const. Phi is equal to await zeros. Now, again, let's just copy this and we will do the changes. Will be post here, URL will be pin, not fine. When Jason J capital everything Capital Jason to IPFS, then data will be JSON data, this one. Copy and put this in the headers as well. The APN secret key will be same. Only change will be content type application, json. So here we are uploading metadata file and then getting that token URI. How we will structure that token URL like this. Again, HTTP S Gateway, pinata, cloud slash, IPFS slash. Same thing here as well. Less file dot data dot a, B, F, S hash. And then we will return the token URI. That's it. So this was the function to upload IP address, that is metadata. Let's have some comment. First, preload metered data to IPFS and then return. You are ladies the content or the token URI to use in later transaction. Just for the reference or just for me, just that you understand. Later on, step-by-step, you will understand where we are using this function, where we are using this function. And again and again, I'm saying at the very beginning, I was very confused. But when I read the pinata documentation on how to get this or how to write the headers. And now I learned everything that documentation. That's it for this video. Thank you. 22. Function to list NFT in market: Hi. In this video we will write the function to list the NFT in the marketplace. Earlier we have written that function to upload the images or the metadata, but now it's time. We listed in the contract as well. That is in which is already deployed. Let's try a sink on churn, list NFT. Or say, the first thing I will do is get the token URI. It is const, URL is equal to await upload to IPFS. It is this one. Plus thing we will do is this. Then. Now we will do the authentication. That is, web tree model is equal to new Web three models. Same thing. Let's go up and see where we have done that. I think we have done that here. Then connection, then we have provider, then we check it. Then we signed transaction. Then we have the contract that dress. Okay. Copy everything from the index page that is by, by nF different Jen. Paste it here. I will just check it to make sure there is nothing wrong. Yeah. Yes. Give it capital. Okay. We have to model. We have connection. We have provided, we have network. We are checking if the user is connected or not. Then we are getting the signer. Then we have the contract. Yeah. It turns dot utils dot parse units. Here. It will be form input dot price. While I'm input dot price. That's it. Then we have here contract address, NFT marketplace dot aba and sign up. Now. Also, let's get that listing price. That is, let listing price is equal to await contract dot get listing rice. Then we just change it to string. This thing price dot two string. Now we will do that transaction is going to await contract dot the function name was create token in our solidity smart contract, it accepts a token URI for ice and we have to send that listing value, that is listing price. Value, listing price, then the transaction rate. And finally, we'll just navigate that user to the home screen like this. Okay? Now it's time we return HTML at the very bottom. Return. Let's sit down with the DRF. Give it a class name. Blacks. Just defies center. Then they've lastName with one by eight legs, call margin, right? Margin. Top ten. Yeah. We will display that image. That is, once the user uploads it, we will display here before he makes sure before he can eat the token file URI. If it's not empty, then show this image. You will use the image from the next. When you give it rounded margin, top four. Source will be placeholder because right now the file URL is empty. We will show that place. So let image we have in our public folder. We'll give it a weight of 300, height of 200. Again. I will write if it's not empty, that is, it has some value. Then showed this image. Source will be file URL, will be image uploaded successfully. Then rate will be 300, height will be 200. Lease holder will be blurred and blurred. Data URL will be place holder. Dot PNG tilda. Image is loaded. It will show a bloody place holder so that the user knows that something is about to pop up. Okay, we have this div. Now. Next div will have a class name of width, one Bye half, that is right-half lex. Lex call. Let's have a inputField. Let's have a self-closing input field. Place holder will be set. Name. Class name will be managing top border, rounded corners by adding four. Then unchanged. Now, the thing is, when some data is change, we will have that data here. And we will update these. Here. We will use update form input. And we will update the form input. And inside it, we will just append Rudolf input, that name. That is e dot target value. Here like this. We will append it. And here it will be three stars that these three dots like this. Okay? The second thing, we will have a text area. We will have a text area for the description. There will be asset description. Lastname will be margin, top to border, rounded, rounded bedding for bedding, for n here as well. On change property, we will simply use. This update form field. Then inside it we will append. In the form input description is equal to E dot target value. Like this. Now here, let's copy this input field. Paste it below. Here the asset name will be as set price in it. And margin top to bottom or padding for unchanged is equal to. Here. We will change that. We will append up price. Here. There will be another property called type and type will be number. Finally, we have the input field to upload the file. That is input type is equal to file name as set class name. Let's have this self-closing is always className, will be margin at the y-axis for end on change, we will call the image upload function. Finally, we are using this function, image upload. It will automatically get the input that is the parameter e from here. Then we will have a button. If DOF, if there is file URL. And that is if there is file URL, then only showed that button. The button will have onclick, which will trigger the list. And if different chain that is here, list NFT for sale function. Lastname. We'll be font. Born. Margin, top four. Back around 506, white, rounded bedding for shadow at-large. Now, here, between the button, we have to write some text and I will change it according to the studies. If loading state equal to not loading, then show create, NFT. Adults show wait, uploading. Okay, so now we are done. Let's save everything. Go to our websites. G loaded. I hope the server is running. Let's see. Now, if I go to sell NFT, error message must do two properties or landfill property. That is here, we have some error. Must use a width and height properties. Let's check. Okay, I did this mistake. That I hope you haven't done that same mistake. I see. It is looking so good. Also. You have to do some changes in our next dot config dot file here. Just to make sure we have, we can show images that is that domain from which the image will be shown in our website, we have to mention here that domain name is gateway, pinata dotCloud, as we know. Because we have mentioned here. See gateway that pinata dark cloud here. And if we save it, then we have some changes. We have to restart the server. Okay? I will just close it, save everything, go to the NFT, CD blind and BM, then it's time we will test the uploading of NFP. Okay, let's just load localhost. I hope things will work. Let's click on cell. Let's choose a file. I will just choose this image. Let's see what happens. See, it's now being uploaded. Let's see if it is shown here or not. Then only we will be sure that yeah, it's working. Now let's have some inspect as well. Let's have in the console. Let's go to pinata. Let's see if anything is uploaded here. Yes. See marketplace banner, It's now uploaded here. It is taking too much time, but let's see, Let's write it. My first NFT, NFT future of internet. So it'd be 0.1. Let's let's make sure we are connected with the goal in network. Yes. Let's click on Create NFT. See, wait uploading. We have them write down mass coming. Let's see if it is if it will work or not. And we click on Confirm. Then after the transaction is completed, we will we will be redirected, I guess. Yeah. After the transaction, Let's see. We add redirected. And let's see now it will show here or not. It is not showing. But let's see, we have the metadata uploaded because there might be some mistake, we have to correct it. Metadata is also a bloated. Let's inspect. So let us see why it is not working. Obviously, there are some data and what is not showing because I lead to us no item in the marketplace. Let's console dot log items. Dot length c, one. We have one item. Okay, I got no, no, no, no. Let's see. It don't items, we have dy set that NFT is node D. So I caught a mistake. First mistake is here in this line that is not big curly braces. It should be round brackets like this. Okay? And when we save it, then again, we will get some error. And this is because I made a mistake here. It should be name. And then there should be another field of image. It will be metta dot Theta dot image. Let's see if it is working or not. Now, save all n. Yes. Again, I'm just having this issue why the image is not showing literal, so it was not shown. Let's see, do we have some other mistakes as well? Let's see, the image. D image is uploaded properly. The image URI is here. At the very top. See this one. You have created gateway. Gateway. That pinata dotCloud gateway dot, dot, dot cloud slash, IPFS, lash hash. So why it is not working? Oh no, no. See, it took some time, but it worked. Obviously, it takes some time to load the image desk. That is why we show that blood effect. But finally, our marketplace is working. We can sell. And if D, as well as it will show all the unsold and FTEs in the home screen. That's all for this video. This was a very long video. I know, but we have completed most of that task. Thank you. 23. Function to fetch NFTs owned or bought: Hi, welcome back. In this video, we will work under my NFT screen, which will display only the NFP is purchased by the user. So also before that I shot, I saw some added. Suppose in this index.js file, in this fourth line, that W was small, it should be capital. And also in that create NFT. This first line had some issue. That is, there was like this. This should be removed. Okay. Now, now in-depth pages, let, let's create a new screen. Intimate my lefties dot js. Here. Again, we will create a function that will return only the NFT is owned. But before that, we have to import some of the dependency or some of the packages. I will just simply copy from that create NFT here like this. And, and do the changes. Suppose here use effective state is needed, it is needed, use router is needed. Web tree model is needed. Here, pinata and secret key is not needed. Only the contract address, then NFT marketplace, then XES, and next image. Now let's export function, export default, punching my FTEs. Again here. We will need this thing that is NFP is and loading state. So from the indexes copy and paste it here like this. We will have NFP days and set an F-test. Then we have loading states, set loading state, the first state will not loaded. Also. If we want, we can have that out there as well. That is use. Now let's start writing the function sinc funtion load. And if these, now, again, I will have some. That is we have to authenticate the user the same thing from that create. Yeah, I will just copy web tree model, connection, get network, then then contract. Like this. I will just copy and paste it here. And check again. We have to model, we have connection, we have provided we have good network. We will check if it is connected. We could get the signer. I will just name it. Market place contract. Okay. We send a contracted dress. We have the NFT marketplace, EBI, we have the signer. Now, let's get the data. Evade marketplace contract dot match. My NFT is like this. Then will look through the data. It is items is equal to await dot, dot, dot, map, sink. I add. Then we add mapping through each and every data. And we're storing that data that is singular data in this variable name, name is I. Let's get the token URI is equal to marketplace contract token URI. And we will just write, I can ID like this. Then. Const metta is equal to await. Start get. Can you add a token URI? We will get all that data. Then let res equal to eaters dot, dot format unit I dot rice dot two string. Now let's create the object items. Item. We name the price. We will have that ID, token ID number. Then Sattler. Sattler. Oh no. I dot 09. Image metadata, data, image name, dot data, dot name. And finally token URI. And then we will simply return the item so that it will become a n, a n a of item studies here. After that simply at the end of this mapping. Simply set if these items and set loading state to loaded, like this. After this function. Let's also return the HTML. We will have this same loading state and now let's see which page has that doing this one. Like this. Yes, copy and Based including state is not loaded than just simply show weight loading. If it is loaded and NFT is dot length is not there, then just simply write, no, no, NFT is owned by u, like this. And then return. And then simply return. And here. Also we will return this thing. Let's same as index.js. So simply just copy this. You can copy all of this and then make that changes accordingly. Let's see. Copy it. Return it here. Now. Let's see if we need any changes here. Pixel for style max-width 1600 pixel, then grid column one, column two, great. Then we have an f, d is dot map, key, border, shadow, Excel, overflow hidden, overflow hidden. Let's have margin. This and margin the y-axis. Let's have this. We have the image alt NFT dot name. Wait, four hundred, three hundred placeholder blur. And it will be on safe. Okay. Then we have spreading for paragraph tag height 64 pixel class name. To excel fonts semi bold. And if the name, we have the NFT name. But here we don't need the NFT description in this screen because we already own it. We don't need to have so many data. Just delete this. Okay? Then we have className this, padding for background black, paragraph, text, Excel. And before one poll tax rate and if the price. And finally we have a button, BG, I will just give it Read. Text white, font, bold. By adding y, by adding x-axis surrounded onclick. Right? Now it will have nothing. It will just be null. And we will name it ricin and FT like this. That's it. Those were the only changes required. Let's save it. Let's let's see. It's the start screen. And go to my NFT dot fetch. My NFP is. Okay. Let's see What was that added? And if it is owned, it is showing this is not. Let's go to a market place. See fetch, my NFT is we have this. Why is she saying this now? They're saying marketplace contract. C. Okay. I don't know what was the editor, but salt. What was the editor? I hope if you get the same error, just copy and paste or I think everything was same. But he had no FT. And if they owned by you because we have created the NFT, but we haven't bought any NFT yet. So later on we will buy and test everything. And right now I just wanted to show you that this screen is that if later on, if there isn't any edit, we will just solve that as well. In the next video. I will work on this kinda this dashboard screen. Thank you. 24. Function to fetch NFTS listed in market: Hi. Next page we will be creating is the a dashboard that will allow users to view all the items they have listed in that marketplace. This page will be using fetch items listed function from the NFT marketplace contract, which returns only the items that match the address of the user making the function call. Let's create a new file inside pages and name it. Dash board chairs. This screen will be similar to the NFT screen. So let's copy the whole screen. And we will do that changes accordingly. So at debride it first, we will need these imports. You stayed a turtles, use router, web to model contract address, NFT marketplace and all. Okay, Then we will just change the function name to creator dash board. Okay? Then we have these. And if D is uncertain, if these, and I think we don't require that outer. Lets see an earlier also, we didn't require that outdoor. If we will require will just import it again. We have created and loading state. Then use effect, then load N of t is okay. Then in their load and f t, We have the web tree model, then connection, then that provider. Then we will check the Golgi network. Then we have the signer. Then we've done marketplace contract instance. Then we will call this function. That is from the contract, will call wedge items listed. And we will call it here. Okay? Then we have the items promise all and same thing. Then token URI, then made METAR than price. Then we make an item with price to Kennedy seller, owner, image, name and token URI. Then we return it. Then we set dy terms, set loading state. Then we return the HTML like this. If it is not loaded, if it is loaded, then just fill weight loading. If it is loaded and there is no NFT, then we will see no NFT is listed by you. Okay, just change that text. Then. At the very end, we will again have a column-wise structure flex justified then for 1600 pixel grid column. Then NFP, this map. Now let's check here. Border shadow, then image source and f d dot image with 400 placeholder layout less responsive. Then we have the NFT name. Then we have that button in that it shows the price of the NFT. Then we have this button which will write, which we'll show can sell listing as its text. That is, the button will have canceled listing. If you want, you can change that color. It's up to you. I prefer it read, it's fine. That's it. That's the screen which is needed. Now, let's save it. And let's go and check it out. I've just started. I will click on dashboard. Now. See, we have listed this under marketplace and that is what it is now shown. With this reassured that the functionality is working. In the next video, we will work on the functionality to cancel this listing from the marketplace. Thank you. 25. Function to cancel and resell NFT: Welcome to the last video of this module where we'll work on the functionality to cancel as well as resell NFT in that market. So far, can say listing, go to create a dashboard and below this loading load NIfTI function. Let's create, let's create a new function and naming, name it. Sill listing. Here we just have to send that token ID. Then the first thing I will do is set the loading state. Again, not loaded. Then I will get, get those things again. That is web tree model provider, these three code. And after that, I will get the signer. Like this. I also know that the code are being repeated. If you want, you can just make a separate function out of it so that it can be reusable. But here we're just focusing on the functionality. You can clear the code later on. Now. After that, I will have a transaction that is Mark, contract, dot, cancel. Let's check the name. Can sell item listing. Can sell item listing. And we have to send a token ID. Then we will have weight transaction. We will wait till the transaction is done. This one. And finally, we will call the load and if d function here. So this is that on leaf and gender required to cancel NFT. It's very straightforward. Now I will call this function here the onClick. Send that token that this NFT token ID, like this. Similarly functionality to resale our token, we have to go to my lefties here below that load and f t. Let's create the function sinc. Function. Resell NFT token ID, token price. We will set the loading state to not loaded. Then we will have this, this code that is Web three model here. The marketplace. Just paste it here. Tomato connection provider and marketplace. Then simply we will convert the price to eaters dot util, dot virus units. So can price then lead listing price? Because here again, we are really stinky, so we have to pay it. Await. Marketplace contract dot get listing, price. Listing price is equal to listing price dot to string. The same thing we have done before as well. Now we will do that transaction is equal to await marketplace contract dot name. Under contract you can just check it, resell token, it accepts token ID and price. Can idea as well as praise token ID and price. And we have to send the value of the listing price. Then we will await Dan section dot weight. And again, we will just refresh that NFP is using this function. Here. At the end, it will again send that low loading state to load it. That's why I haven't done it here. Because we have changed the state. But in this load and it will again change the state to load it. Then simply go to the button on the on-click functionality. Simply assign it. Send NFT token ID, NFT, that price. That's it. That's it for the sales token function. I hope you have learned a lot because Alda task or older functionalities are done. We have completed our NFT marketplace. In the next video, we will simply test the whole application so that if there is any editor left, we will solve it as soon as possible. 26. Test the complete application: Hi, welcome back. In this video, we will just test the whole working of the application. We have finally completed the NFT marketplace and adding you should be proud of yourself that you have watched the course till the end. Now, let's just check the selling of NFT. Let's, let's upload some more NFT slit that is hard IF hard hat. And if they will just name in higher ed compile, test and deploy. Same, I will place it 0.001. Let's see. Let's choose it. Let's see. It was a big image, but still, let's say it's being uploaded. I guess. If you want, I will just go and check it here to make sure it's uploaded properly. See how that dot PNG. Simply click on Create NFT. Let's, let's confirm. Let's see. Okay, I guess it's done. Say Create Token. It's done. And is there any issue something I have to understand? What is this? I think we have to do some access control and null, but if we just refresh it, it is showing norm access control allow origin header is present under requested resource. What y that if I refresh it, I hope the metadata is also uploaded. See, we have this NFT j sine Phi, but this is not working. If I go to dashboard, then also it is showing some adder. If I click it. Okay, let me find, let me check what is the issue and come up with this solution. So I check again, and it is working properly. Earlier, it was taking too much time and I believe this image was really large. So if you are uploading an image, make sure you optimize it. Because see, just show you the difference. And also I uploaded one more image. Here. You can see it is just 60 KB, but this one is one and b. So there is lot of difference in the image size. And also, if I say, if I just refresh it, I will just save all here. Because you might be seeing this kind of output. To solve it, you simply have to use this setting that is margin at excess x-axis and y-axis five in the index.js. And just save it here. Now you can see there is a proper gapping. The cell NFT is working as you can see. Now what I will do is if I can sell a listing that is this one. Suppose if I want to consider it, then I will just click on cancel listing. That MetaMask will open. I will just confirm this transaction. And as you know, when we can sell our own listing, it, it costs to us that is, it will show that we own that NFT and it will show in my NFT dashboard. Here, you are not seeing in the home. Let's go, Let's see the other three or two. And if this CDMA two nf, this, that first one got cancelled. But if I go to my NFT, then you can see this is the NFT, we can sell it. It just got owned, are bought by me. You can say I want so I won't say bought because I haven't paid this, but at least it came to my account again. That can sell. Nft is also working. Okay. Now to check the reseller and fd, Let's go to resell. Click on resale NFT. Sometimes you might get some issues if you don't have the required ethers in your wallet. In that in that time you have to wait and get approved. 15 or 20, eight-thirds in your icon from the faucet. Let's say it's still loading. But I hope this works. Let's say see it's bending resell token. Because here we are doing lot of thing because we are again, being an ally. But see, no NFT is owned by you. If I go to Home, we again see that NFT popped up here. So we have against solid. If you want, you can do the changes of setting up the price and I haven't done it. It's really easy. It can be a project for you if you want. Now, the only functionality left is by, what I will do is I will change my account from account to account one. But it has very less ethers, so I'm just confused. It has 0 this. So what I can do is get, transfer some account as I transfer some ethers here at gone to one. And we just transfer is 0 or c is not that 0.01 is 0.04. Confirm descending. Because you must have sufficient it tastes to buy. And sometimes it shows at a, that is why this sending also is taking too much time. Okay. Let's go to Account one. After changing the economy, let's refresh it. Now, a new user or prints on their dashboard. Suppose C, he can see unsold nf this, but if you go to dashboard, you will see no NFT is listed by u and n is mine FTEs because this user has a new account. But if you go and buy these in fewer NFT, let's say it is working or not. Last time I got the editor of insufficient fund. Let's see what happens this time. Let's say if you want you can. So some loading indicator here. Let's see. It's spending its spending. Receive, see, this is now this is not listed in the marketplace. If I go to my LFTs, then see I have this NFT owned. This is also working fine yet are no issue you can against selling. So finally, our marketplace is completed. All the functionalities are working flawlessly. If you want, you can upload this website to real server as well, like Netlify, we're selling. For free. You can just search on Google how to do it, and then show it to the recruiters are in your CV that you have created a complete decentralized application. Thank you for watching. I hope you have enjoyed. Make sure you watch my other courses as well. Have a nice day.