How does a standard web app interact with the blockchain? Learn to connect a front-end to a smart contract using MetaMask and the Web3.js library.
#1about 2 minutes
Comparing the core principles of Web2 and Web3
Web2 is characterized by centralized monetization and a lack of user privacy, whereas Web3 offers user control and privacy by default.
#2about 2 minutes
Understanding blockchain as the foundation of Web3
Web3 uses blockchain's distributed ledger technology to create a more secure, open, and trusted internet, solving many of Web2's inherent problems.
#3about 3 minutes
Defining blockchain's key concepts like immutability
Blockchain is an immutable, distributed digital ledger where data is stored in encrypted blocks across a network, making it secure and decentralized.
#4about 3 minutes
Introducing MetaMask and the Web3.js library
MetaMask is a browser extension that functions as a wallet and enables browsers to interact with Ethereum, while Web3.js is the JavaScript library used to communicate with the blockchain.
#5about 4 minutes
Prerequisites for connecting dApps with MetaMask
To connect a front-end application to the blockchain, you need the Web3.js library, a MetaMask wallet, and the specific smart contract's ABI and address.
#6about 8 minutes
Reading and writing to a smart contract via Etherscan
You can directly interact with a deployed smart contract on a block explorer like Etherscan to read data or write new data, which requires signing the transaction with MetaMask.
#7about 7 minutes
Setting up a React front-end with Web3.js
The front-end is built with React and uses an interaction utility file to import Web3.js, the contract ABI, and the contract address to create a contract instance.
#8about 12 minutes
Writing data to the blockchain from a React app
To write data, a transaction object is created with the recipient address and encoded function data, then sent using `window.ethereum.request` which prompts the user to sign in MetaMask.
#9about 8 minutes
Live demo and recap of the dApp architecture
A live demonstration shows the full workflow of updating a smart contract's state from a React front-end, followed by a recap of the project's architecture and a link to the source code.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
06:27 MIN
Connecting a web front-end to a smart contract
Smart Contract fundamentals - My first DApp
07:02 MIN
Essential tools for Web3 frontend development
Testing web3 applications
01:58 MIN
Q&A on wallet providers and developer tooling
SSO with Ethereum and Next JS
06:11 MIN
Essential tools for building a Web3 application
Road to Web3
06:20 MIN
Interacting with smart contracts using ethers.js
Testing web3 applications
07:24 MIN
Answering common questions about web3 development
Web3 Developer Crash Course
03:15 MIN
Exploring Web3 use cases and their inherent challenges
Web3: Embracing the Next Era of the Internet Within a Web2 Landscape
04:42 MIN
A live demonstration of the wallet sign-in process
WeAreDevelopers LIVE days are changing - get ready to take partStarting with this week's Web Dev Day edition of WeAreDevelopers LIVE Days, we changed the the way we run these online conferences. The main differences are:Shorter talks (half an hour tops)More interaction in Q&AA tips and tricks "Did you know" sect...
Luis Minvielle
The Best Upcoming IT WebinarsNow that you already know what IT webinars are and how they can help you level up your professional appeal, you might want actually to get into one. Live tech webinars are one of the best ways to stay on top of the latest trends and tools because eit...
Julia Beyers
7 tips on how to become a blockchain developerBlockchain is one of the most exciting emerging technologies in the world. Blockchain networks like Ethereum make it possible to create self-executing contracts called “smart contracts”. These are set to revolutionize many industries – from finance t...
Chris Heilmann
WWC24 Talk - Brenda Romero - Stay: Surviving and Thriving in TechBrenda Romero discusses her tech career journey, overcoming burnout, and inspiring future game developers at WWC24.Here is what she had to say in the video:Hey everyone! Thanks for joining us!Reflections on a Rough YearLast year, I gave a talk about ...
From learning to earning
Jobs that call for the skills explored in this talk.