Building a Full Web3 Mint Website for Beginners | React, Hardhat, Ethers, and Chakra

Подписаться 82 тыс.

Просмотров 155 тыс.

50% 1

In this video we will go over all the steps to build a full web3 mint website
assets file download: 1drv.ms/u/s!Al1l2sA-axg8gep2j...
create-react-app: create-react-app.dev/
hardhat: hardhat.org/
infura: infura.io/
etherscan: etherscan.io/
node: nodejs.org/en/download/
chakra ui: chakra-ui.com/docs/getting-st...
-----------
Subscribe to my channel: / @edrohdev
for more algorithm explanations, tech discussions, and programming tutorials!
-----------
Hey there, my name’s EdRoh. On my channel, you will find common coding algorithms and/or interview questions (with explanations of course). I also provide tutorials and courses on other programming topics in Web Development including Javascript, React, HTML, CSS, TypeScript, Redux, Node, Progressive Web Apps, React Native, Flutter, etc.
No matter what level you are, whether you are already in the software engineering field, or are just beginning coding in bootcamp or being self taught, my first and foremost desire is to help you provide with the best teaching content and learning resource I possibly can. As someone who understands the struggles of switching careers, I hope I can help guide you into this difficult but rewarding journey into engineering.
Chapters:
0:00 Build a Flashy Web3 Mint Website
0:25 React, Ethers, Hardhat, and Web3 Setup
4:00 Writing a NFT Mint Smart Contract
26:50 How to Deploy Smart Contract to Test Network
32:20 Creating a Full Mint Website
53:00 Give Mint Website some Life with CSS Styling
1:08:00 Fully Built a Frontend Mint Website

Наука

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 410

@0xjocxyen2 2 года назад

Oh man! Been watching your previous videos, and I find them very helpful, simple and concise. You're a great teacher! Thank you for sharing your knowledge here! Appreciate it!🦊

@adriancygan9391 2 года назад

SInce today I had no idea about programming using solidity but after watching your videos I think am able to do it. You explain everything very clearly and simply.

@casino130 2 года назад

Really appreciate this tutorial!!! As a traditional artist making the transition to digital I’ve come to the conclusion that I need to create everything surrounding an NFT to the greatest extent possible for many reasons and learning to code is a big plus along the way. I specifically search for not necessarily simple but clear no hype easy to understand (tone of voice) that I can follow and actually get something done that feels productive. Highly recommend!!!

@yyxx9309 Год назад

You are so good at explaining!!! Love this tute!! Will watch your others!

@ovenalabs2788 2 года назад

This is an extremely helpful video. Wish we saw this during development. Hats off 🔥

@eloualidbenyahia610 2 года назад

Your smoothness in work make it look easy

@rachelmoore4310 2 года назад

Thank you!!! I was just looking for an explanation about inheritance from other contracts in Solidity when I found your other video. I was impressed and I am so glad I clicked on your page and checked out what other videos you had because this answered so many questions I had about how I was going to integrate the smart contract with my React app. Subscribed and I'll definitely keep up with what you're doing, you're a good teacher!

@Kani132 Год назад

You offer a lot of value through your videos.Thanks so much !

@brendanhemat-siraky7128 2 года назад

Super underrated videos man keep up the good work!

@yingliu4203 2 года назад

Clear and to the point, such a pleasant coding experience, thank you very much.

@Hi-BloGaming 2 года назад

where to put ipfs in this contract, btw?

@testfunct 2 года назад

i fnished all!! omg thank you so much!!! im waiting about reavel system and whitelist system too hahaha

@syr1nex939 2 года назад

would love to see more web3 dev fam learning alot from you

@MrHankered 2 года назад

good video, there hasn't been any other tutorials showing the correct way to develop the site, using seperate components with hooks and all

@VELIXYZ 2 года назад

I tried so many tutorials, guides on yt, and this is the first one that i completed because it is all working as clock! Thank you so much for you guide and knowledge. Waiting for new tutorials, pressing likes

