How to create a NFT marketplace - Buy, Sell, and Auction

Подписаться 20 тыс.

Просмотров 32 тыс.

50% 1

In this video, we'll go over how to create an NFT marketplace with Marketplace V3 smart contract and thirdweb. Deploy a marketplace contract and then build a frontend app for your marketplace.
*Mumbai testnet support has been officially deprecated. Transition to the Amoy testnet for improved scalability and reduced gas fees.*
Marketplace V3 contract: thirdweb.com/thirdweb.eth/Mar...
Marketplace V3 Design Docs: github.com/thirdweb-dev/contr...
Repo Link: github.com/watase-eth/marketp...
Template Link: github.com/thirdweb-example/m...
How to create NFT collection:
• Build An ERC721A NFT C...
• How to build a full NF...
Join our Community of over 30,000 Web3 builders: / discord
thirdweb Official Site: thirdweb.com/dashboard
thirdweb Twitter: / thirdweb
Timestamps:
00:00 Introduction
00:50 Marketplace Demo
04:12 NFT Collection
04:50 Marketplace V3 Smart Contract
07:30 Create a Direct Listing
09:03 Create app with thirdweb
10:20 Setup up app
12:30 Navbar
16:35 Home page
17:41 NFT card
22:53 NFT grid
26:47 Buy page
29:11 Token detail page
41:37 Test buy NFT
42:05 Sell page
47:01 Sale Info form
53:18 List NFT for sale
54:15 Profile page
57:03 Add Auction to NFT card
59:56 Add Auction to token detail
01:04:43 Test placing bid
01:07:37 Add Auction listing to Sale Info
01:11:29 Test Auction listing
01:12:41 Conclusion

Наука

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 119

@thirdweb_ Год назад

Thank you for watching! Be sure to leave a comment with what you'd like to see us build next. 👇 If you haven't already, hit the subscribe button to be notified every time we drop a web3 development tutorial. 💫

@deltaranzyd1587 Год назад

how do you verify the contracts being done in thirdweb?

@Banksy_said_hi 9 месяцев назад

Very rich content! Please make more of these videos to let us get a better understanding of the Thridweb development environment. Thanks

@thirdweb_ 9 месяцев назад

Thank you! More videos always coming weekly!

@TobiyahTafari 7 месяцев назад

Man. thirdweb.. I have to give you all your flowers 🌺🌹!!! Because this is amazingly good content!!! I'm going to use this and you guys will get all your due props!!!

@richmeltz744 7 месяцев назад

Love this so much. I’m new and trying to learn. Question- do you put this marketplace onto a website, if so is it hard to do? Like say I own and run a website, what’s the process of adding all of this work into my url

@phoenix-risez Год назад

Hi. Q: what are you using to launch in production? Is it Pinata and a custom domain from unstoppable domains? If so, how?

@ayoolaniyi4594 11 месяцев назад

This is a really great video, one question the web3 button for the nft still says not for sale even though I have listed that item on thirdweb and also I noticed my listings don't appear on the valid tab on third web only on the tab for all . Please any suggestions or help would be much appreciated

@thirdweb_ 11 месяцев назад

To help you the best we can open a support ticket in Discord. You can also share the code you have and our support team can help.

@swissinvestorsgroup 8 месяцев назад

Could you also add a "sort by price" button? Is there any tutorial for doing that? It would be very helpful. Thanks

@swissinvestorsgroup 8 месяцев назад

I mean a menu with different options, like --> sort by: lowest price, highest price, Recently listed.

@alois0v0trancy Год назад

The buy page is stuck in loading, i'm wondering if it's because of the NFT collection address?is it the one you get on OpenSea or?

@rayrizzling Год назад

Great guide! what kind of changes do I have to do when I do this with erc1155 ? everything works fine but as you made this on erc721 I guess I need to adjust the extra value for the tokenId as I have multiple assets from the same tokenId. I would appreciate some tips :P

@thirdweb_ Год назад

Correct. With ERC1155 you do need to specify quantity. You can check out our docs for more info: portal.thirdweb.com/react/react.usecreatedirectlisting

