Тёмный

How to easily create a Web3 Mint Website from scratch | React, Hardhat, Ethers 

EdRoh
Подписаться 82 тыс.
Просмотров 31 тыс.
50% 1

In this video we will be creating a simple Web3 mint website.
openzeppelin contracts:
import '@openzeppelin/contracts/access/Ownable.sol';
import '@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol';
import '@openzeppelin/contracts/utils/math/SafeMath.sol';
Description:
React: reactjs.org/
Hardhat: github.com/nomiclabs/hardhat
Ethers: docs.ethers.io/v5/
-----------
Chapters:
0:00 Mint Button Web3 Application
1:37 React, Ethers, Hardhat, and Web3 Setup
3:56 Writing a Basic Smart Contract that can Mint
11:41 Creating the Mint Button
19:40 Writing our Visible Elements
22:43 Testing our Mint Button Site
26:03 Web3 Front End Apps are Simple
-----------
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.

Наука

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

 

7 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 74   
@ElonRust42069
@ElonRust42069 2 года назад
Simple, short and sweet. Easily understandable.
@itsliaa4223
@itsliaa4223 2 года назад
omg please post more I've been trying to look for a tutorial like this.
@0x0abb
@0x0abb 2 года назад
very nice - short but loaded with useful content!
@djblast101
@djblast101 2 года назад
This was the best tutorial that makes it simple af. Thank you
@justinfleagle
@justinfleagle 2 года назад
This is very good. Well paced as well.
@0xkoko449
@0xkoko449 2 года назад
Awesome tutorial!! Now I have plans for tomorrow! 🖖🏼👩🏼‍🎤
@enchance
@enchance 2 года назад
I like your content very much. I usually watch videos at 1.75 speed to save time (programming vids) and I must say you sound real smooth at 1.75.
@devkyu7674
@devkyu7674 2 года назад
Thanks! Love your tutorials!
@jeanmanuel6577
@jeanmanuel6577 2 года назад
This is very helpful. thank you!
@paddev5901
@paddev5901 2 года назад
Thanks, this was really helpful!
@ehinderoisrael1697
@ehinderoisrael1697 2 года назад
Just finished coding along, thanks for the content
@catreunion
@catreunion 2 года назад
Thank you so much! I learnt a lot from this tutorial.
@darrellrussell7259
@darrellrussell7259 2 года назад
love it, very helpful!
@pitbul67204
@pitbul67204 2 года назад
Great tutorial 👍
@sjohncreations4369
@sjohncreations4369 2 года назад
Saw that in some of your videos you were going to type .tsx, did you try playing around with hardhat & typescript?
@ricky3441
@ricky3441 2 года назад
Just wondering, why youtube ban smart contract making tutorials hahah, anyway amazing tutorial waiting for the next tutorial 🔥🔥
@zokpls8712
@zokpls8712 Год назад
u are a GOD
@Androgamer-yx7tu
@Androgamer-yx7tu 2 года назад
Can you tell me where the "setMintFunction" is defined which we are using in onClick?
@VINNIE9119
@VINNIE9119 2 года назад
thx so much
@jc3po798
@jc3po798 2 года назад
After enabling the hard hat at 2:57 I try to install the dependencies but the option of yes or no doesn’t come up for me. What should I do
@GenchoOganisyan
@GenchoOganisyan 2 года назад
You showed how to create a test button on localhost - can you explain how to connect to a personal website? maybe some files need to be uploaded to the hosting? or something else? I haven't seen any examples of how to connect to a live website, only localhost how i can contact you?
@Tonbeans
@Tonbeans 2 года назад
how do you claim the ETH, as the owner of the contract, from the transactions that people have made?
@sijalbindu307
@sijalbindu307 2 года назад
hey so i just got a quick quastion ,after i run hard hat and try to install the sample project, I run into a error saying it cannot install gitimore , gives me error hh16 saying it cannot run it on the file that i have (full-mint-site). what do you suggest i should try
@vakulsaxena2105
@vakulsaxena2105 2 года назад
Estimate gas error ? Any solution
@itzbigmoney
@itzbigmoney 2 года назад
Will this work for Cronos Blockchain? Cronos is apparently "EVM-compatible"...
@clownobservatory5580
@clownobservatory5580 2 года назад
Is it normal to get all those warnings when installing hardhat?
@benjaminbouskila8500
@benjaminbouskila8500 2 года назад
hi when i run npx create-react-app web3 it says success but it doesnt create any file can someone help ?
@aminabcf5749
@aminabcf5749 Год назад
at the end i got Compiled with problems: module ethers not found error how can i solve that even though i have installes the ethers module
@mattaertker4783
@mattaertker4783 2 года назад
So I absolutely loved the tutorial, just one question: after receiving the tokens from the mint, how do you associate those minted tokens with a jpeg? For example, when I have done other mints, it isn't displayed as a token in my wallet, but a label saying skull #113 or something like that. Do you know how to implement this?
@LucasTST
@LucasTST 2 года назад
would love an answer to this as well
@EdRohDev
@EdRohDev 2 года назад
hey matt, in this video i have not done so for the sake of video brevity. Depending on the platform, you want to use (ie Opensea vs rarible) the implementation might be different. but let's take Opensea for example, go to google and type "opensea metadata standards", click the opensea link and under the section "implementing token uri", should be some guidelines. Essentially you will have to create a baseTokenUri variable and create a function that sets this variable to the url to which your file is hosted. As with all things blockchain, it is a bit more confusing than it looks.
@0x0abb
@0x0abb 2 года назад
check out moralis nft tutorials - here Filip goes a bit more depth: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tBMk1iZa85Y.html
@andrea_zero
@andrea_zero 2 года назад
Maybe a dumb question. How can i create a real website instead of localhost? If i got my website project and create a pege with mint button, how to link the minting button to my website? Thanks.
@joseysusamigos
@joseysusamigos 2 года назад
what is theme vscode?
@ondo4509
@ondo4509 2 года назад
Excuse me Sir, i wanted to know wether i have to deploy a new smart contract only for the website or could i take the deployed smart contract for my NFT collection?
@kramavich2840
@kramavich2840 2 года назад
yes i have the same question
@MatthewJacobus66
@MatthewJacobus66 2 года назад
Can you share the code here? it will be really helpeful!
@iszzytechofficial9404
@iszzytechofficial9404 2 года назад
Please How can I add NFT prices
@chenchou
@chenchou 2 года назад
Would you please provide your source code, thanks?
@sg3mes751
@sg3mes751 2 года назад
How to use IPFS in it?
@eternalgaming8710
@eternalgaming8710 2 года назад
hi once we created mint button like end of the video how are we gonna design our whole website page?
@bellywash6684
@bellywash6684 2 года назад
You're gonna have to watch some tutorials on html, css and javascript. Or find a template somehwere.
@RdozeTV
@RdozeTV 2 года назад
How to pass costs??? T_T I got insufficient funds when trying to mint using none owners account
@phonesecurity2878
@phonesecurity2878 Год назад
add this to fix some errors in jsx scope for new react version import React from 'react'; import ReactDom from 'react-dom';
@NK-xk7me
@NK-xk7me 4 месяца назад
Everything worked but my window just shows „this is how you create a mint button“. Did someone solved this issue?
@youngvenom4463
@youngvenom4463 2 года назад
just wanted to ask what is that symbol at 20:09
@Paco1337
@Paco1337 2 года назад
&& ?
@laptopbread
@laptopbread 2 года назад
anyone knows ?
@detroit666
@detroit666 2 года назад
im getting an HH8 error :(
@mileezy
@mileezy 2 года назад
What code editor is this? Looks slick
@bellywash6684
@bellywash6684 2 года назад
Visual studio code
@kionlarsen7029
@kionlarsen7029 2 года назад
Did anybody manage to complete this, because my React just leaves me with "This is how you create a mint button0", everything seems to be working, I have created and running the node, contracts is created, but website does not work :(
@NK-xk7me
@NK-xk7me 4 месяца назад
Same Problem, did u solved it?
@crypto_peng
@crypto_peng 2 года назад
yo man you should join our DAO( no just kidding where is your Twitter account?
@simonll411
@simonll411 2 года назад
holy s* dis roh from lbac?
@0xkoko449
@0xkoko449 2 года назад
9999.9998 eth 😩🤯
@coubclub9419
@coubclub9419 2 года назад
its a testnet you clown king
@DrDre001
@DrDre001 2 года назад
Upload the code to a gist
@Paco1337
@Paco1337 2 года назад
Line 52:34: 'setMintAmmount' is not defined no-undef Line 54:34: 'setMintAmmount' is not defined no-undef I'm getting this and like 170 other errors
@bellywash6684
@bellywash6684 2 года назад
You spelled amount wrong
@Isa-dw7wo
@Isa-dw7wo 2 года назад
its supposed to be setMintAmount not setMintAmmount
@pankajjoshi8292
@pankajjoshi8292 2 года назад
Tutorial looks good , but pls teach us hardhat other basics first
@EdRohDev
@EdRohDev 2 года назад
thanks! for sure I can make some more basic videos of the tech here. it can be a bit messy with all the packages with Web3 but i can do more focused videos
@youngvenom4463
@youngvenom4463 2 года назад
for me only this is how you create a mint button zero nothing else pops up like the metamask wallet
@thebepis712
@thebepis712 2 года назад
Did you ever find a solution
@youngvenom4463
@youngvenom4463 2 года назад
@@thebepis712 i have not sorry
@NK-xk7me
@NK-xk7me 4 месяца назад
Did u found the solution?
@joshandrews5887
@joshandrews5887 2 года назад
If u have a second, i sent you an email
@othmanehachad2778
@othmanehachad2778 2 года назад
hey man great tutorial really loved it !! I came across this error that i cant seem to find the answer of : THIS LINE : const response = await contract.mint(BigNumber.from(mintAmount)); Error: cannot override "_hex","_isBigNumber" (operation="overrides", overrides=["_hex","_isBigNumber"], code=UNSUPPORTED_OPERATION, version=contracts/5.6.0) Do you have any idea of how i could fix this ??
@zokpls8712
@zokpls8712 Год назад
same, cant figure this out
@NK-xk7me
@NK-xk7me 4 месяца назад
Just don’t use it, ethers said it is already inside
Далее
The Only CSS Layout Guide You'll Ever Need
24:22
Просмотров 104 тыс.
Signal for help
00:52
Просмотров 5 млн
Unity DOTS vs Handbuilt: Sample Project
27:56
Просмотров 674 тыс.
Building a React App to Mint Tokens and NFTs on Solana
53:54
microsoft's new AI feature is a privacy nightmare
9:34
Юмор AirPods Max 😃
0:36
Просмотров 21 тыс.
Will the battery emit smoke if it rotates rapidly?
0:11
СТОИТ ЛИ БРАТЬ IPHONE 13 В 2024?
13:53
Просмотров 29 тыс.