@okoloboga-37 7 месяцев назад

Great work. More informative than any courses

@sahrasch Год назад

Wow! It works! The first time i tried it took forever to activate and when I disabled my antivirus it worked like in less than a minute! Thanks broooo!

@nakshatrasingh6933 2 года назад

More projects like these please sir, great content

@TheCreativeRio Год назад

Awesome content. I really wanna see more of react and web3 technologies together .

@myjio8985 9 месяцев назад

Thanks brother unlike others u teach styling as well keep it up full support ❤

@leboyoyo Год назад

Love u bro Best Web3 Tuto I've made so far, Easily found my way to polygon along the tuto Liked N Suscribed!

@thepr1ntgnome430 Год назад

Did you make it work?

@lavanyasharma5614 Год назад

I feel like it's no exaggeration to say you are a godsend. I've been making my own soft since i was 14ish and since then it's beco my

@24capital75 2 года назад

love your microphone great video

@MicahGCom 2 года назад

This is incredibly well explained. Thanks for the awesome tutorial!

@dhaeshaable 2 года назад

Comment #100 !!! YAYY!! So, This is the best Web3 Code Along I found on the internet!! Please make more! How about a metaverse in react-three with NFT membership ?? Anything Web3 and you gonna keep the beginner Web3 coders happy!! Thank you so much for this video!

@sxj__ 2 года назад

At this point, I bingeWatched all your videos in a day as well as tried everything you did side by side. I have never learnt so much in a day. Thanks a lot. However, I have a request. Please show us how an Efficient NFT smartcontract looks like. An advance level tutorial for people who are looking for efficient methods to write code.

@enjoinick 2 года назад

Agree love to see best contract with lowest gas fees following current trends of releasing projects.

@katejohnson2648 2 года назад

Thank you for a fantastic video! I actually got my first job in blockchain development. Something I found really helpful is that you write your contract here to maximize gas fee savings. This is EXTREMELY important in the real world but many tutorials only run on test networks so they do not teach all the vital gas-saving tips and tricks. I would LOVE it if you made a video on your top ways to save gas fees in Solidity programming. Your teaching style is fantastic, and I think it would help me and many others a lot :D

@web3world370 2 года назад

Mam please thodi help kardo... Mene react.js sikhliya he.. Solidity hogi he. And abhi react ke 2 project banaye he. .ek simple Netflix clone and ek normal website and ye valli minnting website banai he.... Kya internship ke liye interview start kardu kya .mene ajj tk koi bhi interview diye nhi he. Please thoda sa expriance share kardo mam

@katejohnson2648 2 года назад

@HARSH Kumar My source code?

@jackpaperhands 2 года назад

yes Kate, what don't u understand, huh? your source code now! Entire DNA chain, just past it here.

@rodrigofrancescani4223 2 года назад

Thank you for this tutorial, very beginner friendly, I like how you explain almost every line of code you share ! truly amazing !

@catreunion 2 года назад

thank you so much for your great production as always!!!

@serdukovaa Год назад

Thank you man! very helpful)

@draixtube 2 года назад

Impressive. Great video

@Fantasia1013 2 года назад

please more videos you are the best!!

@VELIXYZ 2 года назад

Really like that you showing us how to avoid hackers, showing us secure things

@koleen3799 2 года назад

more power! Thanks EdRoh

@candelalinares6931 Год назад

Awesome content here!

@agentbabs_yt 2 года назад

Absolutely incredible video and super helpful+useful. Thank you so much for your time and work here.

@eduardmoldoveanu4245 Год назад

YOU ARE THE BEST DUDE!!!!!!!

@donmikkodanm.olmillo8154 Год назад

Thank you for this!, you truly are a lifesaver. hopefully you can do NextJS with TailwindCSS next tutorials. thank you

@dj1984x 10 месяцев назад

just made $500 billion thanks to this video, thanks Ed

@enchance 2 года назад

I really like your videos and the way you present them. I have a question though, where is the artwork that gets minted?