@w3cs598 Год назад

I would love to try this, but can we deploy this to a live website, or is this build only for testing purposes?

@thirdweb_ Год назад

You can deploy this live 😀

@ArtistSH Год назад

good video

@thirdweb_ Год назад

Glad you enjoyed!

@danielayesnu2537 4 месяца назад

What's the new trusted forwarders that show up when deploying the contract now

@jandrefelix3577 Год назад

How do you migrate the code to a working website like unstopable domains? Would i use Pinata?

@Soundonshape 6 месяцев назад

great tut --thx - but im getting a warning error in terminal --"no API KEY" --not sure where i put it in the project directory, can you advise? all great stuff though

@AltugOzturk 5 месяцев назад

have you found a solution for this? I am getting a similar error.

@flickingforhoursfishing84 5 месяцев назад

@@AltugOzturk.env.example folder put in your third web client i.d

@johndeer8405 Год назад

Greetings and thanks for the content. Are users able to list erc1155 tokens on this marketplace as well or would adjustments have to be made?

@thirdweb_ Год назад

Yes you can list ERC1155 as well. With ERC1155 you will have the option to pass the quantity you want listed. More info in docs here: portal.thirdweb.com/react/react.usecreatedirectlisting

@denniswilmot3086 Год назад

Great tutorial lol

@MohamedDhaanish 9 месяцев назад

Hey i'm not able to direct list my nft collection in marketplacev3 contract it shows application error

@motleyhuman 5 месяцев назад

Can you add Quai and Taiko chains in Network / Chain options?

@RichReflectionz Год назад

How would I add multiple collections to this? It seems like the main collection is hardcoded into this, what if I had 3 or 4 different NFT Collections and wanted to display these for sale, would I be able to in just creating an array of collection contract addresses? Thanks

@thirdweb_ Год назад

By default any collection on the same chain as your marketplace can list NFTs. In your dashboard you can restrict the marketplace to work with only specific collections by adding their contract addresses.

@johnsonsammy9697 9 месяцев назад

I have the same question, how do I make the marketplace display multiple collection instead of it showing only one collection

@metamask0x 8 месяцев назад

Can i build a domain name marketplace ? where its a EVM compatible chain not in the list?

@dirtblazer453 Год назад

when i do a test bid, the contract takes the money, whether the nft is excepted or not, will it give the money back if bid not won or is this an error that needs to be corrected. thanks for the video

@thirdweb_ Год назад

If "new bid" is placed "current bid" will be refunded back to bidder. More information on auctions can be found here: github.com/thirdweb-dev/contracts/blob/main/contracts/marketplace/marketplace-v3.md

@raulhernandez4309 5 месяцев назад

how we can add multiple nft smart contracts for the same marketplace ?

@fulviadetullio5921 8 месяцев назад

Hi, how to add a "sort by" in the listing page?

@juliusokwuafor4091 8 месяцев назад

Does this allow bulk uploading of NFTs?

@mccroaks 2 месяца назад

I need help. When I add a new NFT to my contract after the marketplace has been deployed. The link fails in ipfs. I'm guessing it's not loading to ipfs correctly?? Is there a way to fix this issue? Also thank you for the great tutorials, they are very helpful! 🐸💚

@R7score 6 месяцев назад

can i follow this and build it on eth

@LUONGTRAN-oh2se Месяц назад

I have cloned your repository project and configured all addresses as instructed. However, the NFTs on my website (which is running locally) are not appearing, and I am receiving an error message stating 'Failed to load NFT metadata.' How can I resolve this issue?

@motleyhuman 5 месяцев назад

Is it possible to add Quai Network among the networks?

@ArtistSH Год назад

i sub, have a nice day

@thirdweb_ Год назад

Thank you! Have a great day too!

@zvcksp Год назад

can i add the IPFS getway to this project ?

@smjeev2390 8 месяцев назад

How to collect fees when user sale or buy the nft.... As a owner of nft marketplace

@openvr-app 5 месяцев назад

Where can I find the github file of this video!?

