BEST Mint From Site (dapp) - Entire Process! Whitelist & Launch an NFT Collection (10,000+)

here's the one you've all been waiting for today i'm going to show you how to create an entire nft collection from scratch including whitelisting and a mintingdap mints will be done from your website and the buyer will pay the gas fees there's a bunch of tutorials on youtube about how to create nft collections but mine show the entire process [Music] you've been asking me how to mint from a website and we've started the process in these past videos in this one we're going to cover the entire process from the beginning to end and there will be very little coding involved if you think you've seen this video before you haven't some parts might look familiar but please watch the entire video this is an entirely new process and strategy for deploying an nft collection we're going to cover generating 10 000 unique images uploading our images and metadata to ipfs deploying a collection contract creating a white list and we're going to deploy a dap that can connect to the contract and tell if someone is whitelisted it will also automatically start the pre-sale and public sale whatever date and time you specify if you want to better understand how blockchain and nfts work check out this other video the final code for you to download is linked in the description below and if you have any issues i get bombarded with dms and comments and i just can't get to all of them the best way to get help is in my discord server i try to answer as many questions there as i can unfortunately there are many others there that can help too and a quick disclaimer i'm not a financial advisor and everything that i present in this video is for educational purposes only you're looking for financial advice consult a professional what we're going to do now is create an nft collection we're going to create 10 000 unique images and you might think well that's going to take forever it's not we're going to do that by using layers we're going to start with our base image and then add on more layers to alter the resulting image that's how most nfc collections are created there are many applications that you can use to accomplish this such as photoshop procreate on the ipad or figma you can use whatever you're familiar with and you have access to the main idea here is to create unique layers that can be stacked on top of each other to create a unique image my brother is an actual artist and since i already have an nfd collection throughout this video i'm going to show you how i'm going to set up his nft collection so he used procreate on his ipad to draw several layers he has background colors bird base images and then all of the other images layer on top of that like the body colors eyes beaks and so on you should start with the furthest layer which is the background and then start building on top of that and the idea here is to have several options some options can be common and others super rare then later we'll use a program to randomly choose an option from each layer which will generate for us our unique images after he created all the layers he exported each layer as a png image eng is important because it retains the transparency in the layers this will allow us to layer the images onto each other it's very important to make sure that each layer is the same size as the overall image you should consider this ahead of time so what size do you want your images to be my brother made his 3000 by 3000 pixels but yours can be any size you want and for more detail on how to export your layers properly check out this video where i go through the steps for photoshop and figma it's pretty similar for any program you use and no you can't have my brother's layers you'll have to make your own if you're not an artist give it a shot i'm sure there's some creativity in you if that's just not your thing hire or collaborate with an artist if you're a developer looking for an artist or an artist looking for a developer join my discord server there are lots of great people there looking for connections alright so here is the fun part creating the unique images manually creating 10 000 images from all of these layers would take forever so we're going to use a great open source application and it's called hash lips art engine thank you to daniel at hash lips for creating this great project now i've created a modified version of this engine that will not only allow us to generate our images but it will also let us upload our files and metadata to ipfs create a contract and deploy a mintingdap and we'll get to all of that in a bit but for now we're going to generate our images using my mentor dap repo this is where we'll need to edit a little bit of code but i'll walk you through it i promise it's very little now there are two applications that you're going to need to install node.js and vs code for nodejs go to nodejs.org to download and install the version appropriate for your operating system and then you're also going to need a text editor any of them will work but my favorite is vs code so go to code.visualstudio.com to download and install the version appropriate for your operating system next go to github where the project is stored if you don't have a github account you will need one so go ahead and sign up it's completely free pause the video and come back when you're done and the link to this project repo is in the description below all right now that you have that open first thing go ahead and give the repo a star i would greatly appreciate it now at the time of this recording the current version is 0.0.1 this is the very first release of this repo now if there is a newer version check the notes to see what has changed also be sure to read the readme file there are great resources here helpful information on how to use this project and common issues and solutions now if there is a newer version when you're watching this video the instructions on how to use the newer features will be outlined in the readme file as well now for you to use this repo you're going to need to fork it so go up here to the top and click fork after you've forked it go here to code and then we're going to clone this repo so right here just copy this url now in vs code we'll go over here to the extensions tab and then search for github and you'll see the github repositories extension go ahead and install this extension now at the bottom under accounts make sure that you are logged into github and then on the source control tab we'll go to clone repository and then let's paste in that link that we just copied and hit enter now we'll select where we want to save this on our local computer and then we'll select that location and it's going to clone it and download everything that we need and then open the repository now notice here that there is a backend and a front end for this project the backend is going to handle generating our images uploading our files to ipfs deploying our contract all of the backend functions the front end is our menting dap or website so we're going to start out in the backend folder let's first open up our terminal to do that we can go up to terminal and then new terminal or we can press ctrl shift back pick now we want to make sure that we are in the backend folder so right now we're in the root of the project we need to type cd to change directory to our backend all right so now we are in back end the first thing we need to do is install our dependencies for the back end this is where we're going to use node.js now to be sure that you have node.js installed properly type node v and we'll see what version i'm running i'm on version 16.13.1 and everything works fine for me but i have heard that mac m1 users are having issues with this version and from my understanding version 14.18.2 might work better for m1 users but for more information check out this issue on the hash lift art engine repo which outlines the steps needed to get it working on an m1 processor the link is in the description now let's type npm install or the shorter version is i and that's going to get all of our dependencies for this back end installed and you will see a couple of issues here nothing here is going to break anything it still should work just fine after that let's test out the generator by typing npm run generate and that is going to generate five unique images for us so let's close the terminal and now if we go into back end and then we're going to see build and then under build we're gonna see images and json so under images we'll see the generated images and then under json we're going to see the generated metadata for each corresponding image this metadata defines what properties are contained in the related image so for instance on this one we have a trait type of background and the value is orange this one has an orange background this one the eyeball is red this one the eye color is pink and so on so these will be used during the nft minting process to define each attribute or property on each image the attribute names come from the layer image file name so again under back end we have these layers let's expand this so here we can see we have background and so background orange there's the orange background if we go back to the json here you'll see here the background corresponds to the background folder name and then the value orange comes from this file name orange so we're going to change out all of these example image layers to our own image layers so under this layers folder let's just highlight everything in here and delete alright so now there are no layers we can close out this json file and i'm going to copy over the layers that my brother sent me now each layer should be a folder and each layer option is an image in that folder again these are layer images that you'll need to create or partner with an artist to help you create them and then again for your image names be sure that these are how you want them to show up on open c remember that each layer is a property of the image and that shows up on open c like this and also the generator doesn't like special characters like underscores and dashes so to be safe just include letters numbers and spaces now to define rarities go in here under clio and clio have some beats and then notice here on my file names i have this hashtag 100 hashtag one hashtag 30. so this will define the rarities for your layers so you want to edit each layer option file name at the end of them add the hashtag and a number this is the only special character that is permitted and there should be no space before or after the hashtag now this number is a weight that can be given to each option and if you want something to be very rare you could add hashtag one and for something to be very common it could be hashtag 100 or even 1000. these don't need to add up to 100 they're just arbitrary numbers and if we make all of them hashtag one then they're all going to be equally weighted so now let's go up to our source so again this is under backend so in our backend folder and then under source we have config.js this file contains all of the configuration details for your nft layers your contract details and your minting details now to generate our images we're first going to update our name prefix and description so name prefix i'm going to update this this is going to be seabirds dot xyz that's the name of my brother's nft collection and then for the description i don't have the full description yet i'll just say this is a pool bird project you may want to do some research before naming your collection make sure that the name isn't already taken on openc if you create a collection with the same name as another it's going to show up as collection name v2 and you don't want version 2. so next we need to define our layers under layer configurations we have the grow addition size 2 this is going to be the amount of unique images that will be created so for testing let's change this to 20 and then layers order we're going to change these out to our layer folder names that we copied over be sure to order these correctly the first layer needs to be the furthest background layer and the last layer it needs to be the closest foreground layer so we have background first and then whatever is in the closest foreground needs to be last now these are going to get layered on top of each other so if you have any issues here be sure that you are using png files with background transparency and that each layer is the same size as your overall image if you're only seeing the last layer then that means there's no transparency in your layers if your layers are all jumbled then that means your layer sizes are not all the same now for my brother's seabirds collection he has five different types of birds and they each have their own specific layers so i'm going to show you how to set that up so let's go over here we're going to go to our layers and then the backgrounds are universal to all of the different birds but you can see that cleo has a base beak body eyes symbol each of them have the same so we're going to set up clio first so the background is going to be the background and then the next layer is going to be the body that's clio body and then after that is going to be clio base after that we'll have the eyes and then the beak and then the symbol we can delete this last layer because these are all of the layers for cleo now what we can do is we can copy this entire configuration and then paste it we're going to duplicate it so now we can change clio here to cletus i'm pressing ctrl d to select all of these and then lead us so we can keep duplicating and adding as many layer configurations as we need now to specify how many of each group we want to create we can change the grow edition size to this is a cumulative number so we can't say that we want a thousand of each so if we change this to a thousand and this to a thousand that wouldn't work so if we want a thousand of each the first group would be a thousand the second group would be two thousand the third group three thousand and so on so just for testing i'm gonna change uh these to ten and twenty we're going to get twenty total we'll get ten of the first one and ten of the second one all right so the next thing that we need to look at here is shuffle layer configurations now this is set to false i'm going to change it to true and what that is going to do is it's going to shuffle these groups up so instead of this group being editions 1 through 10 and then this group being editions 11 through 20 it'll shuffle them up and make them random so there could be edition 1 could be down here edition 3 up here it'll just shuffle these numbers around so that the additions aren't predictable now after that we have format this is the size of your resulting image in pixels this is completely up to you but be sure that you think about this ahead of time but your layers are 100 by 100 and you set this to 1000 by 1000 your images are going to be blurry or pixelated you should set this to the same size as your image layers the image layers that my brother sent me are three thousand by three thousand so that's what i'm going to set this to and again you can make your images any size you want crypto punks for example are only 24 by 24. now the last thing we're going to look at here is the extra metadata and in here we can add an external url so i'm going to change this to seabirds dot x y z that's gonna be his landing page and this url is gonna show up in your nft details on openc now there's a lot of other advanced configurations that you can do with this engine like create gifs use blending modes pixelate images and much more if you have more advanced needs go check out the hash lips youtube channel where he goes into much more detail on this art engine and i'll include a link in the description now this is all that we need to change to generate our custom unique images so now let's save this and then let's open up our terminal again and let's type npm run generate again so now it's going to generate our 20 unique images along with their metadata now this is the time to go check let's go look at our images so that is under build and let's check out our images and make sure that everything looks good so i'll go through a couple of these i don't want to spoil too many of them and then you also want to go through the json and make sure that everything looks good in here this is how it's going to show up on open c so here is the name of this one and here is the description and then the image that's going to get updated after we upload them so don't worry about that right now with the attributes these are how the attributes are going to show up on openc so there's going to be a background this one is background 7 body 6 leo bass eyes and so on we can see our external url was included so this all looks good now once you're happy with how it all looks go back to the config js go up here and change these grow edition sizes or if you only have one size change it to the amount of images that you want to include in your collection and then depending on your system this could take a while to generate for me since i'm generating 10 000 it took just over an hour so now that we have our images and metadata we'll need to upload all of that to ipfs and create our contract now for that we're going to use a great platform called nft board and i like how easy nft port makes this process now they recently released a new type of contract called a collection contract and this is a fixed erc 721 smart contract this contract allows us to emit nfts directly from a website or dap and not directly through nft port now this collection contract is different than the custom contracts that we've covered in the past so if we go over here to pricing we'll see on their free plan we can create one collection contract with up to 5000 items if you want more than 5000 items you can upgrade to the growth plan and get unlimited items so to get started go to nftport.xyz to get your free api key now to do anything on the blockchain we're going to need a wallet i recommend the metamask wallet if you don't already have it just install it as a browser extension and sign up there's no cost to create a wallet it will just allow us to assign ownership of our collection and nfts to our personal wall is how things are tracked on the blockchain so now let's go back to vs code and you'll see in here a file called env.example so you'll want to rename this and just take the dot example off and it should be just dot env and then in here we have our nft port api key and so just paste your api key right here no quotation marks around it just the api key and then save that and close it now let's go back to the config.js file and now we're going to edit the nft port details so let's scroll down a bit more and you'll see here nft port info there's some required info and then there's some optional info a little bit later in the required settings we're going to get our api key from our environmental variable that we just set and we're doing it this way because you're going to have to push this code back to github in a bit and we want to keep your api key safe we're going to keep that secret in the env file that's going to prevent it from exposing our api key when we push to github next we have our limit this is our api key rate limit for the free planets 2 so we're going to leave that there for the chain ring could be we're going to start out on rinkaby and this can only be rinkaby or polygon now i can't emphasize this enough please use the wrinkby chain to test everything first that's what it's there for if you make any mistakes there it's not a big deal mistakes on polygon cannot be undone so once you've tested everything you can come back here and you can change this from rinkeby to polygon and we'll step through that process later these next few items cannot be updated after your contract is deployed so be careful we have our contract name this should be the same as you entered for the name prefix i'm going to change this to seabirds.xyz for the symbol this is like a stock symbol so it's basically a shorter version of your collection name so i'm going to say c b z and then we have metadata updatable now if you want to do a reveal where you have an initial generic image and metadata and then reveal the real image and metadata later you'll need to set this to true now if it's false then once you've minted your nfts they are locked and cannot be updated next is your owner address so this is your wallet address and we can get that from metamask just open up metamask in your browser and then click on your account to copy the wallet number and then paste that here within the quotation marks then we have our treasury address this is the address that can withdraw funds from the contract now as mints happen and funds are collected they don't go directly to your wallet they get held in the contract and at any time you can withdraw your funds but only the address listed here can perform the withdrawal then we have max supply this is the maximum number of nfts that can be minted again this cannot be updated so make sure that you set this correctly again for the free plan that is limited to 5000 if you're on the growth plan then this can be any amount you want next is the mint price now this is the minting price per nft when people go to your site to mint this is the price that they're going to pay and they're also going to pay on top of that any gas fees now this price cannot be updated later so think about what you want to charge and be sure before you deploy your real contract to polygon it's also important to understand that this is in the chain's native token so for rinkeby the native token on rinkeby is eth or polygon the native token is matic so since i'm going to be testing this on rank b first i'm going to set this to something really low like .001 e i'm not going to specify eth just .001 and then later i'm going to show you how to get some free ease to use on the wrinkly chain for testing and then after testing when we deployed a polygon i'm gonna change this probably to eight eight matic is about 10 us dollars right now and that's about what these are going to meant for next we have tokens per mint this is the maximum number of nfts a user can make in a single transaction again this cannot be updated later so i think 10 is a pretty good number per transaction but again changes to whatever you want now this next one public mint start date this is still required but it can be updated later and this is the format that you'll need to use we have year month date then the time we've got hours minutes and seconds here and then this is the time zone so plus zero zero zero zero is the utc time zone i like to keep everything in utc it just makes everything easier and then just calculate your time zone from there all right next we've got some optional settings so pre-sale mint start date we can leave this at null and update it later or if you know it already you can add it here royalty share is the percentage of third-party market sales that you're going to receive when your nfts get resold on third-party marketplaces so this is a percentage that is in bps or basis points so 100 is one percent so that means 1 000 would be 10 so change this to whatever you want and this can be updated later and then royalty address is the wallet that these royalty shares will be sent to now the base uri is the location of the real nft metadata if you're doing a reveal leave this at null and then you'll update this later when you want to reveal the nfts the pre-reveal token uri is the metadata of the tokens before they are revealed unless you already have this leave this at null as well it's going to be updated for you as we go throughout this process and then we have pre-sale whitelisted addresses this is an array of addresses that are whitelisted and you can enter multiple addresses here they need to be surrounded with quotation marks and separated by commas so if i took this address here and let's just demonstrate we'll add that in here so that one would be white listed and if i wanted to add another one i'll add a comma and then i'll just paste it again and we'll pretend like this is a different address and you can add as many as you want comma add another one and so on but again this can be updated later so for now we're just going to leave this empty and i'm going to show you how to update all of these updatable fields a bit later now next we have some more options here contract address if you have an nft port collection contract that you've already deployed and you want to use that you could enter that here otherwise you'll get this address in a bit when we create the contract now we have some generic settings these settings only apply if you're going to do a reveal this will be the metadata that shows before the real metadata is revealed you can change the title description and the generic image that you want to use pre-reveal here so if we're going to do a reveal which we are i'm going to change this to true and then the title by default it is the contract name so unless you want to be something different you can change it but where i'm going to leave that right there and then for the description i'm going to say which bird will you get and the image should be any image that you upload to ipfs so let's upload an image for us to use here we're going to go to the nft port documentation and then under storage you're going to see upload a file to ipfs so you want to add your authorization key here and then pick a file so this is the image that i'm going to upload so all of the nfts pre-reveal are going to have this image and then send api request now let's scroll down you want to see in our response okay ipfs url file name all this but what we need is the ipfs url so if we copy that and then back in vs code we're going to paste that right here and let's save this file now all of the nfts will have the same name description and image pre-revealed those are all of the options that we need to edit now we're ready to upload our images metadata deploy our contract and deploy our mintingdap now before we upload our files and metadata to ipfs you'll need to decide if you're going to do a reveal or not if you are then you'll need to create your generic metadata to do this just be sure that your configuration settings in the config.js file are correct particularly the ones for the generic info and then from the terminal let's run npm run create underscore generic and that's pretty quick so let's open up our sidebar and let's look under build and so now you're going to see not only our json files but we're also going to see a generic json directory now with metadata so if we look at that this is the generic metadata so it's going to still say seabirds.xyz is the name but now our description is which bird will you get and we have our generic image which is that bird in the bird cage and notice we don't have any properties because this is all generics and we don't want to reveal any of the properties yet now the next step is to upload our images and metadata to ipfs ipfs is an industry standard for decentralized storage you can just use google drive or any other online file storage and that would work but that is centralized storage and it defeats the purpose of decentralization so fortunately nfp port has all this worked out for us as well it's really easy to upload these files now to upload our images we're going to open our terminal again we're going to type npm run upload underscore files depending on how many you're uploading this could take some time the free plan is limited to two requests per second and after uploading an image the metadata is automatically updated with the ipfs link to the image and this might be the longest part of the process just let it run get some coffee and come back later all right now that that's done to upload our metadata we're going to run npm run upload underscore metadata and uploading our metadata now uses the new nft port endpoint that allows us to upload an entire directory of metadata at once this drastically speeds things up we no longer have to wait for each metadata file to upload one by one now if you're doing a reveal this will upload your real metadata and your generic metadata so when this is done this is going to result in a new folder under build called ipfs metas which is going to have an ipfs meta response.json file and here we can check that this response is okay and we can get the link or external url to the ipfs url and then we also have since i'm doing a reveal i also have the ipfs meta generic folder with the response for that as well these look a little different because this one is just one file it's just the metadata or the one generic and this one is the response or the link to the entire directory of metadata for our real metadata right now we need to create our contract again make sure that all of the nft port settings in the config.js file are correct and be sure to save that file and then from our terminal let's run npm run deploy underscore contract it's going to ask is all required contract information correct in the config.js file so we'll say yes and the contract deployment has now started to get our contract details we're going to run npm run get underscore contract now we see that there is an error here it says transaction has not been found with this hash this can happen because it takes some time for our contracts to deploy so don't worry let's give it a minute and we're going to try to get the contract information again now if it continues to fail we can go over to our files under build we're going to see a contract folder and in here we can see the deploy contract response json let's see what happens so we our response was okay we're deploying to rinkaby here's our transaction hash and here's our transaction external url so let's open up this url so it says we're unable to locate this transaction hash so again this could be because we haven't given it enough time or it could be that it just completely failed so again we're going to give it a little bit more time things on the blockchain can take a bit of time or so now we can see that it has successfully gone through i did have to wait almost 20 minutes for this to go through so this could have just been a fluke on rinkeby possibly uh let's go back to our terminal and let's run npm run get underscore contract and now we can see the contract has been deployed successfully and now under our contract under build we'll now see an underscore contract.js file and here we can see our contract address i do want to say again that my videos are for educational purposes everything that i'm providing is open source and while i try to test everything as much as possible i can't be responsible if something goes wrong if you have any suggestions on how to improve the code please open a ticket or submit a pull request on github i welcome external contributions there are several commands that we can use to update our contract after it's deployed all of these commands use the information from the config.js file to be sure that after you make any changes to the file that you save it so to update your pre-sale mint start date from the terminal we can type npm run update and then underscore pre-sale underscore mint underscore start underscore date all right so this is going to take the pre-sale mint start date from our config.js file it's going to ask us if this is correct right now in my config.js file it is null uh is this correct sure i'm going to leave it at null but obviously you're going to want to update that if you want the date to be something all right so the contract has been updated now to update our royalty share from the terminal we can do npm run update and this time we're going to update the royalty underscore share and again it's going to ask me is the share of 1000 correct yes and there that's updated all right to update the royalty address we can run update royalty underscore address it's going to ask is this the correct address or and that has been updated to update the pre-reveal token uri we can run update underscore pre-reveal underscore token underscore uri and it's going to ask is this the correct token uri yes and that's been updated and then to update the base uri it would be update underscore base underscore uri now i'm not going to update this because this will change the metadata link for all of the nfts to the real metadata revealing all of the nfts in the collection so if they're already minted then they're going to be revealed and if they're not already minted they will be revealed automatically when minted so be careful with this one if you're doing a reveal don't update the base uri until you're ready now to update the white listed addresses there are two different commands so update underscore resale underscore white listed underscore addresses all right so this is going to add the addresses that are in the config.js file to the existing whitelisted addresses so if i run this it's going to ask if this is correct updating presale whitelisted to include and there's blank that's because i didn't add any and we'll do that in a minute i'm just going to say no the other command is update presale whitelisted addresses underscore remove that will remove any addresses in the config.js file from the existing whitelisted addresses so again if we go over here to our config file and then we go down to pre-sell white listed addresses that is this list here so any addresses that you've included in here will either be added or removed depending on which command you run there are many different strategies that you can go with using this contract you could just go straight to a public sale and let anyone mint skipping the pre-sale skipping the white listing you could do a pre-sale without a reveal all nfts that are minted whether pre-sale or post-sale will be the actual metadata the actual image when they are minted there's no reveal process anyone whitelisted will be able to mint during the pre-sale and then anyone can mint during the public sale or you could do a pre-sale with reveal and that's what i'm going to set up for my brother during the pre-sale anyone whitelisted comment but those nfts that get minted will be hidden they'll have a hidden image and then when the public sale starts all nfts will be revealed so all the nfts that were minted during the pre-sale will then be revealed and then all nfts minted during the public sale will already be revealed all right so now it's time to deploy our minting dap let's open up our folders here and let's go to our front end this time so under front end let's go to js and then in js there is the constants.js file let's open that so in here we have our contract address and our chain so let's get our contract address that is back in the backend folder under build the contract and then underscore contract.json here's our contract address let's copy that and then let's go back to our constants.js we're going to put that right here and then we are on rinkeby if this was polygon you would change this to polygon and you'll also see a bunch of other text in here that you can update to customize the page as we keep going you'll see where these populate in the website and we'll come back and change some of these in a bit now we need to sync our changes with github let's go over to the source control tab and you'll see all of the changes that you've made so i have all of these images that i've added and we need to commit these changes let's type in a commit message so i'm going to type in here uh rinkby test you can type anything you want and then click the check button to commit them and then i'm pushing a new branch but here you're going to see sync changes so click on sync changes again if you didn't fork the repo and you're working directly from my repo that's not going to work you're going to have to go back and start over we're going to deploy our site using netlify which is going to connect to github and keep our site up to date as we make changes so go to netlify.com to sign up for a free account i'm going to log in once you're logged in we're going to add a new site we're going to import an existing project we're going to use github and so just search in here for dap and you should see your username slash mentor dap i created a second one called mentor dap dash cards but yours should be mentor dap now scroll down and under build settings we need to change the base directory and that's going to be front end the front end folder or directory is where our dap or website is is located another thing that we need to add is some environmental variables so click on advanced and then we're going to add a new variable we need to add our nfv port underscore api underscore key now capitalization and spelling is very important has to be just like this and then you'll need to enter your api key here right and then we're going to deploy site the deployment process should be pretty quick and we're going to get a generic netlify url so mine is jollymorse029e1a.netlife.app that's pretty easy to remember but if you want to set a custom domain you can do that as well you have to purchase your own domain name for instance we got cbirds.xyz for my brother you can go into domain settings here and then set up your custom domain here so this is going to be c birds dot x y z and then verify and we purchase that through a different registrar so we're going to add the domain and then we'll need to go to our registrar's dns configurations and set that up for netlify netlify has great instructions on how to do that so i'm not going to cover that in this video so let's go back to our site overview and we can see that the build has completed and from now on when we make any updates to our github repo just like we did before by committing and syncing our changes netlify will automatically redeploy our site and so it's always up to date so let's click on this image to see our site live on the internet so there's a slideshow of images on the left which we can customize and then all of the words here can all be customized so right now we're not connected to metamask so it's asking to connect to metamask to get started welcoming us to the project and then some description here of the project the site's going to guide the user through the experience so if metamask is not installed then it's going to prompt them to install metamask up here since i already have metamask installed it says connect to metamask so let's go ahead and connect so metamask is going to pop up and ask me which account i want to connect with and we're going to connect so now we are connected if i was not on the rink b let me go up to meta mask here and so you can see that i am on the rinkeby test network if i was not on rinkaby it would have prompted me to switch over to rink b and if i didn't have a rink b installed it would have instructed me on how to install rink me and the buyers of your nfts will never have to get on rink b again this is just for our testing purposes the actual contract in the end is going to be on the polygon network so it will be the same for polygon if the buyer is not on the polygon network or doesn't have that network installed in metamask they'll be guided through that process so now we can see that our pre-sale minting countdown has begun nft drop coming soon again all of this text can be customized and this countdown is based on the date and time that we entered back in our contract configuration details and i'll show you how to step through the different sales stages in just a minute there are a few things that we can customize on the site so we're going to start back in our front end we're going to go to the index.html file so in this file we can update the title so let's update this to see birds dot x y z this changes what shows up as text in the browsers tab next is the icons we have a bunch of favicons here these show up in the browser's tab as well and also in meta mask later on you might have noticed earlier that the default is a cat with heart eyes emoji so you can change these images out as well these are located under images and then x icon and we've got all of these different icons here they're all the yeah eyes emoji a great site that can help with this is avacon.io you can use that and it will generate all of these different sizes for you if you've created those just replace these files here next we'll scroll down here and then we have our logo again right now i'm just using the cat with heart eyes emoji so i'm gonna change this out to my brother's logo and you can put that new logo anywhere here in the images directory and then just change this link next is all of the social links you can change these out to your own twitter discord and open c links and if you don't have those or you have different ones you can delete and duplicate the same code or add and remove links so i'll come through and change all of these out scrolling down next we have some text so we have our welcome text and you don't need to edit any of this in the html file i'll show you where to edit these so we'll keep going down we have our counter you don't have to worry about the counter again that gets calculated from the dates that we set in our contract and then we have some more text again don't edit any of this text here let me show you now where to edit that let's save any changes that you made here and then we'll go back into under js and then constants.js remember in here we have a bunch of text we have our here is our welcome h1 our welcome h2 our welcome paragraph so so if they're not connected to meta mask or they don't have metamask installed this is what they're going to see we have welcome to whatever your name is project so come through here and change all of this out to reference your project and your links and then we have when the pre-sale is coming soon this is the text that it's going to show when the pre-sale mint is going on that's what it's going to show there when the public mint is happening that's what it's going to show um pre-sale meant coming soon h2 text public pre-sale mint h2 text pre-sale coming soon paragraph text so all of these text in here is pretty uh apparent what they mean and what they are and then change them out to whatever you want so after line 23 is our abi so nothing that you need to change in here so everything above line 23 you can edit all of this text to be whatever it is you want and then save that file now to customize your colors we're going to go over here and under css let's open the style.css first we are importing a bunch of fonts from google font we're using pop-ins and roboto and rvo so if you want to customize these you can go to fonts.google.com and pick your own fonts select the styles that you want and then copy the import code and just replace that code here and then come down here and then we have our global styles be sure to update your primary and secondary and code fonts here right now it's poppins arvo and roboto after this we see our color variable so we have our background color then we have the same background color that's slightly transparent then we have our font color our button background color and accent color and then our header shadow and our card shadow so all of these can be customized everything past this uh there's no need in editing it's just this top part here you can customize your font and your color so i'm going to change these out to the colors that my brother sent me since i've made a bunch of changes here we're going to save this and then let's go over to the source control tab let's go over here and edit these changes so we'll just say updated colors and then let's commit these changes and we're going to sync our changes with github and this is going to trigger netlify to rebuild the site and we should see the changes live shortly so let's go back to the website so let's hit refresh i think the font color is a bit too muted so let's go back i think the button background color and the accent color are a little too close so let's change the background color let's make it more of a a lighter purple let's try that let's see what that looks like we'll save the changes and add a commit message and then sync our changes go back to our website and refresh that's a little bit better i might still go through and tweak some of these colors let's update our slider images now let's go back to vs code and then we're going to go up here to our files and let's go to our images and then under slider we're going to replace these all right so now i'm going to copy in the updated images and yes i'm going to replace all of these all right so we made some updates here so let's go back here and we'll say updated uh slide images commit that and sync our changes and then we'll go back to our site wait for it to rebuild and then refresh all right so now we can see our updated slide images next we're going to test the minting process right now the pre-sale hasn't begun yet so let's update the pre-sale date to trigger the sale to start so back in vs code we're going to go to our backend directory and then under source open up our config js remember this is where all of our nft port details are that we need to update so we'll go down here and we're going to find our pre-sale mint start date so right now the pre-sale meant start date is null so let's go here copy this we're going to update this and so today right now i'm recording it's the 17th so let's say that the pre-sell has already begun we're going to make this the 16th i'm going to save this then let's open up our terminal and we're going to run npm run update underscore resale underscore mint underscore start underscore date and it's going to ask us is this the correct date that we want to update it to so we'll say yes that looks good and it's going to update our contract so that should just take a few minutes to update on the blockchain and then we should see those changes reflected on our website so let's go back to our website and let's refresh so now we see that the presale is open but we're not on the white list oh let's add our wallet to the white list go up to metamask real quick and copy our account wallet number and then we'll go to vs code so let's go back to our config.js file in our backend let's go down to white list by the pre-sell white listed addresses we're going to add that here make sure that it is surrounded by quotation marks remember we can add multiple so if i take this and copy it and then add a comma and then paste another one i can add as many as i want just separate them with commas all right so save this file open up your terminal and then we're going to type npm run update underscore resale underscore white listed addresses all right and it's going to ask is this the correct address that we want to add and we're going to say yes and so that's been updated so let's give that a minute to show up on the blockchain we'll go back to our page and then let's refresh and see if it has updated all right now we're on the white list and we can actually mint one so now someone on the whitelist can only mint once they can still mint up to the max that we set per transaction but only once so only one transaction let's get some fake or play eth so that we can test the minting go to faucets.chain.link slash rinkby and then connect your wallet and be sure that you're on the rink b network of course and then we can get some eth from this faucet so we don't need any link we just want e and then i'm not a robot and then we're going to send some eath to ourselves this just takes a few seconds to go through point one should be plenty for us to do our testing all right let's go back to our site and now if we go up to metamath you should see that you have some eth added to your account and again this is fake eth it's not worth anything it's just so that we can test minting all right so we can change how many we want to mint we can add or subtract and then notice as we're adding and subtracting the total here changes i think that we need to update some of these colors because it's hard to read that but every time i change this that total changes and it's not going to allow us to choose a number higher than the max so we set the max to 10 and it won't let me go past 10 but if i manually come in here and let's say i type 20 it's going to say invalid quantity it's going to give us an error it's not going to allow us to mint so there's also a set max button that will bring us back down to our maximum but let's just mint three for testing all right so that's going to be .003 eth and so let's go ahead and click mint metamask is going to pop up and so now we can see here i don't think i can zoom in on this let's see oh yeah i can all right so we can see here that the total is going to be .003 but then there is going to be some gas fees so after the gas fees it's .004 and whatever so the estimated gas is 0.001 so the person minting is going to pay the fee that we're charging plus the gas fees so let's go ahead and confirm this again this is on the rinkeby test network now this is not real eth so we're going to confirm this and then it just takes a a little bit for the transaction to go through it's still waiting and as soon as it goes through we can see that we've minted here is our transaction link if we want to view that and then we also have a link to the collection for us to view the nft that we minted so let's go to view transaction and we can see that it is still indexing so everything on the blockchain does take a little time let's let this index while we're waiting on that we can go back to our site and then click on view collection see birds we can see that there are three items and one owner so i minted three there are three now but if we scroll down we can see that that transaction is still going through it knows that there are three but they haven't quite come through yet let's go back and take a look at our transaction and we can see that it's successful now and we can see in this transaction that three items were minted here let's go back to openc let's refresh the page and see if they start showing up now it can take some time especially on rinkaby i find that sometimes uh rinky even takes a little bit longer because it's just a test network something i forgot to point out here is that we are on testnets.onc.io so because we're on rink b this is test nets uh if you're on polygon it will be just a normal openc.io so refresh again and now we can see our three nfts that we minted if i click on this you can see that i own it let's go back to the collection once at least one nft has been minted your collection will now show up on open seat and so since i own this collection i have this edit button and i can find metamask and now i have the ability to edit this collection by adding images banners even changing the name the url the description and then notice here that the royalties have automatically showed up here so percentage of 10 and my wallet address has already shown up here and that came from our contract so pretty cool so let's go back to our minting dap and let's refresh this page you're going to notice here that pre-sale minting is still open but we have already claimed our whitelist mint so we can't mint again like i said before but anyone else that's whitelisted that hasn't claimed theirs yet can so now these uh nfts they're on open c they've been minted but these are not the actual images these are the pre-reveal images and metadata so let's pretend that it's time to start the public sale and we want to reveal these so let's go back into vs code now we don't need to edit anything in the config.js file for this we just need to open up our terminal we'll type npm run update underscore based underscore uri it's going to take the base uri from our ipfs data that we uploaded much earlier in this process so it's going to get this information for us we don't have to update anything so let's run this and it's going to ask us is this the base uri that we want to add and i'm going to assume that this is correct and we'll say yes and the contract is now updated now because it says contract is updated that doesn't mean that it's live automatic it takes a little time so let's give it a bit let's go back to openc so now any nfts that have been minted will receive that updated uri the metadata will be updated and so in order to see those changes we'll need to go into here go into the individual nft and then refresh our metadata you'll see that it's been queued and we'll check back in a minute all right so now we can see that the name has been updated the image has been updated the description has been updated the properties now it's up to you generally uh this would be on the owner to refresh their metadata to to see the reveal process happen they're going to know when it's going to be updated they know that when the public sale happens that everything's going to be revealed and so they'll know that they have to come here to their nft and refresh the metadata but if you want to do it for them there is a refresh script included in this repo the instructions will be in the readme i'm not going to go through that in this video because i don't really think that that falls on the responsibility of the project owner i think that is more on the owner of the nft to do this refresh all right so let's go back to our minting dap and again we we have about two days 15 hours until the public meant things started and then anyone can mint so we could wait around for the public meant to to start or we could go and change our public net start date so let's go back into vs code and let's open up our config on the back end config.js and let's go down to our public mint start date let's change this to a day 17 and let's save that and then we'll open up our terminal npm run update public mint start date and yes that is the date that i want to update all right so that's updated let's go back to our mintingdap and let's refresh it's going to take a minute so it's probably not going to show straight up oh that was really quick nice it updated very fast that time all right so now public minting is open no whitelist needed public minting is now open so again all of this text can be updated back in the constants.js file on the front end all right so we can mint some more let's mint uh four more so the total is going to be just over zero zero four seven let's confirm that waiting for transaction there we go so let's view the collection again so we had three before we just minted four more and now there are seven let's scroll down here they're starting to show up here's the one that we revealed ourselves and then here's a new one so it's automatically revealed since since all of the metadata is revealed everything is now going to show up on the public sale as revealed from the beginning if we wanted to go into these we could go in here and refresh those as well but i don't want to show you too many of these ahead of time all right so there's one more and we're still waiting on the other one to show up it will show up within the next minute or two but we can see that there are seven items total and so that's all we needed to see okay so that is the entire process there are several strategies that this can work with pick your strategy plan it out test the entire process on rinkaby and then started it again on polygon for real now to do that you don't need to regenerate your images or metadata you don't need to re-upload your files or metadata either you just need to deploy a new contract all right so back in the config.js file on the back end we're going to update our chain to polygon and then make sure that your mint price is set properly so .001 on polygon is going to be really cheap uh right now 1 matic is around 1.30 uh usd so around eight matic is just over 10 or 11 usd so be sure that you set this properly and this is not going to be an eth on polygon it's going to be in matic and then make sure that your public sale and pre-sale dates are set correctly if you want to you can go back and just do null if you're not doing a pre-sale or again if you want to set those later you can but if you already know that ahead of time you might as well set it now maybe clear out your your white list here just so that you start fresh and then save this file and then back in the terminal you're going to run npm run deploy contract and then after your contract deploys you're going to run get contract and then once you get that information you'll have your new contract number then you'll go over to your front end into your constants js and you're going to update your new contract address which is now on polygon and then you're going to update your chain here to polygon save everything commit your changes sync with github and then your mintingdapp is ready to go again check the readme file in the github repo for a quick cheat sheet on all of the commands if you want to support me and my brother go to seabirds.xyz to get on the whitelist for his nft collection join my discord server for support and if this video was helpful give it a like and subscribe for more content like this [Music] you

Channel: codeSTACKr

Views: 63,535

Keywords: 10000 nft collection, nft creator, create nft collection opensea, how to generate nfts, opensea nft, auto generate art, nft collection, how to create nft collection, how to create nft, nft, generate nft art, nft tutorial, hashlips, nft art finance, nfts, pfp maker, pfp generator, pfp generative art, profile picture, nft pfp twitter, nfl pfp, nft pfp maker, minting dapp, mint from contract, minting website erc721, whitelisted nft, create whitelist nft, create whitelist

Id: cLB7u0KQFIs

Length: 60min 20sec (3620 seconds)

Published: Fri Mar 18 2022