@Philson 2 года назад

OMG! Looks Dope!

@inferious777 2 года назад

Nice tutorial If i understand correctly, if there are no safeguards on the contract, people can compile the contract themselves and mint the token before the desired "mint date" (or change mint price etc) because all ethers needs is a live contract address and the contract json abi?

@rishabhyadav6311 Год назад

make a video on Uniswap Code (Factory , Routing ,V1 , V2) and how to use it . btw the way you explain concepts in your videos is quiet Dope .

@renederv Год назад

Hi. Great video and thanks for the video! :) 1 question: Where do you put the images and the traits and the layers in the code? And how do we program them? Thanks!

@burakturan1980 Год назад

I very curious about that too

@mustafaasaad7250 2 года назад

Thank you thats amazing! And please can you make part two for multi pages that you add like about, team ...

@illadam1138 Год назад

Great Video! Thank you so much for putting this together! I'm not getting rinkeby working apparently it's being phased out. Any recommendations on a test network?

@joaofernandes6349 Год назад

Correct, now only Goerli testnet is live.

@MiDonGo 2 года назад

Is there a part 2? I’m learning a lot and would like to complete the project.

@normanfung7124 2 года назад

Many thanks for the video. Did you put the project in Git please?

@kamalchan9756 2 года назад

Greate tutorial

@campbellkitts8999 2 года назад

Just amazing

@luiyimora 3 месяца назад

Thank you for your video, I just want to know 2 things: 1. How or where you connect your IPFS CID with your NFT collection, or how to connect your contract with your NFT. 2. How you deployed and host your minting dApp on the web. Thanks!

@skullvatars 2 года назад

Cool Tutorial

@favouradewale1322 2 года назад

Thanks for these

@CodeBeetle 2 года назад

Thsi was a great video thank you. I found you based on your recent video on a simple minting contract. This compliemented it. With no react, VS code, node packages and js skills, I followed along fairly easily. I guess from here I would ask if ppl could point me to creating a message to the wallet owner that their mint was successful, incorporating wallet detection for whilelist, count downs..all stuff I guess I could stumble and find but if anyone could help that would help

@jesikadavidson4964 Год назад

I have this exact question too so let me know if you found the answer

@Gandarufu 11 месяцев назад

While you mentioned that the variables are what's causing gas spikes in your contract, I'm wondering why you wouldn't choose uint8 for something as mundane as maxPerWallet, or uint16 for maxSupply...?

@discodoplan4794 Месяц назад

Hi, Ed. Thank you so much for this video. But I have one question for you) How do I link my smart contract to my ipfs storage. Thanks)

@siavashdeli 2 года назад

the best ttr in the world

@apyogapaartiban 2 года назад

Hi, it's awesome with line by line explanation. Well on the Azuki part, ie., ERC721A, I don't believe it to be good to maintain reputation. Since the flipping cost for some customers may shoot too high when it nears the end loop. Since only first token contains address and follows recursion order.

@danrulz8133 2 года назад

Great video, I love it, it helped me a lot. Maybe the next video is bout to implementing a whitelist function. That would be great.

@Mazi_Sbn 2 года назад

Hello EdRoh, thanks for your lovely video, but i want to know about minting, is the 0.02eth fee for the owner of the mint site? Caz I didn’t see where i was to input my eth Wallet. Just Curious. Thanks

@khushtrivedi14 2 года назад

Did it all from start to finish, couldnt be a more informative video! Love how you explained each and every code as we went along. That really helped me modify things in my way, hope i deploy something nice with this someday❤️ I’ll let you know PS - A discord channel would be amazing for the community to clear doubts amongst themselves!

@yeqianliu8377 Год назад

Don't believe this shameless lier when you have problem,he took my 100 dollars and never reply me.

@0xOrganix Год назад

LEGEND!

@terr0nz249 Год назад

Hey, nice video!! Just wanted to know one more thing. How can I add an actual NFT to the transaction so that when I sent the eth I get an NFT in my wallet?