@klvmnrd_beats 7 месяцев назад

How to handle ERC-1155 , in MARKETPLACE V3 Ui ?

@Soundonshape 3 месяца назад

As i WANT TO CREATE ERC1155 to the marketplace V3 - I have created an Edition Drop ( 1155) and used this smart contract -- in the demo you provided here --- will this work?

@Soundonshape 3 месяца назад

also while we're here -- where does the API key / CLIENT ID go ? i put it in .env file -- but its still giving me the error when compiling?

@thirdweb_ 3 месяца назад

Yes the marketplace contract does work with ERC-1155. You will just need to provide the token ID and quantity when listing.

@thirdweb_ 3 месяца назад

In this tutorial the API key is stored in the .env file and it required in the ThirdwebProvider.

@KevinVH90 2 месяца назад

@@thirdweb_ I can't fint the .env file

@BurcuKaleoglu 7 месяцев назад

My NFT data is not uploading, I wonder where I am making a mistake?

@clamrelaxation5634 Год назад

can you give react javascript code for this project , i dont know nextjs or typescript

@nonames2764 2 месяца назад

How do I get all that into visual code?

@DustVoltrage Год назад

Could it be used to deploy a marketplace inside a unity game ? Or does it require an actual website ?

@thirdweb_ Год назад

Yes the Marketplace contract can be used in Unity

@DustVoltrage Год назад

@@thirdweb_ would it be much different or could this video be enough to allow us to implement it in Unity? 😁

@GomezBro 11 месяцев назад

This video is clearly behind and needs an update. As the marketplace I downloaded is vastly different. Please update this guide. I have a few issues to sort out and its a bit confusing.

@thirdweb_ 11 месяцев назад

Thank you for the feedback. We'll get an updated version on our list of potential videos 👍

@mohdmamoon7163 3 месяца назад

I want to follow the tutorial. Should I follow it or is it too different now and I will get confused? Kindly reply.

@burakbektas740 Год назад

Error: A required parameter (contractaddress) was not provided as a string received undefined in getStaticPaths for /token/[contractaddress]/[tokenId] how can ı fix problem

@thirdweb_ Год назад

To better help resolve your issue please open a support ticket in our Discord.

@remtexniki Год назад

Hi, how to add a cancel listing button?

@thirdweb_ Год назад

There is a cancelListing function that can be called. You will need to provide the listing ID. More info can be found here: github.com/thirdweb-dev/contracts/blob/main/contracts/marketplace/marketplace-v3.md

@webwisesagar 8 месяцев назад

Sir, Why you didn't just closed the left explorer menu ? the code would be more readable ig.

@thirdweb_ 8 месяцев назад

Thank you for the feedback. This has been addressed on recent videos.

@danielayesnu2537 6 месяцев назад

could you replace the metamask login with account abstraction. I mean is it possible?

@thirdweb_ 5 месяцев назад

Yes, you can add Smart Wallet support to the connect wallet component.

@RukkyCryptoNetwork Год назад

Kindly drop the Repo link for this build

@thirdweb_ Год назад

Repo link has been updated in the video description

@deltaranzyd1587 Год назад

damn im the first to comment

@trantientruong9258 2 месяца назад

I can not create contract for MarketplaceV3 for the last 2days, any one face the same?

@kursadaydn6773 9 месяцев назад

How can we add diffirent networks? ZkSync, Base,bsc etc...

@thirdweb_ 9 месяцев назад

When deploying the marketplace contract you can select the network you want to deploy the contract to.

@kriptomagazinn Год назад

Hello, please make video for rentable marketplace . Buy , Sell and Rent NFT

@joseph5058 Год назад

@thirdweb

@thirdweb_ Год назад

We can put this on our list of potential videos.

@KevinVH90 2 месяца назад

I get an error when I want to check the individual NFT page!

@karthikeyanr4401 2 месяца назад

Did u solve the error, I am also facing some issue while opening the indvidual page of NFT, not able to fetch the details

@drangonball_001 Год назад

Can you make video for how to upload on opensea with erc 721 contract

@thirdweb_ Год назад

