Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript – 32-Hour Course - Ep232

now is trailblazing womenwe can relistthat nft so if we come back let's goback to the one who just bought that nftif we know the address and the token IDof the nft and we own it we can go aheadand relist it so we can place theaddress in here with the token ID giveit some sort of price we'll submit we'llapprove giving the nft marketplaceaccess to our nft to our little doggyand then we'll go ahead and actuallysend the transaction to actually listthe nft on a Marketplace then we get nftlisted successfully after we move someblocks in the back end we can go back tothe front end and we now seeit's owned by us instead of the originalowner right and it's set for 10 e hereand then we can of course switch back toa different user and we could have themactuallybuy all right so now that we have thecontracts we know what this looks likeon the contract side so now let's figureout how to do this on the front end sideso let's jump into our code editor andbegin if we're on our hard hat Mi nftMarketplace free code Camp folder that'sgreat but we're going to create anotherfolder we're going to CD down adirectory and we're going to make a newdirectory and we're going to call itnextjs nft marketplace dfcc now you cando nextjs Marketplace DM Morales FCC ifyou want again we're starting withMorales CD nextjs nft Marketplace FCC sonow that we have this folder we'll docode dot we'll open up a new vs code oryou can do file open folder and openthis new folder and we can begin workingin this new folder in here now thatwe're in our new project we're in ournew folder we're going to do exactlywhat we've done before yarn create nextappperiod okay we've done our setup herenow I don't like eslint so once againI'm just going to go ahead and deletethat and what we're going to add ininstead is our prettier stuff soprettier ignore pretti RC again somepeople may strongly disagree with me onthat but to each their own right this iswhat I like to do so this is what whatI'm going to do now we have aminimalistic react project right if werun yarn Dev we open up our UI on thatsite copy this or command click it tadawelcome to nextjs yay we've got a nextjsapplication as we know we go to Pages wego to index.js let's delete everythinginhere we'll leave the stuff in head if itcomes with stuff in head we'll writeHigh exclamation mark we'll save we'llcome back and now we see hi and I'llzoom in a whole bunch boom so now wehave some minimalistic react someminimalistic next chz now I know wealready started the the project herelet's jump into the read me that's givento us and let's talk about how we wantto do this what we want this to actuallylook like well we're going to want tomake a homepage and in this homepagewe'll say we'll have it show recentlylisted nfts homepage will show recentlylisted nfts then we'll say if you ownthe nft you can update the listing ifnot you can buy the listing so we'llhave that and then we'll have a sellpage and in this page you can list yournft on the marketplace these are goingto be our two main Pages we're going tohave a homepage and a sell page nowwe're going to have a ton of componentsbut we're really only going to have twomain pages so if we go back over topages right right now we have our app.jswhich shows our app which is cool whicheverything runs through and then we haveour homepage let's also create right nowour cell page or cell nf. JS and then inhere we'll just make this really minimalfact we can copy most of what's in herewe can actually just copy paste thiswhole thing paste it in here and insteadof high we'llsay sell page we'll save that now if wego to our Local Host do uh SL cell nftoh whoops we got to run run the frontend again with yarn Dev sorry we'll runyarn Dev again now we refresh and now wecan see cell page so cell page is at/cell page and then home is just going tobe high Okay cool so we have our twopages which one should we work on firstwell let's work on our homepage so we'regoing to be in our index.js I'm going tokeep this front end bit running we'regoing to hide it oops that's theopposite of hiding it push it down we'regoing to hide it like that and let's goahead and let's start building this sowe see in our index s we have some headstuff here I'm going to change this tonftMarketplace description is going to bejust nftMarketplace like so fabicon looks greatnow if we do a little refresh now itsays nft Marketplace up at the top herewhich is good that's what we want wellin our index page what's one of thefirst things that we're always going toneed to do you guessed it we're going toneed a little connect button right we'regoing to need our users to be able toconnect to to web 3 to connect to ablockchain so same as we've done beforelet's go ahead let's create a componentsfolder and we'll create a headercomponentcomponents folder and we'll create newfile header. JS now remember since we'vedone this before with our front-endlottery code we can always refer back tothe lottery code as well when we'rebuilding this okay and of course we haveall of the code for this on the GitHubrepo so uh you can use that too what I'mnot going to have you all do is lasttime we did that manual header thingright where we had to do all the localstorage and do all that crazy stuffwe're not going to do that this timewe're going to just do it the easy waywe're going to just use the web 3 UI kitso to use this connect button we'regoing to do yarn add and we're not goingto do d-d because this connect button isa necessary component for the

(Editor: javascript)