How to create an NFT trading card pack + marketplace (Pokemon card or NBA TopShot clone)
Vložit
- čas přidán 4. 07. 2024
- In this video, we'll go over how to create trading card NFTs and how to bundle them in pack NFTs. We will create an app that allows users to purchase a pack, open a pack to get card NFTs, and a marketplace where you can buy and sell cards.
*Mumbai testnet support has been officially deprecated. Transition to the Amoy testnet for improved scalability and reduced gas fees.*
Smart contracts:
ERC1155 (Card NFTs): thirdweb.com/thirdweb.eth/Tok...
Pack: thirdweb.com/thirdweb.eth/Pack
Marketplace: thirdweb.com/thirdweb.eth/Mar...
Trading card app repo: github.com/watase-eth/Web3-Tr...
Join our Community of over 30,000 Web3 builders: / discord
thirdweb Official Site: thirdweb.com/dashboard
thirdweb Twitter: / thirdweb
Timestamps:
00:00 Introduction
00:48 Trading card app demo
04:55 Card NFTs (ERC1155)
10:03 Pack NFT
11:47 Marketplace contract
12:55 Create and bundle Pack NFTs
27:00 Setup app
28:00 Navbar
35:48 Home page
37:04 Shop page
54:40 My packs page
01:07:27 My card page
01:23:10 Card marketplace
01:33:06 Conclusion - Věda a technologie
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. 💫
THANKS FOR ALL THE TUTORIALS, YOU GUYS ARE AMAZING!!!
Dude I just made it through this entire tutorial, typing, debugging, etc. along the way and what you did here is a legendary step by step walkthrough of like 3-4 videos you did previously :) Kudos. I know you're tired man because this was a haul!
Thank you! Glad you enjoyed the video and we've got more great tutorials like this coming!
Where is the link for the tutorial on storing private keys securely for public build releases?
Thank you!!! I was waiting for this update!
Glad you enjoyed the video!
This is awesome, you guys just keep bringing more 🔥 but, I always ask when will some of these great things you have come to solana 🙏
Cool, every subsequent video is more and more interesting.
Thank you for the support!
🎉🎉 appreciated, and perfect timing.
Glad you enjoyed the video!
What an amazing tutorial, I have a card pack collection I’ve been wanting to release. This looks like something that can make it become reality. Question though - I’m horrified by coding lol. Do you do work for hire if I needed that? I’m kind of nervous about following the code part of this video I’ve never done it before
Excellent 👌
👍
I was just thinking about this geez synchronicity. ThirdWeb you're celestial!
🐦🚀🖖🏼
Glad you enjoyed the video and it was what you were looking for!
how would i do this as an XLS-30 token on the xrp platform.?
Great tutorial! thank you sharing. I have a question. what if you want to sell a pack? it would be nice to be able to do so. thanks
NFTs through a pack contract aren't claimable but can be transferred or listed on a marketplace like in the tutorial.
I'm stuck. The error asks for the API key. Help.
Error: Unauthorized - You don't have permission to use this service. say to me
Can you create these pack for existing collection or its just for new collection ?
I am asking because i have a collection with no max supply limit (i can and i will mint new NFT) and some NFT are already sold.
It seem possible, just more complicated to implement
Yes you can create these with an existing collection, but the wallet creating the packs will have to own the NFTs. So when bundling the packs only use the token IDs and supply that is owned by the wallet.
@@thirdweb_ I see, thank you for your answer and good tutorial
Is this only available via the $999 a month option or could it be created and managed with the free option?
Everything we teach is available in the free tier! 😄
Can we see a video on how to build a e commerce website on blockchain?
We will add this to our list of potential videos. Thank you for sharing the idea!
how to get mumbai crypto ?
How to open the terminal through spotlight search?
On a mac using (⌘ + space) will open spotlight and you can search "terminal"
Hey sean any chance you guys are going to migrate this tutorial to use sdk v5? I tried migrating and theres so many components that are gone. After a few days wrestling its clear its over my head. I’m close but erg
It is on the list. We are going through past videos and getting them updated to v5 🫡
@@thirdweb_ excellent amigo. i submitted a pullrequest on your bundlepacks.mjs that works w amoy, my first ever pull request💪
I am back to previous codebase on sdk v4 on amoy and everything else working but cannot get openpacks to fire. Transaction fails no explanation. I can open packs from polygonscan no prob. Really odd bc everything appears correct
Im sure i will figure it out. Funny these tiny errors suck me into them for 72 hours - might have to check myself in to a crazy house if i dont squash this bug lol
@@thirdweb_ hey sean/thirdweb one request on pack contract update- add upgradeable metadata to the packs themselves. Just accidentally set wrong image couldnt change it. Kinda messed myself up w wrong image and too many packs to open and repack… I think it would just improve user experience. Just in case u wanted feedback
What web browser are you using ?
Arc web browser is being used in this tutorial.
@@thirdweb_ thank you, i will try it
Good tutorial
Thanks!
What if you want to use my own token erc20 to pay for the packs
You can set the a custom token when creating the listing for the pack. If listing through the contract dashboard there is a dropdown on the native token and you can select custom token and paste the contract address of the token you want to use instead.