Solidity & Ethereum with React/Next - Complete Guide (2023)
Build Smart Contracts in Solidity and Web3 DApps with React/Next. Understand Ethereum, Polygon, Hardhat and Ganache.
What is this course covering?
The course covers everything you need to become a blockchain developer. Students of this course will learn what Ethereum blockchain is and how it works on the base level and from a developer's perspective.
Students will learn what smart contracts are and how to create them. Smart contracts are going hand in hand with dApps(decentralized apps). The course covers them as well.
The front end for dApps covered in the course use React library and Next JS framework. CSS and design are built with the help of Bulma and Tailwind frameworks.
Three real-world applications are created in the course.
Faucet Application: This straightforward app encompasses React JS, Solidity, and Ganache. It provides an introduction to the fundamentals.
Marketplace: This advanced application involves Next JS, Solidity, and Ganache, along with deployment to an actual blockchain.
Adopt Pet: A bonus section focusing on React JS, this section utilizes Hardhat to manage the smart contract and deploys it to the Polygon network.
Every part of application creation is well explained and documented.
Faucet application:
The initial application in the course provides students with a hands-on experience to learn the fundamentals and core concepts of the Ethereum network.
The application's frontend is developed using the React library and the Bulma framework. The Truffle development environment and Ganache (a private blockchain) are utilized for smart contract creation.
The faucet application allows users to donate and withdraw funds from the smart contract. Users can interact with the smart contract through a website connected to the blockchain network via the Metamask wallet.
The primary objective of this first application is to provide a practical learning experience while covering the basics in an enjoyable manner.
The application addresses several essential questions, including:
Understanding Ethereum, transactions, and the blockchain.
Exploring the EVM (Ethereum Virtual Machine) and its components like bytecode and storage.
Learning how to create smart contracts and decentralized applications (dapps).
Discovering the process of integrating smart contracts with React.
Marketplace application:
This application focuses on building an interactive marketplace where clients can purchase courses using Ether digital currency, allowing students to select their preferred products.
Having covered the basics in the previous application, the emphasis now shifts toward practical development within the Ethereum network. The topics become more challenging, and the lectures revolve around practical coding aspects.
The second application encompasses various features, including a marketplace page that displays real-time updates of Ether currency and course prices compared to the US dollar. Additionally, there is a dedicated modal window for placing orders, an email hashing solution to safeguard client privacy, an order view with filtering and pagination options, and more.
For the development of this application, the Next JS framework is employed, with Tailwind serving as the CSS framework. Next JS internally utilizes the React library, offering ease of use and default server-side rendering (SSR) capabilities.
While SSR brings numerous benefits, it also poses some challenges regarding integration with the blockchain. However, the entire integration process of Next JS with the blockchain is comprehensively covered, explained, and documented. The final application will be deployed on the Internet, and the smart contract will be deployed on the live Sepolia Test Network.
The notable topics covered in this application include:
Integrating Next JS (with SSR) with Web3 and the blockchain.
Developing a more complex smart contract.
Implementing email hashing and order verification features.
Providing a testing solution that covers every aspect of the smart contract.
Enabling pagination and filtering for orders.
Adopt Pet Application:
As an additional component, this section consolidates the knowledge you have acquired in the course and applies it to a React JS app. Hardhat is utilized for smart contract management, ensuring a clean and straightforward application architecture.
The emphasis is on minimal design and simplicity. By the end of this section, you will have the opportunity to deploy a smart contract to the Polygon blockchain.
What is Ethereum?
Ethereum is a technology that lets you send cryptocurrency to anyone, but in the first place, It also powers applications that everyone can use, and no one can take down. It's the world's programmable blockchain.
Ethereum builds on Bitcoin's innovation, with some big differences.
Both let you use digital money without payment providers or banks. But Ethereum is programmable so that you can use it for many digital assets – even Bitcoin!
This also means Ethereum is for more than payments. It's a marketplace of financial services, games, and apps that can't steal or censor your data. It's the Future.
What is Solidity?
Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs that govern the behavior of accounts within the Ethereum state.
Solidity is a curly-bracket language. It is influenced by C++, Python, and JavaScript, and is designed to target the Ethereum Virtual Machine (EVM).
Solidity is statically typed and supports inheritance, libraries, and complex user-defined types, among other features.
With Solidity, you can create contracts for uses such as voting, crowdfunding, blind auctions, and multi-signature wallets.
Basic knowledge of JS or any other OOP language.
Good to have HTML and CSS knowledge but not a must.
Init App
Remove React JS content
Terminology
[AI] What is Blockchain
[AI] Smart Contracts
[AI] Miners, Networks, Wallet
[AI] Ethereum Remix
Quiz
Truffle init
Installing Ganache
First Smart Contract
[AI] Ints
[AI] Int Correction
Migrating Faucet
Quiz
[AI] Gas fees
[AI] Gas Fees Bonus
[AI] Keccak256
[AI] Function Signiture
[AI] Bits, Hex, Decimal
Quiz
Access Contract with console
Web3 Interaction part
[AI] EVM & Truffle
Receive function
Send transaction
[AI] etHash and nonce
[AI] Modulo Operator
Blockchain link
Quiz
[AI] Bytecode instruction
Additional Resources
Add funds
Call function by its signiture
Show function in Remix
Method Calls + JSON RPC
Quiz
Funders
Get Funders
Public vs External
[AI] Memory details part 1
[AI] Memory details part 2
[AI] Memory & Ascii
[AI] Memory Offset
Private & Internal
Quiz
[AI] Storage
[AI] Storage Debugging
Funders mapping
Get all funders
Prevent duplications
lutFunders
[AI] Storage mappings
[AI] Keccak256 values
[AI] Storage arrays
Withdraw
Require statement
Modifiers
Only owner
Inheritance
Abstract contract
Interface
Function Accessors
Metamask Installation
Metamask Accounts
[AI] Signing transaction
[AI] Signing transaction+
[AI] nonces
Add Bulma
Enable ethereum
Web3 integration
Get accounts
Request accounts
Get provider
Connect on click
Change contracts dir
Load Contract
Get deployed contract
Load Balance
Add funds
Reload effect
Withdraw func
Handle account changes
Account Lock
No Provider
Provider improvement
Fix Warnings
Check contract load
Chain changed
[AI] Public-Private key
[AI] Reverse engineer TX
[AI] Reverse engineer TX part 2
[AI] Reverse engineer TX part 3
[AI] Transaction Tree
[AI] Radix Tree
[AI] Radix Impl
[AI] Merkle Patricia
[AI] Second Node in Patricia tree
[AI] RLP Merkle
[AI] FInal Hash
Next JS app Init
Tailwind Integration
Compiler options
Init Components
Footer and Navbar
More Components
Remaining Index Components
Course components
Base layout
Base Layout Different
Course Data
Get course data
Course List
Images Improvements
Course detail page
Get single course
Course hero
Lectures and Keypoints
Connect button & Image
web3 provider
Load Provider
Provider loading
Connect to metamask
isWeb3Loaded
Loading button
Disable button
Open page in new window
useAccount
Provider tiny refactor
Use Hooks Abstraction
Get accounts
Navbar account
useAccount event
Display address
Use swr
Is Admin
Hash Admin
Marketplace
Hide address on Marketplace
useNetwork
Network changes
ChainID
Course Card
Target network
Wrong network message
Has Finished First Fetch
Enhance hook
Setup Hooks fix
Require Install
Use Require install
Card Button
Course Card Styling
Modal
Order Modal
Modal Content
Open Modal with Code
Get ETH Price
Eth Price
Price per item
Eth image
Can Purchase
use wallet info
[AI] Hooks Intuition
Breadcrumbs
Marketheader
Market pages
Active Link
Active Link 2
Order Price
Enable Price
Get form data
Form status
Agree TOS
Component changes + Message
Loader 1
Loader 2
Truffle init
Course hash
Store Course
Getter functions
Check course owner
Owner of the contract
Transfer ownership
Remigrate marketplace
LoadContract
Load Contract first solution
Load Contract second solution
Load Contract third solution
Prepare values
Purchase Course
UseOwnedCourses Start
Create web3 state
Owned Courses
Get course by hash in hook
Normalize course
Display owned courses
Course Card styles
Eth rates improvements
Walletbar improvements
Navbar and Filter improvements
Course Status improvement
Card improvements
Use owned course
Check if owner
Course state messages
State curriculum
Check for no courses
Check isEmpty
Check if empty account
Hook improvements
One time event
Handle locked in course
Use managed courses
Fetch managed courses
ManagedCourseCard
Managed card values
Verify identity
Verify Proof
Verification input
Disable managed courses
useAdmin
Activate Course contract
Preparing test
Test course by index
Test course data
Test activation
Catch revert
Transfer ownership test
Repurchase course test
Activate course frontend
Deactivate course
Repurchase course in contract
Deactivate course test
Repurchase course test
Check buyer balance
GetGas abstraction
Check contract balance
Check balance after deactivate
Deactivate course impl
Handle wallet changes
Lookup table
Course states display
Handle Switching Networks
Set Listeners
Repurchase button
Move course state
Button sizes
UX Improvements
Differentiate purchase
Repurchase working
Search input
Search Course
Search course display
State Filters
Display filter courses
Stop contract
Withdraw functions
Test transfer
Test withdraw
Emergency withdraw test
Test Selfdestruct
New Changes
Get Sepolia Ether
Truffle sepolia config
Sepolia Reminder
Setting up infura
Generating mnemonic
Full Config
Deployment
[AI] Gas fees
Transfer ownership
Sepolia
Test Purchase on Ropsten
React Toastify
Improve toast message
Display toast with tx
Course in Progress
Mutate courses
Mutate repurchase
Pre-deployment
Fix Colors
App Deployment
Testing Application
End of Course
Init Proj
First Test
Ignore more files
First real test
Get owner function
Fixtures
Add pet and test
Initial value to constructor
Adopt pet function
Out of bounds test
Pet is already adopted test
Test adopt pet success
Console logs
Test new getters
Test for zero address
Create react app
Base layout
Seperate code to components
Get all pets and set them
Display pets as pet item
Wallet not detected
Connect wallet
Connect wallet function
Check network
Add env variable
Switch network
Handle account changes
Deployment of SC
Save artifacts
Init contract preparation
Init contract
Get adopted pets
Adopt pet functionality
Handle tx error
Disable button
Tx info
In Progress
Set View
Display pets depending on view
Display owned pets
Polygon Mumbai
Deploy to Polygon
Testing on Mumbai
Filip Jerga
Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.
Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.
Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.
Single Course Access
$29.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now