Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Blockchain: Build a Dapp using Solidity, Hardhat and React

Name: Blockchain: Build a Dapp using Solidity, Hardhat and React
Rating: 4.2 (143 reviews)

Harness the power of the most disruptive technology, since the internet through building a hands on application.

Created byKavit Mehta

Last updated 2/2022

English

What you'll learn

Why this is important
Understand the theory behind Ethereum
Create their own Smart Contracts
Learn to Deploy their Smart Contract to Ethereum Test Network
Learn to Unit test a Smart Contract
Learn to build Frontend that interacts with Blockchain
Learn end to end development of a platform using Blockchain as Backend

Course content

6 sections • 35 lectures • 1h 58m total length

What is Decentralized application?1:43
Explore how decentralized applications run on a blockchain network rather than a single authority, often on Ethereum, in a public open-source environment where messages, once published, cannot be deleted.
What will be Tech Stack for the the course1:40
Resources0:41
Access the repository with all code as we progress and use the provided resources. Join the Discord server to chat and post questions; the instructor is available about 12–14 hours.

Introduction to IDE (Remix: Ethereum)0:55
Create a new Smart Contract2:05
Create a new Solidity smart contract by adding a .sol file in the contracts folder, specifying pragma solidity 0.8.4, and importing dependencies while noting reserved words.
Writing comments in Solidity0:53
Learn to write comments in solidity to explain what code does for future engineers. Use single-line comments with double slash and multi-line comments to embed a paragraph.
Variables in Solidity3:27
Types in Solidity2:35
Explore Solidity’s basic types, including bool, int and unsigned int with varying bit sizes, strings, fixed point, and the address type used to store wallet data.
Conditionals and Operators in Solidity3:30
Explore arithmetic, comparison, logical, bitwise, and assignment operators in Solidity, and learn how the ternary conditional and if-else statements drive control flow in smart contracts.
Loops in Solidity1:30
Explore the three basic looping statements in Solidity, while, do-while, and for, and learn how to iterate over data structures, perform computations, and manage loop conditions.
Functions in Solidity1:41
Compiling and Deploying your Smart Contract4:37
What is ABI?1:55
The application binary interface (abi) standardizes how outside callers interact with ethereum contracts, encoding method inputs and outputs via a schema, as described by contract metadata.

Introduction to MetaMask2:55
Discover how MetaMask serves as a crypto wallet and browser extension for Ethereum networks. Install, view your wallet address, use testnet Ethereum, and manage multiple accounts.
React as Frontend1:03
Explore how we use React as a lightweight frontend to interact with the Ethereum blockchain, highlighting essential packages and dependencies to connect the UI with the backend and Node.js.
Introduction to Hardhat1:41
Explore how hardhat functions as a professional solidity development environment, enabling npm installation, local coding, and deploying to the atrium network with debugging facilities and dummy contracts and scripts.
Introduction to Alchemy2:14
High Level Architecture Flow for the Dapp2:27
Explore high level architecture of a decentralized application, from setting up a MetaMask wallet and deploying Solidity smart contracts with Hardhat to building a React UI that connects to Ethereum.
Overview of the Project: Libary Catalog Dapp for tracking book reading1:49
Develop a library catalog DApp that tracks book ownership and reading status across three users, using Ethereum blocks to record unfinished and finished states via a React frontend.

Setting up work Environment4:21
Set up a comprehensive blockchain dapp environment with Hardhat, ethers, and testing tools; create a project structure with contracts, scripts, and tests, and configure deployment using environment keys.
Smart Contract: Add Books functionality in Solidity10:02
Smart Contract: Visualization of Add Book functionality3:16
Smart Contract: Get Books Functionality4:50
Explore implementing smart contract functionality to retrieve finished books with an external view, using a private get_book_list utility and a get_finished_books function that filters by owner and finished status.
Smart Contract: Visualization of Get Books Functionality2:38
Visualize how a smart contract's getBook method reads the booklist from the blockchain, uses a temporary variable and a counter to return up to three books owned by the user.
Smart Contract: Set Book finished functionality3:30
Implement the set finished function in a smart contract, verify the sender, mark a book as finished, and emit a set finished event for a library content management app.
Smart Contract: Visualization of Set Book finished functionality1:25
A user presses the finish button, triggering smart contract code that validates the book id and marks it finished, then pushes a new block containing finished: true to the blockchain.
Write Smart Contract deploy script using Hardhat3:20
Write a Hardhat deploy script in JavaScript to deploy the library contract using a contract factory from ethers, log the deployed address, and enable frontend interaction.
Write Unit test for Smart Contract11:48
Fetch Alchemy key and MetaMask key4:49
Fetch the Alchemy key and MetaMask private key to configure Hardhat and deploy the smart contract, using an environment file and network accounts to cover gas fees.
Deploy Smart Contract1:12
Deploy the contract with the hardhat run script to Ethereum; the output shows the contract address and gas details you must save for the next frontend step.