OpenSea is an NFT marketplace and will only display NFTs that have been minted. Any NFT minted (not Lazy minted) will appear on marketplaces like OpenSea automatically.

@drangonball_001 Год назад

@@thirdweb_ after minted from like thirdweb, is it automatically upload in opensea??

@deltaranzyd1587 11 месяцев назад

can a contract receive the platform fees? say i have a native an existing/launched token already?

@thirdweb_ 11 месяцев назад

Yes you can set a contract to receive platform fees.

@deltaranzyd1587 11 месяцев назад

@@thirdweb_ thank you for the reply ser.

@johnsonsammy9697 9 месяцев назад

How do I add more than 1 collection on my marketplace?

@thirdweb_ 9 месяцев назад

By default any collection can be listed on your marketplace as long as they are on the same chain. In the settings of the contract you can set it so that only allowed contracts you specify can be listed.

@juliusokwuafor4091 9 месяцев назад

How can i develop a marketplace that uses dogecoin or any memecoin , is it the same process?

@thirdweb_ 9 месяцев назад

Yes it will be the same process. When creating a listing you have the option to configure the token the NFT will be listed for. This is where you can specify the token of payment that you want.

@firdosem8208 Год назад

The CODE. Is not not working for me

@thirdweb_ Год назад

If you need support for troubleshooting your code you can submit a support ticket in our Discord and we can have a team member help support you.

@burakbektas740 Год назад

07:30 I can not do create direct listing. how can I do it

@thirdweb_ Год назад

To better help resolve your issue please open a support ticket in our Discord.

@KevinVH90 3 месяца назад

Can anyone tell me if I can use this to make a marketplace for a lot different collections, and not just 1?

@thirdweb_ 3 месяца назад

By default the marketplace contract allows any collection to be listed. You can set the permission to specific contracts only if you choose to do so.

@KevinVH90 3 месяца назад

@@thirdweb_ Thanks, so if I don't specify any collection address you should see all the nft's you own when connecting to the dapp?

@NOMADSCrysis Месяц назад

I have duplicate listings of 1 NFT with the same tokenId.

@jopadjr Год назад

20th...Thanks

@bossgd100 Год назад

Marketplace V3 is still in beta ?

@thirdweb_ Год назад

Marketplace V3 has been taken out of beta and is now the standard marketplace contract.

@burakbektas740 Год назад

10:20 What exactly does it say in "npm i @chakra"

@thirdweb_ Год назад

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

@excel__nedir 9 месяцев назад

i got the error when i type "npx thirdweb create"

@thirdweb_ 9 месяцев назад

If you need more help troubleshooting you can open a support ticket in our Discord and provide more details of the error.

@drangonball_001 Год назад

Is it completely free or neex to pay

@thirdweb_ Год назад

The only fee is the gas needed to deploy the smart contracts.

@adrianmesina7353 Год назад

How to create presale pls

@thirdweb_ Год назад

We do have a video on setting up claim conditions: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Q63o_6RTVzY.html

@justkaz7104 Год назад

@zerox9646 Год назад

very difficult

@1000cronic Год назад

For this marketplace, are you able to create it where the NFTs listed are not for sale but just for display? Also, does a marketplace contract have to be used or can a more standard LazyMint and/or signature NFT contract be used? @thirdweb

@thirdweb_ Год назад

To answer your first question. The example shown in the video will allow you to display the whole collection of NFTs even if they are not listed. But you can display only the listed NFTs if you choose to do so with the 'getAllListings' function. To answer your second question, a marketplace contract will have to be used to create market listings or auctions.

@1000cronic Год назад

@@thirdweb_ Thanks so much for replying, it makes more sense now and still going through the video. One more question, for the traits of the NFT, it just shows as "[object Object]" even though it has properties within it, any idea where i should first start looking to start the fix?

@GomezBro 11 месяцев назад

@@thirdweb_ Where can I get a copy of the code in the video? I am not a webdev, I can do most of all this but need the template he typed in to build off of it. The repo is a default site I want it to look like the demo webpage. I will just change the nft/markerplace contracts