How to create an NFT collection - Ultimate guide

in this video i'm gonna show you how you can create your own collection on openc have your own smart contract of your collection on polygon and ethereum as well as a minting dap in three very easy steps my name is daniel aka hashlips and welcome to the channel [Music] [Applause] welcome back to all the old members as well as the new ones like i said i am gonna show you the whole process of uploading your collection onto the blockchain polygon and ethereum this time the reason why i'm making this long video this continuous video all in one is because i want this to be the ultimate guide for people who are struggling this will be beneficial for people who have already tried out this process and for the new people who want to actually go ahead and create their collection from scratch i've made it very easy by creating three packages that you are going to be using i call it the threo if you follow these three packages you should be good to go to just upload your collection onto the blockchain i want to make a disclaimer though everything i show you in these videos are all for educational purposes so please review the code carefully before using it for production i will not be held liable for anything you upload on the blockchain that being said i am using all these repos for my own projects let's jump in and let me show you how this is done i am very excited for this video and mainly because it's going to help so many people in the future now let's get started if you head over to the hashtips github repos you will find the repositories the three main ones that we will be using the three ones are called the hashtabs art engine then the hashclips nft mintingdap as well as hashtabs nft contract i will dive into each one in detail but briefly going over them the hashlabs art engine has to do with how we create the artworks in order for us to create a bunch of artworks for instance a bunch of these nerdy coder clones or pixel art or whatever you want to create we need to use some kind of program and this program has been designed specifically for people who want to take layers of different images and have a program randomly combine them with different rarities as well as export the metadata this is exactly what this series is all about is to start this process from scratch but if you want an in-depth tutorial on the hash flips art engine you can head over to the youtube channel go into the playlist and find this create a thousand generative nft artwork with code series this purple one over there this series shows you from the start what to do now you can watch that series and this is how we start building up this actual repo so i suggest watching it till the very end before starting with your repo but if you want a brief overview and just follow along you can do just this video as well alright perfect you'll see that each one of these repos has a nice description of what it does this one takes layers and turns it into images and there's a bunch of documentation that you can read through also on each of these repos on the right hand side there is a release the current version that we are at today for the hash flips art engine is version 1.0.6 always check the latest version and the updates and download this one and use it instead but if there is a video that you see i click on a specific version rather go for that one because it means that the code will stay the same if you do it over here we'll download them in just a bit the next piece of the puzzle would be this repo this is the hash flip nft contract now the contract is something that we are going to deploy on the ethereum or polygon network now it takes code and it deploys it onto the blockchain in order for us to mint nfts and this is exactly what this repository does i'll show you how to use it in just a second let's look at the third and final step that you'll be implementing that is the hashtabs nft mintingdap if you click on this one you'll see that in the documentation this basically takes the code that we have written for a website a dapp and it looks like this you can see that the dap behaves in a nice and special way where it connects to the smart contract that we have deployed then people can simply click on buy and it will then start minting their nft you will have to have a metamask extension installed on your chrome browser and by do having that then you can start interacting with your smart contract minting nfts and they will show up on openc and start getting floor prices volume traded and a lot of owners now those are the three main repos that we will be using so i'm very excited let's get going our first step is to actually download each one of these files so what you want to do is go into each one of these repositories the hashtabs art engine click on the latest version which is mine version 1.0.6 at the moment go down and download this source code zip so click on it so it starts downloading let's go back and let's go into the hashtags nft mintingdap and we'll do the same currently this one is on version 1.0.0 so i'm going to download that source code and yet i'm going to go back again and download the hashtabs nft contract also version 1.0.0 so download those three files once you have them you can go and extract them in a folder so there's my three programs i'm going to select them and let's say unzip so i have to basically unzip them each one by one that's cool we'll do that one this one so we've got this version 1.0.6 the engine we've got the nft contract and we've got the mintingdap perfect the rest i'm just going to remove move to the bin these are the folders that we'll be working with take note that these are simply folders with files in them but it would be nice to work with this project with an ide so let's go download the necessary programs that you'll need in order to run this code the only program that you'll need to install both windows and mac can do this is node.js head to this page and install it for your operating system node.js is simply the language that we've written the program in and it allows you to run it in a framework for us to access the file systems so go ahead and install it i will be using it for mac and i've already installed and run the installation in order to make sure that you've installed this correctly you can simply open any terminal and run node v if there's a number coming up here minus version 14.17.6 it means that you've done it correctly you can also check that you have npm so n p m v and you'll see that i've got version 6.14.15 now npm comes with a node once you install it like this so that's all you need to do and run a test even though visual studio code is not necessary to have it's a great ide that you can use an ide is simply a text editor but that has more functionality it colors the text and it looks great it also is a useful tool for us to start running our node commands for us to execute our programs so go ahead and install visual studio code now to follow along now that you have the programs installed what happens if you follow along and you get stuck with a particular problem don't worry and don't hesitate to ask the community we have a thriving community on discord which you can find by going to hashlabs.online you can go to the discord channel or the telegram channel our discord and telegram are two thriving communities of developers and artists who come together to help each other out and use the programs that you are now seeing so don't hesitate to ask anyone for help if you get stuck but i'm pretty sure this video is going to be clear enough for you to not get stuck and own it and lastly for those who have seen all the videos that i create i highly appreciate it if you guys leave comments and likes on these videos it really makes my heart warm to see that the videos that i put out and the content is gratifying enough for you guys to react in such a positive way i always appreciate it if you subscribe for more content but that's up to you let's get going and creating your nft collection so the very first step in creating an nft collection is deciding on what art you want to create there are numerous nft collections out there and they all have different styles come up with your own style come up with a nice concept and start creating the layers for it this is the nerdy coder clones collection and you can see that all these coder clones looks different well they were all individual layers and the program that we're going to run makes all these different ones now you can apply this concept to any art concept as well i'm going to take an example and let me jump over to photoshop your very first process would most probably be creating a cool kind of nft concept and then separating the elements in layers such as these you can see that by separating them into layers such as the eye shine over here you can kind of hide them and put them on and it creates every time a different look and feel for instance you can have a small eye you can have a cat's eye you can have a different color eye and by doing these things you'll see that it kind of changes the image and the outcome of what you're busy creating now this is the very same concept that we will be using for our program our program will be able to take all your layers that you've created you split them up you export them and then you go and apply this to the note note program that i've written and then you run it in order to create thousands of different artworks the more layers that you have for your collections the more possibilities and the more artworks you'll be able to create i said this video is going to be a full explanation and indeed it is i'm going to show you your very first tip regarding photoshop if you have all your layers visibly selected by putting on this eye icon you can simply go to file export layers to files then go and browse and select a place and a destination to save this i'm not going to put a prefix i'm going to keep this as png the layers is going to be only the visible ones and i'm not going to trim the layers that's very important when i run this you will see that it runs through my collection and exports each individual layer in its own file this is very important because this is exactly what you'll need for the program to make use of it this is way better than doing it manually that's just an extra tip and i hope you like that because it saved me a lot when i did not know this back in the day so knowing this now i always use this so let's look at the next step after you have exported all of your layers once you have exported all of your layers what you basically want to do is split them up into different folders these folder names are very important what i mean by that is if we refer back to openc your folder names would eventually with my program be the property names like this nerd purple shirt coder and so on so therefore it is very important to have the folder names exactly spelled correctly how you would want it to appear on openc what you do with the folders are you split up the layers that basically goes to that folder right so for instance the eyeball i put all the little eyeballs inside the eyeball folder for the eye color i do the same and so on once i have all my different layers split up in folders i'm ready to go and i can now pull this into the program something that i should mention at this point is that if you open a layer and you give your layers each a name like i said spell them how you would like to see it on openc maybe with an underscore if there's a space in the name but the most important thing is that there's a hashtag and then followed by a number keep this in mind if your program breaks it's usually because this hashtag and the number is not there you will see that all the hashtag and numbers are hashtag 10. i'll talk about the rarity when we in the program itself but just make sure that all of your files have a hashtag with a number i usually create them all as 10 in that way it's easier for me to work out rarities later on now go ahead and open visual studio code you can go and say open over there and open the folder that has all those programs in it that we've downloaded in the beginning you can see that we have the hashtabs art engine over there which is 1.0.6 so i'm going to open this one simply just click on this folder double click on it to open it up you'll see that it's going to ask you to trust it this is visual studio and then we can see our folder structure over there perfect let's quickly import our layers that we've now created in photoshop our collection into this program so the very first step that you'll need to do is pull in all your folders so let's go to this layer folder over there if you open it you can see that they there's already a bunch of layers in there i'm just going to simply select all of those layers and delete them then i'm going to take all my layers and you are going to take your layers and drop it inside the layers folder make sure that it's in the layers folder and not outside of it or some other place so you should have your layers folder with all your different layers and inside of them you have your attributes your items and that's it that's the very beginning keep in mind like i said maybe start off with a hashtag 10 or some solid number because we will change it later on if we want to make some of these items more rare now if you want to understand this program fully you can go ahead and watch that purple series that i was talking about in the beginning but to just get up and running and set up your collection all you need to do is go here at the top where it says terminal you have to say new terminal up there and then you'll get a new terminal in your visual studio code ide once you have that because you have installed node in the beginning you can now simply run npm install like so if you type npm install in your terminal and you click enter it would start installing the dependencies for this project dependencies are programs and different libraries that we'll be making use of when we run this program for it to run successfully and build out your own collection the dependencies might take a bit of time to install but please remember you only have to install the dependencies once so you only ever have to run npm install once to get this node modules folder in your project and then you're good to go after that we'll just be running a single node index.js command every time we want to rebuild our collection so give this some time to install and then we'll continue going forward once the node packages have installed you'll see something like this it won't look exactly the same for instance this is my computer's name that's a question that commonly pops up so don't worry about this your name might be here for your computer but if it's done installing you'll see something like this all right perfect so the next thing that we need to do is have a look at what do we need to change in order to make this run and work to test it out open this source directory and go to the config.js file in this config.js file is the place where you will do little bits of changes and this is the only place that you really need to change to build out your collection the main place that you'll be changing is this layer configuration file each layer configuration exists of an object if i close it over there with this little arrow you can see that between these two curly braces this is all of the object's content so for each layer configuration and you can have as many as you want you have a grow addition to size right a grow addition size 2 basically how many nfts or artworks do you want to create and what is the order layer so in what order is this program going to generate these images okay so for instance this program will render a folder called background first then an eyeball then an eye color iris shine and bottom and top lid for instance you have to make sure that in your layers folder that you have the corresponding you don't have to have all these layers in this layer order but if you include one of these folders the spelling of this name background needs to be exactly the same as background if it's in your case something else like mountain it needs to be the same spelling and same mountain all right it's just very important because that's how the program picks up which one of these folders to grab next if it makes sense okay then the other important thing here is to make sure that you organize these in the correct order starting from the top to the bottom taking in consideration that the first layer over here will be firstly laid down on the canvas then the second and the third and so on let me go and add my layers that i've imported these ones are the default that comes with the program i've got a bottom lid i've got an eyeball that i want to render the iris the shine the top lid and the bottom lid are here but i've got these extra ones dark and gold and the thing is my top and bottom lid if i look in the folder structures i can see that they are purple but if i look at the bottom lit gold these ones are gold now i'm first going to run this collection to show you how it looks when i run the program by just using this basic configuration and then i'll adapt it to show you how you can make very unique kind of different races if you want to put it like that but in order for you to run a successful program sometimes you only need to have one of these layer configurations one is enough you can make a whole 10 000 collection if you really want to from one layer configuration if you have enough folders and files inside of those folders i'm simply going to render 10 images so every time you make a change to the config.js file please save this file in order for this program to pick up the new configuration next what you want to do and this is only after you have ran npm install remember you have to install the dependencies you can in the terminal now run the command node space index.js when you run this command and remember it is js not jx or something it's index.js it is this file over here this one's name that we are basically going to run if you press enter you'll see that the program thinks a little bit for the first time and then it will start off immediately creating the different layers it's very cool to see and if you get to this point where you can make it run for for the first time you're in a very good space to kind of create the rest of your collection successfully here you can see that we can see that we've created one two three four five all the way to ten now where are these images that's been created you'll see that it has an addition size and a dna this is just to inform us which ones have been created they are now located in this new bold folder they are separated by images and its corresponding json i just briefly want to show you what the metadata standards are for creating nfts and why is it necessary you can see that on marketplaces such as openc metadata is the information about a particular image and this metadata can tell us things like the name the rarity the properties and so forth it looks something like this and it's in the format of a json object that's why when i say that it creates a json folder each one of these images for instance image 1 which looks pretty cool by the way has a metadata.js this is that image's kind of information this is automatically generated by the app for you and you can see that it has attributes and these are the attributes that show up on openc you notice that it's the same name as the folder and the file that it selected for instance eyeball was selected and if we go to our layers there's eyeball the name and white was selected it actually takes off that hashtag for you automatically so don't worry about the hashtag and the number being included inside of your traits next it has a few different things it has dna the dna is built up by the different kind of layers that it contains in this image and it checks that against each other to ensure that there's a uniqueness it has a name that shows up on openc a description that also shows up an image which points to an image location i will show you later in the series how we upload this to ipfs and how we have to replace this image location then we have edition size date and the attributes that's about it for our json files there is one more underscore json metadata file and this file is simply the whole collection in one but this is usually to keep as a backup we generally don't use it now let's carry on creating our collection i can close this folder off and every time our nodespace index.js a new build folder will be created for us i have got a problem like i said i want my images to sometimes have the golden lids but i can't really put a golden lid just inside the layer configuration over there let's see what will happen if i do let me add the gold at the end here meaning that it would use this layer i'm going to save it and let me recreate this collection by running node index.js in the terminal again after it's created my images i see that this looks pretty cool but it's not the desired effect because now i've got these gold lids and they're not fitting with the purple ones so there is a little bit of a way around this you can go ahead and keep it as it was and create a new layer configuration if you want to do that you can copy everything from that curly brace to there and then paste it right below it keep in mind there needs to be a trailing comma between each object then in this one i can decide to have the gold one over there and i want the gold over here meaning that i want to run a collection which is purple which has the purple lids and one that has the golden lids if i do that i can try and run it but there will be an issue this is some of the issues that people find that they have they might run the program typing node index.js then it says go cool creating creating creating and then start saying it just breaks it stops right so let's change this to five let me show you let me run it again it doesn't create the 20 that i really want to now it creates five and then undefined it means because this is grow edition size 2. the first one should be 10 and then this one if i want another 10 to be rendered i need to make this 20 and so on if i had a third one and i really wanted this collection to be maybe out of a hundred then i would make this last one a hundred meaning that every time it grows so it grows first does ten then it grows to the next 10 which is 20 and then from 20 it will grow to 100 and that's how you do it i'm going to remove this last one save your file and let's see how we can create 20 different nfts so you can see that they are busy being generated and take note that it's running in a chronological order from top from um number one up to 20. if i open the images the first ones are pretty cool and they are all the purple ones but as soon as i go to 11 12 13 and so on you can see that they are now using the golden lids and that's some layer configuration that you can play around with and be creative i also want to just quickly briefly talk about the layer order if i simply remove this eyeball and put it maybe above everything you'll see that if i run this collection right now and if i check inside of these files the eyeballs on the top so it's very important how you layer your files let me undo that action one problem that i want to discuss with everyone is sometimes they find the error in the code down here and that is usually let's say i had a layer and i didn't put a hashtag let me just do that and it's black one and then if i run this collection you'll see that there's this error popping up this error explicitly says cannot read property split of undefined it means that you have forgotten a hashtag in front of the number all right and this number is to do with your rarity let's talk about rarities how can we make some attributes more rare than others well it's very easy let me open one folder and do it to one folder structure and then you'll see what i mean i'm going to choose the eye ball let's say that i have a golden eyeball a purple a red and a white one how the rarities work is it calculates add these all up together so for instance if i had i'm just going to cancel that and let me actually create get a calculator over here let's work with the calculator and work out the rarities of this eyeball layer if all of them are 10 i can simply go 10 plus 10 plus 10 right you you add them all up like that plus 10 which is 40. now 40 is the overall weight that this eyeball will carry but the golden one would be 10 out of 40 right and the purple one 10 out of 40 and then red 10 out of 40 and so on it means that these four layers carry exactly the same weight meaning that the chance of them being selected is all the same and that's why i suggest making everything 10 and then you can go and choose which ones are your rarest ones let's make some of these attributes a bit more rare i want this gold one to be very rare so i'm going to give it the attribute number or the rarity weight number of 2. i also consider the purple one to be quite rare so i'm going to make this a5 and let's say that the white one is pretty common and i'm going to make it 20. now all of these carry different weights let's bring up the calculator again and just work it out so you're going to say 2 plus 5 plus 10 plus 20. the total weight that this layer carries is 37 so you can see that 2 out of 27 37 is quite low meaning that the chance of the golden eyeball being selected is very slim making it way more rare now why is this important well if you go to open c and we look at the attribute you see that open c actually gives percentages to the attributes that it carries and that's kind of how you can roughly work it out and add these attribute weights and the rarities to your collection i also want to show you how you can work out the actual percentage of this of what the golden eyeball would be out of 37 so in order to work out the golden eyeballs weight out of 100 you can simply say 2 divided by 37 which is the cumulative sum of all these layers of the eyeball and then that is zero comma zero five and then you can multiply it by a hundred to get a percentage out of a hundred which is five point four percent now that's how you kind of work out the rarities keeping in mind that if you have different layer configurations where you include layers that's not existing in this layer configuration your attributes might be a slight bit off because obviously you're not introducing all of the layers this method only simply works super accurate if you have one layer configuration that contains all the layers or if you have more than one layer configuration but they all carry the same attributes but are simply in different orders anyway that being said it is still a great way of working out how rare you want your attributes to be a simple guide that i usually do is i open something like let's say the eye color and i simply say to myself that this one looks cool because the rare one and if everything is 10 then i want to make this one too the same goes for the one here at the orange and blue and purple i want to have this one as two meaning that in itself these two will be more rare than all of these and there's a nice utility that you can use to work out kind of how red these would be but that's generally what i do now that you have worked out all your rarity weights and you know how rare your collection will be let me show you a cool trick how we can mix the collection up because you don't want to have a collection where all your elements if we run this again where all your elements are from 1 to 20 and they go in chronological order meaning that they will go and run through these layer configurations because that is kind of predictable on what the person would meant the utilities that i'm talking about can be found in the utils folder over here each one has a very unique ability for instance if you've ran your collection and there are some files in your build folder like so you can in the terminal run the following command you can say node space utils like so forward slash meaning that we are pointing to this file and then you can say rarity data.js once you have that you can run it and this will simply work out for each layer you can see there's the bottom lit gold what the chances were and kind of what their percentages are out of a hundred percent now like i said this doesn't accumulate to a hundred percent because these gold layers aren't in this configuration but if you select a layer such as the shutter you'll see that this all adds up to a hundred percent and this would be the true kind of chance of it occurring because this is the actual occurrence that it's found all right and this is done for each one of these layers that is a nice util to use another util is to create basically a preview collage you can simply run the same command here at the bottom utools forward slash but this time run create preview collage and if you hit enter you'll see that in your builds directory a preview image is created for you of the existing images that was created keep in mind these utils can only be called after you have created a collection seeing that i'm busy with utils let me explain another utility let's say you have deleted for some reason the main underscore metadata file now this will not work if you've deleted any of the other ones only if you've deleted the main one which i'm not sure what the use case might be but it is there what you can run is node forward slash regenerate metadata file and what it will do is it will calculate all of these and regenerate that main one for you this can be handy if that's accidentally deleted i don't know if you guys can hear the storm in the background but in show business the show must go on right so let's carry on and look at the final and most important utility function it's called the update base uri now it has to do with the metadata file so if you look at all these metadata files and imagine there are thousands of them now we have created thousands of artworks well you will see that each one has a image attribute and it is appended with the edition number at the end dot png so you can see each one is different with the different edition number well we need to sometimes change what this points to because this needs to point to some kind of place on ipfs how do we change all of these files well this utility that we can use for that how you use it is you go to the config.js file and if you want to update the base uri let's just do this update without a forward slash okay so we're going to put it in just like so and then you save the file down here in your console you can now run node space utils forward slash update base uri once you do that you'll notice that all of our json files now have this new update as the image base uri plus it also has the um basically the image files you have to make sure in the config.js not to inc include that forward slash the trailing forward slash because it automatically added once it's here in your json file you cannot have two forward slashes here at the end it is okay here at the front but not at the end okay that is a mistake that a lot of people make and i just wanted to clarify that so these are the utility features they do absolutely nothing to your collection they just there to help you out now let's carry on and make this collection super cool so carrying on with the collection we need to make sure that our description here is replaced our description is the description that will show up on openc so make sure that you have replaced this line with your own description i say here remember to replace this so let's just type something in let me say the cool list nfts right the coolest nfts that's my description but you can make a long description if you want to i'm gonna leave the base as is because we will update this once we upload to ipfs next make sure all of your layer configurations and everything is running successfully if you run node space index dot js and you're collecting successfully like this you know that you have done this correctly so just play around until you get it right and that your collection runs successfully if you get stuck like i said head over to the discord community they will help you out all right now like i mentioned we have a problem all of these ones are in chronological order so this is the order that they will get minted in but what if i want to mix a bit of these golden eyes in between the purple ones i don't want all of them to be in a chronological order because what if you have alien races zombie races and so on you might want them to be mixed up you can do that so in the config.js file if you scroll a bit down there's this attribute called shuffle layer configurations and you can simply turn this to true once you do that and you save your file and you run the collection again by running node space index.js you'll notice that it renders in a random format so it first rendered 3 20 19 17 down here and so on till it's done now you'll see that they pretty mixed up and that's awesome a way that you can add rarity into this is by saying let me make let's use a lower number and i'm just using lower numbers to test you can use as big as numbers as you want to you can use thousands of images that you want to output but let me say i wanted to create 10 of these and only two golden ones i'm going to then make this 12 because i want to add only 2 to the 10 and then i want to render it this way i even create rarities within the folders themselves well within the layer configurations themselves so only two will be gold and there they are and that way you can hype up a community by maybe making sure or or telling them that there's a rare golden one or a rare special nft in your collection so carrying on through the config.js like i said there's a few extra things that you can play around with one is the debug logs if you turn this to true and you run your collection again you simply get more information on your collections rendering this is sometimes useful if you just want to see everything working look at the dna look at the metadata as it's being outputted but it's generally not necessary to have this to true so it's by default false your output size you can change to whatever you want to have it you can make a width if you want to have portrait landscape i always work in squares but you can make it any size you want to we can make a bit of a bigger images as well just remember to save the config.js file every time you make a change so there i'm rendering a bit bigger images so now you can see there will be bigger and higher quality next a lot of people ask what this background is well let's say i didn't have backgrounds at all which is in my case simply if i look at my layers it's simply a black image but let's say i didn't have them so i removed them out of my layer configurations and i turned this background to true this simply generates a random pastel color which you can set the brightness and the u of by changing this parameter so if that's set to true it will always create a random color as a base image so if i open the images now you can see that there's a blue background this one is green this one is blue purple green and so on okay orange and it just carries on yellow all right and that's basically what that attribute does it's mainly for people who don't have background images and wants to just simply render them out like that i don't really want this to render but i'm going to leave it on as true anyway it won't make a difference seeing that i have a background layer that covers it all before it starts then you can basically go and add extra metadata if i had extra metadata to add such as the artist so i can write our test and artist was daniel right i can also say maybe [Music] i want a surname which is my surname all right let's just say for some reason i want this i can save this file and then run node index.js again and then when i look at my json files these two attributes will be added on each one of these files so keep in mind this will be added to each one of these files and you have to have it in a format of a key and a value pair the key is always generally good to have in lower case that is a extra option that you can include i don't really need that then we have the rarity delimiter that is basically to do with if you look at your layers if you want a different delimiter so if you don't want a hashtag and then your rarity weight you can change it over here i generally leave it as a hashtag as well then the unique dna tolerance this is basically just set for your program to fail if you don't have enough layers to create enough images for instance if i didn't have enough layers at all to complete a cool collection like so and i save it and i run this program it will soon run out of dna exist and if there's a thousand dna exists like so it will throw an error saying that you need more layers to grow to this 10 artworks okay that's basically what this is it's the tolerance of how many how many layers it can find and then replace find and replace and if there's a thousand of these occurrences it means that you probably don't have enough layers let me undo this action perfect then the preview is basically to do with the preview set that you've seen in the utility so you don't really have to change these things at all the only thing that you really need to worry about are the layer configurations like i said make sure that you're happy with your collection and then once you are happy you can go ahead and render it so the most important part is your description your base uri but that we change afterwards and then your layer configurations how many you want to create so let's say i wanted to create a simple collection i also have the dark lids over here so i want to include that as well so i'm going to start off by having one layer configuration which is the normal one then i have got one with the dark lids so i'm gonna have the dark like so and then i'm gonna have the golden ones so let's say i want a collection that consists out of 50. i'm going to grow the first collection to let's say maybe 25 25 is fine then this one i want to grow maybe to 45 and then lastly i only want about five of the golden ones so i need to make it 50 to end my collection at 50 meaning that this will be 5 and you know 25 and then you minus 25 from this which is 20 of these ones and then five of the golden ones and that's basically how you can set up layer configurations but like i mentioned most collections only consist of one and you can put this to maybe five thousand images and render it okay i'm gonna undo that because i want these different configurations i am happy with my collection and i hope you guys came right to this program because at this point we are ready to move on to the next step all we need to do now is go to the terminal and for the last time place node space index.js this is our final render and at this point you can be proud of yourself because you've achieved finally rendering multiple different artworks from your layers so once this is done we're going to go ahead and upload it to ipfs for our next step we need to upload our nfts to some place where it's hosted now ipfs is a great hosting service which is decentralized there are many ways of uploading data to ipfs and using a service such as panata pinata is a great tool to use now you can go into pricing and then you can see that it starts from a zero zero plan which allows you up to one gigabyte of storage which is more than enough for my use case but even if you have more their plans are extremely cheap and it's there forever so go and subscribe or just use the free plan but once you have you'll get to a dashboard looking like this here you can see that i've already uploaded the nerdy coder clones collections and they are on pinata and on ipfs and will live forever now let's go ahead and upload the data that we've just created if we look in our dap that we have in the bold folder we've got all of our images in here and we also have all of our json files we cannot upload the json files at the moment and i'll explain why but you can go ahead and upload all the images so long because we need a c id from pinata to tell us the unique folder that it's going to live in let me explain now simply click on upload folder and click on the folder that we've created in our bold file images we want to upload the whole folder like so once you say upload you can give it a name at this stage it's good to call it the collection name that you're going to host it as it's just basically a reference it doesn't have to be anything fancy but i'm just going to refer to this as eyes and let's call it images like so so these are my eye images and it's going to upload them once this is done uploading what you want to do is copy the unique cid and then we're going to update all the metadata let me wait for this to upload and i'll show you what i'm talking about and there we go all of our images have now been uploaded and this is our unique cid it's identified by starting with a qm and you can go and view this data if you click on that i icon and it will simply load the ipfs through a gateway and the gateway that it's choosing is this pinata cloud ipfs but this is actually where your data is located so in theory when you render your metadata from the contract or when your contract returns metadata in theory you want it to point to something like one dot png and this will actually show us that image and this is the metadata that we want to save so that's why you need to copy this cid if we briefly go and have a look at the metadata structure that openc provides for us they can see that they prefer that we give it a format such as this it doesn't have the gateway in the front over here for instance here you can see this is the gateway everything from here to there but if we see opencs documentation they just want us to put this and then our cid to the folder and then they will find it for us they will basically show the nft metadata to us while the image in that case because remember we now only have uploaded our images but let's go ahead and copy this and i'll show you what i mean by changing the metadata we now have to go back to our program and remember what i said go to your config.js and replace this update part it still needs the ipfs colon forward slash forward slash and then that cid okay with no forward slash at the end once you have this save your file go down and please do not run node space index.js at this point what you want to run is node utils update base uri once you've done that like i said it updates all the json files to have these extensions so now you can see if i copy everything here to there it includes the forward slash five because it's now pointing to number five so we can verify that by replacing everything from here to the qm if we run this we can see that we get a different image and that's what we want so now that we have that go back to pinata and then click on upload again upload folder select a folder but this time we're going to select all the metadata so the json like so click on update or upload and then you'll see it needs a new name so this time we're also going to say i but how about we say meta data now this will take quick it's just a few files and once all of those files are on now we actually do have the cid that we are going to link to the contract later on it will pop up here once it's uploaded so i'm just going to maybe hit refresh and let's see but basically we have completed our first part now there we go there's the metadata so in essence if we look at the documentation again openc wants us to return this metadata for it and how do we achieve that well because we have the metadata we can now click on this icon and then once it's loaded through the gateway let's look at number 30. if we look at number 30 well we have to say 30.json if we look at number 30.json we can see this is the metadata and indeed there is our ipfs link like open c wants us to point to the image even though the json is its own ipfs link this points to the image alone and that's all you need to do now a lot of the nft projects have hidden images how do we accommodate for that well that's pretty simple what do i mean by saying hidden well a lot of nft projects kind of reveal the images only after the pre-sale or some kind of sale has ended and that's when you can reveal the images the real metadata and that kind of creates some kind of excitement how can we achieve that as well well we have our real metadata and images up already so now it's time to kind of emulate one that's hidden so what you can do maybe open up the minter that we were busy with the bold folder let's go and copy a json file anyone will be good and we need an image now i do have an image over there it's called hidden so i'm just going to drop this in there as well and i'm going to make a folder for each one i'm going to say um this is going to be the hidden image and i'm also going to say um yeah hidden is is probably a good name for this so this is the hidden metadata all right now you can drop your hidden image it looks like this inside the hidden image folder and then for our json i'm just going to rename this as hidden as well okay and then drop that in our hidden metadata file now i'm going to open the hidden.met hidden.json file and i'm going to get rid of all these attributes it doesn't need these attributes so i'm going to remove that and i'm going to remove the date the edition the image i'm going to leave the description i can leave right and the dna can go so i only need really these attributes we also don't need the compiler so this is all that we really need here i'm gonna write this image is hidden right and then we are going to change this once we know what that image url is so i'm just going to save this for now i'm going to keep this file open okay then let's go to banata i keep on saying pinata i don't know how to say it is it pinata panata pinata perfect go and hit hit and click upload folder select and now the folder that we want to select is this hidden image folder say upload and this time gonna say i underscore hidden underscore image okay gonna upload it like that and then once this is uploaded once this has refreshed i'll be able to copy that cid make sure it's the hidden image that you've uploaded cid so then i can go back and populate this but this time i need to say hidden dot png and to test this out you first copy this okay everything from the queue to the to that part you copy this and you go back and you click on this eye icon and you go and replace everything once you have the gateway here just replace it and call it and there you can see we do get that image so our metadata is pointing to the correct endpoint so save this metadata file now you can go back to pinata and upload another folder this time it's going to be our hidden metadata folder so it's going to be hidden metadata we're going to call it i hidden and then metadata and once that is done we are all set up and ready to rock we've got a few uploads we've got the metadata and the corresponding images and that's all we need and now we can have a look at the next step in the process i want to show you what you can do if you have made a mistake so let's say you are testing your hidden metadata json and for some reason you go there and you see that you have your uri forward slash hidden dot json right and you see that everything is perfect but the name is still that you don't want it to be hashtag one well there's a simple way that you can fix this you can simply go ahead and click on more and you can delete the file now deleting that file will remove it and if it hasn't been on long enough and pinned it won't be shared to all the different nodes so that's perfectly fine so we can go back to where we want to change that we can make an update and we can just say the this is the purple eyes right let's do it like this the purple eye save that go and do the same process again and because this cid is the same for the hidden image you can simply just upload that folder again this is something people didn't understand and when they made mistakes they panicked and they didn't know what to do you can just simply follow the same step all right i'm going to upload this again and then once we have that hidden under i hidden metadata we can go and view it again and then append it with the hidden dodge jason and we can see it's now fixed that's just something i want to do to test and it's also also a good idea to always test the end points before you upload them to the contract now for the next part in this part we will focus on deploying the contract to the blockchain it's very simple to do and all you have to do is open up visual studio code again then say open and find the place where you have downloaded the hashtags nft contract open this folder and in this folder you'll see there's a another folder called contract and the contract that we are going to be focusing on is the nft the simple nft underscore flat now the flat part means that all the dependencies have been imported into this big contract the actual contract that we are going to work with is here at the very bottom but there's also a copy of it over here you'll see that it's a simple contract that has a few parameters that we are going to play around with and then it has a minting function which only takes in one parameter that allows you to mint how many nfts you specify at the end of it all you can then also withdraw the ether after a lot of people have minted set up a bunch of parameter changes with the only owner modifier selected and there's a bunch of stuff that you can do with this it's a very simple smart contract but it does have the revealed functionality in it let me show you how you can make use of this contract and where you can deploy it now there are numerous ways of deploying smart contracts but a simple and effective way is using remix which is a online solidity compiler and by using metamask you can deploy to test networks and main networks easily the first thing that you want to do is select the nft the simple nft underscore flat dot soul copy all the contents in this file after you have copied it you can go to your browser and type in remix.ethereum.org once you're on remix you'll see that this is the starting screen what you can go and ahead and do is click on this plus icon over there and let's call it the i right i'm just going to call it i this is my workspace remix giza gives us these three files which really are only starter files it is mini smart contracts that they give to us as examples and you see if you click on them it starts creating artifacts just go ahead and remove everything so after you've removed everything you can just close all these folders and your contracts should be empty next right click and create a new file this file is going to be our final nft so i'm going to call it i i'm just going to call this i right there might be numerous eyes out there so maybe let me call it purple eye by convention it's good to start with a capital letter and you use pascal case for creating the smart contract name so purple i where purple is capitalized and i is capitalized too this is now our smart contract file what we can do now is paste all of the content that we have copied from our contract you'll see that a lot of artifacts get created this is because all the dependencies have now been created in this one single file everything is in here if you scroll to the very bottom you'll see that starting from line let me just go but up starting from line one two three five is our smart contract it's just called nft this is the very first thing that we are going to change so if you are not used to remix yet maybe go and watch other tutorials where i'm working with remix where i have much more extensive explanations on remix as a whole i'm just going to show you the brief explanation of how to change the necessary things to have a successful collection launch go ahead and make the necessary changes starting with the name i think we can change the name of the contract to purple eye and it's also a good convention to call the contract the same as what it's called in the file so i'm going to stick with purple i then in these in this section over here these variables this is kind of mostly where you need to update and customize this nft contract to your needs for instance i do not have to touch the base uri this base extension really and the cost i do need to change so cost is basically how much it's going to be for someone to mint one of your nfts now keep in mind that we will be deploying on polygon and ethereum so we would probably change the cost because the value of these two currencies are very different but ethers will stay the same ether is simply a nicer way of appending a million zeros to convert ether to way okay but ether basically just makes it a nice readable way for us to write how much ether this is going to be i'm going to say that my eyes are going to be 0.0241 so i'm going to make that the price in ether and if i deploy a polygon which we will do it's going to probably be a little bit higher i'll probably make it like five polygon but we'll get there so i'm going to leave this at 0.02 and we have minted 50 nfts if we go back to pinata we can see that in our metadata if we go and open this i we have only 50 nfts that's listed in here they're not listed in order but there's about 50 of them so obviously i want to keep my collection to 50. so this is the max supply which i'll change to 50. now if you have a big collection like obviously 50 is a quite small collection this max mint amount this maximum is the maximum amount that a person can mint per session for instance if they call the mint function they can mint up to 20 nfts if it's left at 20. but seeing that i only have a max supply of 50 i'm gonna say people can mint a maximum of two that sounds reasonable now this paused variable determines if your contract is paused if a contract is paused not the owner or anyone else can mint but if someone has already minted they can freely still use the contract send the nfts around because it's their nft it simply just pauses the minting functionality usually you would start off by having pause set to true and the reason for that is because you might want to deploy your contract and only set it to true once you have maybe made the announcement that everyone can start minting so maybe a good idea is to set this to true from the start then should it be revealed now revealed should be false because we want to first display our hidden image and then later on once the collection is sold out we will then reveal all of our nfts to to the world okay and then we have the not revealed uri which stays like that that's all we have to change so once these changes have been made you should see this green tick here on the solidity compiler section by the way how solidity works is it has a file system where all your files lives a solidity compiler section which has all the compiler details a good rule of thumb for me is always to put on enable optimization over here then we also get the deploy and run transaction section all right perfect but let's go quickly to the solidity compiler section something that you need to make sure of is this pragma line just make sure that your solidity compiler is in between these two specified versions of the compiler and it indeed it is it also will select it automatically if your com if your contract doesn't compile yet if it doesn't do it automatically you can tick on the automatic compile and it will do it every time there's a change in your smart contract once you are happy with all your parameters that you've set up go to the deploy and run transaction section you can find it here on this ethereum looking icon the environments that remix provides us is in browser blockchains these are the virtual machines these are great for testing so if you want to test these smart contracts you just select one of these and then you go ahead and do exactly the same and this won't deploy to a real blockchain instead it will deploy to the browser blockchain but seeing that this is how to deploy on the test net and then onto the main network we have to follow the injected uh web3 provider one like this one okay so make sure that you are on the injected web 3. now this is where you need to pay attention currently it says that you are on the main one network this is the ethereum main network if you try and deploy now your smart contract it's going to try and deploy on the real main network so in order to avoid that go to your metamask and go and switch the network over here on your rpc if you click here and let's select a different network now the rinkerby and the girly and all these other networks are test networks let's select the rinkeby network if we've selected the rinkebee network you can see that i've got some test ether in here you can get test ether from a faucet there's numerous videos on that but i can now be sure that i'm on the ring kobe test network and also see that over here it says rinkeby network 4 which is great when i deploy to the rinkeby test network this will actually deploy onto the ethereum network and we can test it on the test openc which is perfect for our use case because we want to do that to test that everything is functioning before we deploy on the main network which is network number one on a side note a lot of people have asked me how can they deploy this smart contract on polygon well that's very simple again you'll go to metamask and select which network you want to deploy it to i do not have the polygon test network but i do have the polygon main network here all you have to do to get the polygon main network on your metamask is google rpc polygon main network and it will give you the details to set up this rpc but once you on that you'll see that the custom network id is 137 keep this in mind because i'll show you this later on in the video when we create the dap anyway let's get going and let's actually deploy on the rinkeby test network so i'm going to go to metamask i'm going to go to rinkeby test network and you'll need some test ether for this if you don't have test ether yet you can simply test stuff out on the virtual javascript virtual machine but then it won't show up on openc because it's not really on a hosted test network like rinkeby is so let's go and test this out what you can do is you can go down under the ploy section you don't really have to change any of these you have to make sure that you have some test ether in there and then you can go and select your smart contract so make sure that in this contract section you have selected your smart contract if you select anything else you'll be deploying a different smart contract these are all the dependencies that our one has once you have done that you'll see there's a deploy section where we now have to fill in a bunch of details for us to deploy this so to make it easy to fill in all these details you can click on this drop down arrow you'll see that it gives us a list of things to fill in i've just placed a lot of t's in there but the first variable is the name and you can see that in our constructor function by the way a constructor is a function that only runs once and once the contract is deployed it will never run again so on startup we pass it a name a symbol an initial base uri and the initial not revealed uri all right how do we get those details and how do we actually fill these in well let's think of a cool name for our contract we want to call this the purple eye right so we're going to call this purple eye our symbol is going to be pe and this is just an abbreviation of purple eye then we need the initial base uri now we need to go back to pinata and i also want to show you that on opencs metadata standards remember what they said they want the format like this so you can go ahead and first type in ipfs colon forward slash forward slash i'm going to simply copy this because at this point we don't want to make mistakes even though this is the test network we need to act as if it's the real one so go and paste in ipfs colon forward slash forward slash okay then go to pinata once we're in pinata this is going to be this url is the actual metadata the real metadata url so i'm gonna click on i underscore metadata this is not the hidden one open it up and then once i'm here i need to basically copy all of this but this is now where there's an important thing to remember you need to have a forward slash when you deploy the smart contract over there so at the end add your forward slash please remember that at the forward slash i'm going to say it again at the forward slash because 99.9 percent everyone forgets that so add the forward slash at the end and then copy everything up to the qm then yours might look different obviously then go back to remix and then after this ipfs colon forward slash forward slash you paste what you've just copied so your uri would look something like this i'm going to go back to where we were and i'm just going to paste it in there so your ipfs will look um your url that you put in there will look exactly like this so make sure that it looks like this obviously your cid would be different but the format should stay the same let's go back into remix now we need to provide it the actual hidden uri metadata so let's go back to pinata and let's go find the i underscore hidden metadata click on the eye icon and let's do exactly the same so i'm going to wait for it to load and while i'm doing that i'm going to head back to the openc documentation make sure that i copy the ipfs colon for its forward slash the only reason why i'm copying it always is to make sure that i don't make mistakes you don't want to make mistakes of course you can update it using the update functions that i've placed in the smart contract but it's unnecessary to use them after a smart contract has been deployed but it can be rectified anyway let's go and see if this has loaded up so there it is i'm going to copy everything from the queue m but before i do that i need to put a forward slash and this time say hidden dot json like so i need to now copy everything from hidden.json because this happened from everything from the end hidden.json included up until the qm this is only for the hidden metadata so you're going to paste it after the ipfs colon forward size forward slash you're going to paste it there and it has to have all of that data in there including the forward slash hidden.json the top one doesn't have that it just has the forward slash i hope that is very clear alright next what you need to do and this is super important i cannot stress how important this is this next step before you forget go and click on this little button and this is after you filled in the details exactly as you are i'm going to deploy this contract before you click on transact you click on this little icon which copies the byte code now you can go back to visual studio maybe create a new folder and call this info i'm going to create a folder and call it info and then i'm going to create two files i'm going to create a polygon dot txt and i'm also going to create a new file and i'm just going to call it uh yeah ethereum dot t txt i don't think txt works on max i'm just gonna call it ethereum and i'm gonna rename this to just that so it doesn't it can just be a text file but seeing that this is the ethereum test network right because these are test networks so maybe it's a good idea to a paint test because it's not the main one going to put this there i'm going to paste everything that i've just copied now once you've saved this i think when you close the file and open it again it would have rearranged all the byte code for you like so just have this saved because this is needed when you need to verify your contract okay perfect let's now go back to the browser where remix is waiting and ready for us to deploy once you've copied that you can now freely press transact make sure that you are on the rinkeby test network you can verify that like i said on metamask here at the top as well as that you have some test ether this is not real ethereum this is you can get this from a faucet there's a lot of videos on that like i said once you are sure everything is correct you can hit transact on this button it's going to ask you to do a transaction and this is emulating what will happen if you deploy on the real main network so just hit confirm and just a side note please review the code before you deploy your own smart contracts and then you can see after the contract has been mined on the blockchain you'll see it pop up here at the bottom you can expand this and at this point it's a very good idea to kind of look at all these functions that the smart contract provides there are a lot of smart contract features and functions but the main one is this mint feature i can now go ahead and as the owner because i'm on the owner's address over here i can now go ahead and try and mint the function will not work if i try and mint one why if i say transact it says this transaction might fail and the reason for that is because our smart contract is still paused you can check the status of your smart contract by clicking on some of these blue buttons you can see that our base extension is json our cost is that much in uh away and then we can also see the max apply we can see the maximum amount at each given time the name the not revealed uri which is the hidden one we can also see who's the owner of the smart contract if it's paused or not and indeed it is um and then you can see if it's revealed or not it's still false and you can also see the symbol these blue buttons are basically call functions so they don't cost any ethereum or gas they do cost a little bit of gas but you don't pay it but it's basically just reading from the smart contract as we can see we have a paused contract so how do we unpause it well there is a actual function that we need to need to use and this is now a transaction a send function where we need to transact so in this pause function you can now open up your contract so let's say pause is now going to be false if i type false and i click on pause it's going to ask us to do a metamask confirmation and once i do it's going to mint on the blockchain saying that we need to change the status from paused to false if i now try and transact and i click transact you can see that it's trying to mint it's going to tell me the gas that it wants to me to use i'm going to confirm it and then it will actually mint one on my address that i have specified over here after the transaction is successful let's just wait for it over there we can also keep track of it if we go to metamask and see there is the mint and it's being being minted keep in mind that this is all happening on the test network but it is really on the test network and i'll show you now that it shows up on openc we've got a successful mint so now i can see if i click on total supply on the call functions that it's one i can go ahead and actually try and mint on someone else's address as well let me see if i have an account that has more test ether this one also has some test ethereum so i can go ahead and connect it and this will change and then i can also go and try and mint one over here so instead of trying to mint one i'm going to try mint three just to show you that because we've set our maximum mint amount to two if i try and transact it's going to tell me it's going to fail this won't happen in the real world it will fail but remix is nice enough to let us know so let me try and mint two at a time i can transact and it says the gas estimation error occurred because it can't really estimate how much gas is going to need to actually complete a successful mint and that's these days a problem that you need to kind of specify the amount of gas that you need to you know put through but also have the correct parameters so what are the reasons why this would fail well if you see here it requires if a person is not the owner that they need to pay for it and we know that we need to give it some way with ethereum right into the smart contract to mint one nft and one nft costs us 0.02 ethereum so how much weigh is that well we can go down and see the cost in way over there so i'm going to copy this cost i'm going to go up and put it here in the value parameter once i've done that this is for one nft so i will be able to mint one but not two so i need to kind of um up the value to maybe four just so that i can mint two so once i've done this i can say transact and there you see it's now going and making a transaction sending 0.04 if i confirm this it would start minting my nft now that we have successfully minted another two we can go and double check it on the total supply it should now be three so if you click on total supply it should be three you can also take the address that you've now used to mint these and place it in functions such as the wallet of the owner and if we do that so let's go and get this address that we minted with if we do that we can see that this owner now owns the id number two and three we can also add whichever token id we want to and we can get returned our token uri this is the uri that openc uses to go and grab the metadata and here you can see it's still hidden because our contract is not revealed yet i'm sorry for the thunder in the back but it's beautiful i love the nature so we're just gonna keep on going with the tutorial i hope you guys can still clearly hear me anyway we also got some interesting functions on our smart contract such as the token of owner by index this is an array of the token owner's personal index if we said index zero of what the owner of this contract owns is number two and indeed it is that's the id because it starts at zero if we were to put the owner's address and put zero it would be one because that's their array right then we have uh token by index so if we query token index by zero this should be one if we do one it should be two these are just this is just how it works it runs one ahead because we start minting from one then we also have this function which is to do with the standards of the contract and the owner of the token id so if i say who's the owner of token id3 then i can see that it's this address that we've minted it from and there are numerous of cool features that you can play around with we can also check the balance and you can see the balance is two of this address and so forth then some of the more complex features of this contract but very cool is you can actually set a new cost a new base uri a new base extension you can safe transfer your nft to someone else then you can also reveal the smart contract by just clicking on it and a very dangerous button is the renowned ownership do not click on that if you do not really want to give the ownership away then you have this pause that we have tried and obviously the mint and approve approval basically just approves someone else or another contract in order for them to interact with that nft and that's usually why you see a lot of approvals when you interact with openc lastly we get the withdrawal button now as you know we have sent some ether to this contract when we mint it with this last person let's go and try and call withdraw but let's stay on this person's address and see what happens it's going to fail and the reason for that is because we are not on the original owner's account let me switch back to the original owner and then call this before i call this i want to verify how much ether i have in my account and this is 9.51 if i click withdraw it's going to kick off a transaction and once it's successful we should see the total 9.51 change and indeed it did and i withdrew all the funds from this contract that people have paid to mint right and you can call this over and over and over again something very important to do at this stage is to at the top here copy your contract address by clicking on that copy button head over back to our visual studio and because we have this file that we've created let's add a few spaces and put our contract address in there for our test contract this is the contract address that we can find on the test network scanner right this is just information you want to keep and i'll show you the reasons why in a second but if we go back you now see that this is your control panel to work with your smart contract that's live on the actual blockchain although this is the rinkeby test network we can still see that this is live and it's interacting with the smart contract that's existing on this blockchain now in order to see our work we can head over to openc well not the real openc the real openc will only show your artworks and your collection if you have deployed to the network with id 1 with a real main network and therefore because we have deployed on the rinkeby test network not the top one here the main network which will cost us real ethereum we can still test it on it on openc but we have to go to the test net so we have to type in test network so you also will see openc will actually kind of suggested over here so i'm just going to click on it over there and the test network url looks like this so once we on the test network we can go ahead and go to our profile like normal and we will actually see big reveal there is actually the purple eye collection is live now because you own this collection you can actually go to this collection yourself and on the purple eye collection you can click on it and you'll see there should be three items because remember i minted one and then on another address i minted another two so there they are and they're not revealed yet and you can go and edit your collection if you want to put a new image over there and a background image you can click on the edit button at the top edit your collection and you can go and fill in all these details something important is that you can set the percentage of your royalty fee here so you can maybe set it to 2.5 and then you set up wallet address that you want this to be paid to now that's all and you can hit submit and update but because this is on the test network i feel there's no need of doing this simply we want to test our smart contracts and then once we happy you deploy to the proper network if you are happy with your smart contract and it's working fine you will then go the step further and go and deploy it on the real main network but we haven't stopped testing our smart contract let's say our sale has ended and we want to reveal the smart contract we want to reveal these images well let's click on the collection and just have it open like this let's go back to the remix control panel and if you haven't closed this yet you can still work with it on your browser you can keep this open for as long as you want i will show you a way however to get this back if you accidentally close down remix all right so next we can also see that if we click on this reveal button making sure that we are on the owner's account we can say confirm and once we have done this it will take a transaction and once the transaction is complete then our collection will be revealed on openc let's wait for this transaction to finish we can see that it might take a few seconds there it is it completed reveal and if we go back to open c now and we refresh this page we can see that if we go down below it's not refreshed the metadata yet and if that happens all you need to do is go on to your collection and click on refresh metadata up here this tells openc that there's new metadata that it needs to pull in and it will go and do so and then once you get back to this image it will actually show up if you have bigger collections it's a better it's better to go and call openc otherwise you can just tell the community to hit refresh metadata that's why this button is there users can also freeze their metadata and do whatever they want to but let's refresh and see if it actually pulled in we can see that it's not there yet we can however go to remix and inside of inside of this function or on this function token uri if we call it again i'm not going to change the parameters this hidden should change to the proper uri and indeed it does so we can expect this to work we can also just verify and test this by copying what is being returned and pasting it in our pinata test case that we've used so we can see if we call this there's our metadata so open openc will update this as soon as you have clicked refresh let's give it a second or so while we are waiting for this to update the metadata and for them to reveal the the nft data i'm just going to hit refresh again and on this one over there i'm also maybe going to hit refresh metadata it says this item is queued and will update in a minute or so once we are waiting for um while we're waiting basically let me just go back to remix and show you what you have to change to deploy this on the main network you basically have to change nothing all you'll need to do is change your metamask and where it's pointing to so once you're happy with everything you have tested it you can simply go to the ethereum main network like so make sure you have some ethereum in there and then once you have these already filled in if you change something in the contract it's going to go away you need to redo this and you need to recopy everything like i showed you but if we hit transact it's going to say that this is going to be the cost and if i say confirm it's going to say this is going to cost me 414 dollars plus the gas so then you can hit confirm there's no funds in this account so i can't do this but i will show you how i can deploy on the polygon network so let me go and show you how i can deploy on the polygon network and actually follow the verification steps as well now let's just double check on openc maybe they have updated it so oh i have to be on the rink be test network though let's go rinkerby perfect now you can see that the metadata actually has updated and how can i see that well it now says hashtag one which is the actual name of this nft we can also see that it says the coolest nfts meaning that it is pulling in the right metadata it's just not refreshing the image so that might take some time but give it some time for for the metadata to pull it in if you are really stressed about it you can always verify it like i said you can always go ahead and test it out so if you want to go to your remix again and you want to say owner of token uri you can go and duplicate all of this up until the qm go and find that pinata link just try it out like so and then you can basically double check and make sure that this says ipfs colon colon and then you simply replace that here at the top like so once you've done that the image shows up and how lucky are we this is actually a golden one you are quite assured that this will update okay so just give open c it's time to do that now we can also see that this one still says purple ike and this one says two hashtag one and this one still needs to you know update the metadata but let's go ahead and deploy on polygon because a lot of people have asked me how do i deploy on the real polygon network as well just so by the way as soon as i went back to openc it's now pulled in the images as well and now you can see that they are revealed and how cool is that so let's get going let's do the polygon version this time so all you need to do is go back to remix okay and we can actually now get rid of this smart contract but this is not the flow that i usually follow i never get rid of a smart contract before i verify it but seeing that this is on the taste network i really do not care about this smart contract i usually do the following steps only for the mainnet contract okay so this is the real deal this is where we either deploy to polygon or ethereum and each one will work and the reason why i say that is because i just proved that i deployed on the rinkeby test network for ethereum i'm not going to deploy to the real ethereum network that is very expensive to just make a tutorial on and i don't want to put messy content on that network right but polygon is affordable enough and i can really dive into doing it on the real network and test it out and actually show you guys how to do it properly on polygon and ethereum but all you have to do and the only change you need to do both for ethereum mainnet and polygon mainnet is simply go to your metamask go and make sure that you're on the network that you want to deploy to so if it's ethereum you'll select ethereum you'll go and make sure all these details are correct the correct contract all these things are in there as it should be you copy the the encoded byte code and you transact and then you go and confirm and you pay the gas fees and everything that you want to deploy for this is quite high but anyway that's how you're deploying the polygon mainly on the ethereum magnet sorry when we get to the polygon magnet i have already set up my rpc on metamask which means it's just pointing to the main network so i'm going to switch to the polygon main network and once i am sure everything is fine you see it's exactly the same process you copy the byte code like i said this is for real so we're going to copy the bytecode first we're going to go and do our best practice of pasting this somewhere so we have a so we keep track of it remember we did the same with our test network but this is now the polygon one so if we go back we can go ahead and make sure we are happy with everything we i do have to mention that 0.02 polygon or matic is quite cheap but i'm going to just keep it like that usually when you work with polygon this is you can make this in the you know one two three four five six it's not ether but i'm going to leave it like that because as soon as you change the smart contract now you'll have to retype in all these details but go ahead and make sure you configure it to your needs so now that i click on transact i will get the popup and i'm going to be saying confirm now what happens is exactly the same process that happened when we were deploying to the test network on ethereum but now this is actually doing the transaction under the real main network of polygon and you'll see it pop up on the real mainnet and we can go to the real openc and i'm going to really reveal it so let's wait for this to finish in the meantime when this transaction is finished and it comes in here or if it gets finished and you find it on the scanner you need to copy that address and also follow the best practices where we can actually then copy the address and put it in our file that we are saving all of our details to i'm gonna go ahead and speed this transaction up okay it wasn't necessary it's done means that it shows up here at the bottom there's the address i'm going to copy it immediately the address and going to visual studio i'm just going to make a few spaces and paste it this is now our main network's address and you can actually scan this and it will be live there so the next thing that i need to do is i can go back over to uh my remix so the next thing that i need to do is just open it and make sure everything is fine maybe i want to mint one so what i'm going to do is i'm going to unpause my contract so i'm going to say this should not be paused because i want to actually um i want to interact with my smart contract so let's kick that off so long so that the contract starts running and it's done and i want to mint a few so i'm going to actually meant five for myself and it says gas is not going to work why is that let's see why is it still paused so let me go and see if it's paused [Music] it's not it's not paused so i don't know why it would do that so let me just quickly check oh because we cannot meant more than two at a time fine so let's mention some element two it's gonna pop up metamask and i'm minting two and this is how you can do it from your little control panel so to speak okay now the other stuff that we need to now go and copy which is very important for the smart contract and i'll show you in a second is the abi of this contract because this is what we'll use when we create the dap okay it looks like our transaction is successful if we look at the meta mask of the day it's gone through so that is pretty cool so the next step that you need to copy is the abi so what you can do is go to the solidity compiler make sure that you have the exact same smart contract um that you use to deploy your contract in here and then down here where it says contract go and select your contract once you've done that you can go ahead and copy the api okay then go back to visual studio and i'm going to make a bunch of spaces and paste the api so i'm just pasting in all the information that i need right i'm keeping track of everything and i'm going to show you how useful this is later on i'm going to make another basically another file so in the info i'm going to say create new file and i'm going to say polygon contract and this is going to be the polygon contract that i used basically everything in here so i'm going to press command a to select the whole contract copy it go back and paste it in here the reason why i do that is for if we lose the ability to actually salvage our remix when i do that you'll see that there's a way that i can re-upload this contract onto our remix platform meaning that i'll have access to this beautiful control panel again otherwise i will have to make use of the polygon scans methods to kind of execute everything on there but i can only use polygon scan for instance polygon scan over here and ether scan if you have deployed this to the ether scan or to the ethereum network if the smart contract is verified how do we verify a smart contract well at this point this is why we have copied all this information let's go ahead and actually verify the real smart contract that we have just made for the polygon network all right here we have all the details we have all the abi constructor functions we've got our abi contract functions over here the json format and then also we have our contract address so go ahead and copy the contract address that you have saved go back to your browser and go and search for it you're going to basically search for this now either on ether scan on polygon or polygon scan based on which blockchain you have deployed to now i can see that here's my smart contract and here is the purple i p e smart contract and there's already two minted right and one address owning it because we just meant it to so i can see that there's two minutes how cool is that your smart contract is live and it's pretty cool so technically if i now go to open c let me go to open c and check it out so if i go to my profile i should see that there's two new items in here which are these eyes so how cool is that it is pretty cool now i noticed that they are on the polygon network over there but i'm not seeing the the actual images but i do see that it says purple iv ii purple iv ii and that is because like someone actually have created this before so if we search for purple i there's actually a collection that exists that's called purple i i didn't know that but now i've also got a collection but it's v2 so that was an accident um but yeah if there's a contract with the exact same name it will show up like that now i don't see the image yet and i think it's just because um openc is a bit slow with this so if i maybe refresh the metadata i do know it is putting in metadata and the reason why i know this is because it says purple i there and in the description remember we typed in this image as hidden so it is putting it in i think it just takes a bit of time for it to you know fully populate because it's a new nft or something like that but we can go ahead and test it like i said if you want to always go and test and make sure everything is fine just go and query that token uri so maybe we can query number one we can see that this is the json and again we can just go and replace it in there once we have it we can see our image is located at this endpoint so we can then replace that and if we hit enter there's our image so openc just takes a little bit of a while it also did this just now on the taste network so nothing to be worried about all right so that's what we have for our purple um purple eye now and i'm also going to just go in here i'm going to try and refresh that metadata just so that we if we come back here that this will already be showing so all right we will have to wait for that to to reload while we wait for that like i said the we basically have our contract now set up in place now the important part here is to verify the contract for us to in a later stage either interact with it directly on polygon scan or ether scan like i said this is a contract that can be deployed to both networks you can see that we have a read in the right but there is no abi and someone needs to verify the source code because you are the owner it's very advisable that you do it so we're going to click on verify our source code and this process is very simple so let's fill in the details to verify our smart contract what we can do is make sure that this is our smart contract address so we can verify that by going to the details that we've copied and indeed it is so the next thing is we need to select a compiler to find that out we can go back to remix go to our compiler section and see that we used 0.8.7 so when we go back to polygon scan we can select well first we need to select a single file because we didn't use multiple files we use this single file and then we select our compiler which was 0.8.7 and then lastly here it says if there was a license to find out the license again you can go to remix and scroll all the way to the top of the contract and go and find a license which is a mit license so we can just say this is mit and then we hit continue after that polygon scan is now going to ask us a few more questions and the first question is going to ask us was this optimized and yes we did turn on optimization remember when i said turn on enable optimization over here that's only that's the only thing it refers to basically then what we can do is we need to paste our entire file in here now i already told you to go and copy your contract you can either copy it again from remix or copy it from your contract that you've saved it now as your info files let's go back let's paste the contract in here lastly it's going to ask you for this abi encoded abi constructor arguments this is only needed if you passed in constructor arguments when you deploy a contract and indeed we did because we filled in all this information that's why it was very crucial to copy this if you haven't done that it's very difficult to go and verify it afterwards remove everything in this file then go to visual studio code go to this polygon file that we have selected while we have copied and pasted and then go and check this last bit of the byte code right and select everything up until the last trailing zero so your byte code might look a bit different but you'll see that it all looks kind of the same with a bunch of zeros so you'll see that there's a line of zero line of zero line of zero and then there is the last line of zero here at the top you can see it ends at the two and then it starts with zero and it has a long trailing zero piece take everything from that zero all the way to the last zero copy this and then head over back to polygon scan paste it in there and say that you're not a bot once they are verified you're not a bot you can click on verify and publish and it should go through on the very first try a lot of people are struggling with that and the reason for that is because they didn't copy the abi encoded data when they deployed the smart contract so this should take a few seconds and then our smart contract should be verified let's see perfect so it says successful everything worked out there's our smart contract there's all the byte code and it's looking good so from now on we can basically go back to our smart contract and by the way we should be able to search for it let me just go back we should be able to search for it here in the search bar so if we type in purple i there we go that is our smart contract so you can even search for it like that but that being said if we now click on the contract over there you'll see that it's verified meaning that we can actually query everything in here and this is very good because now technically we do not even need remix but that being said there's a bunch of stuff we can query but we can also write so when you read contract and write contract reading and writing are two different concepts where i told you about reading a contract is the free kind of functions of the contract calls where writing actually takes some gas that you need to provide it's the same concept as looking at these orange buttons as writing plus the red one and the blue ones as the reading okay so you can also withdraw when from your smart contract when you are doing this from remix or from polygon scan or ether scan what you do is you can go to the right contract and you need to just verify and log in with your metamask wallet so let it just load you can see it asks you to connect over there through web3 so i'm going to connect then you can go down and alter everything in your smart contract you can reveal you can pause the smart contract you can do everything you want to that you are able to do in remix but this is only after you have verified your contract and that's why it's very important to follow the steps but let's say you want to withdraw now this was very confusing for a lot of people this withdraw method all of a sudden has this field right and it's strange because on remix it doesn't it is just a withdrawal well on polygon scan that field is basically the value field and that's why it's there so please if you withdraw do not put a value in there you will only be sending money to your smart contract so if you want to call the withdraw put a zero because you don't need to send money you just would drawing because you are the owner and you can simply call it all right and that's all how you that's all how it works basically from polygon scan or ether scan the verification steps are the same the way you call smart contracts are the same everything is the same and there you have it now you are done and you have a successful contract on the blockchain which is verified too let me quickly show you some nuances and tips and tricks with remix let's say you got back to remix and for some reason your contract was gone you closed the browser you don't know what to do don't panic all you need to do is head to the file where your smart contract was saved go and copy that go back to your browser paste it in there wait for it to get a green tick over over here on the left hand side then go to the deploy and run transaction section make sure that you are on the environment injected web 3 and that your metamask is pointing on the same network that that contract was deployed to next go back to visual studio or wherever you have saved your contract address if you've lost it and you can copy that go back to your browser and then you need to paste it in here address at address right do not go and deploy this you need to also make sure that you're on the right contract so make sure that you're on purple i contract even though this looks tempting to go and enter these details again do not do that because all you will be doing is deploying another instance of your contract on the blockchain and that you don't want you want to interact with the same instance if you want to do it through remix otherwise you can just carry on interacting with your smart contract on polygon scan or ether scan if it was ethereum okay but that being said if i click at address you can see that i've got the address back and how magical is that now if i click on total supply it should be 2 because it is 2 and it is reading from the right contract just so by the way it took about 10 minutes for openc to realize our metadata is there and the two images are now live and you can see them let me go and show you how you can now reveal the metadata from polygon scan or ether scan like i said you click on contract you connect your wallet and once you are connected and go to the right you can just say reveal once you do it from here it is just the same as if you were to do it in remix and that's why this is a cool thing to know so that you don't always have to depend on remix because everything can be done from polygon or ether scan let's wait for that transaction to finish and then we're going to just refresh the metadata i'm going to maybe speed this transaction up a little bit so it happens a bit quicker as we can see the reveal is successful so now let's go back to openc and then once users are on their nft they can just hit refresh metadata like i said let's go back to the collection let's hit refresh on the other one and if you want to do this in bulk i think you can contact openc and just tell them to refresh all your metadata for the whole collection but that being said as soon as one is refreshed i think it triggers something in openc that tells it to go and automatically refresh all the other ones if we refresh this page now or maybe give it a minute or so you'll start seeing that the actual names get populated for instance we still have purple eye over there and purple i over there if we open the nft it should start saying maybe this is hashtag one and the description should change along with the image and it would have properties so let's give that a second i'm not going to wait for too long because i want to actually show you the next part and the final part and that is actually hooking this contract up that is now live on the blockchain again polygon or ethereum to the minting dap for the third and final step you have now downloaded in the previous tutorials remember the hash flips minting dap this one so go ahead onto your visual studio code and double click on that folder you will now see that it has a react js like structure and it's very simple to start this up all you need to do is start a new terminal so click on terminal here at the top say new so that you have a terminal down here and we follow the same process as we did with the creation part so we first have to run npm install so type that in the terminal and hit enter this will install all the dependencies that we need to run the dap and we only have to make a few different variations while changes inside the config.js or json file and then once we have changed the config file it should automatically update to our mounting mintingdap and i'll show you how you can customize this to your needs and then you can simply go and publish this on a shared hosted service you can host it on github pages it is simply a web page let me show you how easy it is to actually run this application now that you have installed all the dependencies all you have to do is run npm run start at the bottom of your terminal once you do that it's going to start up a application and most probably open up a localhost server on your browser this is very cool because this is how you get to test it out before you actually need to build it so let it run it's busy running at the background now it's just opened up on localhost port 3000 which means it's running locally on your machine you can just check the progress by going back to visual studio and you see that the server is busy starting up once the server is up and running you know it's local so it can just be viewed on your local machine here so what you will need to do is after you are happy with your changes and i can see that it's now running so if we go in here you can see the local dap running on your machine but basically after you happy we're going to do a build and i'm going to upload it to a shared hosted service let's see how we can customize it but let's first talk about what is happening over here so firstly this is a dab that you can reuse and there's a few nuances that you need to know about configuring this tab but once you are used to it you will be able to make multiple projects using this dab what you can do is it will be connected to your smart contract and it will have your details and everything is customizable if you click on connect you'll see that there's buttons popping up where users can actually decide to mint more than one nft and if they go in mint it will actually go and try and mint four nfts how do we customize it to our needs let's take a look so the place where you want to go and customize this dap is mostly in the public folder there is however a small exception for what i did i made the minting limit 2 so i might need to go and change something in the source folder but i'll show you how to do that as well so let's take a look at the files that you can quickly replace to create your own mintingdap you can open the public folder and you'll notice there's a config file in here inside the config file there's your images now you can go into your images and you can see that there's a background a gif and a logo now i've already prepared those files in here where i have a gif i've got a background and i've got a logo now all you need to do is you basically take those images and place it inside of those of that images file so folder so you go and replace it and once it's replaced you can simply go back to your dab you can see that my logo is updated there's a new background at the back and i've got this cool gif of this eye so these eyes look freaking cool it actually looks creepy but anyway you get the idea we can go back and after you've replaced your images we can have a look at the theme so in the theme dot file.css i've made it so that you can choose your colors now you'll notice that there's a primary secondary and accent color the primary color is the color that's most visible on the screen but also it has a primary text for a good design always choose a contrasting color for your primary text or your secondary text or your accent text for example if i were to select this purple i can see here at the top that white text works best if i go lighter darker text starts working better if i drag it around you can see there at the top but i'm gonna choose purple maybe that purple and then i'm gonna leave my white or my primary text as white next what goes good with purple well if you look at color schemes yellow generally goes good with purple but i'm going to make it blue rather like this blue i like this cyan kind of blue i can see that a darker color works with that so i'm going to try and make a darker color over there and this accent is usually the box now maybe the box we can leave as white with some black text let's see just by doing these few layer configuration changes how different the dap starts looking this is pretty cool but it's not hooked up to our smart contract yet so the only thing that you will need to do to hook this up to your actual smart contract and keep in mind this is for polygon and ethereum both will work you just have to configure the settings go back to visual studio and click on the config.json file you'll see that it requires a few different fields that you need to update so basically the smart contract over here is simple so we can go to polygon scan let's go and copy that we go back to visual studio code we're going to paste it in there if you want the scanner link you can simply just call maybe this and let's just click on the contract address itself to get a scan link so i'm going to copy that i'm going to paste that as my scan link then i have a network now i want you to notice something if i change this to ethereum and i change that to if because that's the symbol and i change that to 1. i want you to see what happens to the dap when i save it so i'm going to save this dap and then i need to jump back to it there we go so this dap now is configured to work with ethereum you can see that it's charging eth and it's also saying connect to the um ethereum if i say connect it's going to say change network to ethereum so i actually have to go and make that change in my meta mask because this is very cool it's automatically updating and realizing that we need to connect to the ethereum network so that's just what i wanted to mention over there but seeing that we are working with a polygon smart contract now that's why i'm going to leave it as polygon so polygon's main network is 137 matic is the symbol and then also polygon is just the name that i'm going to use we're going to change this name now to be purple eyes but let me let's put a space so purple eyes my symbol is going to be p e and then the max supply is 50. now the cost we need to work this out i know that i said that we are going to sell this for 0.02 remember so i need to put this in here please be aware that this is the display cost you need to copy this and take it into some kind of converter so a good converter is this website where you can put your heath in there and even though this is matic you still work with decimals of 18 so you can put your ether in there just pretend this is your matic and then copy the whey amount go back to the configuration and put your whey amount in there then the marketplace is going to be open c but if we want the actual link we can go to to our open c link and check it's updated the metadata guys how cool is that our purple eye collection is live and it is actually so live that you guys can actually go and buy them they are really cheap 0.02 matic um but anyway what i just wanted to show while we are here you can see that all these traits have been pulled in and these will get percentages as people start buying the collection and it's and it's busy growing so that's pretty cool but anyway let's go and copy our marketplace link which is that one and we can go back to to our dap we replace it over there and then there's an optional parameter you notice that on our current dap over there there is a background you can simply switch that off by changing this value to false like so if you do that you'll see that there's no background but i like the background so i'm going to leave it in there perfect you are basically done but there are a few changes that you still need to make you need to basically go and put your abi that you have copied into this folder a file over here you need to replace it otherwise it won't have the correct abi settings and that it needs to use theoretically it should be the same avi because i've used the same contract so let's try this out but in a safe way and making sure that it will always work like i said you can get your abi if you go to your remix and you go and select your contract remember like so just make sure you have the right contract and then copy the api that's why we've saved it before for this purpose as well but going back to this file over here the abi.json we can select all i'm going to paste it in and then i'm going to hit save perfect so now everything is hooked up the only few changes that you can make is in the index.html page if you want your title to be different you can change it over here and you can just maybe type the purple right and that's pretty cool so you can change it there and then what you need to do is you need to add a logo that is 192 pixels by 192 as well as a 512 by 512 and a fav icon and that you can just simply create these images and replace them in your manifest file which is the last file you would like to change you'll see that there's a short name and a name this is basically if the app is basically saved offline so it's good practice to just change that out too so i'm going to do that like so so now that we have the purple eye and everything is set up i can go back actually to my browser and check out the dap you can see that indeed we have 0 out of 50 minted because we're not connected yet if i try and connect it says change to polygon because our contract's on polygon so i'm going to swap it out i'm going to say go to polygon perfect then i'm going to connect it says we can buy there's already two out of 50. i'm going to try and buy one one caveat that i just want to share is remember that in our smart contract we made the minting amount very very low now the problem with that is our dap will allow us to go over that and it won't allow the person to mint if you want to rectify this you can simply go into the program go into the source directory in app.js and scroll down to the part where it is controlling this increment part there it goes and decrements and increments to 10 and that is what the limit is set to but you can change it and i'm gonna make it two i will create however a nice configuration for that i just didn't think of it at the time i'm just going to save that anyway but you probably don't need that if you have bigger minting amounts than 10. so just going back i'm just going to refresh my app i'm going to connect and now you see i can't go higher than 2 or lower than 1. i'm going to try and buy one so i'm going to click on buy it's going to pop up my meta mask and it's going to tell me that i'm about to mint one and we're going to pay 0.02 matic which is perfect and if i click on edit i can see that 285 000 gas is being sent and the reason for that is because in our configuration.json this is the gas limit this is usually a safe gas limit to put for one mint however the app works if you increase the buy the app works in a way where it multiplies that by the amount of nfts that you're going to mint generally this is more than enough and actually a little bit too much but it's better to be safe than sorry so if you are working with the ethereum network you might want to change these parameters a little bit but for matic it's fine it allows for enough gas to fully mint the nfts that's needed and keep in mind the gas that's not used will be sent back so we can just reject this i only want to mint one some well actually i'll meant three so i meant one let's confirm the transaction it will say and you can see that everything is updated purple eyes it says mint 1pe cost 0.02 matic excluding gas fees minting your purple eyes dot dot and it's now busy doing stuff right and these buttons are also frozen you can't do anything we have a disclaimer which is always good to have on your apps just to let people know that this is a reversible action then you can also click on this link over here so i'm going to open it in a new page so you can see it goes to our contract address and if we click on it i can see that if i go and refresh let me just see it's supposed to have a new transaction taking place there which it's not so i just want to see why i'm going to go into my transactions and it is saying that it is well it is minting it should show up on our contract i'm just going to click on this contract and let me just see what's happening so we've only minted these which is fine i do have the right configuration so you need to make sure that it is the right configuration and that is fine that seems that seems like it should be just working perfectly but you never know so let's just double check reveal it's doing that i'm not seeing the transaction taking place and i'm not sure if that's because it's still busy working on a transaction over here i'm going to try and just speed this up not by that much i'm just going to speed it up a bit because i want to show you this live process right so i'm just speeding up the transaction maybe that's why it's not reflecting on the contract itself yet but it should so i'm gonna just refresh oh there we go it didn't meant 11 seconds ago perfect so if we go back to our dap now and we refresh and we connect it should say this three and indeed there is so i'm going to mint two now because i want to see this live update and i'm going to say confirm but i actually want to just edit my gas price to be let's make it 20 so that it just happens a bit faster you also notice that it increased the amount being sent to 0.04 so now after this mint is successful this should update and be 5. so let's check it out i'm just going to open metamask and see the transaction taking place over there and while we wait um guys i really appreciate you sticking around for this big tutorial i'm sure that this is going to be a very long one and has been but in essence this tutorial will help you so much to understand all the little things that you might have gotten wrong in the past and i hope it really does i hope it really does help you guys it's been successfully minted so it hasn't updated yet but if i refresh and connect it should be five perfect and there you can see that five has been minted we can go ahead and check the contract we can refresh the contract and see that there was another one and another one minted this one came through so if we go there we can see all the tokens being minted here successfully how cool is that so the last step in order for you to host this somewhere you can simply buy a shared hosted service to put this dap that you have over here onto but you can't just simply put this whole folder you need to build it first the last piece of the puzzle is simply running npm down here in the terminal run build so npm run build when you hit enter the application will simply bundle up everything and build it in a build directory over there wait for it to complete so once it's done all you need to do is right click on the build reveal in finder or if you're using windows just go and find the build folder all this content over here you can now upload to a static shared hosted service so the very last part is to actually select all those files in the build folder compress them go to a shared hosted service you can choose any shared hosted service i'm using my local countries services because i'm living in south africa but if you're living overseas maybe a service like ionos might be good it can be a very cheap service it doesn't have to be something exclusive and and powerful because it's simply a a place for us to host our dap now i'm going to say upload and i'm going to upload this archive file now while this is uploading basically i'm just going to simply extract it and then once everything is uploaded and extracted i can access this dap by going to the nerdy coder clones collection i am actually uploading this dab quickly in place of the nerdy code of clones just to show you guys how to do this but after this tutorial i'll take it off and you guys can mint your nerdy coder clones again so there's the zip file i'm going to extract it over here and there we go it's extracted so now if i go to the nerdy code of clones i should see my new dap and there we have it if i go to the nerdy code of clones dot online i've now simply replaced my codeclones dap with this one and i can still connect it has five it is hooked up it's ready to rock and i hope you guys can do the same if you have uploaded your dap and your images aren't showing for example these gifs aren't showing as well as the background image well go back to your hosting service and find where the images are located then go and see that they all have at least 0 6 4 4 permissions so i'm going to change that to 644 and this one as well once you've done that you can also give them a higher permission like 775 but at least 644 is necessary so when you refresh your images will show up i really hope this tutorial helped you guys i just want to mention that if you get stuck please go and ask on the discord channels which discord is very organized this frequently asked questions and a community that's willing to help so go on there and ask your questions you can also go on to telegram and keep an eye out on our youtube channel for more awesome content i really hope that you guys create awesome cool dapps like these and if you want to go and buy a nerdy code of clone and support the channel by all means go and do that you can go to nerdycodeclones.online buy one it's a hundred matic and come and join the discord and show it off but that being said i also just want to thank each and every one of you for being a part of this community helping each other out and always giving me the most positive feedback that anyone can ask for i am really proud to make these videos for you guys and i hope this long video deserved a thumbs up or at least a subscribe so till next time guys i'll see you on the code side cheers for now

Channel: HashLips NFT

Views: 219,779

Keywords: polygon, ethereum, nft, opensea, nft collection, how to create an nft collection, how to create a nft collection, hashlips, blockchain, generative art, generative nft, programming, code nft, code smart contract, ipfs, coding, solidity

Id: fzH7Gjadmj0

Length: 151min 27sec (9087 seconds)

Published: Fri Oct 01 2021