Build and Deploy a Modern Web 3.0 Blockchain App | Solidity, Smart Contracts, Crypto
Вставка
- Опубліковано 2 чер 2024
- Web 3.0 has the potential to change the internet as we know it, forever. You're still early in catching the trend right now and building your first blockchain cryptocurrency app.
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special UA-cam discount code is automatically applied!
The long-awaited NFT Marketplace course is finally out! Check it out and become a professional Web3 developer - www.jsmastery.pro/ultimate-we... 🔥
With a stunning design, connected to the blockchain, metamask pairing, interaction with smart contracts, sending Ethereum through the blockchain network, writing solidity code, and much more, Krypt is the best #Web3 #Blockchain app that you can currently find on UA-cam and the entire internet.
⭐Hostinger - www.hostinger.com/javascriptm...
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
📚 Materials/References:
GitHub Code (give it a star ⭐) - github.com/adrianhajdin/proje...
Styles & Code - gist.github.com/adrianhajdin/...
Images - minhaskamal.github.io/DownGit...
Tailwind Setup - tailwindcss.com/docs/guides/c...
Tailwind Docs - tailwindcss.com/docs
Ropsten Faucet has been deprecated. You can use Goerli.
Etherscan - ropsten.etherscan.io
Alchemy - alchemy.com
🖥️ Project created in collaboration with Enyel Sequeira:
Portfolio - www.enyelsequeira.com
E-mail - enyelsequeira1994@gmail.com
Want me to cover the project you've created? Send me an e-mail 👌
In this video, you'll learn:
- How to connect a regular React.js application to the blockchain and pair it to your Ethereum wallet using MetaMask
- You'll also learn how to write Smart Contracts on the Ethereum network using the #Solidity programming language
- Essentially, in this single video, you'll learn how to create a full-fledged Web 3.0 application that allows users to send transactions through the blockchain
📧 Join our exclusive JavaScript Mastery Newsletter on Web Development, JavaScript & React to get exclusive programming guides, tips & tricks, and entire e-books: resource.jsmastery.pro/newsle... 🔥
💻 Discord - / discord
💻 Master JavaScript: www.completepathtojavascriptm...
Use the special promo code "UA-cam" on checkout to save $60!
❤️ Support JavaScript Mastery & Suggest Future Videos:
BuyMeACoffe: www.buymeacoffee.com/JSMastery
Patreon: / javascriptmastery
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / jsmasterypro
💼 Business Inquiries:
E-mail: contact@jsmastery.pro
Time Stamps 👇
00:00:00 Intro
00:17:04 Setup
00:23:11 Navbar
00:39:08 Welcome Section
01:03:48 Blockchain
02:10:51 Services Section
02:21:53 Transactions
03:07:20 Deployment
The long-awaited NFT Marketplace course is finally out! Check it out and become a professional Web3 developer - www.jsmastery.pro/ultimate-web3-course 🔥
hi man i appreciatie your work. Can you please explaine how to fix it with an other network then Ropsten, because it is deprecated. Please help anyone.
@@Aykutdogan1988 did you find any solution
Hey would you be able to explain that last a bit more? I updated the network object to point to the URL under HTTP after clicking 'view key' is this correct? When running the key I am also presuming you change --network to rinkeby? Thanks :)
@@haydenrandolph9630 Problem solved last answer is all correct anyone else who's looking
@@gabriel-mk7jk thats correct, the only caveat after updating to rinkbey is making sure the hardhat.config is updated and that the "networks" object targets rinkbey as well
He is creating history... Other developers just create design which are useful for only 10% audience.. But He create actual projects... He is insane...
Lots of love from India
Indeed he is creating history...
People like u r inspiration, who put such high quality content for free...while others prefer to earn money. I am not saying those who charge money are morally wrong.....but dude it takes a big heart to give away this kind of content for free. This shows how passionate u r about your profession. I hope universe blesses u with the number of subscriber u truly deserve this year. Happy New Year 2022.
Hell true bhai❤️🌝
I second that!
He is earning money from youtube
You still get the content for free, right?
@@javascriptmastery yes i appreciate your work and useful contents ❤️.
The world needs people like you bro keep it up
I think this is the only channel that I’ve seen with such tutorials, from ReactJS to 3D tutorials. Much love from Kenya 🇰🇪
The whole 3 hours I was just mesmerizing that how could he do that without google search. I've to search google after writing each line. Just next level
I’ll second everyone else’s positive feedback, I enjoyed your incredibly-clear tutorial very much! Admittedly was only looking for the “3.0” part of this tutorial but then allowed the full video to play as it was all very concise and thorough. Good work!
Hey I want to add this in my resume but
In my mock interview, interviewer asked me, why you made this project?
What problem did you solved?
What was motivation behind that?
Can you please answer these questions it will help me in my interview
Even I'm just a beginner this buddy makes the way to do it so easy. This is literally the best web tutorial channel on yt. Thanks so much budd
Thank you so much!
Hey I want to add this in my resume but
In my mock interview, interviewer asked me, why you made this project?
What problem did you solved?
What was motivation behind that?
Can you please answer these questions it will help me in my interview
Im mind blown....Iv been researching how to start exactly what you just presented, im a big Fan of WEb3 and block chain and u have just showed me the big picture on how all these connect with each other, like the whole big Picture.....thank you sooo much...you are very dope.
By the word "Beginner Friendly" He really meant it! I can't thank you enough for this tutorial Brother.
Love the tutorial Man!! It is what we wanted. And I am very much glad that you are now showing coding and website which you are building side by side. Thank you once again!!!
Yess! Thank you!
Agree. I am looking forward to writing this app.
Hey I want to add this in my resume but
In my mock interview, interviewer asked me, why you made this project?
What problem did you solved?
What was motivation behind that?
Can you please answer these questions it will help me in my interview
You always blow my mind everytime with your mind-blowing tutorials, Keep up the good work Man!
Thank you Malik!
i am starting my first web3.0 project now, and I am aiming to land a job in web3 at the end of the year.
-- 10/4/2022 - project init
-- 14/4/2022 - followed step by step
-- 19/4/2022 - skipped styling and layout, improved code structure - 50:00
-- 21/4/2022 - yes! finally solidity contract. I think a better way to follow this video is to read the source code first then watch it - 1:03:46
mark: 1:13:15
Best learning channel that I found in youtube. Special thanks to the author for best explanation step by step. 👍👍👍
Sometimes I think the words can't describe the value of your works and the amount of knowledge you provide for us. Thank you so much for everything, Adrian.
same here!
JSM is like a magic, you just think about something & he comes up with a fabulous tutorial within days.
Can't express how good your tutorials are 💙
Thank you! Means a lot! 😊
@@javascriptmastery the npm part in the beginning did not work
@@johnnytherevelator2579 I fixed a couple issues by researching, if you are learning to code, researching and fixing your issues is going to be needed. Sometimes stuff gets updated and new syntax is needed.
salute to you man! this whole course people are selling for much amount but here is JS Mastery providing this for free ... hats off
You got it Adnan!
Finally, I have been searching for a good tuto for month but most of them are imposibble to recreate... THANK YOU SO MUCH :DD FINIALLY!!
Literally been waiting for a web3 tutorial from you... This is next level!.. Thank you. More web3 projects please
Thank you! 🔥
Hey I want to add this in my resume but
In my mock interview, interviewer asked me, why you made this project?
What problem did you solved?
What was motivation behind that?
Can you please answer these questions it will help me in my interview
Thank you a lot Adrian! I've been waiting for this! This is my favorite educational channel in youtube. You're an excelent teacher.
Thank you so much Lucas!
if you are facing no ethereum object error around 1:59:00 in the video
that error is due to some changes in recent update of ethers package, so you have to go back to previous packages of ethers
to do that :
1) npm uninstall ethers
2) npm i -S ethers@5.7.2
Hope this helps
thanks
salute bro, you really saved me 6 hours debugging this shit, I thought there was a typo in my code.
thanks bro, i had to rethink abt my life cuz of the error
@@0xvector woahh
Thanks bro for this.......I just wasted about 14 hrs by changing the approach and logic aganin and again ........and then saw your comment...It made my day
Fantastic tutorial! It really demystifies Solidity, smart contracts, and the whole app-building process in the blockchain world.
As someone interested in Web 3.0, it's great to see how tools like SubQuery can fit into this, making data handling a breeze. This video is a must-watch for anyone stepping into blockchain development. Great job breaking down complex concepts into understandable steps! 👏
Thank you Adrian ❤️. You just gave us the confidence and reason to look forward to an awesome 2022. Let's go!!
Yes, let's goo!
💯❤️🔥🔥
+1
Now this is what I call next level Web 3.0 stuff. Amazing stuff. Thank you so much. Can't wait to see what you release next.
Thank you so much!
Hey I want to add this in my resume but
In my mock interview, interviewer asked me, why you made this project?
What problem did you solved?
What was motivation behind that?
Can you please answer these questions it will help me in my interview
I have paid $249 for this kind of content, and it wasn't even close. Thanks in Zettabytes!
I'm glad to hear that you found immense value in it! Imagine how much value will be offered in my upcoming course! 😊
This is the greatest video I have seen explaining a broad subject in a way everybody can understand. Thanks for the video...I followed all the steps until the very end...
Thank you SOOOOOOOOOOOOOOOO much man! I REALLLLLY wanted a video like this. May god bless you man. Happy holidays and i wish you a very happy new year
Glad you like it! Happy new year! 😊
you know its gonna be a mind blowing project when he says I haven't been this excited for a project in a long time
Best platform for advanced technologies, web designs, thank you so much.
I kept telling myself why I didn't find your channel earlier. The good news is I found you now and already subscribe! As this journey is gonna be fun and life chaning! Thanks for inspiring us!
I know deeply from my heart that this the best video ever on this topic 👌
Thank you, man! This tutorial is awesome! You deserve 10M subscribers!
I really like watching your videos. They're too easy to understand and not too long also. Keep on doing this.
Moreover, as you said, waiting for your second video on web 3.0 as you crossed your ten thousand views :)🙂
Thanks Mr. Adrian.. You'll always be my go to for quality pro level JavaScript courses.. You're simply the best!
Because of this video.
I'm following you.
I didn't even bother to check your other contents
I just found your videos today. These are some of the best I’ve seen. You’ve answered a lot of questions I had about deployment when using react. Thank you.
thanks Adrian, completed this tutorial without any issues at all.
really great explanation in every aspects.
12K likes in just about a week. I hope you're ready for the second blockchain tutorial soon 😄
just a small typo for reloading the page at 03:06:47 , it is supposed to be location.reload instead of window.reload
Do we need to know React for building this?
@@manojnavinjamuri5867 Unfortunatly so, however I am sure you can get away with a bit of knowledge with JavaScript
This is phenomenal, I am feeling really amazing to be part of this wonderful journey, I am a Data Scientist, doing most of the stuff on consumed data from such apps, but building one is quite an experience, thanks for introducing vite and tailwindcss, what a way to start for a beginner, Thank you so much. keep doing the great work, appreciate it a lot.
Thank you!
hii bro is i am learning blockchain but there is lot of hipe of data science should i go with my interest or follow data science
Never wanted to give someone money so badly. Thanks for this
noticed you're holding Alt and then clicking each thing you want to change. There's a quicker way..... single click inside the first part you want to change then on Mac hold down Cmd + Shift and then hit the D key for each repetition of the bit you want to select including the one you clicked inside. On Windows it's the same but instead of Cmd you simple use Ctrl instead.
Your teaching style is the best vest for someone new - like you said, learner friendly. The way you started this lecture got me going where I thought that if you made a lego part explanation before coding - like a two part where the first is the project to delve into and the second being what you did for everyone especially I in this video.
Yet, I am very grateful you for your upload. Thank you very much. Have a wonderful day and a supernatural avalanche of blessings including deep insights, improved health routine including morning daily walking, and great overall communication with humans and every creature alive.
Thank you so much, means a lot! ❤️
Man seriously you can't believe but day before yesterday I planned to learn about this and today you're present with this . Thank you sooooo much JSM.💓💓
Glad you like it! ❤️
Hey! I need some installation help can you help me please?
This is SUPER helpful, I hope you keep doing this!!! respect!
Extremely well done youtube education. Love you JSM
good video, thank you. In case anyone else was having issues, I found it important to strictly use double quotes instead of single quotes. Was having UI issues until switched over to all double quotes.
Finally I completed it for my final semester project🥰🥰🥰 My supportive teacher is very happy for giving him such unique types of project🥰🥰. Thank you JSM. 🥺😍
hey could you please tell me do I need to have any sort of money in my wallet inorder to complete this project?
@@sandrass8782 no all are fake/test money, that's are not real money just like game coins. It calls testnet faucet
@@suprabhatsahoo2782 cool thanks 🤩
my search ended here for web3.0, big thanks bro ✌✌✌✌✌✌
Valuable content. First step of making education free.
Oh godddd, this is what I wanted. Love you JM 😍
You got it! 😊
Wow! Thank you soo much!! Your content is unbelievable!
Thank you so much! ❤️
Absolutely fantastic tutorial i have ever seen about react and blockchain
Great Great Great Thank you. we need more like this. this is what we are starving for.
Adrian you are a Legendary javascript Developer 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
Thank you! 🔥
Definitely you are The First... Gratitude for teaching us
Glad you like it! 😊
Wow, Wow, Wow - so AWESOME 🤩🤩🤩 Thank you so much. You are simply a fantastic teacher!
Thank you for this web 3.0 application. The video reached 33 likes and we are waiting for next web 3.0 application
Amazing content. I went from total beginner to launching my first project in a matter of days thanks to this tutorial. Please keep doing new tutorials and maybe do one on how to add more functionality to your project like staking
Great idea, thank you!
@@javascriptmastery can we do this project with free hosting service, please be enough kind to reply! Thanks
What was your project? - Going well? :)
Hey I want to add this in my resume but
In my mock interview, interviewer asked me, why you made this project?
What problem did you solved?
What was motivation behind that?
Can you please answer these questions it will help me in my interview
Adrian is the best as always known for his projects :)
Thank you! ❤️
by far the best tutorial. this is the only one i've found that correctly handles connecting to a wallet with page refresh. haven't found any other tutorial that goes over that implementation detail. thanks!
Hey Brian, I'm so glad to hear that! If you like this one, you'll LOVE what I'm preparing right now. Stay tuned! 💯
The tutorial was useful to me for using the bot. Thank you very much everything is told in an accessible and understandable way. The tutorial was useful
Bro! That's genius, you got a new subscriber.
Awesome, thanks!
Sir, Please do another web3.0 project! Your projects are very clear and easy to understand. 😍
First of all, thank you for taking the time to make this tutorial and the other ones too. Really well explained and detailed. But as a suggestion for the future, is really hard to follow when you can't see the whole line of code, I have to go back and forward in your video just to make sure I haven't missed something, maybe next time use 'Word Wrap' or don't split the screen with the browser. Thank you again.
Always word wrap when writing for others. Alt + z I believe?
@@MasterofLightning can be also changed in settings as default behaivour
Incredible video. Learned so much about react and blockchain technologies in this one
30k likes. Man I love you. I always recommend friends to your channel. Ypu gave me my programming gift. Thanks always. 💗🥺
1:05:00 "55 vulnerabilities (9 low, 21 moderate, 25 HIGH)'
Adrian: We're ready.
Also WHY OH WHY are you installing ethers in the contract directory?
I'm having issues with installing hardhat-toolbox and running the test project. Could this be as a result...
Omg I am speechless.I can't thank you enough for everything u do for us.I was looking for the same kinda project and u uploaded it. you are such a legend ❤️😊
Thank you! 😊 ❤️
I am enjoying the course very much, and I have been able to solve all the problems that have arisen so far, thank you very much for the course.
Clear, and concise. I had so much fun developing this project along side you and look forward to discovering all of the great tutorials you have to offer.
#Web3Inbound#ToTheMoon!
Thank you so much for this great video 🙂
Glad you like it!
Amazing tutorial and the channel!
Thank you!
Your channel is amazing. You make the best, most easy to follow tutorials
Great Course and Free too. Thanks! 😃
This guy is a LEGEND.
Thank you so much 🙏🏻❤️
Thank you! ❤️
I'm still watching the video, but, it's so good and has such quality content that I wanted to comment. I really can't express my gratitude to your tutorials, especially this one 💙 keep up the great work 💙
We are mining company,I watched your youtube channel and thought it was great ,we would like to ask you to make a promotional video for us to promote our platform,please send me your telegram if you are interested
Hey I want to add this in my resume but
In my mock interview, interviewer asked me, why you made this project?
What problem did you solved?
What was motivation behind that?
Can you please answer these questions it will help me in my interview
This is the best video thar youtube have recomended to me! Ty for this tutorial! Love ur channel
Amazing lesson !! Thank you for your work and your video well build !!
Awesome video brother 😎👍🏻🔥🔥
Thank you! 😊
It's crazy how good your videos are, keep up the good work 🔥
Thank you!!
Freaking 22/1/22 now
excited when i find this video out in the future!!
Thank you so much man !!! You are the best!!
Amazing content! Keep it up bro
Thank you!
So by April 2023, many of the things have changed or either stopped working, multiple error fixing, versions are upgraded and its difficult to catch up with the project now....
such as Ethereum in your wallet.
Great video y'all. Thank you so much.
Simply amazing. Thank you!
Investing in cryptocurrency is the best way of
getting ahead to build wealth, investing remains a
priority. The Cryptocurrency market has plenty of
opportunities to earn a decent payouts, with the
right skills and proper understanding of how the
market works, I pray that anyone who reads this
will be successful in life..
You're right sir
Natural, there's a lot of math involved in forex
trading,
but this is often presented in forms of daunting
technical charts, indicators, patterns.
Trading systems allow you to limit the factor of
emotional influence on decision-making,
as well as to give the trade a
certain degree of systemic character.
Thank you so much for preparing video in web3 ❤️💖🇳🇵🇳🇵
No problem! 😊
Looking forward to that second web3 video ;) - Thanks as always, Adrian
Thank you Karsen!
Some people are born for greatness no doubt about it.
This is amazing! I am so glad I came across this!
Thanks Kyle!
Thank you for making this video
Iam new to web 3.0 I have learnt many things from you
Your tutorials re my fave movies !!!🙏🏻🚀 🍿
I'm having a lot of trouble with the front-end, all the components are stacked on top of eachother when they render on the browser. Most of the text is black and is hard to see with the dark purple background, in general nothing looks as it is supposed to. I installed all the latest packages, not sure if the original css code on the video and GitHub rep doesn't work well with the current version of tailwind... would love some help
Thank you for the video. Your videos has always been a great help since I started learning to code. But for better educational content, I suggest you include some DIYs in your clips in order for us to learn more and learn how to solve problems ourselves instead of just coding along. I know it's gonna take more time and effort for you to make videos like these but I think many of us wouldn't bother waiting for you to take some more time to make videos if it's needed, so hopefully you will take this recommendation into consideration.
Great effort in building blockchain application, thanks a lot !
Thank You for great videos! You are the best! Suddenly I realized I've stopped watching other tutorials ha-ha! It would be nice if project like this one works with mobile also! Happy New Year!!!
1:40:45 BREAKING CHANGES: Code on screen for main.jsx is different to the code in the file up to this point. Import 'react-dom/client' is changed to 'react'. 'ReactDOM.createRoot' is changed to 'ReactDOM.render'. 'ReactDOM.render' is now depricated in current REACT v18!! Also, keeping 'ReactDOM.createRoot' has buffer problems!!
Solution: Roll React back from v18 to 17, Google has instructions. Just completed the whole video, site works as it should. thank you JSM!!
Subscribed and Liked
I've been following the video up until that point, but I don't have a main.jsx file in mine, what do you think I should do?
@@shreedharpatil1710 Yes, you should if you've been following along. Did you name it something else? Or just don't have it?
@@greaver5470 I just don't have it for some reason. I think it's a problem with the version of something
@@markphilip3982 Yeah mate, 1 line, just google it.
hey i roll back to v17 but still there is only one error at ' requestUpdateLane, at updateContainer ,at ReactDOMHydrationRoot.render.ReactDOMRoot.render in main.jsx'
Always surprising us
Always!
Very Helpful... Great video
Hoping for more Web 3.0 projects
That was a phenomenal tutorial ! You delivered so much value here. Very beginner freidnly as well. Thanks a lot !
Hi, I kind of have an issue while running the command "npm init vite@latest" and after selecting react as the framework and react is not shown in the list of variant. what's showing other than react is "TypeScript + SWC, JavaScript and JavaScript + SWC". So, what should I choose other than react or have I done any previous steps wrong or am I missing something? I'm just trying to learn this by doing it step by step as instructed.
Thank You.
just js is enough