@toykodev7963 2 года назад

Great video! Question: Is there a way to implement an already deployed contract to this tutorial and minting website? ie an ERC721 contract deployed via remix IDE to Rinkeby testnet?

@TOBIOO 2 года назад

Wondering the same thing

@gravediggergaming6330 2 года назад

Hi thanks for the detailed video just wow amazing brother i need a bit of help how to setup markletree or any other gas efficient way for whitelist mint how whitelisted option can be added to the contract. thanks in advance

@markaguilar736 Год назад

awesome , create more web3 video

@CoryHofstede 2 месяца назад

For the smart contract is there any missing information that we need to fill in? Based on our collection. Or can we copy this exact? I am doing everything myself and have no programming experience....

@mariadelmarmartinez8142 Год назад

Great content!!! I used sepolia to deploy since rinkby is deprecated!!

@alexandreremin4927 10 месяцев назад

Hello, I have a question about the code for this testnet.

@lunarmoon999 Год назад

Do I need to install the solidity language on my computer to follow along this project?

@danuwork4699 2 года назад

good one, but some issue with contact public view override returns nothing override..

@Naitureboy 2 года назад

Hey thanks so much for this! I had one issue come up for when I tried deploying that says “Hardhat Error: HH700: Artifact for contract “Greeter” not found.” - how do I fix this? I removed all the Greeter stuff in the deploy_.js file right?

@zacharyloubert697 2 года назад

