Build a Blockchain Dating DApp: Tinder Clone with Next.js and Solidity

[00:00:00]in this video you'll build tinder blockchain web 3.0 app using next.js we'll use metamask to wrap the entire app up in authentication we'll use morales to authenticate the users who actually sign in we'll be using morales because it's a web3 development platform so especially if you're a web 2 developer it makes it really easy to interface with web3 and blockchain without writing a single line of solidity then we'll create a profile for each user using sanity io as our backend oh and here's something cool that we're going to be doing when two users match we'll mint an nft for them using oralis and solidity we'll use the so-called gasless minting method to mint our nfts that way our users don't pay a ridiculously high gas fee for minting nfts we'll use open zeppelin to make sure our nfts are compliant with the erc721 method last but not least you'll be able to view your very own nfts on openc and by the way before we start here's something you don't have to pay gas fees for the like button smash that oh my god a few moments later well here smash the like button turn it blue and we'll get the video started one eternity later right before we get started and start coding i just want to let you know that we're doing a collab with buildspace which is one of the best website education platforms in the world and you guys are going to be getting nft that proves you completed this project and it's going to be in collab with bill space and clever programmer it's going to look sick buildspace also has an incredible community of web3 developers who you can learn together with in their discord and they're very active last but not least buildspace is also helping new web 3d developers like yourself get matched up with top tier companies like adidas or alchemy for premium high contracts and i'm talking about ten to twenty thousand dollars a month contracts and their vision is amazing i even met their ceo barza and he's just an incredible amazing human being so i'm really excited about this collab and the best part for you guys it's completely free all you have to do is just go down below click the link in the description it's going to take you to a landing page and it's going to ask you to connect your wallet and once you connect your wallet you're good to go and then when you do this build and you complete it that wallet will be able to verify you did it you'll get your own nft and you'll get the entire community and everything that goes with it okay so again it's completely free go ahead sign up for that right now and with that said let's just jump right into the video so here we have the tinder app i'm gonna go ahead and sign in with metamask so i'm gonna connect my metamask make sure it's there let's go ahead and sign in and boom confirm boom i'm in now i can see my matches i can swipe right i can swipe left whichever way i want now i can go into my database on sanity and you can see for rafikaze here the three likes that i have those are all the three people that i swipe right on so now they show up we can also go and see the other people and see which likes do they have so now let's say i sign in with another account so i sign in with danielle's wallet let's go and see what she has so let's say she swipes left on vicky she swipes right on kazi now boom we go back to danielle and in danielle's likes you can actually see rafikaze just showed up now i can go back to rafikaze and i can see danielle just showed up under office kazi's likes because it's a match now okay so it's a match on both ends now that we have a match to happen boom look at that it just minted an nft based on that specific match and that is actually called rafikaze and danielle smith right it's happened because of the match it tells you when it was created the standard is erc 721 just like i said we're using open zeppelin to do that and i can go back and forth between each of the accounts i'll copy this account paste this address and i'll go to rafikaze on openc and boom you can see that for rafikaze it has that nft as well how freaking cool is that both of those accounts get a matching nft if you're excited about building this project i'm excited without any further ado your instructor for this is going to be once again lance so i'm gonna send it over to lance make sure this video gets over a thousand likes so he can keep his job because i told him any of these videos gets under a thousand likes he's fired so make sure you smash that like button i'm gonna send over lance lance take it over and start coding this bad boy up what is up guys welcome back to another video lance here again and i'll be walking you guys through the tinder clone blockchain so let's get started so the first thing we're going to do is hop over to your terminal mine's right here and let's get right into it by making a folder so hop over to your terminal let's create our project folder so go ahead and type this command what this will do is create a folder called tinder clone blockchain we can go ahead and cd into that folder and in here we want to be creating our next js app so to do that we can type in this command and you're going to write npx create next app at latest and don't forget to put a space dot because the space dot what this will do is create the next.js app and put all the files inside this folder that we just created okay so go ahead and hit enter and let all of that download cool now that's done hop over to your vs code and you can actually open your code open that folder so what i'm going to do is open folder and if i click select folder you will see all the project files of our next area that has happened here the next thing we're going to need to do is create a couple folders so since you're here make sure you create a studio folder in the studio folder this is where we're going to be setting up our database and of course we're going to be using sanity okay and then next you want to do is create another folder make sure it's at the root of your project this one is going to be called smart contract in this video we're actually going to be making a smart contract in solidity and deploying that smart contract to the blockchain so that's what we're going to be setting up in this smart contract folder okay now that we have that done we can actually open our terminal within our vs code and let's go ahead and set up sanity with our database so what we're going to do is if you look at this the path we can go into our studio folder so now i'm in my studio folder and like i said let's set up sanity here so in order to set up sanity what we can do is open up your browser and we can type sanity.io cleverprogrammer and once you're there you're gonna all the instructions that you need are gonna be right here if you don't have the client installed go ahead and type in this command into the terminal and then afterwards go ahead and type in this command here to initialize sanity in the studio all right so if you look this is the command right here and by doing this and adding our coupon code you're gonna get all these bonus stuff right here provided to you by sandy we're gonna get more api requests and overall just a better experience with the free plan so definitely take advantage of this and go ahead and hit enter awesome so we're gonna make a project name keep it the same name as our folder tinder clone blockchain you can hit yes for the default data set make sure it's the same path and what we want from here is a clean project with no predefined schemas okay it's linking dependencies awesome so if you look in the studio file all the sanity stuff is set up and all you need to do is go back to your browser and you can go ahead and log in to your account and you're gonna see that my project is now there notice how it says the boosted free plan that's how it knows it comes with the extra stuff all right so you can click into it and see everything you need like the project id which we're gonna need for later once that's done we can go ahead and click in our terminal and type in yarndev okay so once sanity is installed we can see the out of the studio into the main folder and then we can type in yarn okay and if you look local 3000 is going to be our starter next js app right here amazing let's go ahead and set up tailwind now so this is our next js app now let's go ahead and set up tailwind so what i'm going to do if you want to set up tailwind what you need to do is type in tailwind next js because tailman actually provided some really nice documentation and how to tell when css with your next app so we're going to be using this as a reference for the following steps but i can also walk you guys through it so the first thing you want to do is to copy this npm okay and for me i'm using yarn so instead of npm style what i'm going to say is yarn add d and install these three things tailwind post css and auto prefixer so i'm gonna get that command ready and you can go ahead and hit enter now all this should go in the root of your folder not the studio not the smart contract folder the tinder chrome blockchain folder awesome once that's done i want to do the next command which is just this npx tailwind css init with this will just initialize tailwind to our project and also to create these two files tailwind.config.js and post css.config.js so what you need to do is go ahead and find that tailwind.config and you're going to need to add these two lines into your content array at module exports so what i'm going to do is press enter here paste and there you go it looks good so that's in there the last thing we need to do is put in these three directives so you can copy this this one's gonna go in the global.css notice how there's a bunch of starter files here we can go ahead and take a rid of that and put the directives on top and hit save once that's done let's reset our terminal and type in yarn dev again and now our project is installed with tailwind css so now that tailwind is set up let's go ahead and set up our smart contract side of things so in order to do that let's open up our terminal again and let's make sure let's make sure we're inside our smart contract folder so we're cd into it and then when you're in your smart contract folder we're gonna be using hard hat okay and to set up hardhat i'm just gonna go into my terminal and type in npx hardhat okay and what you want to do is create a basic sample project enter add a git ignore and just say sure awesome so if you're unfamiliar with hard hat all it is is an ethereum development environment and we use this to compile the contracts that we create to then deploy them to the network of our choice next you want to do is in this same folder we want to do yarn add at open blend contracts okay so type in this command into your terminal and hit enter what this will do is install open zeppelin and you know if you're not sure what open zeppelin is when you create a smart contract we need a standard to follow so the standard that we're gonna be following it's gonna be called erc721 and that is the standard for non-fungible tokens a term that you guys might have heard is erc20 which works with fungible tokens or whenever real money is involved so make sure you add open zeppelin and let's go ahead and set up the smart contracts so now if you look with hard hat initialized if you look into the folders let's make this bigger with hardhat initialize you're going to see in the smart contract folder a couple things notice the contracts the scripts everything else so if you look at the contracts folder you're greeted with this boilerplate code all right and there's also some extensions notice how it's all grayed out and all just one color what you need to do if you see this is go to extensions and type in solidity all right you're gonna see something by juan blanco go ahead and install that all this is an extension to provide solidity support for vs code and solidity is what we use to type smart contracts for ethereum okay so once it's installed if i go back to the greeter.sol notice how we have solidity support now awesome so as great as this is we don't need it we're gonna be making our own smart contract our own smart contract today so i'm just going to make a new solidity file and i must call it tinder erc7 and make sure you add the dot soul extension to make sure it's a solidity file awesome so once that's done you always want to use a license when you're making a solidity contract so what you need to do is just type in this right here awesome next thing you want to do is type in the version of solidity that you're using i'm going to say pragma solidity and you can go with this if you're watching this video this is one of the current versions of you can use which just signifies hey i want to tell my computer that i want a version of solidity that is this and higher okay cool next thing we need to do is remember how we installed open zeppelin we're going to add the import statements to import our standardized contract which again is erc 721 which works with non-funchable tokens okay next thing we have to do is let's set up our contract but to start creating our smart contract i want to say contract and then the name of my contract and then you can say is erc 721 url storage okay there we go awesome so if this doesn't make any sense to you if you guys are familiar with classes at all you can think of this as class tinder extends this all right to give you a direct example it's saying class ferrari extends car which basically means that this ferrari is going to be built off a object so in this case our contract is going to be built on top of the erc720 standard okay and now let's start coding up our contract the first thing we're going to do is create a variable so to create a variable in solidity you're going to need to type in and declare the type which i'm going to say is you n256 and i'll call it tinder token id if creating smart contracts is interesting to you be on the lookout for our future tutorials coming out real soon but for today i'm going to be teaching you guys a little bit about creating smart contracts so after you make that number variable we're going to do is set up this constructor okay that's our construction next thing we're going to do is set up our function all right so once the constructor is done let's go ahead and set up our actual function of our smart contract and to create a function in solidity it's going to be similar to what you've seen with javascript you can just say function mint nft the name of the function and the only difference that you're going to notice is the way we type in our parameters to create a function utility it's going to be similar to javascript in the sense that you say function and then the function name the difference is this is that you have to declare the type of the parameter so this address here is the type of this parameter of user one is there's a user two and then we have the token uri that we're also gonna pass in another thing that you're gonna see is that we label public on our functions so awesome once that's done our function is set up let's go ahead and type in the instructions of our function which is just going to be this piece of code right here all right so just to break down what's going on this underscore mint is a method that's actually just going to mint an nft right so just to talk about what this whole thing is supposed to do is we're going to be making the tinder clone let's say we have bob and she matches with someone named just if bob and jessica both like each other what we're going to do is actually create an nft representing that they matched and this nft representing the match will go to both of their wallet addresses which is super cool so this function is going to mint those nft for those two users so this first section over here is underscore mint which actually is the minting of the nfts to this user that we passed in so notice how it says user one and we're going to give that nft an id all right and this is just the variable that we set up earlier which let's say it starts at zero i'm minting nft for bob and with the token id of zero cool the next direct line is the set the token uri you can look at the token uri as a json that has the information of the nft so this is where the this token ui is where the information will go of the image and let's say the description which will you'll see on openc so what this method does set token uri is going to grab an nft with this token id which we know was zero that we set up and it's gonna pass in the information like the description and the image of it afterwards we're gonna increment the token id because the next time i meant i don't want to give this the same idea of zero we already have one so this will ensure that it's gonna be the next id awesome over here it's gonna be the same exact thing so if you understood what i just said let's go over it it's the mint function which is going to mint an nft to this user passing in the token id which now is going to be one by the way and then we're going to set the token uri which is going to find an nft with that id of one and pass in token's information like the image and description and of course increment it awesome i'm super excited because this is creating a smart contract that we're actually going to deploy to the network on the blockchain so again if you're excited about this be on the show on the lookout for more tutorials by clever programmer coming out soon cool so once you have this code you successfully created our smart contract for this project the next thing you're going to need to do is hop over to scripts and we're going to create a deploy script to actually deploy this contract to the blockchain awesome so let's delete this sample script which we're not going to really need and in that scripts folder let's create a new file and i'm going to call it deploy.js makes sense okay now in the deploy.js we want to make sure we're getting ethers from hardhat which we set up and what i want to do is set up a function so what i'm going to do is i'm going to call this function main and this main function is going to be asynchronous and we're going to set up a couple things here okay cool so we're going to set up two variables here the first one is going to be called tinder factory all this is going to do is get the smart contract we created with this name and it should be the same name of the name of your contract so double check that once we get that contract the next thing we want to do is to take that contract and deploy it okay and when we deploy that we're going to store it in this variable right here all right the next thing i want to do is let's console log the tinder contact address that we get back and if you save that address that it showed that is going to be the address of where the contract lives on the blockchain which you might want to save for the future so after that's done let's actually run our main function and we can do that by typing this if our request to deploy is successful then we're going to exit if not we'll catch the error and display the console log with the error and then exit with one awesome and that's the deploy.js okay so once you set up your script the next thing you want to do is set up alchemy so if you're unfamiliar with alchemy is it essentially gives us developers the tools to communicate with the blockchain itself you can think of it as the api that's going to help us make requests to do stuff on the blockchain okay so open up your browser and let's go ahead and set up alchemy so head over to alchemy.com we can go ahead and log in and what we can do is click this create app give it the same name and you want to make sure you're doing ethereum and what we're going to be working on is not the main net is we're going to be using rinkaby which is just the test network for ethereum the reason why we're using rinkeby is because if we deploy to the main net we're going to have to use real ethereum to pay for the gas fees of deploying our contract so again we don't have as much to do that we're going to be using the test net rinkaby because i'll show you guys how to get fake ethereum that you can use and play with so make sure the chain is ethereum the network is ranking and go ahead and click create once that's done you can click on your tinder clone blockchain project click view key and what we're going to need to save is this http key go ahead and click copy and in your smart contract folder at the root of the smart control folder we're going to make a dot env okay and in that emv file we're going to just type this in and say alchemy api url equals and it's going to be the key that you type and another thing that we're going to show you guys another thing that we need to keep in our environment variables is going to be this rinkaby private key right which is going to be the private key of your wallet that you're going to use to drain and pay for the deployment of the smart contract it'll make more sense in a bit but let's worry about the alchemy api url which i said is going to be this api key so go ahead and copy that over okay go ahead and click save and let's talk about how to get the private key of your wallet address okay so i'm just gonna make this bigger and what we're gonna do is if you guys aren't familiar we're gonna be using metamask as our wallet so what you need to do is make sure you have the metamask chrome extension so i'm gonna set it up here which i don't have it set up on this browser so i'll set it up with you guys oops so you're going to type in metamask extension for chrome and if you click this you can see add to chrome right here okay awesome there's our meta mask it has been added to chrome now we can go ahead and get started and we can just create a wallet awesome let's put in a password and this is just a burner wallet for me so i'm just gonna put in whatever okay this is how to secure your wallet whenever you make a wallet there's gonna be a secret recovery phase that is like 12 words don't share that to anybody because that is the master key to your wallet and funds so these are my secret words for this wallet i go can go ahead and copy this and save this it's okay if you guys know this as i am never going to use this wallet awesome so i'm going to next and again we just have to put in those words so mine was this and again i'm just going to skip up the setup this is how you set up a meta mask okay once that's done you set you successfully set up your metamask awesome and now you can access out and if you just look at your extensions go ahead and pin this so it's just easily available and if you click your meta mask this is it this is my account as you can see i have zero ethereum and that's because that's how much ethereum i have on the main net and we need to be on the rinkeby testnet so what you guys need to do to get on the rinkyb testnet is to go ahead and go to settings go to advanced click on show test networks all right turns this on and then when you click on this drop down menu you should be able to click rinkeby and there we go awesome so now you might be wondering all right lance if you have to use test ethereum to deploy your contract to pay for the gas fees how do i get ethereum from my wallet i got you okay what you need to do is copy this and type it in the browser this is called a faucet and what this will do is send you 0.1 test ethereum that we can use okay so it says please connect your wallet we can do that now that we set it up click connect this is my wallet address account one next connect and there you go it's going to automatically populate your wallet address here make sure the network says ethereum wrinkby make sure you click point one test ethereum we don't need the 10 less 10 test link click on that robot you have to do the not annoying captcha at all let's click send request then it's gonna stay waiting for confirmation and once that's done we should see that we have the tested theory okay request complete now we can see if we have ethereum if i click my wallet look at that point one ethereum point eth so 0.1 each should be enough to deploy our contract but just to be on the safe side i'm going to repeat this process six to seven times i'll have that 0.6 ethereum which is nice so now to do the part that we originally wanted to do which is to get our private key of this wallet so that we can use it we can click account details and click export private key type in the mass password of this account and there you go this is our private key make sure you don't share this with anybody hit copy done and bring it over to your env file paste it so in your emp file awesome okay next thing you want to do is in your terminal let's actually run hard hat and deploy our smart contract by typing this command awesome so what i wrote is npx hard hat run scripts slash deploy.js network ring could be all that's saying is basically use hard hat to run our deploy.js and deploy it to the rinkeby test network like i mentioned before okay and before you actually run that command we also need to set up our hard hat config so to do that we can clean this up a bit by erasing all of this code lines three to eight and then from here we need to require this all right so this you can keep next we need to require this on if you don't have this don tev installed go ahead and install it to terminal and then after that let's actually import our keys our environment variables like this so all we did so far was use this to get access to our env files then we're actually getting our env variables over here and storing it like this so and the next thing you want to do is have this export okay so in this export make sure it's solidity 0.84 just to double check it's the latest version of the time of this recording and in the networks key here set it to rink b and the url will be the alchemy one and the account will be the private key that we set up so essentially this private key whoever you set it up as is going to be paying for any of the gas fees for our app and as well as deploying our contract so go ahead and hit save now that it's set up then we can run this npx hard hat command let's hit run okay let's double check this error in error invalid url okay and just double check that it's the right url it's the http one from alchemy i hit save back to hardhat and let's try to run that again okay there we go nice and we got our tinder contract address so go ahead and save this so you remember where our contract is located on the blockchain and what that is how we set up the smart contract folder now let's get to coding up the front end all right everybody so once the smart contract side of things is set up we can go ahead and start working on our next js app so in this section make sure your terminal is running so that you can see your next js app and let's hop over to this pages folder and click on index.js and what could do is actually highlight everything from lines 7 to lines 67 all right so all it's left with it should just be this return and for now we can actually just clean out the top of okay cool so what we do want to put here is our divs that we're going to set up all right so you notice there's error because there's nothing here but what we're going to do is just this okay so i'm going to make a div and i'm going to give it the class name of style dot oops style dot wrapper all right if you guys know tailbone and all this is how we use tailwind css we're going to have predefined class names that have styling attached to the class name if you use bootstrap at all it's going to be very similar so at the moment we don't have style wrapper setup but i'm just setting it up now and then we're going to create the styling for it later okay so this is my wrapper it's going to have the whole component in here and within that wrapper we'll have the header component okay this is going to be header and like i said before we don't have a header component just yet so we can go ahead and comment this out okay the next thing you need to do is right under this header component there's actually another div that we need this one is going to have a class name style dot cards contain this container div is going to have our card component as well that we're going to make okay and like i said before these components don't exist i'm just setting that up so we can comment that out there we go that's going to be our index so the next main thing we're going to need to do is make our style object like i said before this class name will take the styling of the style object that i set up which is going to be this there's going to be a tailwind cheat sheet that you can look up and it's going to be obvious what it does here so this is the css for it the wrapper and cards container and when i say style.wrapper this div will take that css and that's what makes tailwind awesome because you can scale and code up css a lot easier and we should see nothing here awesome so now let's actually make our components the first one i'm going to make is our header component so let's go ahead and make that folder and make sure it is in the root let's say components in that components folder let's go ahead and make a header.js okay and in the header.js i'm going to go ahead and save this command there we go we have our header component okay and from here i'm going to set up the dibs that go along with it feel free to pause the video if you need to get the divs okay so i just finished typing up the menu items so just to take a quick break and talk about what we did i made a div class name which is going to be the wrapper of this whole header component then we have a div with main which is going to have the image of the logo the fire the nice fire logo of tinder and we have the tinder text which is going to say just the name of the company which of course is tinder and then on the left menu we have what you'll see at the top products learn safety support download if you guys hop over to tinder.com this is what you would see in the menu so that's the left menu on the right we'll have english and the login button so i'm gonna head and work on that next it's gonna be last name and like i said this will be the right menu and in the right menu there's just this one text that just says english and basically what you'll see on the right menu is the login button but if the user is logged in we should see that the user's account information on the right instead of the login button so to do that we're going to set up something called conditional rendering so i'm just going to add that in right now and like i said feel free to pause the video if you need to stop and take a look okay and just to clean this up a bit let's take a look at what i wrote like i said we have the english here which is just and it's usually in all caps and to the right of the english on the right menu we'll see the login button but if we are logged in we should see all the stuff right here and we should see the current accounts information at the moment we don't have all that set up yet so we can comment this out and we're gonna bring it back when i do set up morales later on but for now we just need the login button and just a note for later the user logged in the button is swapped for current account okay awesome so we'll save that and then i'm just going to move my browser and now let's actually import this component to our index.js so to do that we can actually bring this back out and at the top here we can say this import header from components header okay and we get the styles not defined here because if you remember in our header js we set up a bunch of styles but we never made that so let's go ahead and type up those styles so all you need to do that is come to the top of the component and say cons style here you can use tailwind to set up the styling for each of these class names like the wrapper the main the text right so i'm just going to set it up one by one plus we have the wrapper this is the css we're going to add some flex properties to this and for the main we're going to have an item center and take gap 4. tinder text just going to be semi-bold and make sure it has the cursor pointer over it for the left menu we're just going to have a gap of 8 pixels and the text is large and then for the menu items we're going to have a cursor pointer and when we hover it the text should be red and here is the duration of that hover awesome okay next up is the right menu which is going to be similar to left on you except it's going to have a 3 gap and an item center and the last thing we'll need for now is the auth button which is the logon button itself okay and this one is going to be background white and the text is going to be red and when you hover over it it's going to change so if i save taking a look at the browser it's going to have a good idea there we go there is our tinder awesome so there it is next thing we're going to do is we need to add the logo onto here so what we need to do that is set up the image and i have the image commented out in order to use image in next.js we have to do a couple imports so we have to import image from next image to actually use to actually see what we're working with the next thing you want to do is to import the fire from the from our assets now you guys might not have assets but if you can clone it to our repository we'll have we'll provide you with the assets folder with all the pictures you need okay cool so this fire is the logo of the tinder app so let's comment out the image and now we can actually insert that the necessary stuff for that okay and all you need to do is add this to the image which is going to give the source of the fire of the logo add the alt property and actually give it a height and width i'll hit save there it is there is our tinder fire logo looks very nice and if you remember we are going to come back to this when we set up our context and there you go this is our nice tinder app and just to show you that the login button is going to change when i log in so if i click login it's not going to work because it's not defined but if i clicked it and i logged in a user here so let me show you what that might look like now we can actually set that up now now that you understand what this is supposed to be so i'll just actually erase this login and then we can bring this back in okay so like i said before this whole thing just means if there is a current account load up the styling with morales and have all of this passed in but if there is not just have the login button so at the moment we actually don't have an image from morales so we can comment that out and we need to add the styling which is just going to be these two things right here okay and we're going to current account is not defined and that's because we don't have current account set up so for now we can just make a variable called kant's current account and set this equal to our wallet address just for now all right so now it's going to be static later on we'll make it more so now taking a look look at that all right we can see that over there set up if you look this is what it looked like if i log in we have our wallet address abbreviated and also our login button is now swapped out for a log output okay so now if i were to remove a current user let's say we don't have a current user or in other words this doesn't exist it's empty then we have conditional rendering to take out that little thing and set back login back in there okay amazing and with that said that's the header component all right after you guys finish the header component let's work on the next thing so going back to index that we have this card component that we need to make this card component is going to be what we see on the tinder app right here it's going to be this nice square it's going to hold the person that we can swipe right or swipe left on okay let's go ahead and make that component i'm going to go into my components folder and let's just make it right here so i'm gonna say card dot js cool then we're gonna do the ra fce to make the component clean this up a little bit and we should be good to go awesome there you go so there's the card next thing we're gonna have to do is actually install react icons so what we're going to do is temporarily stop our terminal and just do yarn add react dash icon once that's done we can do your dev again load up our page it's already running refresh this and here we go it's back up online so now that we have react icons let's actually import one of the icons over here cool import this tinder from react icons si and now let's work on our divs so the first one i'm going to make is this one right here this one's going to be our wrapper that we usually do wrapper and inside that style rod wrapper we're going to have a component that we're going to set up later and this is going to be that card header okay i'm just going to make the card header component and of course that we don't have this yet so we'll save it after that we have another div in here this one is the card me after the card main we're gonna have another div here it's gonna be style got no more wrapper awesome and then here we can add that react icon okay then we also need this div right here for no more text just show that there's no more profiles in our location if there is not and we can just format it like this if there is more then we can do this class two curly brackets and do styles dot swipes oops styles dot swipes containing the container that's going to hold all our swipeable things and once you make that div we can add this piece of code here it's our cards.data.map we don't have this functionality yet but just know that in this container we want to map through our cards data and for every single card we want to make the tinder card item so we don't have that set up yet so i'm just going to keep it commented up and the last thing we're going to need is this card footer component okay and again we're going to be setting that up later nice so there is our component let's start working on the styling with tailwind and say style equals our object okay and then for the wrapper we're going to add this css we're going to put a flexbox property of column rounded edges overflow hidden and then for card main this piece of code one for card main we'll add this flux one relative justify content to center it and the normal wrapper is gonna have this okay and then the rest of the css will be like so all right to take a moment to take a look but it's in the logo you're just going to make the text red and add that and for the normal text that should be white and for the swipes container we're going to do an overflow hidden and get the full width and height awesome and hit save and now let's start working on the components within here so let's work on the card header so what i'm going to do is go into my components make a new file this one is card okay set up your card header and let's do some code so the things that we're going to import into the card header which is at the top of our card is these images right here we want to be able to get the profile pic from the assets folder and the logo from our asset folder the next thing we're going to need is the notifications icon from react we need to get import image from next so that we can use images and that'll be it for now okay now i'm gonna set up our card header component and all we need to do is clean it up so give this a class name and you guessed it this is gonna be our style dot okay and here i'm gonna actually use the image already and we're gonna pass this image some props so for the source i'm gonna put profile pic for now and then for the rest of it we're just gonna give it the css property so with the 40 a height of 40 an alt or profile picked and this is the class name for the image awesome the next image i'm going to add is actually just the logo and of course the source of this is gonna be the logo itself okay with a height of 150 and a width of 200 and give this the class name of that and the last thing here is going to be the bottom we're going to add another div and this is going to be the flex items okay i'm just going to clean this up a bit and there you go so we're making a div called flex flex items we're gonna make a div which is just gonna literally not take a style object we're just gonna directly style it like this and flex it center and it's gonna tint the notifications and this right here okay so i hit save now that we've finished the card header we can go implement it back in so going back to our index.js let's bring in the card by importing it import card from components and before we save that we actually need to go a card and import the card header now import card header okay save that and i'll save this and then we get an error make sure it says style not styles okay and then of course in our card header don't forget to put the style object of the card header which again i'm just going to put it right here i don't want to spend too much time on css because we got a tinder app to build and there you go so all it is is just adding the wrapper css making sure that the profile image covers it and it's rounded we have the logo and just add the rest of these so take a quick look at it i pressed alt c you can see this is the styling that we're going to add now if i say a there is supposed to represent you tinder notifications and no more profiles in your locations because we don't have any users set up just yet so there you go we have our tinder card we have the header let's work on the footer next so if you remember the footer is located in the card itself which is going to go in the bottom right here and that's going to have your options to swipe right or left so let's work on that so in your components folder make card footer js okay and here are a fce set up clean up your component and we can go start making those divs okay so now that we finished the card footer the only thing we need to make now is the tinder card item component the tinder card item component is going to be component that shows that card's data so like it's a picture of me my age and it's going to have all the reactions that you can have or go back so let's create that by making another component i'll call this one tinder card js awesome so set up your component okay cool so the first thing i'm gonna do in this tinder card item component is import all the react icons okay there we go it's gonna be these right here this is gonna be all the reactions from there let's start setting up our code so from here in the stiff we're actually going to give it the class name of style.wrapper again the interesting about tinder card item is that we're going to be importing tinder card from an npm package for this app we're going to be installing an npm package called react tinder card what that package does is lets us code and incorporate that swipe or swipe left functionality in react so what we're going to do is go into my terminal and type in yarn add react dash tinder card okay once that's done another thing i'm going to add to this import is the tinder card that i was talking okay so import tinder card from react under card and once you do that i want to tell my react app that everything here is part of that tinder card that i can swipe right or left it so i want to wrap that inside the tinder card so i'll say tinder card close it and like i said we want to put the wrapper so everything inside here is part of the center card makes sense let's move on so with the tinder card it actually comes with a few attributes that we need to set up first things first is let's set up the class name style dot tinder card wrapper okay another attribute that we're going to add is a unique attribute to this tinder card that we're getting and it's going to be called prevent swipe and inside has the value we're going to put quotes up quotes down this does is when i take my card and drag it up or swipe it down nothing will happen we're going to prevent that functionality from triggering anything because the only functionality you want is the swipe right and the swipe left so to do that we set this up next we're going to add another attribute it's called on swipe which is the function that we are going to run when we swipe okay and the function is called actually on switch okay and obviously we don't have the entry function just yet so for now let's just make that function here what this function is it's our onswep function that takes in a direction and if the direction is right we want to handle that right swipe this handle right swipe isn't a function on my component but it's a function that we're going to be making later and then pulling from our context so let's comment that out for now okay coming back to line 23 let's continue building this out so the next div inside the wrapper is going to be a div and we're going to call it style.space okay and install that space is actually going to be our div that holds our name here is going to be where we put our name and for now let's make it static by saying my name okay underneath my name i'll have a span which is just going to hold my age and i'll put 99 because i am almost 100 years old okay next to the div called style.space we're going to make another div and in this day this is where the wallet address is going to go so style.wallet address and of course that is not quotes that's just going to be class name so then inside that wallet address div this is where that user's wallet address will go so if there's a user let's call her daniel smith and it's gonna show her picture her name and actually her wallet address so for now that's gonna i'm gonna hard code it by putting my wallet address in here and of course when we do pull it dynamically we're going to abbreviate it so something like that okay that's the wallet adjust the next thing i'm going to make is a div for the reactions container and as you can assume this container is going to hold all the reactions that we can have for a person whether that's liking them so i'm just going to set up the first one the first reaction is going to be this which if we click it it's going to trigger a go back function which again is not set up yet a go back function okay so each of these divs inside the reactions container is going to represent a different reaction and there should be four of these guys so i'm just gonna fill the rest of them out now and i'm just gonna clean up my code okay this is all the reactions take a moment to see one's the different code that i have here okay just gonna clean up my code a little bit add an extra dip and here it is okay last thing i have to do now is just set up our styling so i'm just gonna make that style object and i'll start slow and then slowly populate the style so the first thing i want to think about is the tinder card wrapper which is just going to have the full width and full height and give it the absolute property i'm just going to have the wrapper with also full width and height overflow hidden and make sure you don't repeat the background and of course center it and keep it the position relative if we make the other one absolute okay next is just the space it's going to have a flex plus flex property of justified between and then it's just small styling of all the little details like the name the age pallet address and then from there we're going to style the reactions container that's going to hold all of our options which is going to have a flex property justify between with full pixels 2 and a gap of 5 buttons container and then i'm going to add the rest of them which is the button symbol back colors the x colors the star colors and the lightning color okay so go ahead and save that we're not going to see anything yet on our app because we need to import it to our card so what we're going to do is actually import the tinder card item and if you look looking into line 27 we have our swipes container and we're going to be mapping through our cards data and our cards data is essentially our list of users we don't have that set up yet so what i'm going to do instead is let me show you guys what one cartender card item would look like the difference between now and before is that this data in this component is static and that there's also no background image so once we set up that tinder card item go ahead and click save and make sure your terminal is running down below so that when you hit save there it is like i said this is an example of what the card would look like but as you can see there's no picture in the background because we haven't set that up yet so let's do that right now so hopping back to tinder card item if you see where the wrapper is this is where that background image is supposed to go so if i want to put that background image there and underneath the class name let's add some inline styling to insert a background image so to do that i'm going to have to write something like this background image and later on we're going to replace this with something dynamic but for now we can just type in url quotes and then let's get a picture in there so just for fun let's go to unsplash.com get a stock image i'm gonna type in dog any dog lovers in chat comment down below if you have a bet so i'm gonna do is copy image address and paste that right here hit save okay and if all is there it is beautiful lance and he is 99 years old it's a dog and hits his wallet address isn't this awesome and look at that we can actually drag it left drag it right and if you press left and there's nothing left it's going to show that there's no more profiles in your location and now if you refresh the picture comes back and our front end is pretty much done next thing we need to do is start setting up a lot of the backend so go ahead and swipe right on my beautiful dog here and let's get right on and let's move on so now the next thing we should start doing is setting up our contacts folder so what i'm going to do is go over to your project create a folder called context and in this contacts folder we're going to make a file called tindercontext.js okay enter awesome so what we're going to do in this file is we're going to set up using react's context api all this does is lets us pull data from anywhere in our component as opposed to the other way which is passing down data down through props we'll have access to anything we put into our contact anywhere in our project so to get started doing that i'm going to import a couple of things like these three things use state create context and use effect and try that explanation again so the next thing we need to do is after we import these three things is i want to install faker.js if you're not familiar faker.js is an npm package that we can use to generate a random name and we'll be using it to get generate a random name so to install it you're gonna have to do with this command so to install it you're going to have to type in this command yarn add faker js slash faker okay make sure you do that in your root folder and once that's done we can actually import faker from figure 2s okay cool we have that done and whenever you're setting up context the next thing you need to do is declare the variable that's going to hold that context and set it equal to create context parentheses okay the next thing we need to do is set up that provider so i'm going to say export contender provider and set it equal to the function cool a couple things we need to do is we also want to be exporting the tinder context as well because we're going to use it later and this tinder provider is going to take in children okay awesome and within this provider eventually we're going to have a return here that we're going to set up later okay we want to set up in this provider is a couple use states which i'll explain as i paste it in so i set up three use dates here each of these things are going to be keeping track of different variables one of them is the cards data which is essentially each user that we're able to swipe through labeled as a card so if you remember when i refresh this nice picture of my dog is a card all right so i set up three use dates here and with these three states i'm going to be keeping track different things so the first one i'm keeping track of is the cards data you can think of the cards data as the users that i can swipe through so if you think if you look back at the app with my nice dog lens this is considered so this would be one card in the data and at the moment now there's zero card state and left in the cards data so that's what we're gonna set up with state here next one is the current account and also current user awesome okay with that out of the way the next thing i want to do is in your return is let's set up the tinder contacts provider so what we need to do is type in tinder contacts dot provider and in between that provider it's gonna take children as well okay the next thing we need to do is inside add a couple attributes to this tinder provider and that attribute is going to be value okay keep this in mind everything inside this value is going to be what we pass in to make that variable okay so for now we'll leave it blank but i'll come back to that in a second we have to do next is actually wrap our entire app with the tinder provider that we set up so to do that we need to go into this underscore app.js and we need to okay and to get the provider remember we exported it so that means we are able to import that tender provider that's going to be from our contacts okay now that's imported we can actually place it down here and then in between that is where our app is going to go hit save that should be good for now okay with that our contacts is set up and we're going to be adding way more to this as we go all right guys once you set up your context the next thing that we're going to start adding to this context is actually morales if you guys haven't heard of morales it is a web development platform and if you ever heard of firebase morales is essentially the firebase of crypto all right morass gives you manage backend that you can use for your blockchain project and one of the key features that we're going to use the morales today is authenticating a user so the first thing we're going to have to do is go to terminal and install morel so i'm going to hop into my terminal here you can type in yarn pad react dash morales once that's done we can come to the top here and import use morales from remounts just like that okay and just like we would with react hooks we want to set up that instance of morales i'm going to copy this and paste it here we want to pull these three these structure these four things from morales so that we can use them in our app authenticate is authenticated user and morales equals use morales awesome okay we can do next is set up a bunch of different functions so the first one i'm going to make is const check wallet connection and this is going to be an asynchronous function and what this function is going to do is literally what it sounds like it's going to check if a wallet is connected the really awesome thing about morales is that it actually knows in the background if a wallet is connected to our blockchain app that we're creating so if is authenticated which we're pulling from morales is true that we are connected then we're going to get that user address and set our current account to the address and afterwards we're going to make a request to create that user profile down below now if you remember our current account is just going to hold our address and the difference with current user it's going to have all the user data in current use okay and of course we need an else statement here set current account to none because there shouldn't be an account if no one is authenticated awesome so here's the next function that we're gonna create it's gonna be called connect wallet so if the first one is checking if a wallet is connected this one is literally what it sounds like this one is literally just gonna connect the wallet itself so if we are not authenticated that's what this exclamation point means set up a try catch and we're gonna await authenticate with the signing message of login using morales and of course if anything goes wrong we're going to catch that and print that error okay the last thing we need to do is disconnect the wallet so the disconnect wallet is a smaller function it's just going to look like this where it's asynchronous like the others and it's gonna wait for the morales user to log out and also set the current account to blank on rn okay once that's done let's actually use this use effect hook that we pulled at the top here and i'm gonna say use effect takes two parameters gonna be the side effect that we want to perform plus the this dependency what we want to do in this use effect is actually just check if the wallet is connected anytime we load the component we should be checking if the wallet is connected the next thing i want to do is to check if it's authenticated and if it is authenticated i want to grab that user data during user.get and also get that same for the current user so if it's authenticated then we also want to make a request for that data notice how this one says request users data and this one requests current user data this function it doesn't exist yet but we're going to use this to grab all the users that we can swipe left and right in except for us otherwise we'd be swiping on ourselves because we're in the database as well so we're actually making a separate call in this function which is just going to grab me and not everybody else so this is to ensure that we can separate the user that is signed in versus the rest of the people that we have on our database cool and then in the dependency module we just want to check whenever is authenticated changes this use effect is going to run the next thing i want to do is add in those functions to our value here because remember i said earlier whatever we pass into value of this provider we can actually use these functions anywhere in our app when we need it right so we're also going to get current account and current user and that should be good for now one more thing that you have to do when working with morales is that you actually have to wrap your app around their provider so that we can essentially wrap morales around our app just like we did with tinder provider go into your underscore and what we want to do is and what we want to do is import the morales provider from dash morales and let's wrap our app with that same provider okay take our app and post paste it inside here and i'm just gonna clean it up a bit there we go and we should be good to go nice so now that morales is set up what i'm gonna do is hop over to the header component because now that we created our contacts we can actually apply some of the functions that we set up so what i want to do now is come to the top here and we're going to import a couple things the first thing that i want to import is use context from react this lets us use any of the context files that we created it's a react hook that lets us set it up okay the next thing we want to do is import the tinder context itself this is what we're going to pass in to use context to signify that hey i want all the variables inside here that we created inside this context okay and then coming down to the header at the top level of our function just paste in this all this means is i want to use these specific variables the connect wallet current account and the disconnect wallet as our contacts and set that equal to use context because these are the things that i want to pull from that page okay so now that's there we could actually use this remember how we have conditional rendering here where a current account is this we can actually start to remove that because we have that current account what i'm going to do next is i'm going to update this div here and it should just look like this all i'm doing is adding some more conditional rendering that if there is a current account we're gonna change the styling of the wrapper if there's not we're just gonna keep the background transparent fixed okay awesome you can also comment back out this image and now our on clicks that we set up earlier should work like the disconnect wallet and then the on click for the connect wallet should work as well so remember to reset your terminal because we installed morales so i'm just going to do just that okay i know why i'm getting this error it's because we installed react dash morales but we also need to install just morales itself so don't in your terminal also do yarn ad okay now let's try it okay i'm gonna do yarn dev oh i see okay oh that's right i forgot when we put in our provider we need to make a app we need to make a project on the morales website itself and we have to include that in here inside the provider so i forgot to do that so let's go ahead and set that up so go ahead and go to morales.hill and this is how we're going to set it up just to sign up for free create account let's create a new server and if you remember we're not the doing this on the main net we're going to use the testnet and we're going to use rinkaby and add an instance select your region let's do new york oh yeah many colors we should name this tinder loan blockchain and we're going to add the instance okay cool this is a really cool thing that ross does is that it shows you servers that you have and if you look morales has so many other things that you could do such as different plugins that you can add by going to the plugin store you can also implement cloud functions here which is awesome there's a lot of things that morales does underneath the hood that makes this experience of you developing on the blockchain okay awesome so that's the dashboard we don't really need to do any of that we can just go to view details and what we need is the server url and the application id okay yeah so we just need the server ul url and the app id okay so you can literally write that here server url paste in that once that's done the next one is the app id which is just going to be this paste that in save second app okay so no major errors if i click log in let's see what happens nice look at that when i click log in on my metamask popped up you just put in your password okay hit next connect and this is the await authenticated message that we set up that we can see here click sign letting not letting morales know that they can have the app permission with this wallet and we have this request user data is not defined and that's fine because we have it set that up at least we know the login is working so we can continue working on that let's go okay so i'm just going to quickly disconnect yeah so this error is normal that's because we don't have the request users data is set up just yet but after you put in the information to the provider analysis setup okay like i said if you see this error that's totally fine that's because we don't have this request users data function or this request current user data if you remember this use effect is constantly checking if the wallet is connected so it can't complete a test so for now if you don't want to see this error let's actually just comment that use effect out and our beautiful pages back so the next step that we're going to do now is set up sanity sanity is our database which is going to store all the different users including you so that we can pull that data and actually get these requests working okay so to set up sanity that's going to be in our studio folder okay go to your studio folder hop into the schemas portion and tap click on the schemas.js here you're going to see the template for creating a schema which i'm going to clean up right now okay once that's done any schema that we create we should import here so that it can get concat to our schema types so here at this point i'd start thinking of what do i want to store in my database and like i said i want to store users so in my schemas folder let's create a file and i'll call this user schema.js like so and to set up this file we need to write export const user schema the same name equals the object of what we want user object to look like so it's gonna take in some keys and values that i'm gonna write now and i'll explain it in a second cool so the first three things here is just the name of our schema the type that is notice how it's a document and the title of it which is going to be capital users the fields is what are the actual fields or properties of a user right so if you think about it the first field that i care about and a user is going to be the name all right and when you do that you have to identify the type which is the string and the title which is just the capital version okay another thing that's important is going to be a user's wallet address okay as a bonus we're going to keep track of the profile image that they can have that the users can have which is nice and the last thing is going to be the likes okay the likes are important because every single time i like a user so if you look to the right if you like my pug here that user is going to be registered in this array of the users that i like so that's why in here you're going to see this reference to the user right so it's going to be filled with users that you liked inside here and it's going to have a reference to that unit okay so all of these fields are what's important to the user and make sure you're exporting them because back in the schema.js we're going to be importing all right so what we're going to do is simply just import that user schema from the path here and in this dot concat since it's the only thing we can just put user schema here like so awesome and there you go our standard data database is structured and set up and good to go all right so once you made that schema.js file and setting up the user schema the next thing we want to do is let's make a lib folder so going to the top level of my app again let's make a folder not in studio up here let's call it lib now in that lib folder we're going to make a file and we're going to call it sanity.js we just want to import sanity client from at sanity client and we're going to also export const the actual sandy client itself and if you see something like this process that envy project id we actually need to set that up as well so let's go ahead and do that so i'm just going to make a new file not in the lip folder at the root of our project and we'll see e and b dot local sorry going to be dot e and b dot local and we can hop back over to sanity get that project id and say something like this sanity underscore project equals that project id equals this so once you get your project id the next thing you want to do is hop over to api click add token you can just say whatever you want for the name and click editor hit save this line of text is what we want and we can say sanity underscore token question equals and that whole string awesome so save and now we have that env file so that when we go to lib this is actually going to use the process.emp file okay so once that's done the next thing we need to do is set up a bunch of our api routes these api routes is where what we're going to use to communicate with our sanity database and pull what we need from them so what i need to do is we can actually just delete hello.js and set up a couple things inside okay so going back to our app the first api route we're going to set after deleting the hello.js is go to your api folder and let's make a new file and let's call it create user.js okay what this is going to do is literally create a user insanity so if i do create user on sanity equals async set that up and every single time we make a function at these api routes we actually have to import the client from our live folder okay from there we need to set up a try catch block which is going to look something like this and that's the parameters we're going to put rec and res and if you look in this try block all i'm doing is creating a user document and sending that over to sanity with this as our fields the wallet address of that user the name of that user and the id will also be that wallet address and of course we're going to define our type which is the user doc okay next thing we want after this try catch is this await the sanity has this nice thing if the user does not exist insanity it will actually create that user if it does it will leave it alone okay and of course if it's successful put a rest status of 200 and when everything does will go wrong we need to add a catch down below okay last thing at the bottom you have to export default create user on sanity okay the next route i'm going to set up is the fetch current user data so it's going to be just that current userdata.js and every single route we make is going to import that client we set up it's going to have another function here that's just going to be getuserinfo and within that function i'm going to set up a try catch which is going to make this query okay as you can tell from this function what i'm going to be grabbing from sanity is the current active account so if i'm logged in this is going to query for my user in our sanity database okay cool after that i'm gonna make a variable called sanityresponse and just store what we get back from that query okay and if all goes well that's just gonna be a status of 200 and underneath we can have a try catch oops and just make sure that all that code goes inside the char block okay so our constant response and that res status is going to go over here just adjust my browser a bit boom and of course underneath the try is going to be the catch okay and if anything goes wrong we'll catch that send a status of 500. so that's the fetch current user data next i would like to add is to fetch the users fetching the current user but i also want to be able to query for the rest of the users in the database so i'm just going to say fetch users.js do the same things import the client again set up my function and you guessed it this is also going to have a try catch block okay in this try block like i said i'm going to be querying for all of the users except for myself otherwise i'm going to be logged in and i'm also pulling me from the database so all the users except for myself or in other words except for the user that's logged in okay so just like the last one i want to make a variable called the sanity response which is just gonna hold what i get back from my query that i set up okay and if it's successful send a status of 200 and if it's not the status should be 500 nice the next thing i want to make a file here called check matches client use this function set up to try catch again this time we'll just set this to catch first there we go and for the try this is the query that we're going to use okay with this query i'm going to begin looking in the users and getting the liked user and again let's save that response in a variable called sanityresponse i also want to set up a variable called is match and this is the important part right here which is i'm going to loop through the array of users look at their likes because every user has a likes array if you remember from our schema and for each user in that array i want to check if that user liked me because if we both liked each other then that match should be true so essentially i'm looking in the likes array if the user that i liked also liked me back and what did we do when that's successful you guys are crushing it it is send a status of 200 once again okay and one thing that we can't forget about all these api routes is that we need to be exporting all of these now that's another thing that we need to think about is how are we going to save that if you remember in every user has a likes property that has the array of all the users that they like this route is going to help us post that user into that array so make a file in your api folder called savelike.js at this point you guys know the drill import the client set up the function the difference though is what's in this try block is we don't necessarily have to make a query what we want to do is type in this code right here which is we're going to wait for our client get the current user and again oh it's missing if this is missing we're going to have it but it's probably not the next thing is we're going to insert that user right we're inserting a reference and putting that into the legs array because we want this to reference the user that they liked in our database and after that we're going to do a commit and that's how we add and save that we have on our app okay last thing export deficit like cool so it looks like all those api routes are set up now let's actually take advantage of those routes and if you remember we were setting that up in context so going back to our tinder context.js we have all these functions and we currently comment out the use effect but now we're going to get it up and running soon okay so remember the request user's data remember all these functions here that says request something we're going to set up some of those functions now the first one i'm going to make is this this one is a function called request to create a user profile and of course it's going to be asynchronous and this one's going to be asynchronous and it's going to take in parameters of a wallet address and name we're going to set up a try catch i'm just going to finish up the catch part of it since it's going to be standard and it's just going to say console.log console.error the error awesome in the try block remember that api route that we set up we want to call it here first thing i want to do in this try block is make an await call to that api route of create a user all right so in this create user this is us creating a user on sanity and we have to set a pass in a couple things inside this fetch call so put a comma inside the before the closing parenthesis had these curly brackets here and we're going to add the rest of the stuff now okay what you're going to need is all of this the method is going to be post this has your header we're going to stringify that user wallet address key to be the wallet address that we passed in when we call this and the name is just going to be the same as the name okay okay the next function that we're going to make is this one called request current user data make sure it's asynchronous as well and this one's only going to take in a wallet address set up your try catch finish out your catch and then in this one we want to be fetching the current user and we have an api route for that which is going to be this we're going to call that api of fetch current user data passing in the active account so fetch the current user with this matching wallet address which should be there if we created a user profile already okay and if that's done make a variable called data and save the response.json in that variable data and then now that we got that user we want to be able to set that user in our state and pass in data.data and then our cache is there and we should be good to go and this last function called const request users data and this is the other route that we have that gets all the users except for the one that is active because remember in that route we said get all the users except for the current active account so again saving making a variable called data saving the response.json there and setting the cards data to be just that go ahead and hit save and now looking at our use effect the request users data should be there as well as the request current user data should be there as well so if i hit save hopefully this works okay oh i'm getting issue called oh it's not configured under your images oh okay that should be an easy fix if you go to your next js.config you need to add morales in there as well let's take a moment to debug a couple things if you're seeing this error can't resolve saying the client that's because we got to make sure we have that installed so let's go ahead and do that so let me just take this moment to debug a couple of things we're getting a couple errors here the first one is if you see this can't resolve santa sanity client that probably means we did you don't have that installed like i don't have that so let's quickly install that do yarn add at sanity client inside your project folder okay once that's done run up your project again and let's see what the next error is let's go ahead and refresh this okay the next one it says invalid source this one should be a quick fix this one we have to go to our next.config.js and put morales in there so if you see this error this just means in your next js config we have to allow the images from sanity and also we're going to do images from morales as well so what we need to do is add a images key here put an object and put domains that we'd like to add and it's going to be this array and inside this array we're going to put these as our domains okay and that should do it let's see what else that we can come back what else do we need oh and again after you set up that config we have to restart the server so again i'm going to cancel it and look at my terminal i'm just going to do yarn dev once again okay let it compile hit refresh and we should be good to go awesome so there it is there's our lovely app and you can see we're actually logged in and if we hit log out let's see if anything happens hey nice work so if i log in we should get prompted by metamask soon as there's an error log in there we go so i hit log in it's going to ask me to connect with my metamask account connect here's the message that we sent just giving morale's permission to have access to my information with this wallet and there you go i am logged in awesome this is amazing so what we could do now is go over to our header and let's work on making the current account even more dynamic so let's just recap quickly on what we have going on so far this is our tinder app we have sanity which is going to show us all the list of users and currently if i go to studio and say sanity start to start obscenity go to studio and go ahead and type in sanity start and let's take a look at our users okay and we will be able to see it at localhost 333 awesome we can go ahead and log in to my clever programmer account there you go so remember we only made a user schema so that's why we see this and we should see gregory bosco which is actually just me because this is my wallet address this name comes from what we set up earlier with faker.js just to generate a random name for now okay and we can double check that this is my wall address and there we go cool so what we need to do now is populate our users oops what we need to do now is add some more users here besides ourself so that we can have more people in our cards data so i'm going to take a moment to create a couple meta mask wallets and then log in so that we can populate our users okay once you're done signing in you should see about six people i'm gonna go ahead and update these and add some images all right so i finally finished setting up the dummy user data and added an image for each of those users so what we need to do next is hop over to your context and remember how we're storing all the query for those users in cards data we need to pass that into our provider so what i'm going to do is go over to value and let's make cards data global okay once that's global think about where we're going to import it and we're going to be importing that in card as you can see we're mapping through the card's data and for every user or essentially card we're going to make a tinder card item right now we just have a static one over here so what we need to do is import our context so to do that we just need to get use context from react then we also need to import the tinder context okay once that's done you can hop over to here and set up the contacts hop over to line 19 and we can set up our contacts like and i want to get cards data from our tinder card text that's what this line means so now that we have it we can actually uncomment this out take out the tinder card item because we don't need that static one anymore and the next thing we need to do is if you notice we are actually passing in the individual card to that card item and the key next step would be to go to your tinder card item js and accept those props which is just going to be card and wherever we have something static let's make it dynamic with the card procs so instead of this beautiful picture of this pug we want to be using the image from that card which is just going to be card oops which we need to make a template literate for and say card dot image okay next thing you want to also do is you don't need this style static wallet address you can actually just get the card wallet address like okay you just need to insert this piece of code right here it's going to grab whatever cards while the dress that is and slice it so that it looks nice and formatted like that okay the next thing you want to also do is the name which is just curly brackets card dot and as i was saying there's no age property but if there was if we did add one we could put card that age in here as well so once that's done and everything is set up make sure the image url looks like this let's hit save hey there we go look we got qazi in the house and he is there awesome so if i swipe left we should see the rest of our users there's me there's other randomly generated users and there you go no more users in the area notice how many users there were if i refresh this there's one two three four five there's a total of six users in our database so if i go to desk go to users notice which one i didn't see you didn't see daniel smith because i am currently logged in as daniel smith and that's because what i set up with the query we want to get users except for the current user so that's why you didn't see daniel smith there because i'm daniel smith okay awesome okay and with that we have this amazing app that can actually pull users go ahead and feel free to customize this with anybody you want it doesn't have to be these dummy users that i set up which is what's super cool about programming so the next thing you want to do is set up so when i swipe that's going to get added as a like so at the moment it doesn't do anything when i swipe so let's go ahead and set that up like i was saying before we're able to get all these users here and now what we need to do is add that swipe right functionality so that swipe right functionality is going to be over here which we made a function called on swipe if the direction is right then we're gonna use the hand swipe function at the moment we don't have that so let's set that up in our context okay and i can just make it right here in between disconnect wallet and the request to create user profile i'm just going to say cons handle right swipe equals async and this function okay it's going to take two parameters first one being the card data and also the current user's address current user address okay what we essentially want to do is something in three parts the first thing you want to do is create a variable called like data and set it equal to this object where the key of left user is the card data's well addressed basically if i like quasi here i want to get save his wallet address as the liked user and we're going to save the current user with my address or who's ever logged in okay from there i want to set up a try catch and of course in the error it's going to be pretty standard console.error now here is where the important stuff happens in the try block we need to have a fetch okay it's going to be an await and what we're going to fetch is the api route to save like which we set up previously okay and we get that route and we're also going to pass something else in with that fetch which is going to be all of this all right because what we want to do is post that save like so what i'm going to do is set a variable called response to an await which is going to fetch check matches if you guys remember check matches what it's going to do is let's say i like to quasi right when i swipe right on kazi what's going to happen is we're going to check if qazi liked me back we're going to do that with this route right here okay so inside that batch we also got to pass this in which is going to be similar to what we have okay next i want to create a variable called response data and set that to response.json next i also want to have a match status and set that equal to response data.data is match all right don't forget to close that and the next part is if there is a match and qazi did like me back we can count to logic which we don't have to do and we can also just make a variable called mint data and that's gonna be an object with the wallet address and it's gonna have an array of for this example it's gonna have the array of the liked user and also address and for the names it's going to have the liked user's name which in this case could be kazi and also my name and we're going to need that information for our nft that we're creating from this so we're saving that in a variable called mint data and we're still within the if statement we're going to have another fetch call okay and this fetch call it's gonna request to mint match nft but we haven't set up that api route just yet but in the meantime i'm just gonna set it up and still within that fetch this stuff is gonna be pretty standard but also pass in that mint okay there we go and now just to recap what we just did this is the handle right swipe function it takes into parameters cards data and current user address and make sure it's card data and current user okay once the function runs it's going to make an object called like data which stores the wallet address of the person that i liked and my wallet address after that we have a try catch and it's going to save that i liked this person okay from there we're also going to make another fetch call that's going to check if that person i liked also liked me back we'll save that response in response data and then we also want to make a variable called match status which is going to be equal to the status of if there is a match or not so if there is a match status would be true which means this if statement would run so in other words if there is a match the feeling is mutual we're going to convert it to this mint data object which is the data for the nft that we're going to mint right from there we're going to call mint match nft which is essentially going to start the process of minting the nft that shows that me and another person matched so once that's done that is the handle right swipe so we can copy that and bring it down to our provider once you pass it into the provider now that function is global and it can be called anywhere as long as we import the contacts so let's go ahead and import that context because we need to put it in our on swipe function so go back to your tinder card item js to go back to your tinder card item.js let's import that use context we also want to be importing our tinder contacts so that we can set it up and at the top level of this card we can remove some console logs and we want to make sure to get handle right swipe and current account from the contacts let me just double check that i'm passing current account yes i am going back to the card we want to get to those two the function and that variable from our tinder context so in our on swipe function we can take this guy right out and you can see that we're passing in the card that i swiped right on and the current account of the user so it's saved awesome the only thing that's left now is when i swipe we want to trigger our smart contract and mint the nft to the user now that your onswipe function is working if you look into the browser and click on quasi and swipe right on him we should see that user in the likes right so keep in mind who's logged in for me it's danielle smith and if you look there's quasi all right let's go here back to the app i'll say no to me let's say yes to olga all right so swipe right take a look and there it is we're actually storing all of that users likes that is amazing cool so now that's done what we need to do now is set it that if there is a match we need to be able to mint the nft showcasing that these two users are a match all right in this section i'm gonna be showing you guys how to actually mint the nft if there's a match so let's recap on what we have so far we have this handle swipe function and there's definitely a couple parts to it the first one is creating that like data creating that like data when i swipe right once i have that like data i want to save that like into sanity and that's what we see here in our studio and we see that reference to the user in the likes array of that user document that's why we see kazi and olga here after we save that like the next thing you want to do is make a request to check the matches check matches is exactly what it sounds like and it's going to grab query all the users except for that liked user and check in the array of each user if they like them in other words when danielle likes qazi it's going to check if qazi also liked any users like danielle smith and if they did there should be a match okay and then we start that response in response data and we're also going to store the match status in here now this is where it starts to get important because this third part we need to set up still so if the match status is true there is a match we're going to create the mint data the mint data is just essentially the person you like swallowed address and your wallet addressed and the person's name and your name danielle's wallet address kazi's was the dress danielle's name and qazi's name okay next thing we have here is the api request to mint the match nft that's created when there's a match like i said this one this route is not created yet so go ahead and hop into your api folder under pages so go to pages then api and then let's create a file and let's call it mint match nft.js so now we're in the mintmatch nft.js at this point all of the front end is done the rest of the things we need to do is the back end it's more specifically the mint match nft which all it does is makes a request to our back end and literally communicates with the smart contract that we were created way in the beginning and to do that we're going to use morales to help us out so let's set up a couple things so going into my terminal we can stop the project for a second and we need to do yarn add ethers and morales if you haven't done so already okay that way we can now that we made sure we imported it we can actually take those two imports right here the next thing we need to import is this line at the top notice how it says import tinder address and tinder abi at the lib constants at the moment remember way back in the beginning when we deployed our smart contract and it returned a little address if you have that saved you need to go to your lib folder and let's make a folder called constance.js and in your constants.js you want to do export cons tinder address okay and grab that tinder address and go ahead and grab that tinder address that we made all the way back in the beginning of this tutorial and if you don't you're in luck because we can actually just create another one we just have to deploy our smart contract again just keep in mind every time you deploy something to the blockchain you do have to pay the gas fees but luckily we gave ourselves a lot of fake ethereum if you did that step so what we need to do now is actually cd to the smart contract and run hard hats to deploy that contract okay cd into the smart contract folder and if you remember the command is npx hard hat run script slash deploy.js and make sure you're deploying that conjuring to the rinkeby test network hit enter and as you can see at the top here this is the contract address after it's deployed if you ever redeploy your contract because if you forgot it for whatever reason make sure you update the constants.js to match that contract so i'm going to hit quote paste there we go so i'm just going to clear that and going back to the mint match nft you're going to see something called tinder abi to get the tinder avi what you need to do is go into your smart contracts folder and go underneath artifacts folder and then go into contracts you're going to see two things at this point which is the tinder erc721.json and the tinder erc720 dot dbg get the json do not get the dbg all right just get this one it's tinder erc erc721.json and copy that into your lib folder so there should be three things in your lib folder and that's going to be the tinder erc721.json constants.js sending.js and file what you need to do now is go back into constants and let's actually get that tinder that get the api from it okay so at the top move the tinder address to line three and we could just say import tinder abi from that path okay so now that we imported it we can actually use it and i'm just going to edit my browser real quick let's make this a lot bigger and so it's going to be mostly coded and now that we imported it we can say export contender underscore avi set this equal to tinder abi.avi awesome now that's done going back into our api for the mint match this is going to make a lot more sense this is what we're actually importing from that constants folder okay the next thing we got to do is let's create the mint match nft function synchronous and we can put rec and res as the parameters okay the first thing you want to do is set up morales and to do that it's just going to be this piece of code await morale start with the server url the app id and the master key notice how it's in these process.emv variables if you don't have that set up go ahead and go into your enb file and set that up now i think i need to set it up myself so i'm going to go into i'm going to go into my env folder i only have sani set up so let's get the rest of it done so what we need from this is the morale server url we need the app id and we also need the master key all right so let's go ahead and grab that to get all three of those things you can just hop over to your morales login okay and once you log in you can just click view details and all the things you need is going to be in the view details like it says it right here here's the application everything you need is going to be in the view details button here's the server url which you can just paste in here the application id and the master key this is going to connect your memoral server to your app so that we can use it to communicate with your smart contract so once those env variables are set up that means these process that envs are gonna be active okay so now that you've started morales the next thing you want to do is make a variable called const metadata what we're doing here is creating a variable called metadata and essentially storing all the data that we want to include as part of the nft and if you take a look that's going to be this stuff right here the metadata of the nfc that we want to create is always going to have the name of the users that matched it could be qazi and somebody else you could the description is going to have the two names as well followed by a message that just says just match okay and the last thing that's important here is this image every nft is going to have the same image it's stored in this ipfs so you don't have to insert an image this one is already hosted and we'll just point to it and that's the image of your nft that's already going to be handled for you awesome next you're going to make a variable called t2 toa and you're going to set it equal to this piece right here essentially this is an abbreviation from binary to ascii to explain this at a high level all it is takes that metadata and turns it into a string make a buffer for it and then encode it to a base64 string that we can use once that's done we're gonna use morales to save that file to save that variable into a file and store that into a variable called const metadata file and then we need to save that metadata into ipfs and again since this is a backend application we need to use the master key that we set up earlier and set it to true now we actually have the metadata uri which i'll store in that variable and setting it equal to the metadata file dot f ipfs next thing we're going to do is set up the provider this is so that we can work on the rinkeby test net that's why i have the chain id of four and just in case the name of it rinka b and for that we're actually using alchemy to help us talk to the blockchain so again make sure you have the alchemy api and if you don't go ahead and set it up now and you should have that alchemy api your url set up inside your smart contract folder because we set it up way in the beginning but if you haven't go ahead and do that our provider setup we want to set up a variable called kant's wallet provider cons wallet with provider set that equal to this if you guys didn't know the app we just created has gasless transactions just to explain it real quick anytime you do something on the blockchain you have to pay for gas this app has gas list transactions because anytime there is gas fees it's going to be paid for by the owner of the contract address which is going to be that first wall that we set up which is why we made the wallet private key so whatever you put as your wallet private key they're going to be paying for all the gas fees so that your users don't have to which is super nice so make sure like i said before the wallet that you provided here has a bunch of test ethereum that you can work with just in case anything goes wrong and nice cool so all you need to do now is get that contract pass in all of this make sure your tinder address is the right address of the contract you have your abi set up and your wallet with provider which is going to hold your wallet that's going to pay for all the necessary gas fees okay i'm going to be making a variable called const tx set that equal to and a weight if you notice here we have weight contract dot mint nft all right we're actually grabbing we're invoking the tinder contract we created and running the mint nft function with these three parameters the first user's wallet address second user was wild address and that metadata this is the description in the image that we set up at the top which comes from here and if you remember that function then the function that we're invoking is this one which is going to mint an nft to both users that you can actually that you can actually view on openc nice so going back to mint match nft we're going to wait for so all in all this tx variable is just going to run our mint nft function from our smart contract okay then we're going to do a const here tx equals a weight tx.weight thing that might be confusing is that those two weights here this weight is just gonna wait for this command to finish the tx that wait is gonna wait for the smart contract on the block train to finish running essentially think about it this is waiting in web 2.