Setup Frontend work environment4:19
Set up the frontend for the blockchain dapp by initializing a Next.js app with tailwind, adding axios for blockchain calls, and wiring the contract address and related metadata.
Implement Main component of App in React11:01
Implement the main React front end to connect MetaMask, verify the correct network, and submit or display books via a web3 contract using a TypeScript setup.
Completing the UI8:44

Improvements that can be made to the Application1:57
Explore UI improvements for a WhatsApp-like dapp built with React, and optimize Solidity contracts to reduce gas fees by reducing data and using libraries.
Conclusion1:48
Review Hardhat as the framework to build and deploy blockchain apps, with MetaMask as the wallet, and cover Solidity basics, smart contract deployment, and UI integration to call methods.

Requirements

Knowledge about Solidity
Beginner knowledge in JavaScript
Basic idea about Blockchain

Description

In this course, we will do a deep dive into the world of Blockchain by building an end to end solution using cutting edge technologies like -

1. React - Frontend.

2. Solidity - To write Smart Contracts.

3. Hardhat - To deploy and test Smart Contracts.

4. Ethereum Blockchain - Backend.

From the start, our focus will be on Blockchain concepts and understanding them by working on a hands-on project to build a

Decentralized Library Catalog Application.

We will split the whole course into three modules:-

Module 1: Setting up workspace and getting all the required dependencies
Module 2 and 3: Writing Smart Contract for Library Catalog using Solidity.
Module 5: Setting up Hardhat configuration and deploying our Smart Contract
Module 6: Get Frontend ready using React to interact with Ethereum Blockchain.

Here is what you will get with this course:

1. From Intermediate to Blockchain expert: The #1 criteria for success in anything is to be fascinated. If you combine your interest in Blockchain with this training, you’ve got everything you need to become an expert in the field - even if you’re unsure where to begin.

2. A focus on doing, not just listening: The best way to reinforce a skill is to practice it yourself, and blockchain is no different. Not only we will go through each and every single line of code, but we will also take regular steps back to see the logical flow of our creations.

3. The guide to intuitive understanding: In this course, you will not only develop the required skills and deep knowledge about Blockchain, but you will also get the right tech instincts. Through this intuition, you will feel where and how to apply Blockchain in the real world.

4. Real-world applications: The project you’ll develop provides the perfect starting point to rapidly gain expertise. Everything you build and practice will be an exciting journey with real-world impact. When finished, you’ll be 100% ready to apply your skills to anything Blockchain-related.

5. In-course support – We’re fully committed to making this the most accessible and results-driven Blockchain course on the planet. This requires us to be there when you need our help. That’s why we’ve put together a team of professional Data Scientists to support you in your journey, meaning you’ll get a response from us within 48 hours maximum.

Who this course is for:

Any students in college who want to start a career in Blockchain & Cryptos.
Any Professional in job who want to start a career in Blockchain & Cryptos.
Any Blockchain, Bitcoin & Cryptos enthusiast

Blockchain: Build a Dapp using Solidity, Hardhat and React

What you'll learn

Explore related topics

Course content

Introduction to Course3 lectures • 4min

Summary of Solidity10 lectures • 23min

Library Catalog Dapp Architecture6 lectures • 12min

Build Backend for Dapp (Smart Contract, Blockchain Interaction & Unit Tests)11 lectures • 51min

Build Frontend of the application using React3 lectures • 24min

Conclusion2 lectures • 4min

Requirements

Description

Who this course is for: