Build OpenSea Blockchain Web 3.0 App with Next.js | Sanity.io | thirdweb

you'll build an open c blockchain web 3.0 app with next.js you'll style it using tailwind css you'll learn how to create your own marketplace on the blockchain i'll then show you exactly how you can mint your own nfts and make your own nft collection then in this app you'll be able to list and buy your own nfts that you have created on your own marketplace using the third web sdk will then add authentication to the app using metamask we'll then use sanity io as our database backend to store our users and owners and marketplace information about them we'll build our front end and update our data on the collection and nft pages using third web on the blockchain you'll learn how to use grok and sanity api to retrieve your data the chain that you'll be building this app on is the ethereum chain and finally we'll take your app deploy it using versailles and you'll have your own openc web 3.0 blockchain app built with next.js now right before i demo the app go ahead and do me a favor smash that like button do it right now turn that thing blue now that it's blue here's a photo of a koala bear just because i love you awesome now with that said also subscribe to the channel if you want to become the best react next or blockchain developer in the world that's what we're here to help you do so subscribe become a part of this community that said let's go ahead and demo the app right now so look at this i have my openc app open up right here with the beautiful header a stunning background the blurred filtered effect right when i hover over these buttons they look super nice i got my nav bar looks exactly like it now i'm gonna go on to my next page which is i'll hit collections and we'll go to our collections page right now here i have my board ape yacht club listed i can see how many owners it has we can see the floor price we can see the volume traded i have all my nfts listed here and what i can do is i can go to let's say one of these so for example this one is listed and is up for sale this one is up for sale this one is not so you don't see any price there all of this actually is being pulled from the blockchain using third web right and this is created by this is coming from our database our sanity database that we're gonna be using so let's just go ahead to six five one two i'm gonna click on it it's gonna load this up and check this out looks exactly like open c so i have my nft 6512 i see a history underneath right i see my data and now i can go ahead and click buy now and let's watch what happens i'm going to hit confirm and let's wait for it fingers crossed whoa look at that i see that it came by and went away quickly so this purchase was actually successful now in order to prove that it was successful let's go back to our collections and notice 6526512 here is not listed there anymore it means it's actually sold and somebody has purchased this just to confirm that the confirmation happened on metamask here you can actually see the history that one purchase was made and now let me show you the authentication part and how we're using metamask authenticate so let me go back to my home page i'm going to click meta mask go wherever the deployed version is connected we'll go to connected sites and disconnect now that i'm actually disconnected and noticed that on the home page i'm logged out i can't do anything but once i hit connect wallet my meta mask extension pops up i can go down choose the account i want to connect with hit next hit connect and boom you are in and now you can go to the collections page and check out the collections see what's listed and buy or sell so with that said i'm excited i hope you're excited let's go ahead and start building this thing up now before we start getting coding i would do want to let you know we're building the world's best and biggest web 3 community in the world around web3 and blockchain so make sure if you want to join that click the button below it'll take and ask you for a name and email and it'll also give you access to our discord the second thing i do want to let you know is now at clever programmer what we're trying to do is we're opening up locations in different cities we're so we might be coming to a city near you because we're already in new york city in l.a hosting sessions almost every single week in person through meetup.com make sure that if you want to sign up for those click the link below it's going to be cleverprogrammer.com meetups so we're already in tampa florida in north carolina raleigh los angeles and in new york city so whichever one is the closest to you pick one and come in we'll do web 3 stuff we'll do web 2 stuff we'll build full stack projects we'll dive into next js we'll dive into solidity or whatever you want to do right so make sure take advantage of that and you can actually come in person get help this vision is big this movement is freaking exciting be a part of it click the button below and sign up for that as well oh and it's completely free so you have nothing to lose go ahead and do that right now all right let's start coding so i'm gonna hop over to my terminal and i'm gonna go to my github and we're gonna do yarn create next app and i wanna install it with tailwind so i'm gonna do dash e with tailwind css and then name your app so whatever you want to call in this case i'll call it openc blockchain clone okay you could call it whatever you want now it's going to begin the installation process and hopefully it will install tailwind as well so let's go ahead and see what it returns to us so it says it's done we're going to cd into it and i'm going to do code period so it opens up my visual studio code in the same exact directory and if i go here uh let's see if i have tailwind i actually have tailwind can config set up properly here if i go to my global css tailwind is right there as well so it's perfect i got my tailwind if tsx freaks you out don't worry it this is typescript and you can essentially run javascript files in here no problem and if it's still freaking you out you can just go ahead and name it jsx and it won't do anything or you can even name it js won't really make any difference to your app so you'll be fine either way typescript is really awesome and i want you to start learning how to use it because it is super cool all right now let's just make sure everything in our app is running so i'm going to zoom in here a little bit so you can see things a bit better let's close this off i'm going to command j and open up my command line here and we'll open up another one and let's do yarn dev let's just make sure that we have everything running and there you go we have everything up and running so my app is running on localhost 3000 we are good to go if i scroll up and down everything is looking good now in order to get it started we're going to clean up this whole darn thing and we're just going to kind of start from scratch so let's just do h2 i'll say yo and hopefully that shows up that yo shows up right there this is a great place to start let's continue from here all right the next thing we need to do is set up our database with sanity so the first thing you need to do is type in this command paste and uh hit enter you need to install sanity all right if this is giving you problems go all the way to the front type in sudo and then do this so this should install sanity cli in your computer i'm not gonna do this because i've already installed sanity so i don't need to reinstall it once that's done what you need to do is let's create a folder at our root level so hit that folder icon right there and we're going to call it studio make sure it's at the root level so it should be the same level as pages now i'm going to cd into my studio all right now that i'm in my studio i'm going to do sanity init and do not hit enter yet make sure to do coupon clever programmer if you want your app to work this is really important you do that and we have negotiated a deal with sanity so they're going to give you guys the best stuff meaning that you get 200 000 api requests for free you get a whole bunch of stuff for free all of this is completely free you just get it as a benefit if you're a clever programmer student on youtube so type that in and hit enter also we'll put the link below to sign up on using sanity's link so then you can get the free plan as well and you can host your database and unlimited free projects there freaking cool right now with that said once you have your line entered hit enter to install sanity now in terms of the project name this project is just open c blockchain clone all right hit enter and then just let it do its magic so just keep hitting enter it will do everything by default you don't need to set anything you know any anything more custom than that okay project output path that is uh perfect so we'll do hit enter and we will do clean project with no predefined schemas don't start it with a predefined schema we're going to start completely scratch all right now it's installing a bunch of stuff inside of your studio so you should see all of this stuff jumping into your studio so make sure you have that set up okay so we're gonna wait all right cool it's getting done linking the dependencies and then it's gonna give you the schema schemas is the important part so we're just going to go ahead and set up our schema in there properly and one thing we want to do is go in our git ignore and change this from a backslash node modules to just regular node modules hit save and it will ignore both node modules here and inside of the studio now let's go inside of our schemas and in my schema i'm going to go right here and i'm going to paste this so what i've done is i've just pasted this big schema i don't need that there and i don't need this closing right there hit save so it might be like hey what did i just add so i've added my entire schema which essentially is i have my users each users will have a username all right and this is what the schema looks like so if i go under going content i have users and market items so you can see on the left hand side i have users and then inside of my users i have user name so this over here is my username and now if i go right there you can see the title username right maps to username right there the wallet address maps to this one and because i said string it's a string the profile image maps to this one and because i said it's an image it takes in an image and then we have banner image and our twitter handle so on and so forth and then we have one for market items so what we're going to try to do is we're going to make it where you can just get access to our schema file we'll try to link it below and then you can essentially just copy paste that schema that i've added right here it's just an array of objects and i'll scroll down so you can also pause the video and manually add it if you need it to now that we're done with sanity what we need to do is make sure that we set up our meta mask so for metamask make sure you go and install metamask from chrome so go ahead download it install it that's step number one for you all right once you've set up your metamask account make sure that you have an account like the one i have here btscp admin the next thing we're gonna need to do is add in our network so make sure you're not gonna have all the networks that i have available here so what you need to do is go ahead to your settings go to advanced all right and then what you want to do is you want to click this that says show test networks so make sure that your show test networks is on and then once it's on go ahead and choose rankib test network that's the network you're gonna need to be on and that's the that's the ethereum blockchain all right now that our meta mask is completely set up let's go ahead and set up our third web that's what's going to allow us to actually connect and communicate to the blockchain so let's go i'm going to open a new tab and we're going to go to thirdweb.com and what i will say is actually use the link right here that will have in the description below because that link will give you their most you know the free access and it'll give you uh the best access because we have a good deal with third web as well so make sure you use that link and it let them know that you're coming from the clever programmer community this is the page you should come to if you click that link let's hit let's get started let's go ahead and connect our wallet so i'm gonna click meta mask and i will connect this wallet right here now once i'm in here most of you are gonna get this error at the bottom which is gonna say insufficient funds if you get an error that says insufficient funds you need to go to a faucet and get some free ethereum if you want to see how to get free ethereum oh before we keep continuing this video go ahead and smash that like button break that like button turn it blue and subscribe to the goddamn channel and let's keep going this is the link that we want to go to right here so i'm going to zoom in so you can see that it's faucets dot chain dot link slash rinkaby that's the one we want to go to so let's hit enter and i'm right here ethereum rinkaby now you need to give it your address i'm going to give it my account address right here copy paste and i only need to set myself 0.1 test eth let's say i'm not a robot so if it works well i should go from 0.68 to 0.73 eth let's hit send request and now it's saying waiting for confirmation so we're going to wait a couple of seconds usually takes five to ten seconds sometimes it might take longer it just really depends when you're using the chain because if you're using it at a time when it's kind of packed and booked and a lot of people are using it it's going to take longer it's kind of like the freaking la traffic the 405 it gets pretty congested all right so request is now completed the token has been transferred let's close let's check my meta mask and let's see and boom 0.73 eth we need that to do a bunch of things so now we're here okay great let's create a new project so hit that blue button right there for me create a new project we're going to create it on the test net not the main net and let's do rinkaby here onrain could be here we will say open c blockchain and let's just hit create that's pretty good it is saying you'll be prompted for one transaction so let's hit confirm this will cost us some gas fee so let's go ahead and pay that gas fee and then we're ready to get to the next uh stage all right now i'm in this project so what's super cool is if you have nfts and people start buying them and you make royalties all your royalties will be right here and then you just click this one button and these royalties come out and you can collect them third web makes all of this so freaking easy all right let's go ahead add module now the module i want here is the marketplace one we want to create our own marketplace because that's where we'll be able to list stuff so let's create it we'll say openc marketplace and uh let's put a three percent marketplace fee anytime somebody does any transactions we will get paid three percent for it let's go ahead and hit confirm to cover the gas fee and create this marketplace this will take a couple of seconds once our marketplace is up and running then we're good to go and then we're going to go on and start working on our nfts and so forth it should also bring up the second transaction for you so go ahead and confirm that as well and then just wait for this to finish all right now i see here that my marketplace is done being built i see these green check marks i'm the only one who i want right now if you want your friends or anybody else to have admin level access to this marketplace or you're gonna build a project and you need team members to get access simply just keep putting in their wallet addresses right here and if you keep doing that you can keep giving them access which is super cool and then when they connect to their wallet right here on third web boom they'll have access to the same projects you do so if you're working in teams or whatever do it this way and what i'd recommend if you're a part of the clever programmer community or you're at one of our meetups in new york city or la that we have you know all all of you should get under one like team account and then work on this project together like you guys can make little groups anyways let's keep going all right so this is my open sea marketplace currently you see it has no items listed because we haven't listed any and then it gives you certain things right now we don't need to worry about any of these let's go back to the dashboard so we're done building our project and we have a marketplace in it so openc blockchain right now i have one module in here which is a marketplace another module i need to create in here is an nft collection right there so let's go ahead and create that i'll hit setup module and we'll call it board ape yacht club you could call yours whatever you want and for symbol i'll just say bake and we'll say like anytime purchases happen we'll make five percent royalty let's let's hit this and then we'll wait for the transactions to pop up and hit confirm and then it'll have another one pop up if don't pop up then keep an eye on your meta mask and see if it shows like a one blue notification if it does it means it's a pop-up is there but it's hiding so you could click it and you can force it to like reveal itself oh yeah so if you look right a pop-up actually came for me and that's what's hiding it that's why it's not coming up so i click that one and then i can hit confirm right here and now the transaction will go through now just go ahead and get access to photos so for me these are the nfts that i've gotten access to you guys can go and literally download anything you want you can have it be a different project but yeah we'll also give you this folder like in the links in the description and you can download these assets if you want and then use these exact photos so let's go ahead and mint some i'm not going to sit here and mint all 17 because that's going to take forever i'll just mint like one or two for now so let's come down here and let's hit confirm so my nft collection is pretty much done now inside of my nft collection i need to like mint my nft so let's go ahead and hit upload all right and i'll go to my downloads i'll go to my bake which is board api club and we'll start uploading some of them so we'll start off with our first one right here and i'll give this some number two three one two and that's pretty good all right let's go ahead and mint our nft so now it's going to take a couple of seconds for it to mint and once it's done it'll show up so let's pay the gas fee for minting it and some other fees and once that's done this will mint sometimes it will take a really long time to mint so please do me a favor don't try to re-mint or whatever just wait because then you're gonna otherwise you're gonna get duplicates all right so we minted that one let's go ahead and mint one more shoop shoop name it three four one two mint all right copy the fee confirm all right and we're done with um our second nft here as well so for now this is all i'm gonna mint you guys can mint all 10 or 15 of them i'm just not going to do that right this second it's going to take too long we'll mint another one all right now let's go to our nft collection so i'm going to go to board api club nft collection what we need to do is list these guys we need to list them on the marketplace that we created so let's go hit list let's select the openc marketplace that we created we're going to do direct listing and we will do ethereum for the currency and the price of this will be let's say 0.0.1 eth for this and we'll hit list now have these pop up and confirm let's confirm this as well and we're just going to list out all of these so go ahead and list all three of these just manually run through it hit list do it and then do it one more time just so we have like or we don't need to list all of them you could just list like one or two that's fine like let's just list one more so we can also see the difference between listed and then unlisted ones also list us for 0.1 eth boom let's hit confirm all right so for now we're pretty much done with our third web setup we're pretty much done with our sanity setup one thing i just want to do to make sure everything is good is make sure you're inside of your studio folder and just do sanity start let's just double check that our app is running the schema is looking like how we want it to look like all right and then go from there so just wait for this to compile let's give it a little bit once it's all ready to go then we'll be good to rock and roll so it's saying that it's on localhost 333 let's go check it out sign in with whichever provider you want i'm usually signed in with github so i just keep it consistent with github you could do google that's totally fine and notice that it has the users just like how we created and right now it has no users so we can create a user right now if we want and i can say clever quasi on this and i can give it a wallet address i can i'll leave that empty for now and i can also upload a profile image a banner image a twitter handle right and then a cl instagram handle so let's just do this let's hit publish so this is just from what we've made and then these are the market items so let's go back now all right so you are now done with the setup congratulations amazing job for sticking through that and now we're ready for the fun stuff we're ready to code so if you're excited i'm excited smash that like button let's start getting back in and let's start coding all right the first thing we're going to work on is the nav bar so let's get our nav bar up and running and our nav bar should be looking like this so when i full screen this right here you can see how this nav bar looks that's how our navbar needs to look so let's let's go ahead and build that thing out now i'm going to create a new folder we're going to call it components and inside of my components i'll have a new file it'll be called header.js and in here let's rafce save and then in here for now let's just say navbar or yeah header and let's just make sure that this component is showing up inside of our pages in index i will remove all of this and we'll say header we're going to say import i'm going to say header from component slash header and there we go we have our header showing up that's perfect now let's actually go and we're going to start styling our headers i'm going to go to my header and again from on the styling end guys i'm going to move through the styling part real quick because i want to get to the interesting parts of the build i'll full screen this as well so you can at any point pause it and kind of copy this but and i'll walk through the styling slowly as well once the whole thing shows up i'll kind of like walk through it a little bit so this is this is all our styling this is it and all these one liners are coming from tailwind css and and then this little hack here which is super nice this is awesome when you do brackets you might be wondering like why are we doing brackets until when this is if you want to give tailwind an exact color because one of the things that was like always super annoying to me about tailwind is like what if what if i want this exact color that i know i want or this exact size that i know i want so this is what you can do anytime you use brackets you can give it the exact things that you're looking for so then tailwind can extend to essentially really anything you want all right so let's go ahead here i'm going to make a div and this will have a class name let's give it style wrapper and then inside of our wrapper we're going to have a link tag because when i put my logos i'm going to wrap them in a link because it's going to be a url so what do i mean by that if i go to my app right here if i go to the collections page watch this if i hit the logo here it brings me back to the home page right so that's what we want in our app so we're going to put that in the link and i'm going to create a div this will have a class name of style logo container and inside of here i'm going to have my image tag so this is going to be coming from the next image so make sure to import image from next and we're going to give it our openc logo all of these files will also give you guys so you guys can get them but this is the openc logo you can also just go to the openc website and and get it but yeah so i'll make a new folder here it's going to be called assets and then inside of here i'm going to put my openc logo so right there that's it just a openc png file you can download it from the internet if you want and then put it right there cool so let's go back and i'm gonna say import openc logo from and we'll say assets open c logo png so there we go and then for heights we're going to give it a height of 40 and a width of 40. and we'll close it it's going to be a self-closing tag now it's saying module can't resolve because it's not openc logo it's actually openc.png so let's try that again oh and it says link is not defined so let's also get link from next so i'm going to paste that right there so we got link from next let's refresh this and we need to give this href so for now let's just get give it a href of home perfect there we go so whenever you click it it'll bring you to home if i had given it a href of profile when you click it it would take you to slash profile slash profile would say the page could not be found because we do not have a profile page so let's just change this to slash perfect now inside of this image another thing that i will need to add is we're going to have a div and this one will actually this will be style logo text like this okay and we will say open c boom i actually really like this way of styling where you just add like a it's almost like react nativiy and you just write all your tailwind right there super cool instead of putting in another file and it's also better in my opinion than using stat styled components because what i don't like about style components is you can't tell when you're looking at your jsx you can't tell what's regular css and divs versus what's like an actual component that you're using so in this you can clearly tell because your styling just goes inside a class name so it looks super nice and looks similar to how you would style with next great so all of that is looking good we have our text open c showing up now right underneath this link we're going to create another div and this will have a class name of search bar and then inside of my search bar what i want to do is create my search icon put them right there and inside of here i want to do a outline search so this is going to be my search icon now you're going to be like hey where is this coming from it's coming from react icons so all we need to do is install that so i'm going to do yarn add react icons and hit enter this will install the react icons library okay and then all we need to do is just import these three icons that we're gonna need so i'm going to paste that right there our ai outline our cg profile and our md outline account balance wallet all of these are coming from react icons cool so let's hit refresh and let's see what happens portrays requested let's see let's kill our app and let's start it again let's see if that helps we're getting the same error oh i see my error i installed it in my studios so i need to get out of my studio and i need to install it here in the root directory so we're going to yarn add react icons because the studio doesn't need it our app needs it so now it's uh should be good to go in just a second boom there we go so now if you look we got our search bar right here our search icon is showing up because this icon is actually coming from right there all right so that's great perfect now let's go right underneath this div and what i want to do is actually make an input all right this will be text we don't need to give it a type right here we'll just give it a class name so let's go ahead and let's go give it a class name and we're gonna say style search input all right and then for placeholder i will say search items collections and we will say and accounts just like that search items collections and now when i hover over it notice that that effect is right there and if i had to explain this from tailwind if you look at the search input well it's telling us exactly what height we want it to have right 2.6 if i reduce this height to 1 you can see that my thing just became a little bit smaller so we're going to give it our 2.6 height a width full if i take that away you'll see the width becomes slightly smaller so if i add that the width becomes full of that search input and then if i take away this background transparent watch what happens here right the whole thing becomes white and weird looking so all of the styling is right there that we need for this cool so we have our search and now all we need to do is essentially link to our collections as well and we should be good with the navbar shortly let's create another div right underneath this search input so we're going to do div and then i'm going to do class name and we'll do style dot header items and inside of these items let's do this i will do style.header item let's do class name and then inside of here i'm going to say collections let's copy this paste it a couple of times because we're going to need multiple things that we want here so we're going to have the second one be stats and the third one is going to be resources and this one is going to be create perfect now let's look boom collection stats resources create and then we just need some icons so we're going to add those as well so let's go here i'm going to say div all right and then this one is going to be class name equals i'll say style that header icon and we'll put our cg profile okay and right underneath this we'll have another div we'll do class name for this one i'm going to do header icon as well and then we're going to put another icon and this one is going to be our account balance so there we go we got our account balance we got our little person there we got everything else perfect now all we need to do is just make this collection link to a certain page so i'm going to go to my collections and wrap it in a link tag capital let's take this put this down here and for my link i'm going to say href collections and we're gonna give it our collection contract address so this is our collection let's just copy this and we're gonna do that right there so this is gonna be necessary later right now when you go to it the app is gonna crash of course because we don't have that page built yet but once we do then the app is gonna be good to go so let's go back let's refresh boom if we are to build that page out right now if we go ahead and build a new folder and we call this folder let's say collections so let's create a new folder inside of pages inside of pages we'll call it collections and then inside of collections we're going to have a new file all right and this file this is how i want you to name it put brackets and we're going to do collection id dot js okay let's do rfce so you want to name it like that even though it looks like a weird name that's how you want to name it and here this is we're just going to call this collection okay and then you're going to just do default export export default collection just like that and then whatever you pass it we're going to extract it from our router so let's go ahead and put our router here this use router hook you're going to need to this is you kind of get access to it with the react and next or next actually so we need to just import that from the top so let's go ahead and import that from the top and this router has access to multiple things for example it has access to our query so if i do router.query right you can even do router.query.probably like collection id id like this and let's just take a look at what happens i'll go inspect here we'll go in console mode all right and let's hit collections and watch our app did not crash and we just got collection id object which is this query right here and the actual collection id right there so that's how you move around with react with next and notice how the page is already made right so for example to prove to you the page is already made you just wrap this in h2 and i can actually show you our i can do router.query.collection id and boom right there look at that it's pulling it right and so freaking nice and easy and if you want you could wrap it in a link let's go ahead and wrap this h2 in a link tag so i'll go link we'll import it and we'll wrap it in a link and i'll just say href i've taken me back to the home page just for now so when you click this it just takes you back to the home page so collections go here click that and yeah so that's just to kind of just show you that we can go back and forth between these this is not how the actual functionality of what what's going to be on this page but this is just to kind of get you started and show you the power of next if you think if you like next and you think this was pretty freaking cool because i think that was pretty freaking cool it was so easy to route between the pages way easier than react router do me a favor and smash that like button alright let's get this video out to as many people as possible so we can help make the world a web 3 world all right and help a lot of other developers on the planet and it doesn't cost you anything and it's free and it's easy so do it and it will be awesome and i'll love you forever so let's keep going all right so my nav bar is looking like it's pretty much done now we're gonna build out our home page or hero meaning when i go here this hero that you see right here so let's get to that right now all right now we're gonna build the hero which is uh this guy right over here right here let me zoom out a little bit that's our hero which is that whole thing this plus this all of it so let's go ahead and build build it out now in my components i'm going to create a new component all right and we'll just call it hero.js and another thing you could do is you could create a folder uh called home inside of components if you want to be like really cool about it nah that's fine let's just create a new component new file we'll call it hero dot js that's fine this is great let's do raf c e boom so first thing we're just gonna have it say hero and i just want to make sure it's showing up in my index.js so let's go to our index.js and we have our header showing up that's fantastic and we also want this to show up so we're gonna [Music] we are going to wrap our return in empty jsx fragments make sure we put a paren take out that's cool so we're going to have a header and then we're going to put a hero all right there we go header and hero so let's close this it's not importing it for whatever reasons let's import hero from and we're going to do the same thing and we're going to say hero great so hero is now showing up and working now we just need to go ahead and start styling and working on our hero so there we go got a bunch of styling for our hero a bunch of styling again we're going to link this repo for you guys as well down below so you can always just go to this git repo and get access to the styling and everything we have as well so if there's something you can't see or can't read just go ahead and do that and you should be good to go i added my styles and now we're gonna go ahead and start working on this so let's go all right our first div i'm going to give it a class name and we're going to say style wrapper all right inside of here i'm going to have another div we'll give it a class name of style container inside of my container i'm going to have content wrapper so basically it's going to be little nested so we're going to have a couple of these so here i got my content wrapper inside of my content wrapper i'm gonna have my copy container let's close that div out as well and then inside of my copy container i'm gonna have my title so let's go ahead put our title right there and we should start to see it now all right there we go discovered collect and sell extra extraordinary nfts great well we need to build a lot more things now right underneath this title i'm gonna create another div and this one will have a class name of style.description all right and then inside of my description i want to say open c is the world and we'll do this first and largest market place or largest nft marketplace and i meant to put an ampersand here like that so that will put that apostrophe right there you don't want to use a regular apostrophe or whoops let me hide myself here so you can see what the heck i'm talking about this guy right here puts that apostrophe all right so now basically after we have that i want to basically now add my cta container and inside of my cta container all i want to do is i want to add my button so this is my first bun this is explore button after the explore button i want to add my create button okay so there we go and i should be able to like hover over these like this and have that styling so if i actually make myself go away here you can see i can hover over and it like lights up right and then basically what i want to do is i want to create another div and this should be for my card container okay so i'm going to give it the rounded styling and i want to give it this url right there okay this url is really easy to get if you were on openc you can also just get their latest photo because that's essentially what i did right click copy image address paste it and that's the url that i'm using it's just when i was building the openc clone at the time they had a different photo so you could just update it with this photo okay that should be completely fine okay let's keep on rocking and rolling here let's also build an info container which is going to be like right at the bottom as you can see right there okay i added my profile photo there so i added my profile photo url then i made it rounded so it made it nice okay and then after that let's just go ahead and basically create an author and we'll also give him a name so i'll just say the author name here's jolly and then we'll link to ola canola because that's the artist that mine linked to and this link over here the openc1 that you see is simply the link to the actual asset meaning that when i go to openc and i hit i am sati or whatever it links me to the actual asset so i just copy that link paste it there okay that's all that link is so you can do it that way so cool there you go so up until now you should be good all right so one thing we're gonna do in order to fix this and make this look right so you see how there's a dark background color here and here we have very light so here's what we need to do let's make the opacity 30 here okay and now this is bright so we're gonna add a background color that's gonna make this dark so let's add html let's add body and inside of our body we're gonna add a background color that's dark like that so that should fix it then let's add padding of zero margin of zero because we don't want anything to have these random margins or padding let's make sure that our link tag inherits the colors and has no text decoration and then let's just do box size saying border box and then that should be good and boom our page is looking fresh might i add and if you like it make sure to smash that like button so let me show you the hack that i'm actually doing here when i do this watch what happens to the container in the background boom it vanishes okay when i do this boom it comes right back there's a great video by coder coder that talks about how to use before to implement that so go ahead and watch that i don't know if it's somewhere here or a link in the description below or just type in coder coder and look at before she killed it with that video and uh use that for reference okay that'll help you with this but essentially what i'm doing is i'm continuing a container here okay which is this guy right there and i'm saying hey before any of the other content add yourself so like add whatever i give it so here if i give it a absolute position absolute and i give it an image it makes sure that it shows that image but that div isn't really attached to anything else and isn't like affecting anything else so it's like a div that's kind of behind this one okay then we're adding this over it okay if you don't do it like that you're going to run into weird errors where the opacity of that div is going to bleed onto its children meaning that that same opacity is going to be on there so they're going to be dark and blurry and weird stuff okay so that's the hack that we're doing there now for the copy container that's to contain this copy so when i give this a 50 or width of one two one slash two it basically breaks these up into two different things so for example if i remove this watch what happens right each of them ends up taking the full thing so you can just keep commenting these out and seeing what these do that's a good way to play with it and see what's doing what okay so this will help you pick up tailwind as well okay so do that now with that said look at how beautiful the homepage is looking this is our hero and our header right even when i scroll down it's there if you like this you know i'm pumped for you and we're gonna now move on to our collections page we are almost done with this page okay but before we move on to our collection page the only thing we need to do now is just add in our metamask authentication so let's get to work on that now all right so let's work on our meta mask authentication first thing first if this is tsx is freaking you out you can just turn it to js you should be fine now and if it complains about any of this stuff like hey app props is not a thing fine just remove it boom get rid of it cool so we'll import our styles here and the other thing i want to do is i want to actually do a third web provider or third web 3 provider oh sorry this is like weird third web web 3 provider provider and we're going to say from and now we're going to do third web hooks so let's install this as well so we're gonna do yarn add and we're gonna do third third web hooks like that so let me just zoom into that so you can read that really easily and let's hit enter beautiful so let's install that and that's that should take care of that now what we need to do is build our chain okay which chain are we going to be using so the supported chain this is the four means this is the rinky b chain we want to use and this we're just gonna leave blank because we're going to be injecting our meta mask into this so this is good i'll give you these notes here so the chain id 4 represents the drinky network and the injected connector is a web 3 connection method used by metamask all right great so now it's having some trouble web3 provider can't resolve third web third web hooks all right let's start the app again and let's see if that works perfect that looks like that works great just restart and start it again the ultimate ultimate solution to life huh now what we need to do is wrap this app in our third web provider so let's wrap this let's end it with third web provider right there all right let's wrap the whole thing in return statement and we will remove this return right there so third web components wrapped in here so this is our entire thing and the entire thing is wrapped in this third web 3 provider cool that is a very important step make sure you get that one right now let's go to our index.js so this is where we're going to make some of the other magic happen okay so let's get our styling in place because i just want to fly through styling pretty quickly here it is if you want to like copy it or pause it or whatever so we're going to leave that there and now inside of this home function what i want to do is i actually want to use my web3 hook now it's going to be like hey what is this web3 hook it's not defined you just get it from the third web hooks all right so just like that i'm gonna get it from the third web hooks and we're gonna use it and it gives you access to the connect wallet and it gives you access to the address this is the wallet address cool and perfect now what we're gonna do is we're going to uh grab the user all right now let's add some condition or some a wrapper around this so it looks a little bit better and now what we're going to do is we're going to do some conditional rendering here based on if the user is logged in or not so here i'm going to ask if the address exists and if it does show the header and the hero and if it doesn't show a button so the user is not logged in right show the button so in this case yeah the user is not logged in so there we go we have a button showing up if the user was logged in and it shouldn't show that and right underneath that let's go ahead and a thing that you need chrome to be able to run this app so that's one thing i just put down here and then i wrap this entire thing in this div that is a wallet connect wrapper okay right there now just be careful with how you write this so make sure you have this div at the top this conditional rendering goes here so it either does this either does this or this that's what the conditional rendering is doing it starts here and ends right there so now let's see if i connect and if it works let's try it hit next connect and boom i'm in and i can see everything and if i go here and i go right there and i disconnect let's see wow guys isn't that cool i feel like metamask authentication is even way easier than google sign-in right and any other type of auth like this is honestly the best authentication experience i've ever ever went through like that this is this is ridiculously awesome so if you love it smash that like button below do it right now show some love drop it in the comments let's keep on going all right now what i want to do is when the user logs in i want to add them to my sanity database so let's go ahead and do that i'm going to create a use effect hook and it's going to be looking for the address this address will only occur as soon as the user logs in this use effect is actually going to work if they're not logged in it won't work all right so i'm basically going to say if there's no address just return out of it if there is then i want you to do the following so i'm going to write a iife which is a immediately invoked expression i love these i just found out about them and they're awesome so you just create a function you call it right away i'll show you how it works it's pretty simple so i'm going to create an async function it's an anonymous async function and all i'm doing here is i'm creating a user doc and then what i do is i tell sanity go ahead and create the user if the yet user does not exist that's literally it and then i call this function right away so normally just to give you an idea of how what the heck is actually happening here let's say you just create some function right well usually how it works is i don't know it's like let's just say it's it returns 2 whatever some function returns 2. when you want to call this function you will say sum function some function and you will do this well i could actually make this function something that can be immediately invoked by doing the following wrap it in parentheses and just call it right away so super freaking weird but like i'm creating the function and then i'm calling it right away this is a immediately invoked um function if i if i do alert alert let's just say hello it should alert me in a second let's uh get our use effect hook actually up at the top so i'm going to go here and i'm going to say import use effect from react just like this and now we got our use effect this is erroring out because we need to put a semicolon there all right so there we go i changed that alert to console.log and you can see this is an anonymous function i created called console.log hello all it does is logs hello and then it immediately runs and right there you see hello so this is called iife okay immediately invoked invoked functional expressions and i know it's a mouthful but you'll start seeing them everywhere in so many code bases and they're really pure and beautiful and their scope is really small they're run and then they're deleted and then javascript doesn't remember about them so they don't pollute your global space they're really bug free and they're a really nice way to do things if you just need a function just do something run and finish this is a nice way to do it cool so we're just and just put a semicolon right here because if you don't it'll like move this up into this so starting it with a semicolon is kind of important but other than that it's just a normal function and we're creating a user we're giving the wallet address and then we just create that user if that user does not exist in the sanity database so now when i hit connect wallet what should actually happen it should create a user so in order to be able to see it what i want to do is i need to cd into my studio and i'm going to do sanity start here so let me zoom in here so you can see that and let's do sanity start all right make sure to do that that will whip up your sanity database and once it whips that up we will be good to go so let's go where do we have it we'll do localhost 3333 just like that and let's bring that here so right now you can see i have no users i just have that one user clever quasi and that user i just manually created that user so that user really shouldn't even exist let's see if we can delete that user and yes we can so i'm just going to delete that user because we don't really need that user all right now let's go to our app and let's go ahead and hit connect wallet let's see if it works and we will do next connect now we got an error client is not defined it's a great error that means this line ran and we got an error so what is happening here well we're going to need our client so perfect this is a perfect time to build our client so let's go ahead create a new folder it'll be called lib and inside of lib we will have something called a sanity actually what's the best way to name this we will call it a sanity client so let's go sanityclient.js all right and in my sanityclient.js we are going to import this at the top so this module we're going to need to install so let's go ahead and install that right now all right so we're gonna go and do yarn add at sign sanity slash client just like that go ahead and install that perfect while it's installing let's go ahead and build out our client so i'm going to say export const client is equal to sanity client all right and then we're going to put our project id here so project id will be i will go here into my sanity projects and here we have openc blockchain clone this is the one working on this is the project id i need so copy that right there boom that's the one grab that bad boy and let's go ahead and put it right there data set is going to be production that's great then we're going to need the api version and let's just say 25 make sure you put that exactly like that use cdn we're going to say false and then we're going to need a token so in order to create the token go to api we're going to need to do a couple of things here cores origin let's go ahead and make sure we have http 3000 because that's where we're running our app so let's go ahead and save that so course origin is going to be important even when you deploy the app you're going to need to put our course origin right there and this is fine you don't need to do credentials so then hit add api token and we're just gonna give this editor access so this will give a read and write access and we'll call this openc token whatever it doesn't matter just hit save perfect so we got this token copy and we're going to go back i'm going to sit i'm going to say token and we will paste that right there so we got our token perfect now this client that i've made and i've exported i can actually use this client all right so let's go back into our app and i can say the following i can actually import this client now we have access to this client and there it is so let's give this same thing a try again one more time so i'm going to log out for now connected sites let's hit delete on the local host one disconnect and let's hit connect wallet next connect nothing broke let's go to our sanity app and let's go here and let's see if a user was created so we do not have a user created as of yet all right so we got an error if you actually look at the console we get this error that actually says something about credentials in the header so let's actually give something a try all right what we're gonna do is let's go back to our third web here and where i have said not allowed credentials let's change that so i'll just delete this for now we'll hit add corresion add add cores and i'm going to say localhost 3000 and then i'm going to say allow credentials should this origin be allowed to send authenticated requests with the user's token or session yes they should let's say yes allowed now let's uh try that one more time so i'm gonna i'm gonna log out so same thing hit the three dots connected sites and let's hit local delete local host your disconnect let's connect again next next connect i didn't get any errors at the bottom now let's go look at our database boom let's go the user is added how freaking nice is that guys and watch this i'll i'll rename this user to be clever quasi and now when i create another like when i sign in again it won't actually overwrite this user that's what's freaking cool about sanity i mean even firebase doesn't have this functionality so it's so freaking dope i love this right so watch this if i go here boom and let's log out again sign out connected details disconnect wait what the heck happened why not log out connected sites oh i'm looking at the deployed one perfect now i'm going to try to connect again and watch what happens with hit next connect and um look no new user was created because the id is the wallet address as long as the wallet address is the same it won't create a new user that's how it's detecting if that user exists or not because detecting if that wallet exists or not and that's coming from this line this nice little line right here create if not exists and it uses this id okay so that's what's happening there now if i signed in with a different wallet so let's give that a try so i will connect and i will disconnect here and i will connect with some different wallet that i have whatever this one is fine let's go right here hit look let's try that one again let's hit connect and let's see it chose that one hit connect okay let's go here and boom unnamed brand new one because different wallet address guys oh my lord sanity is beautiful turn that thing blue for sanity let's keep going okay great work sandy y'all are beautiful okay awesome so let's go back this is the easiest database thing that you've ever done in your life your well now all i'm going to do is uh once the user successfully logs in we're just going to add a little toast a notif uh like a notification at the bottom or at the top that just says like hey welcome back so let's go ahead and do that now so i like this library it's called react hot toast so i'm gonna import that right here and this is the library name react hot toast so whatever is there that's the thing you want to install right there so let's go ahead and do that so i'll do yarn add and just so you can see here whoops yarn add react hot toast just like this so install that that's a super nice library that adds these awesome notifications on the flyer react hot toast so you can look at it here as well oops that's it and if you hit make me a toast right it shows you here's your toast and you could you could put it top left you could put it at the top center right position top center top right and then it gives you the code right here super easy to follow so that's the code all right and then if you want it in tailwind you can grab it in tailwind as well and style it and close all of that so this is super awesome i would say add it for any time you have a promise that you need to resolve it's really nice to give a notification like hey purchase was successful or hey the user you know welcome back you know you've logged in successfully whatever so it was having a trouble resolving the module all we need to do is just like kill our server with control c and just hit yarn dev again and we should be good to go and be up and running so let's hit refresh here and see what happens okay cool i'm in everything is working so let's go and work on our toast now let's make our toast function here so it's going to be called welcome user it'll take in a username and a toast handler by default it'll be toast that one right there let's go toasthandler.success and on success we'll say welcome back to the user and we'll say their name and we'll style it where it's like a green check mark that they get and that's essentially it okay so there we go this is our function for welcome user now all we need to do is actually use that function once the user successfully signs in so we can go ahead and use that boom we'll welcome the user and we'll say result.username great because result gives you the object back whichever one was created all right so let's give it a try now let's see what happens when i log out and i log back in and let's look for a toast oh we actually need to render this toast out so we've made it but we need to actually render it now on the screen so let's go ahead and do that right underneath wrapper and we're going to say toaster position equals and we'll go and choose top center and we'll say reverse order we'll say false and end this so that's where the toaster should show up perfect you see that it says welcome back right there let's refresh boom welcome back look at how nice that is now we're done with our home page because why we have the nav bar we have the hero we have all these amazing sections and it looks beautiful we have the blurred background we have authentication even now we need to make collections work so let's get to it all right now let's work on our collections page so i'm going to go into my collections i'm going to go into collection id dot js and i'm gonna basically add all my style here so let's full screen it you can pause it you copy it whatever you want all right so this is all of my style that i'm going to need for this page okay cool we got that now i need to get a couple of other things so we're gonna add our provider here because we need access to that i'm going to get my collection id from the router i'm going to destructure my collection id actually i will set my state for collection because i'm going to need access to the collection and i'm going to need access to all of the nfts and i'm going to need access to all of the listings now we're going to import use date at the top so we're going to go right here and we're going to say use effect and use state because i'm also going to need use effect let's import our web 3 hooks so that error will start going away also there are two use effects here so we'll get rid of this use effect here and we'll just have one at the top now before we continue one another thing we need to do is actually set up a infuria link actually let's sign up for alchemy api so go to alchemy and alchemy api web3 development made easy and you can simply get started for free and sign up i already have an account so i'm just gonna essentially log in it's gonna just bring me to the dashboard for you it's going to ask you to create an account go through that process make an account here and we'll use the api that we get from here so at the top here you see it says create app so you can hit create app here if you want we can see we can say open c blockchain build or clone whatever you want to call it uh youtube tutorial for my description you guys can call it whatever you want and environment uh whatever staging it's fine and then chain is going to be ethereum and we're going to be on the rinkeby network so let's create app all right so i see my open c blockchain i'm gonna go into that perfect and uh here's my key so i'm just simply gonna copy this key and i'll write this key down here in comments i'm gonna need access to this shortly all right so i'm going to create a little function called nft module and this will help me get access to the nft module we're going to use memo here which is kind of like a use effect but it also has some caching built into it too so it's a good hook to use the dependency of this is going to be the provider and if the provider doesn't exist then just return otherwise we're going to create a third web sdk we're going to get our signer and we're going to use our api key and then we're just going to return the nft module and we're going to give it the collection id cool now i'm going to cop this guy right here and we're going to pop that in we're going to pop this link in right here perfect all right let's create another function that gets all the nfts inside of a collection we'll create a use effect hook the dependency is going to be nft module so whenever the nft module is loaded this right here this use effect will run and if the nft module doesn't exist stop it we're going to run an iife immediately invoked functional expression so this function just creates itself and then calls itself right away we're going to get the nfts from the nft module and then we will set the nfts just like so this will update our nft's variable right here all right so now what i'm going to do is we're going to get access to our marketplace module and i'm going to again use memo here the dependency is going to be the provider if the providers is this stop we're going to create our third web sdk we're going to get our signer we'll pass in the api key and we will get our marketplace module all right so that's how we will get our marketplace module now if you're wondering where i got the marketplace module from in third web you're going to go to your project so you can go at the project level whatever let's hit here open c blockchain and here's my openc marketplace right there so you just click that and you can copy that address all right so that's the marketplace we need access to all right so let's get all the listings inside a collection we'll use a use effect hook it look for marketplace module if it doesn't exist return let's call a function and run it immediately and we will set all the listings to the listings that we actually get from the marketplace module so as soon as we get them we set them all right now one thing we want to do guys is let's go inside of our sanity database so let's go to market items and what we want to do market items is basically just our nft collection so there's just another another way just saying is what are the you know it's a collection on the market let's hit that button right there and we will add in our nft collection of board ape yachts club for the contract address let's put the same contract address that so for description i'm just going to put the board api club is the blah blah blah for contract address what i'm doing is in third web just go to board api club or whichever one you have copy your nft collection address and you could put that right there so this is the nft collection address created by who was this created by so in this case i'll just choose clever quasi and you can see how nice it is right insanity i have my drop down modules and it shows me volume traded let's say 342 thousand each so i'll just put 42 342 here and then on the back end we can add in the k or you could just do 342 000 like this zero 34200 floor price is going to be 93 ethereum and then i don't know let's just say clever quasi also is an owner and has one so this is like how many owners it has and who are the owners so we'll put all that information right here and then i'll put in a profile image for it and we will put in a banner image for it so you guys can just google these images or go to openc and lookup board api club and you'll be able to pull pull these images from there so let's just double check all right and let's hit publish hopefully those photos will update in time there we go our profile photo is updated here and then we'll soon have our banner image i'm sure updated there we go got it so now that we have that now we can actually go to our vision and make our queries so let's go to our vision let's paste this so i'm going to give it our contract address which again was this collection right there so let's go ahead and give that collection all right so let's go back to our desk here right and let's see so my query that i'm making here is basically saying hey if the market if the type is market items all right so get me market items type and then if the contract address is equal to this one and get me the following so in this case i'll just say get me the title so let's see what happens let's go title and let's hit fetch and you can see that it's getting me the board ape yacht club so whatever collection i pass it here it's going to give me that collections title and now what i'm going to do is i'm going to go ahead and ask it for multiple pieces of information so it'll look like this all right there we go there we go let's hit fetch and let's see what we get all right we got back everything so let's just look at this so it's saying hey if you matched board api club get me the image url so there is the image url i also say give me the banner image url so here is the here is the banner image url that we got the image url you can see is kind of at the bottom right there i'm asking to for it to give me the volume traded and it does volume traded i ask for it to give me created by right and it gives me created by and i say hey for creator get me their username so we'll go and look at creator and boom it gets me their username for all owners that shows me who all the owners are so it just returns to me like an array of objects so in this case we just have one owner right the list is has one item inside of it and then i also ask for the description so this is our query all right we can copy this query and this is a query that we're actually going to be using so make sure you copy it and bring it into your vs code because this is what we'll need to use i'm going to just comment it out for now all right so one thing we can do is we can wrap it in these tildes and i can just say const query is equal to that so that's my big query and i'll use it in just a second all right so let's get our let's get our collection data from sanity we're gonna pass it the query and then let's do a couple of things here so we're gonna get the collection data and await it all right we'll fix this part in just a second and then we're going to set the collection data so whatever we get we're going to set that let's copy this let's cut that query and let's paste that over this one they're the same but i think that this one is easier to read now the only thing i kind of want to just change is instead of this hard-coded address here what we'll do is replace this with that collection id and we can pass in our collection id cool so once you pass that collection id it knows what to do and i can also just give it a default collection id in this case it'll be like hey by default just get me that board ape yacht club from collection id or whatever the user passes just make that the default one just in case the user does not give you the second argument so this will run the query the query will return these results that we saw here that's what that query will return and then once that query returns that what we're doing is we're taking that and we're storing all that data inside of collection data okay so awaitsani.clientfetchquery we're passing this query in there and then once we get that data we're just storing that data right here inside of set collection now all we need to do is let's create a use effect hook it look for the collection id and then it'll collect it'll run and collect the data so whenever the collection id is updated in other words whenever you route to this page which is collections this query should run because it'll pull the query from the query parameter that's how you'll get the collection id and if that changes then this will run this says use memo is not defined so let's go ahead and import use memo client is not defined let's go ahead and import our client now third web sdk is not defined so let's go ahead and import that great and let's go ahead and install that so let's go right here and we're gonna do yarn add third web sdk so now it's going to install the sdk once that's done that we should be past that error and on to creating our app my installation is done so let's refresh our page and let's see if we're done with that error looks like we are the page should be good to go soon let's just refresh one more time and yes we're good to go okay perfect actually let's get rid of this line over here i'm gonna remove that collection id it's fine we're just gonna pass that collection id from our state and then let's go ahead and console.log our collection data and i'll put a fire emoji so i can identify it easily and here is my collection data i am getting array of one and it's giving me all this stuff that's inside of it all right so that was super easy to pull all of the data from sanity now all we need to do is just whip up the front end because we already have access to all of the collections we have access to the marketplace module and then ft module we're getting all the nfts and we're getting all the listings so now all we need to do is build out the front end so let's go ahead and work on that now let's just go ahead and import a couple of things we're going to need so for this page we're definitely going to need our header and we're going to need a bunch of icons so let's go ahead and get them now all right i'm going to need my cg website my ai outline instagram and my high dots vertical icons i'm going to remove everything inside of this link tag and make this return empty and let's just build one component we're going to need so i'm going to go inside of my components we'll create a new file i will do nftcard.js just like this we'll hit raf c e on this cool now in this component all i'm going to do for now is let's say it's going to take in an nft item and all it will do is it will return an image and it will do nft item dot image that's all an nft card is going to do for now and then we'll build it out in a second now let's come back to our what we're going to render here in our return and let's get to work on this oh and one last thing before we actually do that let's just go and make sure that we're importing our nft card so i'm just gonna say import nft card from and we're gonna go get it from our components and we're gonna get it from our nft card just like that now we are all set all right so let's start building this page now so i'm gonna make sure my overflow is hidden when i make this div so my scroll bars are not showing up let's add our header boom now my header is showing up so that's great news all right now in my banner image container i'm gonna put my banner image and basically what we're saying here is if banner image exists then show the banner image otherwise show a placeholder that's all now we're going to create an info container this is going to contain our info like how much volume was traded how many owners there are things like that so in the mid row we're going to add a profile image and that profile image is going to again do the same thing if it exists show it otherwise show a placeholder that's all now we're going to add an end road to this and that's also going to create social icons and uh we're going to stick our cg website in there so it'll be on this right hand side you'll start seeing it we'll put some dividers we'll put our instagram in there and we'll put our twitter in there and then we'll put our vertical dots cool all right now we're gonna make another mid row and this will this not another mid row but this will be the mid row and this will have our title board ape yacht club cool it'll be it'll show who it's created by okay so in this case it's created by clever quasi it's actually pulling the real creator's name that i've put into sanity which is super dope we'll then create another mid row and this will contain stats all right and then inside of my stats we're going to have our nft and how many nfts we have so in this case 18 i'll say 18 items collection stat so now we'll say how many owners there are so this is actually pulling all the owners and then the length of the owners if they exist it's getting the length of the owners otherwise nothing and then it's going to say owners right underneath that we will also get another stat value and this will be how much each we have so we're just using this svg you can pause the video and copy this svg that's showing the ethereum it'll say floor price underneath it and then we will have our stat value and we will have another image boom and then we have our volume traded and then we do 0.5 k now since we're already putting k here we can go to our sanity database and update it so let's go to sanity let's go to users okay or actually let's go to market items let's go to board api club and inside of board api club i'm simply going to change that to 342 and we will hit publish okay let's go back to our apps it should say 342 k eth so let's hit refresh on this and there we go 342.5 k eath so looking way better that's great and let's add in volume traded right underneath that then we'll add in the description so the board api club is a collection of 10 000 unique board ape yacht nfts we'll now flex wrap and then we'll start making all of our items our nft cards so we're mapping through them and then we're just making our nft cards and we're passing nft item title and all of our listings over to our nft card component which all it knows how to do is make an image so that's pretty good so far and if i scroll through that all of our board apis are showing up how freaking cool is that right we're pulling all of these from third web the marketplace we're pulling this from sanity and i mean it's so cool so much dynamic data and we're doing so much here combining web 2 with web 3 freaking awesome now all we got to do is style this these nft cards so they look a lot nicer let's go ahead and do that so i'll go to nft card all right so i'm going to paste all of this styling all right again i'll full screen it so you can pause and copy if you want to there it is and i'll just keep going again if i go through the styling and every single line of it guys the apps the video length is gonna triple quadruple quintuple and we'll never get to the fun blockchain or database parts so that's why i'm kind of like going through this fast because i think by this point how many apps we've built we should be really getting this and if you're not getting this go back to so many of the previous clones that we've done and start going through the styling part they'll explain it in way more detail if you go through our older builds these ones i kind of want to focus more on the newer stuff that we're learning all right so um at the top i want to i'm going to need a couple of things here so i'm going to need use effect and use state from react for this i'm going i'm going to need a buy heart icon and then i'm going to need a router because i'm gonna have to do some routing stuff let's also add a couple of more props so we're gonna get title and listings as well and let's set a few states at the top so we'll have a is listed state and we'll also keep track of our set price and price date now one thing that you need to understand is this we have on the left hand side we have all of our listings and on the right hand side we have all of our nfts now we might have some nfts that are not listed but you know so let's say like this two three four but maybe out of all of those nfts only two are listed three and four listed meaning you have them for sale on the marketplace meaning you went to the third web platform put them and listed them for sale now what we need to do is we need to find where the matches are in this case the matches are aka in what's it called uh sql you will do an inner join right so you have you have some data whatever and then you do inner join so we're trying to find that match that kind of looks like a butt crack but whatever like you're trying to do an inner join right here and here what we have are three and four so where that match is what we need to do is go to each of those so we need to go to three and set its listing to true so this is basically is listed as true here and then what we need to do is set a price for them so we need to set set is listed here my bad i meant to write set set is listed to true and we need to set the price for them and the price will be whatever the price is in the listing because remember there are a couple of different things about nfts and listings if you go to third webs documentation what you'll find out is in nfts you don't find out about pricing if you look at the nft module what you find out is well what's the trait of that what's the description of that what's the image of that nft on listing you find different things like what's the price of that nft so both of these modules have two different pieces of information so what we're gonna do is we're gonna for price we're gonna put our hands into the listing bucket for three right and then set that price for three then we're gonna repeat the same process for four and set that price for four so that's how at a high level it's working let's turn it into code so i'm going to create a use effect hook it's going to have two dependencies listings and an ft item that's when it's going to fire when it whenever it sees those update because those are the two things it needs we're gonna loop through all of our listings and if our listing matches our nft item then we're gonna set as listed to true we're gonna set the price by pulling it out of the listing and then we're going to break and that's it all right so now let's actually build out our component so i'm going to build a div and then we're going to give it a class name of wrapper and then basically we're going to say on click i want you to take me inside of that asset so we're going to build all of these pages but don't worry about this right now what this does is when you click it it should take you inside of the detail view we're going to build that out in a second then what i want to do is let's have an image container and inside of that image container we're going to put all of our images so now when i look look at that it's already starting to look a heck of a lot better and in details we're going to have our info and then we're going to have info left so what's on the left hand side right so we're going to put our title board ape yacht club whoops board api club right this is the title of which collection it is and then we're going to put the nft name so which numbers these are right eight seven five four five nine eight etc we will do conditional rendering if that item is listed we're going to show its info on the right and that info is going to contain the price and it's going to contain the price value and we're going to have a nice little image each image with the price so there we go this one is listed so the first one is listed the second one is listed but notice that the third one is not listed this is not listed this is not listed so only these are listed here okay perfect let's go ahead and do likes and likes will have a heart right there and it'll also say how many likes something has so for now that probably will just remain empty which is fine cool so this is the this is what's happening right now and look at this right all of a sudden our cards are looking beautiful this data is being pulled dynamically right from third web like if i go to third web and we go to our nft collection when you were not looking i added all of these in here so that's why that's where they're coming from if you were confused i'm sorry but yeah i added basically 17 inside of third web so that's where all of the nfts are coming from all right so now let's do this i just removed that function with the whole for loop because i think it's bad so i think here's a much cleaner way of doing this so let's do it like this let's create our use effect hook let's do the same dependencies that we had before and for the listing let's see if we can match that based on if the nft and the listing asset id matches if it matches it means that that particular nft is listed and we're going to say if it's listed if it's true or false this will return a true or false so if you find a match this will return a true if you don't find the match this will return if false all right we're going to set the listing to true and we're going to set the price to the following price and now let's check our app and refresh and let's just see if things work fingers crossed hopefully the work and boom there we go it finds the matches and it lists their price pretty darn cool huh i hope you like that this solution is much cleaner so let's use that one all right and let's explain this part now a bit further so what's happening here we're just saying hey if it's listed let me know that it's listed so if set listed is true then it will make this true and pass it in the url parameters and you'll be able to pull it down from the url parameters right path name will be this so now let's go ahead and build this folder and this particular id thing so here's what we're going to do in collections we're sorry in pages pages we're going to create a new folder and this folder will be called we could call them nfts yeah let's just call it nfts i don't like assets kind of confusing let's do so let's go ahead new folder we'll call it nfts my bad nfts and inside of nfts we will have nftid.js like that or nft item id this is fine dot js just like that cool now in here let's just put something so here like let's just import the header let's do rafc e and then in terms of the name here i'm going to just say nft so we'll just call it an nft component like that cool and we will return header and that's all we will return for now so let's try it let's click something nice and look our header shows up we actually get routed into that bad boy and you can see that i can see the id is zero so even in my third web if i actually click look id 0 here right so let's go back let's go to another another guy like let's go to this guy 4598 and you can see the ids too let's go inside of our third web and i can see the id for this guy is two indeed right and what else am i getting it's listed as false let's go inside of third web and we'll be able to see it so let's go to project let's move that here for now and we'll go to board api club oh no not this one so on this one we have our nft module open and this one will have our openc marketplace open and let's just take a look let's see if it's listed or not so this page is loading right now as you can see from that circle right there so there you go you see that there's only two listed but the one with the id of two that is not listed so this is a true statement that that's this listed is false but if i go to this blue one right here that should say that it is listed listed is true so that is very nice it's working all right so let's just build this nft id page from completely from scratch okay so let's go ahead and import our header we'll also get our use effect use memo use state because we'll need it we'll need to use web3 from third web let's also get the third web sdk let's also get routers we'll do some styling for wrapper container our top content nft image container and details container and then what i want to do here is i'll do export default nft and the function will just return header for now all right and it'll just be the the component will just be called nft that's it now inside of it let's go ahead and get our provider from web3 we will set some states here so the selected nft which is the you know whichever one is a selected nft like the one that the user has clicked on for example we'll get all of our listings and we'll we'll track the state of our liftings listings will track the state of our selected nft we will get the router because that'll allow us to pull the data from url parameters and the query parameters we will create a get our nft module and if provider doesn't exist and just return update on provider creator third web sdk and then we will use our alchemy's api and we will get the nft module and this is the nft module and again i'm getting the url from right here for the nft module and then for the openc marketplace that's going to be right below this right there okay cool now let's all get all the nfts in the collection again this isn't the cleanest code because we're repeating it for you i'll leave it as a challenge see if you can try to refactor this code and make it where it's being re-reusable because you're seeing that we're using some patterns that we've used before all right so if the nft module does not exist then return we're going to use an immediately invoked functional expression here just async function call it immediately it will get all of the nfts and from our nft array we'll filter and we'll filter it based on the specific asset id and then we'll set the selected nft to the one that we have found so another way of doing this is instead of dot filter you could actually say dot find and then you don't need to do this zero index anymore so both ways should work you can leave whichever one you want let's keep going for now we'll create our marketplace module here and we'll use memo here all right provider again if it's empty just return we're going to create our sdk give it our signer same url and then we're going to return our and get our marketplace module and give it our marketplace a marketplace contract address okay perfect so that should be all good now next up let's create another use effect hook this will update on the marketplace module and we're just gonna get all the listings and then we're gonna set all of the listings meaning so we can have access to all of this and once that's done all right now let's create a component called nft image so i'm going to wrap this in div and then right underneath it i'm going to pass in my nft image and it should break we will need to create this component and here we're going to we're going to create a new folder this folder is going to be called nft and then inside of here we're going to have a new file it's going to be called nft image.js so this is the one that we're going to create let's just do rfce and we'll do yo with fire emoji and let's just see if that renders so let's go or actually let's import it first image boom from component slash nft slash nft image just like that let's go ahead open this bad boy up click it and you can see that my yo and fire emoji is rendering so that means my nft image is working all we need to do is now actually start working on it and styling it so first off let's just remove everything inside of here for now let's bring that back just for a second and what we're going to do is we're going to pass it the selected nft so let's go back to our nft image where we're passing it and what we're gonna do is we're gonna give it our selected nft and we're gonna say selected nft do we have selected nft here right here yes so we're going to pass the selected nft down into nft image right there now let's go back here now let's go ahead and delete some of this let's go ahead and import style we're going to need that so this is going to be the style that we're going to be using for this we're going to need two icons so let's grab them and this reacting isn't necessary to get cool and now we're going to work on rendering the component out itself all right so let's return let's make our divs here and inside we're going to add a top bar and in the top our content we're going to add this icon so you should be seeing that right there let's go ahead and add a likes counter so we'll say this has 2.3 000 likes which you can see right there and then we will add another div we will say selected nft and we'll grab its image select ted nft so we'll fix that in just a second let's go ahead and fix that right there selected nft i found the bug this is not asset id this is supposed to be nft id nft id just like that and now it'll pull what you're looking for also now you could turn it into that dot find method because i think that's a better method to use in this case so let's convert this to dot find it's not an array anymore so we don't need to do index of zero also let's rename it because it's not an array anymore so let's say selected nft item all right and then let's also call this selected nft item as well and now boom you're good to go so all we're doing is this returns an array of nfts and we're just looking through them and we're seeing if we find zero inside of any any of this and if we do then that's a match then put that match in here that's the selected nft and then show that nft show the image of that nft and all that all right so let's do this i just removed my nft image from here and after removing that let's go ahead and do the following so let's go and build a wrapper put a container inside of it put top content inside of it and put an nft image container and then let's put the nft image so let's go ahead and do that right now now let's go and build a general general details component so i'm gonna put that inside of my nft folder here so let's go new file and we're gonna go general details and let's build this out now and before we build this out let's give it what it requires so let's go here for props and for general details the prop that i'm gonna need to give it is going to be my selected nft kind of like that so let's go ahead and then do the following let's right underneath here add a details container and then inside of this details container we're gonna add our general details nft now it should crash that's fine let's go in general details hit c e do this let's go back let's delete this s and hit enter it should give us the option to auto import let's do our auto import and perfect it's auto importing now let's go into general details let's and let's start building this out now oh and let's not forget let's do selected nft just like that all right so now let's this is what you should have in general details if you have import react that's fine but now let's actually work on this component of general details so let's import everything that we need so get our ai fill heart because we're going to need that icon we're going to need a md refresh icon ri share box line fi more vertical gi share and then for our styling let's we're going to have a wrapper we're going to need an info container we're gonna need an accent an nft title one other info one who is owned by the likes the like icon actions button container we're gonna need action buttons and then action button and then a divider so that's it for styling and now let's actually start rendering this component so we're going to need our wrapper inside of our wrapper we're going to have our info container inside of that we're going to say board api club so boom right there you can see it's starting to show up we are going to put the name right here let's get other info so who is it owned by we need to put that information and let's go for likes let's show our likes right there 2.3 k favorites and then we will put our action buttons container and then we're going to start putting our action buttons in there so there we go you see refresh at the top right now we're going to create a divider now we're going to do a box line let's go ahead and create another action button gi share and let's go find more vertical and there we go boom look at that so now our general item details are completed and they're all showing up nice work so far now we're going to add in our item activity so let's go ahead and create a new component inside of nft and this is going to be called item activity.js we're going to rafce we don't even need that at the top let's go back to general details let's go to nft id actually and right here we're gonna add our item activity okay there we go and let's go ahead and import this as well at the top item activity from components nft item activity and this is going to be some dummy data but it's going to make this app look much better so let's work on this now all right so let's work on our item activity component so let's go ahead and import cg arrows exchange v we're going to need this let's go ahead and import ai outline down and outline up let's use get use date from react and dummy events don't worry we will fill out this file soon we'll create a list of some dummy events this is going to be our styling so i'll full screen this if you want to copy this okay it's going to be our styling and then we're going to need to keep track of toggle and the reason we're going to need to keep track of toggle is if i go to our collections and this is our you know finished app deployed app when i go here and i actually click this toggle watch what happens boom right so that's super nice so this is the toggle that we're actually gonna build so that's what we need to keep track of the toggle and then we're gonna return the following let's have our wrapper and title and then we need to set uh toggle on and off based on click all right we're going to add item activity and then we need to add the arrow as well and then we're going to if the toggle is true then make it show up if it is not toggled then make it point down okay so for example if i go to my deployed app look at it's pointing down and when i click it it points up and this and then means if the toggle is true then show all of this if it's not true then don't show this all right so we're gonna show the toggle and then in the table header we need to have events we need to have price we need to have so kind of like this right event price from to date just like that and then we're going to map through each of the dummy events and we're going to render out each event kind of like this all right so we need to get some dummy events now so we're going to create a folder called static and inside of this folder we will create dummy events and i'm just going to put an array of objects of dummy events so you could put it and whatever you want it to be from to whatever you want and if you want you could even essentially connect these events to the database and pull events from a database again i would leave that to you as a challenge i just need to make sure that when i'm making this app the scope isn't 12 hours long right so that's why i'm putting some dummy data here but i'll leave that to you as a challenge to see if you can figure out how to do that cool so our dummy events are right here and now all we need is we need to import my dummy events so let's go ahead and do that and let's see so import dummy events from static dummy events cool and now what i need to do is work on my event item component so in my components inside of um my nft component we're going to do new folder we're going to say item item activity and inside of there we're going to create a new file and it's going to be called a new component rather and it'll be called event item.js and before i start building this out let's just go to oh this is this is good over here because i'm mapping through and i'm giving events an event all right so let's get to work on this component so we will import a fill cart fill bs fill cart fill so it's an icon we are going to export default event item let's create our style these are going to be all of our stylings and then an event item what i want to do is let's go ahead and destructure event and then for each event item i'm going to do the following we'll create an event event icon give me this cart fill icon which is this guy right there and let's go to our component and see if it's showing anything in the meantime event item is not defined so let's go ahead and save this and let's go back event item let's go ahead and import it so let's go at the top now it's importing it correctly so now event item is defined and there we go our event item is showing up look at that that's that's actually looking pretty freaking clean you guys look at that all right let's go ahead and get our event price we'll give it a flex 2 here and for image i'm just going to give it that ethereum image this is svg file oh and then let's go ahead and give it event price all right we will add a two here and then we will add uh event.date so four months ago and boom all right our event item and our table is done let's click this whoa whoa look at that your table is working guys guys if you think that is freaking cool smash that like button seriously smash that like button break that thing that was freaking awesome and one thing i do want to say right if there's javascript in here that's like getting too advanced for you and you're like man what the hell's going on look what i want you to do is go and just join our course profit with react because that will break down all the javascript all the html all the css all the react that like is maybe jumbling up your brain you're like what is happening here because if i were to break down every single line of code every single javascript line again this thing will turn into 12 15 hour long video right and that's that's not something that's sustainable for you to watch or for me to build and uh videos sometimes can't even go over 20 hours so what i'd recommend is go check out our courses below you know join profit with react or i'll try to link some you know free course as well but i would highly recommend profit the react because it comes with coaching calls as well so you can really sharpen your javascript and react and coding skills because once you do that then building even on the blockchain is not that hard but if you don't do that honestly building on blockchain and those things are going to continually keep being hard so check it out best freaking course on the planet check it out all right let's keep going so there we go our item activity table is made it's doing what we need it to do and now we just want to work on our last function and we're pretty much done so let's go ahead and work on our function component so in my nft i'm going to do new file we'll do purchase.js just like this and let's work on this component now let's go back actually to our nft id and there let's go ahead right under general detail we're actually going to do purchase and it's going to be a self-closing tag like this let's go here and i'm going to say is listed and we're going to go router.query.is listed so pass it like that we're going to say selected nft is going to be selected nft we will go listings will be listings okay and marketplace module is going to be marketplace module all right now it says purchase is not defined that is fine we're going to import that in just a second so let's go ahead and import that now [Music] purchase cool and now we're ready to work on our purchase component let's do it what the hell was that let's do it let's what's up what's going on with me all right let's keep going honestly i think it's just 2 107 am right now and i'm uh starting to lose my brain cells a little bit but you know what i was like just screw it i'm gonna finish this goddamn video i'm gonna just finish it instead of leaving it for multiple days let's just do the whole freaking thing all right and if you're watching this and you're watching this live show me some love all right i'm here grinding for you smash that like button show me some freaking love all right subscribe drop some heat in the comments and share some love with me let's keep going all right so let's start working on our purchase component so i'm going to export default make offer and then we're gonna get use effect and use state i will also get my high tag because i'm gonna need that my wallet let's go ahead and get our toast all right cool and i'm going to create my styling here just like this button button icon button text and then we're going to create our make offer and then in make offer i'm gonna need i mean i could call it purchase as well and just i decided to call it make offer so is listed it's gonna destructure selected nft we're gonna destructure listings and marketplace module and then let's get our selected market nft so which is the nft that we have selected let's have our enable button and track the state of that and if it's not listed or if it listed is false then i just want you to return and end this and track these three please because whenever they get updated i want you to fire this use effect again here is the iife that i want you to call and i want you to basically look for if the market nft matches the selected nft if it does then set that to the selected market nft and let's create another use effect hook and what this will do is again if none of these are set then just end otherwise you're going to set the enable button to true this is kind of your buy now button and then we're going to track selected market nft states and here's our confirm purchase function and on purchase we're gonna say purchase successful we're gonna have a little toaster notification and then here's our buy item function that we're going to create so it's going to take in it's going to take in two arguments listing id and by default the listing id is going to be the selected market nft id and quantity desired is going to be by default one and module by default is going to be marketplace module so all of it has three arguments this function by item has three arguments and these are all the defaults that were passing it and then what we're going to do is we're going to buy we're essentially going to use the third webs buyout direct listing method okay and that allows you to easily buy an nft and then we're going to do confirm purchase which is our toaster which is our react hot toast function which is going to pop up a little notification saying hey great work let's go ahead and now start building and rendering this out so here's what this is going to look like okay let's go ahead and show our toaster component all right and then inside if the listing is true then i want you to render the following okay actually let's go ahead and see what's the error here let's refresh can't resolve purchase let's take a look uh in our nft id where we put purchase it's not asset it's actually nft here so now it should resolve at the very least but let's hope yes it's being resolved perfect now it's going to start showing our enable button and buy now button and list now button and things like that so let's go back and if the listing is true then basically render out an enable button that allows you to buy the nft so if the enable button is there and and i've clicked it meaning like i've just clicked the buy now button then fire off the buy item method and we're going to render out the buy now button and let's go ahead and also write make offer and if this is not the case then i want you to do the following so look at that our buy now button is showing up and our make offer is showing up as well let's go ahead and list our item and that should be it so what's this saying if listed is true then render this if it's not true then render this so let's go to one that's not listed so let's go collections and for example this one is not listed here let's click it and you can see it says list item now if i go back to collections and we go to this one right over here it will say buy now or make offer now let's actually see if we can buy this guys this is the moment of truth this is what we have been building up to if this works this is gonna be mind-blowing it's gonna be crazy so if you're getting hyped yo drop some love get hyped let's see if this actually works what the heck this is crazy so i'm gonna i'm just gonna give it a try let's hit by now and let's see what happens buy now oh man okay cool so we have uh missing argument past the contract count is equal to three accepted count four let's see what's happening here all right so we're at the finishing touch and we're about to make the buy now button work now it was crazy it was working and then all of a sudden started bugging out for a while and right now it's almost 5 a.m i was debunking this for the last three to four hours with my team and also just debugging myself and i'm like i'm not gonna go to sleep until i freaking solved this right so i got it done we got it done and here's what it is so one of the things you have to do is upgrade all of your packages so that's one of the errors that i was running into so basically what you want to do is i'll zoom in here so you can see this command but basically what you want to do is yarn upgrade like this i'm going to do lates dash dash lates like that this command takes a while to run it takes a while so just let that run it's not frozen it just takes a long time and it'll upgrade all of your packages so that's the one the next thing we want to do is everywhere we have this ranki or infura or alchemy link just delete that so let's delete that from here let's delete that from here and then the other place that has it is in the collection id so those are the only two files that has those links so let's go into collection id let's delete this and let's delete this all right there we go now let's go to our app let's go to collections and let's see what's listed on here on third web so i have this blue one listed and this one listed so those are the only two ones that should be showing prices right now so let's see yep those are the two those are the only two ones that are showing prices for me right now so let's go to this blue one and i'm going to connect with a different wallet so what i'm doing here is this is my wallet i am i actually probably don't have enough eath to buy this so let's transfer some ethia so i'm gonna go to my secondary wallet okay this is some random wallet i have i'm going to copy the address so go here and let's send eth to this address and we will send 0.38 [Music] 0.48 confirm so i'm just sending some eth over to my other account to buy because this is an admin account so this is not the account you want to buy with you want to purchase it with you want to act like you're just a person who's going through the store and buying stuff right store owner is not going to buy stuff so let's go to this one now now i have enough eath to purchase so and i've connected my account with this make sure you disconnect with your main one your admin one and if you don't know how to create a new account just hit create account and it literally makes a new account for you connect it to the rinkyb test network log in with it and you should be good to go if i go to connected sites i have local host 3000 here so now this is the moment of truth let's see if this buy now button works if it works we're good if it doesn't we're in trouble all right here we go if it works at the bottom left you're going to see the notification let's actually make our notification better so let's go to our toast where's our where's your toast nft id in purchase i think i have my toast yeah let's go instead of bottom left we'll go [Music] position top center i think that's what it is right top center let's look top center top center huge shout out to third web by the way it's three or f it's like four a.m four am almost in raza his username is let's actually see raza codes python huge shout out to raza codes python he came in actually from third web to help me out so i mean this is amazing their customer support and their community is freaking awesome so that's massive props like guys go join their discord all right we'll link it below go join their discord and be a part of their community because that's pretty ridiculous so all right in here i got i have everything good to go i made it top center all right now let's see moment of truth let's hit by now and let's watch what happens and at the top center we should see purchase successful so let's go buy now fingers crossed hopefully my metamask wallet comes up to make the purchase we'll see boom look at that yo 0.1 eth let's see let's wait for it now it's charging me gas fees as well let's hit it let's hit it please work please work please work come on i spent my whole night i will sleep so peacefully please work let's give it a few more seconds guys blockchain blockchain likes to take its time making transactions takes its sweet time boom look at that it said purchase successful joe let's freaking go you guys that's what i'm talking about guys all right if you thought that that was freaking awesome guys come on do me a favor smash that like button break that like button let's get this video out to as many people as possible and just hype it up in the comments below hype it up in the live chat if you're watching it live man i am beyond hype right now that was awesome and let's make sure that that purchase has happened right so let's go and i'll refresh this i'll actually let's go to collections and in collections let's go and you see the blue one is not listed anymore look at that right it's it's been purchased so it's not listed anymore and now let's go inside of it look it just says list item it does not say buy now okay our toggle here is working as well does not say by now if i go to third web and we refresh here let's watch what happens so it takes a second to load it on third web but if you keep waiting boom look at that the blue one is gone it's not listed on the market anymore that means somebody actually owns it so that's exactly the experience we're looking for right and if i go to my if i look at my wallet i can see that i bought something right and i can even view it on the block explorer if i wanted to confirm that transaction you could actually check it out on rinkybee.etherscan and you can see that it was a success okay and you can see the contract from and you know what you bought what collection it was all of it so guys so freaking cool man so freaking cool all right so this app is done at this point all we need to do is we need to deploy this app so let's go ahead and let's start working on deploying this app so make sure that you have an account on versailles.com all right and let's go here you want to have a account on here and what we want to do so just make sure you're signed up on here that's kind of all you need to do now inside of my project i'm actually going to type in versel and it's automatically going to pop up these things let's just follow these command lines here so it says setup and deploy and we will say yes so i just hit y which scope do you want i'll just say clever programmer for this i'll zoom out because i often forget to zoom out and that causes problems link to an existing project i'm going to hit enter it's going to be default no openc blockchain clone yes that's the project's name all the defaults are pretty smart they're pretty good so i just kept hitting enter in which director is your code located this directory right here and let's see what happens so now it's going to work on uploading this project and pushing it out and kind of deploying it and what we want to do is in our sanity we want to make sure that we give it the course origin where our course has a versaille on there so once i get the actual link to the app i'll put that one it says our project is deployed so i'm gonna command click it and we're live it seems like it's deployed what the heck this is awesome so all we need to do though is grab that url wherever we deployed this app just now so let's grab this let's go to our sanity studio [Music] or not not here let's go here and in api we want to add course origin add this hit allow credentials and hit save boom there we go it's perfect now let's go to our deployed app let's connect wallet and let's go ahead and connect with this wallet and let's see it should say something like maybe welcome back clever quasi or something there we go welcome back clever quasi beautiful that's exactly what we wanted it pulled our username from the sanity database everything looks beautiful beautiful the nav bar looks beautiful right look at that we have the on hover effects and everything let's hit collections so we can come to our main page board ape yacht club boom look at that all the projects are here and any one of them that are listed are showing up as listed yo that is beautiful and now let's see again the moment of truth on the deployed version can we actually buy this nft we were able to list it now let's see if we can buy it right so wallet perfect i'm on uh which wallet let's see which one i'm connected with i'm connected with this i'm going to disconnect with this for now so we're going to disconnect and i'm going to go to this one and i will connect to current site and i'll purchase this one with that so let's see i just hit buy now so my meta mask should actually pop up soon let's see let's refresh beautiful let's hit by now alright so there we go i just had to go to the collections come back and it looks like it's pulling it up here we go all right let me open up my meta mask and this is the moment of truth we're on the deployed version is it actually going to be able to make a purchase let's see let's hit confirm and it's going through it's pending it says right there and now we just wait pending see pending pending pending oh man please work whoa look at that it was it just said successful and it just says successful buy right there guys this is absolutely beautiful it's deployed so you guys can actually interact with this app as well you can go online and check it out but if we refresh on our marketplace now if we wait long enough this actually should be unlisted as well and should stop showing up on third web boom this is gonna go away soon there you go it's gone not showing up anymore right it just takes a second but there we go it's gone so guys we have done an absolutely amazing job right we have used third web for the blockchain component we have built this amazing beautiful front end with nexjs you use tailwind css to style this whole freaking thing you have you're pulling data from sanity right this data is actually coming from sanity floor owners items all of this is dynamic this is also coming dynamically from sanity the database all of these nfts here are actually being pulled are being directly retrieved right from the blockchain itself using third web and then you're able to list your nfts and you were able to buy nfts right so in terms of functionalities wow what an absolutely amazing project we've built together and really amazing awesome things that we're using in this project right like use memo and we're using like used memo made this app so fast because if you do this without use memo this will be so freaking slow it'll take forever if you look at what use memo does use memo is super cool it will cache the calls so the more times you make the calls the faster it gets right so for example i just clicked on that one and i go back it'll be a little bit slower then it'll just keep getting faster and faster and especially when i click on the same exact guy it'll keep getting faster and faster like that see that boom boom boom boom that's the power of that so there is just so much cool stuff that i feel like we've gotten done and accomplished in this and then just so little time it's absolutely unbelievable so guys at this point what i want to tell you is look if you're here and you've enjoyed this first of all make that smash button blue right smash the like button let's get this video out the other things i want to say is if you were struggling with this or you need help with this look join our community at clever programmer it's completely free click it join it become part of our discord become part of our email newsletter where we'll be able to help you on a weekly basis if we have online trainings we'll let you know if we have a free course we can give you right in the description below i'll also link a free course that you guys can actually join and go through if you want to join profit with react and get a lot more training hands-on technical it's going to be in the description below if you need more help and you want to get in and meet us physically in person in l.a i'm personally hosting the workshops in new york city we have people hosting the workshops and then we have multiple other cities where we have clever programmer people hosting workshops so you can come to new york city and la and get help with how do you build this amazing project and work with me in person and work with you know our team members in person and we'll help you build web 3 projects web 2 projects full stack blockchain whatever it is we'll help you with it and we just have you know such an amazing community and it's completely free so that's also going to be in the descriptions below and it's just at cleverprogrammer.commeetups all right once you go there you get access to all of our upcoming meetups and you can just join them for free there's no cost to you i would love to see you there and we are running multiple per month our goal is to be able to run them once a week but at least you know two to three times a month we're running them as of now so take advantage of that take massive advantage of that because i don't know how long i'm going to be running them i don't know when i'm going to stop doing that and i don't i don't know how long i'm going to be running it for free if you're watching this video right now it might might even be gone might not even be a thing but if you want to jump on it right away i would say do it so that's it those are all the things i wanted to keep you abreast of with that said i love your beautiful face this was so freaking cool thank you so much for building it with me and as always i'll see you in the next video

Channel: Clever Programmer

Views: 302,226

Keywords: cleverprogrammer, programming, developer, javascript, web development, coding, programmer, software developer, software development, react js, tutorial

Id: x3eRXeMB-4k

Length: 142min 31sec (8551 seconds)

Published: Sat Jan 29 2022