I cannot figure out how to pull the API to display minted amount in the daap :( any help would be greatly appreciated. love your videos and they have taken me to the next step in where I am in my web3 journey

@theboy8711 2 года назад

Hello, I'm having tech difficulties on 2019 MacBook. Which Visual Code Studio and node.js install did you use? I have a fresh install of all steps, no previous VCS app. The node files package-lock and package.json doesn't show the green node logo for me, just two yellow brackets. I can't work past the hardhat steps due to vulnerabilities. SOS!

@alienone6645 Год назад

Hello this ive been searching lots of tutorial in yt how to make a full web 3 project and this one is the only one I understand completely and also i want to suggest can you make a another tutorial in your next video on how to use this kind of method but using or adding Presale method aka whitelisting and Public sale contract that supports ERC721A and how to launch it on a custom domain :>, and thats it thank you so much for making this tutorial Ill promise if my project went well ill never forget to give you credits for helping us struggling to build web 3 projects

@yeqianliu8377 Год назад

Don't believe this shameless lier when you have problem,he took my 100 dollars and never reply me.

@Alessandro-mr4ts Год назад

gli NFT mintati verranno anche visualizzati su marketplace come opensea?

@KB-wg5tj 2 года назад

Hey, how would you change the dapp to accept a stable coin or any other coin?

@platformrecruiting4486 2 года назад

Thank you Ed, amazing video. What extension do you use to make Icons larger and more colorful?

@justinficor8810 2 года назад

If I'm doing this for Cronos Blockchain, do I set mintPrice = ___ in cro or is it still measured in ether?

@santiagocordova438 2 года назад

Hello, thanks for the tutorial, it was great. Im tryoing to mint, but im not able on the Rinkeby network, yes on matic and ethereum (havent try) but when clicking mint button, metamask doesnt open up. Thanks!

@logipunk 2 года назад

Very nice tutorial , thank you .... couple of nice to haves is: While you are typing a code it would be nice to let the audience compile it so every once in a while so they dont end up with tons of errors. Wish your nft project would include setting up a dummy gif to actually have it minted (uploading it to ipfs etc), creating meta etc. In MainMints.js not sure why you hardcoded the nft value (value: ethers.utils.parseEther((0.02 * mintAmount).toString())) , that info should be pulled from the contract Once last piece is deploying it to the website .....all tutorials end with just having it run on local , but not on a site....... Once more , thank you for all your hard work.

@janibolletv18 2 года назад

I totally agree with your comment. Concerning deploying it on a website: did you figure out how to do that or could point me to a good tutorial? (I have never deployed a server before so I am new to this) Thanks in advance.

@second9320 Год назад

Buy a domain and vps

@yeqianliu8377 Год назад

Don't believe this shameless lier when you have problem,he took my 100 dollars and never reply me.

@dp-zv6ul 2 года назад

Do you have an extension of this video where we actually host some nft images and mint those ?

@abdulsatarpasandalan4292 2 года назад

Great content! I finised it all the way to the last second but if i click the connect my metamask wont pop-up is it possible for you to share all the codes in .txt? so we can check where we really have an error. TIA

@ShadowWalker8 Год назад

Im having the same problem too

@danieldil6198 Год назад

when you manually put the mint price in the js .02 can we do that with the mintprice variable from the mint contract

@Fantasia1013 2 года назад

please can you explain what do you mean by cheaper and expansive ? i will pay for my contract even aftre i deployed ? and when ppl use my contract i pay for that ?

@hada9455 7 месяцев назад

Do you have a tutorial retrieving data from infura and then display to the web page

@eneskutayyarkan Год назад

After pressing the Mint now button once, the signature page stopped opening when I clicked the next time. The signature page only came up the first time I clicked it. How can I solve it?

@alassaneba1408 Год назад

Nice tutorial bro. If you can make a one for ico (create and sell token with pré-sale time) it will help lot of people like me.

@luckz770 9 месяцев назад

Does the smart contract include whitelist? I’m not going to bother watching through it if it doesn’t have this

@squiddymute Год назад

kinda confused here , i scanned through the video but there's no part of uploading the collection to the IPFS and creating the metadata then sending the user the NFT token upon minting, have you covered that part elsewhere?

@tallkidgoesplaces5959 Год назад

Great Video! Thanks for this one! How would you convert this site to the actual Main net?

@tallkidgoesplaces5959 Год назад

I think I messaged. Can you check? 978 area code?

@Hi-BloGaming 2 года назад

I didn't realize that I was watching the end part already. Your videos are not stressful and so easy to understand, I guess? 😂 Question: What if I want to launch my contract on Polygon? Do I just change certain things to Matic which is the symbol, or do I have to specify it to Polygon? Or, can I even modify it to Polygon instead?

@Hi-BloGaming 2 года назад

I copied and tried this code on remix, the max per wallet is not functioning well, a single wallet can still mint even after the max supply per wallet

@sriharsha8609 2 года назад

how to give ipfs data ?

@cryptomoonlounge1797 2 года назад

HI bro are you on discord :) we're building nft project if you like to join

@Hi-BloGaming 2 года назад

@@cryptomoonlounge1797 would love to sneak in. Lol

@gravecode 2 года назад

Did you do the artwork yourself?

@jianerzhang7383 Год назад

Can you put out an issue following the template on this site with a video that directly replaces the ABI and contract address.

@khushtrivedi14 2 года назад

First of all, thank you soo much for such an informative video! i had a small problem in the very end with the mint button, ive done it all but it doesnt seem to be working. is there any solutions to be lookin for?

@khushtrivedi14 2 года назад

Turns out redownloading ethers made it work! Im now figuring out how to set dynamic mint prices for the contract. Hope i get thru it!

@buenavista62 2 года назад

Where did you create and save the pictures for the NFT?

@flopbob Год назад

hey Ezdoh. U awesome.. can u let me know if we can add minting functionality in our website?

@yourEverydayEngineer 2 года назад

can anyone let me know what i'm supposed to put in the withdrawwallet? i can't seem to figure it out

@jassim4546 2 года назад

Is it possible to make the website in an other platform like webflow, I mean we just have to add a mint button and code but where can I find the code to add in the html?

@andrewgeddes6073 2 года назад

Does he have his code for this project posted anywhere? Would be a lot easier to copy along with.

@gigxr 2 года назад

hey just wanted to ask where should i upload the files and what files should be uploaded so everyone can access it in the web? i already have a domain.