Solidity & Ethereum in React(Next JS): The Complete Guide
Learn how to create DApps & Smart Contracts in Solidity. Create full applications in React and Next JS. Understand how the Ethereum blockchain works.
What is Ethereum?
Ethereum is a technology that lets you send cryptocurrency to anyone for a small fee. 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 you can also use it for many different 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 your data or censor you.
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). You can find more details about which languages Solidity has been inspired by in the language influences section.
Solidity is statically typed, 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.
What is this course covering?
The course is covering 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. Smarts contracts are going hand in hand with dApps(decentralized apps). The course is covering them as well.
The frontend for dApps covered in the course was used React library and Next JS framework. CSS and design are built with the help of Bulma and Tailwind frameworks.
Two real-world applications are created in the course. Every part of application creation is well explained and documented.
Faucet application:
The first application of the course. Students will learn the basics and core knowledge of the Ethereum network by working on practical applications.
The front end of the application is built with React library and Bulma framework, for smart contract creation was used Truffle development environment and Ganache(private blockchain).
Faucet application will enable users to donate and withdraw funds from the smart contract. Users will interact with a smart contract through the website connected to the blockchain network through the Metamask wallet.
The purpose of the first application is to cover the basics while having fun working on something practical.
The most important questions this application is answering are:
Marketplace application:
This application is covering the creation of an interactive marketplace. Clients of this application will purchase courses(students can choose products of their choice) with Ether digital currency.
With all of the basics covered in the previous application, the focus will be on the practical development part of the Ethereum network. Topics will be more challenging, and lectures will be more practical code-wise.
The second application covers tons of features as few, for example, the marketplace page with real-time updates of Ether currency and course prices compared to the US dollar.
The modal window is dedicated to making orders. Email hashing solution to maintain client's privacy. Order view with order filtering and pagination, and many others.
This application will be built in the Next JS framework with Tailwind as the CSS framework. Next JS is internally using React library. It's straightforward to use and offers SSR(server-side rendering) by default.
SSR offers lots of benefits but also brings few problems in terms of integration with the blockchain.
The entire integration part of Next JS with blockchain is covered, well explained, and documented. The final application will be deployed on the internet. The smart contract will be deployed to the "live" mainet network.
The most mentionable topics covered in this application are:
Basic knowledge of JS or any other OOP language.
Good to have HTML and CSS knowledge but not a must.
Will to learn new concepts which can seem hard from the beginning.
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
Get Ropsten Ether
Truffle ropsten config
Setting up infura
Generating mnemonic
Deployment
[AI] Gas fees
Transfer ownership
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
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