[01:31:12]this is the weights for web3 cool and if that's successful and i'm just gonna clean this up a bit and if all is successful we're going to send res dot status of 200 saying that it was a success and at the bottom we always export default to route cool so that should be it for the mint match nft like i said this is very back and heavy at this point okay i set up a couple console logs here so that when i run this in my back end we'll see all these messages in case something goes wrong along the way what i'll do now is hop over to my sanity and let's just review and let's make a match remember the matches i was logged in as danielle smith i liked two users i liked kazi and olga what i'm going to do now is log in as olga and then swipe right on danielle so that it will trigger the mismatch function which will then trigger the mint match function and by there we should see all the console logs so make sure you go back to your app and log out i'm already logged out now so what i need to do is log in so just to make sure to figure out which user you want to log into you can click on the user you want to log in and make sure it's the wallet address of it so mine is all x902 so that's the wallet i need to sign into so i'm gonna hit lock and there's a couple options looking for all x902 this is olga i'll hit next connect signature request and bam so now i should be logged in as olga and that means i won't see i shouldn't see myself because i should see all the users except for the person logged in so again swipe left there you go so remember dan smith danielle smith is who liked us to lock her back we're going to see if the match function works so i'm going to swipe right okay it's checking matches oh no it just says check matches it's successful so again swipe left until we get to danielle okay so we got to danielle let's go ahead and swipe mint match nft and looks like we got an error cannot read property undefined to hex string okay so i think i got a handle of what the issue is what the issue is in your emv local we need to have the alchemy api url and the wallet private key in there as well i forgot we have it in an emv file in our smart contract folder as but you want to take those and put it into the local env this one and change the rinka b underscore private key to wallet private key that's the reason why it wasn't working so let's just recreate that one more time and let's see if it works right so what i'm gonna do is remove olga's like and hit publish so now it looks like she never liked any users so we can set up that match function once again i'm logged in as olga let's just do a yarn dev anytime you fix your emv files you need to restart your terminal so i'm gonna start yarn dev okay it's compiling hit refresh it's stitch i never logged out so it should remember that i'm logged in nice so i'm all good today and let's go match with danielle so let's say no to all these beautiful people we're at danielle and let's keep an eye on the console so swipe we're gonna save that like it's gonna go through check matches it didn't go through let's try this again okay cool so i restart my terminal i'm logged in as olga let's go match with danielle so i'm going to say no to all these beautiful people once we get to danielle to make it a match let's swipe right so we're saving the like we're checking the matches we're minting the match nft we get the console log this okay this is the provider this oh this is the transaction receipt nice okay this last console log here is this tx receipt so that means all of this process went through and it was working and if you guys want to see the nft we can actually see it by going into openc openc is a marketplace that showcases what nfts you owned if you remember we're on the test net so we need to go to the testnets version of openc and whenever you deploy to the blockchain depending on what chain you're on it's going to take a couple minutes for it you actually to see it so what you need to do is log in to the users that have the nft which is for me olga and i'm logged in already and if i click on profile hey there it is this is my match danielle smith and olga all right this is the unique nft and with the description that we set up and this is the image that's hosted let's brickin go we have this beautiful tinder clone that we can use feel free to customize it make it make your own dating profile and once you deploy this project online to either versailles netlify go ahead and share it with your friends and tell them to connect their metamask and each time they log in they're going to be part of the users this is going to be a fun project to make and add to your portfolio i hope you guys made it to the end of this video comment down below goldfish so that i know that you made it to the end of the video and you completed this project so thanks for watching be sure to keep a lookout for our future on web 3.0 it's been a pleasure working with you guys see you next time