Build and Deploy a Modern Web 3.0 Blockchain App | Solidity, Smart Contracts, Crypto
VloĆŸit
- Äas pĆidĂĄn 16. 06. 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 CZcams 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 CZcams 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 "CZcams" 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
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
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...
I think this is the only channel that Iâve seen with such tutorials, from ReactJS to 3D tutorials. Much love from Kenya đ°đȘ
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...
You always blow my mind everytime with your mind-blowing tutorials, Keep up the good work Man!
Thank you Malik!
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 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.
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 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! đ
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!
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.
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
Thanks Mr. Adrian.. You'll always be my go to for quality pro level JavaScript courses.. You're simply the best!
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!
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
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
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 :)đ
Best learning channel that I found in youtube. Special thanks to the author for best explanation step by step. đđđ
Thank you, man! This tutorial is awesome! You deserve 10M subscribers!
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
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!
By the word "Beginner Friendly" He really meant it! I can't thank you enough for this tutorial Brother.
This is SUPER helpful, I hope you keep doing this!!! respect!
Wow! Thank you soo much!! Your content is unbelievable!
Thank you so much! â€ïž
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
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! đŻ
Extremely well done youtube education. Love you JSM
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
Great Great Great Thank you. we need more like this. this is what we are starving for.
Best platform for advanced technologies, web designs, thank you so much.
Definitely you are The First... Gratitude for teaching us
Glad you like it! đ
Looking forward to that second web3 video ;) - Thanks as always, Adrian
Thank you Karsen!
Incredible video. Learned so much about react and blockchain technologies in this one
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!
Oh godddd, this is what I wanted. Love you JM đ
You got it! đ
This is one best project I saw on CZcams. So much integration. I love it. Putting so much things together
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
Your channel is amazing. You make the best, most easy to follow tutorials
Adrian you are a Legendary javascript Developer đ„đ„đ„đ„đ„đ„đ„đ„đ„đ„
Thank you! đ„
This guy is a LEGEND.
Thank you so much đđ»â€ïž
Thank you! â€ïž
I know deeply from my heart that this the best video ever on this topic đ
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! đ
Bro! That's genius, you got a new subscriber.
Awesome, thanks!
It's crazy how good your videos are, keep up the good work đ„
Thank you!!
This is the best video thar youtube have recomended to me! Ty for this tutorial! Love ur channel
Absolutely fantastic tutorial i have ever seen about react and blockchain
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 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
Amazing lesson !! Thank you for your work and your video well build !!
I'm a little late into the web3 hype but found your tutorials so good. Thanks for the amazing content you post regularly.
Awesome video brother đđđ»đ„đ„
Thank you! đ
This is amazing! I am so glad I came across this!
Thanks Kyle!
Wow, Wow, Wow - so AWESOME đ€©đ€©đ€© Thank you so much. You are simply a fantastic teacher!
Great tutorial!! I really enjoyed it. Thanks for your time and so amazing content đ
Thanks Erick!
Amazing tutorial and the channel!
Thank you!
Amazing content! Keep it up bro
Thank you!
ĐĐ°ŃĐž ŃĐČŃĐ·ĐșĐž ĐČŃДгЎа ĐČŃŃŃŃĐ°ŃŃ. ĐĐłŃĐŸĐŒĐœĐŸĐ” ŃпаŃĐžĐ±ĐŸ!
wonderful, wonderful, wonderful!!!
this tutorial is exactly what i was looking for...you really went extra mile to help grow web3 enthusiasts...once again thanku for doing such a great job...keep it up
Thank you so much for this great video đ
Glad you like it!
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!!!
WOW just WOW ive been looking for this for ages!! I cannot thank you enough!!!!!
Glad you like it Blake!
@@javascriptmastery The only issue it seems im having is to remove smart-contract> in the terminal to insert cd .\client\
I fixed it!
Adrian is the best as always known for his projects :)
Thank you! â€ïž
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
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
Thank you for the knowledge all the good information you are giving us.
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
Sir, Please do another web3.0 project! Your projects are very clear and easy to understand. đ
Very Much Helpful ! Waiting for more such projects !
Teleqram me đâŹïž
Very Helpful... Great video
Hoping for more Web 3.0 projects
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! â€ïž
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.
Valuable content. First step of making education free.
It's really hard to find quality tutorials on how to build dapps right now. Thank you for this :)
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.
Thank you so much for preparing video in web3 â€ïžđđłđ”đłđ”
No problem! đ
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
Thank you very much for your detailed and friendly explanation!
Glad to help! đ
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
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
Great effort in building blockchain application, thanks a lot !
my search ended here for web3.0, big thanks bro ââââââ
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 goals for next year was to learn react and block chain development. Guess I have a starting point now. Thanks a lot
Enjoy! đ
Thank you for putting up this video. Is definitely a great resource for us to learn about Web 3.0.
Thanks for such a wonderful tutorial. Really appreciated. And lots of love from Bangladesh.
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! đ â€ïž
This is great
Thanks!
Just finished my project following your tutorial. Man, this is just amazing. Congratulations and thank you so much!
can we directly run the file from git ...is it working ?
Great Course and Free too. Thanks! đ
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.
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
Never wanted to give someone money so badly. Thanks for this
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.
Yayđđ
Enjoy! đ
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.
đFREE Ultimate WEB 3.0 Roadmap: resource.jsmasterypro.com/web3.0-roadmap
It reached 20 000 likes. Looking for your second Web 3.0 video
Yes please it has reach 20k likes !!!
24k likes now
how do I attach links to the navbar items
Thank you so much man !!! You are the best!!
Your tutorials re my fave movies !!!đđ»đ đż
Always surprising us
Always!