Build OpenSea Blockchain Web 3.0 App with Next.js | Sanity.io | thirdweb
HTML-код
- Опубликовано: 12 июн 2024
- In this tutorial, you're gonna be building the Opensea Blockchain Web 3.0 App using Next JS, Sanity.io, thirdweb, Tailwind CSS, and Vercel 🔥
Get early access to thirdweb 👉 thirdweb.com/start?...
Get the free boosted plan with Sanity 👉 www.sanity.io/cleverprogrammer
🗄️ Link to the assets: drive.google.com/drive/folder...
@TheCoderCoder How to Make a Background Image Transparent in CSS 👉 • How to make a backgrou...
🔗 GitHub Repo: github.com/CleverProgrammers/...
You'll be learning about:
👉 Building a Web 3.0 Application with Next JS
👉 Styling your app using Styled Components
👉 Create and mint your own NFT Tokens using the thirdweb SDK
👉 Adding Web 3.0 authentication using Metamask
👉 Storing data and information about the tokens you created in Sanity.io
👉 Using GROQ to retrieve data from Sanity Studio and display it in your Web 3.0 App
👉 Creating a send and receive functionality for your NFTs on the blockchain
👉 Deploy and host the app on Vercel
Buckle up, buttercup 🚀
⏲️ Timestamps
00:00:00 - Intro
00:01:32 - Demo Opensea Clone App
00:06:21 - Setting up NextJS
00:22:28 - Add Navbar
00:37:24 - Add Hero
00:46:58 - Set up Metamask Authentication with NextJS
01:07:31 - Build NFT Collection Page
01:37:26 - Add NFT Detail Page
01:59:27 - Set up NFT Direct Listing Purchase using NextJS and Thirdweb
02:14:35 - Deploy NextJS App to Vercel
02:21:27 - Outro
=======================================================
👨👩👧👦 Join our Discord Community: cleverprogrammer.com/discord
🚀 Join Profit with React: www.cleverprogrammer.com/pwr?...
🤝 Attend our meetups: www.cleverprogrammer.com/meetups
#web3 #frontend #blockchaindeveloper Biz / Sponsorships 👉 www.cleverprogrammer.com/part...
To be honest, now you are bringing some clever programmer level stuff.
yeah, now we’re takin 🚀
LFG
yeah i stopped watching this guy's videos for a while. it was all hype but no value. good thing their making good content videos again
Why?
Immediately Invoked Function Expression was a very new topic for me. Thanks for that ! There is always something to learn about the recent usages from his videos. Great videos.. !!
Hey Amalnath! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?
Taking things to the next level with next js thanks for the content
excited for this awesome build 🔥🔥🚀
UPDATE - Thirdweb
Thirdweb no longer creates projects only contracts. Once you've connected your MetaMask account :
1. Click -> Deploy New Contract,
2. In the Pre-built Contracts area -> Click Marketplace (Deploy Now),
3. Give your Contract a Name,
4. Add Image (optional),
5. Click Advanced Configuration and enter the Platform Fee in the percentage box,
6. At the bottom select which Network -> Testnets: Rinkeby (ETH)
7. Click Confirm on MetaMask.
I hope this helps.
thank you... although i figured it out myself.. i was completely lost
I have used sanity before but this tutorial is extremely helpful and explained the schemas on a very easy way
Good job and thanks budd
As always, awesome video and learning so much from you guys!
Peace Inu is a very good investment, the team is very professional, and the marketing is going very well. CG and CMC coming anytime now! Don't miss your shot!🥶🥶
Bro, your channel is amazing. Don't stop. Thank You.
Thank you for what you do for the community 🙏 I was excited to hear you had meetups in La so I went to sign up but this Super Bowl Sunday is not a good day for me but I'll be joining the next one 🙏 💯
You are most welcome. Thank YOU for being a part of this. Yeah I realized just yesterday that this Sunday is a Superbowl so I'm canceling the event this Sunday. But I guess I'll see you next Sunday!
We really want tutorial like this
I have to comment you are the best bro, I really love your explanation. You are a guru.
This is very helpful,thank you !
Your clone videos are so freaking cool bro
love your tutorial, so informative
Thank you. I really like that hero image. I had to put you on video playback speed of 2 because I can understand you at this speed too and I can get through the video contents faster.
Now, I am sure you are the king of web3
that's what I'm talking about! Let's go 🚀!!
Thank you so much - Learnt React with you guys and now Blockchain apps. Thank you!
Hey Nishi! Do you usually learn through these online tutorials ? Have you created any projects? Would you be interested in exploring opportunities in web development?
@@shivani9840 Yeah I work with React and primarily into Product Design
i can't wait to see this....!!
Yooo crazyyy 🙌🏼 just finished it
Did you enjoy it!?
dude u killed it! definitely need a part two !
Bro did you find the solution for that gas fees error ?
@@anuragpadolkar202 unfortunately no bro
Hi, the tutorial is great!
I am loving it!
honestly this person is tooo awesome
i realy enjoy your tutorial will love to see svelte tutorial for web3 and blockchain tech
This is a great tutorial
To much learning from this
Hey Vishnu! Have you ever taken the help of any tutorial to do a project? Would you be interested exploring opportunities in web development?
Nah qazi 😳🤯
WTF Bro! Ahahahaha
Crazy build!
Goated programmer no cap 🙌🏾
Man, U are up to the level.
You guys made my life easily love you all you guys are doing a fantastic job 😍😍😍😍😍😍😍😍😍😍😍😍😍🥰
Peace Inu is a very good investment, the team is very professional, and the marketing is going very well. CG and CMC coming anytime now! Don't miss your shot!💯
Great tutorial!
Your videos are amazing and helped me a lot if you take suggestions try building a grammarly clone
Great tutorial! Thanks!
I dont know if I am the only one but holy cow its difficult to follow along coding with him. Moves super quick.
Try setting playback speed to 0.75 / 0.5 - It helps when coding along
I updated it to Thirdweb V.2, thanks.
Yo this is *Next" level 🔥
Haha yes it is!!
This has been one of Qazi's most rewarding tutorials, I have no doubt that it will be a bomb on your channel... God bless you for this...!
how many times can I say "smash that like button" in a single video? YES!
Amazing human being and a beast of a programmer
DOPE CONTENT QAZI !!! KEEP IT COMING !!!!! HUGE SUPORT
Thank you sooo much!! Will doo! I'll keep it up!
Hey Ishan! Do you usually learn through these online tutorials ? Have you created any projects? Would you be interested in exploring opportunities in web development?
great video,thank you
Next level project with next.js
Just wanted to show some love!
To be honest, you're now bringing some clever programmer-level content that I'd really appreciate and now I have gained some ideas on how lootmogul's NFTs will play a significant role in their metaverse.
Great, thanks
Peace Inu is a very good investment, the team is very professional, and the marketing is going very well. CG and CMC coming anytime now! Don't miss your shot!
is this tutorial worth taking now as rinkeby and many other things are depreciated can someone help me please
Totally useful information
Awesome tutortial!
If you get "p-queue@^2.3.0" required by "@sanity/export@2.23.1" error while installing sanity, just run npm install --save @types/p-queue first.
Qazi, could you also drop the ape images in assets?
Hey i have a question, what about the cut you get for all the purchases (the royalty you define in smart contract) ? For example I mint a NFT and someone purchases it, I should get the cut after the month.
I am not getting that cut
Hi, I was wondering if you know how to solve a problem im having. I have 3 layers that really only work by themselves, 3 folders with 1 accessory in them. I put the rarity at 1, but being that theres only 1 item in the folder they, always get used no matter the rarity level. could i make "blank" layers as fill ins?
Just awesome! Thanks a lot! Do you think i can use it for my community (I'm Haitian by the way🇭🇹)?
Hey, man, how are you making the lines of code appear, do you use any hotkeys or whatever, what is the magic? )
I love this project
Super happy to hear that!
Hello everybody, I have played Dragonwar for 1 month and I think this game is so easy and Dragonwar’s NFT is more stable than I expected. I am waiting for the development of this project, especially the launch of mainnet on this June. Everyone should check this game !!
very very excited the best site for me
what if we want to sell nfts from a collection that wasnt create on thirdweb and have our own smart contract?
Love the tutorial, this is the tops. But I have a question which is more general, some of us, will come to these tutorials long after they were posted, and others like myself probably have come upon the the vast list of warnings when these are complied. Can you post or doa quick tutorial on how to upgrade the various warnings so they do not appear? Many thanks your videos are great. :)
hey i am having problem an error showing up while buying the nft but the missing argument error pops up at 2:10:33 how do resolve this issue please help
I have to laugh when you said "goddamn channel" LOL. You had me long before that as you are a great instructor and I teach university students for a living. LOL Wish I could use terms like that :)
Waiting to see it
Cool tutorial. How can i move "connect wallet section" to navbar to make better user exp?
great tutorial very informative, but I am having a problem with installing sanity, when it gets to the dependencies i get error. can you help?
What about the cut you get for all the purchases (the royalty you define in smart contract) ? For example I mint a NFT and someone purchases it, I should get the cut when this NFT is purchased again, after the month.
I am not getting that cut
this is the most well detailed tutorial for block chain development in the making of opensea clone.
most of tutorial is scripted and they just say things like they are reading something book
I am new to channel because of this i subscribe and turn of notification, looking forward for more.
what are you writing on before you open visual studio editor? is that for apple?
Cool!
Hi,
Thanks for the tutorial, I think the description is related to coinbase clone, kindly update it.
Super Video.
can i use in production thirdweb and sanity for high scale of connections and nft's?
Could you please have a instruction video on NFT landing page to launch a project, and how to handle guaranteed/fcfs whitelist. Thank you so much!!!!
I went to the meetups page im in North Carolina it didn't have a meet up showing for anywhere in North Carolina
Great video so far, but the "marketplace" option in Thirdweb is currently in "coming soon" state. Is there some other option that could be selected until it is released to complete this tutorial?
That's the problem i am facing toooo!!!!!!
Hey Qazi, absolutely love your content as I'm new to the blockchain space. I had an issue that I can't access the marketplace on the thirdweb dashboard. Can you help me with this?
Yeah..Me too
check it again, you should be able to access it now
@@kanknw yeah..you right! Thanks
Hello Sir, I'm from PAKISTAN and I have studied BSCS(Hons.) so I am the big fan of your programming so tell me which LED Monitor you use which company and which size
Uis dễ òm đó mà.
Can you show how to set up the "Create" page? I would like users to be able to create their own collections.
Is this already an fullstack web or only front end web? Thanks
Thanks!
wow thanks so much for the donation!!
Let's goo..
could you please provide your backend code(contracts) as well? It will be helpful
I am getting runtime error when I am trying to login to my wallet
ReferenceError: connectWallet is not defined
How is it possible to let the Backend or Frontend render the Web3 data without the users connecting?
Please which terminal are you using and please sir how can I install it
This is great QaZi
Hey Qazi
Great tutorial but when is the full stack opensea clone coming out?
Thanks for watching and commenting don't forget to hit the subscribe button. ➕ ① . ..③ …① .. ③ . ④. ⑤ .. ①.. ① … ⑦. ⑨ .. ④ ☎️
. For more info and support at anytime text w h a t s a p above.
same question!
How about using Polygon instead of ETH? Is that in the 3rdweb dashboard?
in third-web rightnow marketplace is coming soon, what to select other than this?
Thank you bri
You're Welcome!
How to solve the CORS error while getting our data on the Sanity Database? Can't view any file or wallet address after authetication
50:24 incredible 59:29 1:00:00 create user sanity 1:14:54 , 1:22:41
Could you send me please a Copy of the code?
I am getting an error in the collections page - setNfts(nfts) - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Collection`. ... Does someone know how to solve it? .. Greate video btw!
I am getting the same error ,have u solved it?
nice
Can't find the marketplace anymore on thirdweb, is there a work around?
Did anyone code to get the Item activity from the database instead of dummy events?
What vscode extensions are you using
hello. i enjoyed the class. can you do a class on how to upload user profile with image to sanity through nextjs
killer. I just built my first nft generator and now I'm hungry for more. thanks for posting this.
Yes!!!! Keep going
Hey I just know basics of solidity and and smart contracts should I follow this tut. or should I get master in block chain come back to it?
It simply do not work, followed every step, checked the repo, but when i click on Buy Now, only the toaster pops up but no metamask to proceed with the transaction.
🤩you are a fucking Rockstar man! thank you!😎👌🏽
Hi, i will developing this app on goerli testnet it will work as well or there will be any issue?
yeah, now we’re fkin talking 🚀
LFG
In index.js why is wrapper class name in styles empty??
Tutorial solidity ser XD
Soon!!
@@CleverProgrammer cant wait 😆
It doesn't appear you can create a marketplace anymore, currently says 'coming soon'