The Complete Guide to Full Stack Ethereum Development – Tutorial for Beginners [2021]
In this video you’ll learn how to build a modern full stack dApp on the Ethereum blockchain with React, Solidity, Hardhat, and Ethers.js. We’ll start from scratch, creating a React application, installing the dependencies, and initializing a new local Hardhat Ethereum environment.
Next, we’ll create a couple of different smart contracts in Solidity, compile them, and deploy them to a local blockchain node that we will also initialize using Hardhat. We’ll then learn how to deploy the smart contracts to a real live test network.
We’ll then connect the React front end to allow users to read data from the blockchain as well as create transactions with MetaMask using test Ether that we create using accounts created by our local test environment.
Finally, we’ll learn how to create and mint real ERC20 tokens, as well as how to rapidly prototype smart contracts using the Remix IDE.
By the end of this guide, you should have a good understanding of how to build modern dApps with React and Solidity on the Ethereum blockchain.
Blog post:
Code:
0:00 – Introduction
1:09 – Initializing and configuring the project
5:49 – Our first smart contract
10:20 – Compiling the smart contract
11:35 – Starting a local blockchain node
12:30 – Deploying the smart contract
14:10 – Installing MetaMask
17:40 – Writing the front end code
30:10 – Deploying to a live test network (Ropsten)
37:50 – Creating a Token contract
43:30 – Creating the Token front end
50:15 – ERC20 Tokens
54:40 – Remix IDE
59:54 – Conclusion
thank you ?
I can’t tell you how much time this video saved me. ?
Absolutely an amazing video! This helped me wrap my head around almost all of the questions I had! Thank you ?
Thank you so much for doing this. Stuff like this is really going to help a lot of us newbies get onboarded into smart contract development. Keep it up!
Nader, thanks so much for this rare and accessible tutorial using a sane and optimal stack. Was very helpful for me. I was able to follow and everything clicked. Kudos and good karma to you!
Definitely great video to hit all the points that are needed to get started. I was looking for a video to get up to speed with Hardhat, and I learned that and some. I have spent multiple hours doing courses, and learned more in 1 hour here!! 🙂
Really great to hear! ?
Thanks Nader for making this available! This video is under-watched even for the crypto community.
Thanks Nader! this is awesome, you really made it so easy for me to understand this concept. This has really given me a confidence boost.
Thanks Nader!!
Until now I was in a stalemate over learning dApps. Every thing is out there, but very less resources teaching how to connect these dots.
But not anymore, with the concepts covered in this video any one willing to delve into dApps will find the right way.
Awesome to hear, thank you for sharing this!!
It is one of the best videos, I have seen so far. Thank you Nader for such a concise video on web3 and full-stack development.
Thanks Nader, very informative and clearly explained! Love your content ??
Great video as always Nader. A couple things that come to mind that I think would be great for follow up videos…
1. How do smart contracts version over time?
2. What is a good technique for injecting the greeter/token addresses so they are not hardcoded?
About 2, environment variables are the only way that I know of. Are you familiar with them?
About 1, curious about that myself. Though so far it looks like maybe they don’t?
@Oleg Morket Was also wondering about 2. Hoping there’s another way
@Oleg Morket Yes, I needed the answer to 2 so badly. Thank you! Have you figured out another way yet?
Really great video and the tutorial. Thank you so much. It covers full stack basic as well as advanced concept with ease.
Great work Nader! This really clears up a few years of confusion. Well done!
Great tutorial, thank you for putting this together
Nice video Nader! Just started my thesis and this tutorial turned out to be super useful. Great job! 🙂
? ? ? ? ? ?
DM for guidance and mentorship
Thank you for taking the time to do this! I wanted to read your blog post earlier and was soo happy that you posted this video! This is greatly appreciated! ??
This is great. I finished the written version of this but did get confused on the testnet step. I figured it out but it is nice to watch you going through this as well.
You are making this space so accessible. Keep it up!
@Nader Dabit I got confused when you talked about MetaMask. I already had it installed from a previous Video so that didn’t help. Can you explain in a few words what I am trying to do with the various Keys. It seems pretty Key …. Excuse the Pun. H
Hell yeah man, thank you for the encouragement ?
thanks for the tutorial Nader! managed to get through it and deploy my first contract to the testnet! had a few issues along with way by worked them out. Looking forward to watching more of your tutorials.
? ? ? ? ? ?
DM for guidance and mentorship
a great tutorial, thanks a lot for all this information! you rock!
Thank you very much! This was exactly what I was looking for. Great overview and great explanation … as always with your content.
Hey bro
Have you faced anything like – Cannot find module ‘eslint-plugin-prettier- error
If you have, could you share the solution with me?