CF

Solidity & Ethereum in React (Next JS): The Complete Guide

38h 47m 24s
English
Paid

Embark on an exciting journey to create real Smart Contracts with Solidity and develop DApps using React and Next JS. This course provides a comprehensive understanding of the Ethereum blockchain and its functionalities.

Understanding Ethereum

What is Ethereum?

Ethereum is a revolutionary technology enabling the transfer of cryptocurrency to anyone globally. It's more than just a financial platform; it powers decentralized applications (dApps) that are tamper-proof and accessible to all. As the world's programmable blockchain, Ethereum enhances Bitcoin's innovation with additional capabilities.

While both Bitcoin and Ethereum enable digital transactions without intermediaries, Ethereum's programmability allows for various digital assets, including Bitcoin itself. Ethereum serves as a hub for financial services, games, and apps that ensure data privacy and freedom from censorship, representing the future of technology.

What is Solidity?

Solidity is a high-level, object-oriented programming language designed for deploying smart contracts on the Ethereum blockchain. These smart contracts automate the execution of agreements and transactions, enhancing efficiency and security.

Influenced by C++, Python, and JavaScript, Solidity is a curly-bracket language targeting the Ethereum Virtual Machine (EVM). It supports features such as static typing, inheritance, and complex user-defined types, making it versatile for creating contracts for voting, crowdfunding, blind auctions, and multi-signature wallets.

Course Overview

This course aims to transform you into a proficient blockchain developer. You'll gain an in-depth understanding of the Ethereum blockchain from both a foundational and a developer's perspective.

You'll learn to create smart contracts and their integration with decentralized applications (dApps). Furthermore, you'll explore frontend development for dApps using the React library and Next JS framework, with design components built using Bulma and Tailwind frameworks.

The course involves developing two real-world applications with comprehensive explanations and documentation.

Faucet Application

The first practical project in the course where students will grasp the fundamental concepts of the Ethereum network. The front end is built using the React library and Bulma framework. The Truffle development environment and Ganache (private blockchain) are employed for smart contract development.

Users can donate and withdraw funds via the smart contract, interacting through a website connected to the blockchain network using the Metamask wallet. This application answers essential questions:

  • What is Ethereum (transactions, blockchain)?
  • What is EVM (bytecode, storage)?
  • How to create smart contracts and dApps?
  • How to integrate smart contracts with React?

Marketplace Application

Build a sophisticated marketplace application where clients purchase courses using Ether currency. Expanding on the basics, this application focuses on practical Ethereum network development with challenging topics and code-heavy lectures.

Features include a marketplace page with real-time Ether price updates, a modal window for orders, email hashing for privacy, order view with filtering and pagination, among others. It’s developed with Next JS framework and Tailwind CSS, enabling SSR (server-side rendering) and exploring its integration with blockchain.

This application covers:

  • Next JS (SSR) Integration with Web3 and Blockchain
  • Creation of more complex Smart Contracts
  • Email hashing and order verification
  • Comprehensive testing of smart contract features
  • Order pagination and filtering

The final marketplace application will be deployed to the internet and the smart contract to the live mainnet network, with full integration and documentation provided.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 277 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 277 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (277)
#Lesson TitleDurationAccess
1
Introduction Demo
09:35
2
How to approach errors
05:52
3
Init App
09:56
4
Remove React JS content
02:16
5
Terminology
01:01
6
[AI] What is Blockchain
24:15
7
[AI] Smart Contracts
20:20
8
[AI] Miners, Networks, Wallet
06:31
9
[AI] Ethereum Remix
13:02
10
Truffle init
09:01
11
Installing Ganache
12:53
12
First Smart Contract
08:32
13
[AI] Ints
07:42
14
[AI] Int Correction
00:52
15
Migrating Faucet
14:03
16
[AI] Gas fees
08:44
17
[AI] Gas Fees Bonus
15:02
18
[AI] Keccak256
09:55
19
[AI] Function Signiture
05:27
20
[AI] Bits, Hex, Decimal
16:57
21
Access Contract with console
04:03
22
Web3 Interaction part
05:54
23
[AI] EVM & Truffle
10:40
24
Receive function
06:02
25
Send transaction
08:05
26
[AI] etHash and nonce
16:56
27
[AI] Modulo Operator
08:40
28
Blockchain link
02:08
29
[AI] Bytecode instruction
29:20
30
Additional Resources
07:10
31
Add funds
05:05
32
Call function by its signiture
06:12
33
Show function in Remix
06:17
34
Method Calls + JSON RPC
15:39
35
Funders
06:02
36
Get Funders
06:45
37
Public vs External
07:18
38
[AI] Memory details part 1
17:39
39
[AI] Memory details part 2
12:17
40
[AI] Memory & Ascii
10:43
41
[AI] Memory Offset
07:12
42
Private & Internal
04:40
43
[AI] Storage
16:31
44
[AI] Storage Debugging
06:56
45
Funders mapping
06:48
46
Get all funders
07:02
47
Prevent duplications
04:52
48
lutFunders
05:54
49
[AI] Storage mappings
11:21
50
[AI] Keccak256 values
07:30
51
[AI] Storage arrays
08:26
52
Withdraw
07:35
53
Require statement
04:47
54
Modifiers
05:48
55
Only owner
07:19
56
Inheritance
04:28
57
Abstract contract
10:31
58
Interface
08:27
59
Function Accessors
04:13
60
Metamask Installation
15:26
61
Metamask Accounts
11:04
62
[AI] Signing transaction
14:45
63
[AI] Signing transaction+
01:37
64
[AI] nonces
07:06
65
Add Bulma
06:44
66
Enable ethereum
07:33
67
Web3 integration
09:42
68
Get accounts
07:33
69
Request accounts
02:12
70
Get provider
04:29
71
Connect on click
11:53
72
Change contracts dir
03:18
73
Load Contract
07:32
74
Get deployed contract
04:13
75
Load Balance
08:30
76
Add funds
05:43
77
Reload effect
04:14
78
Withdraw func
06:59
79
Handle account changes
03:54
80
Account Lock
06:19
81
No Provider
05:59
82
Provider improvement
04:07
83
Fix Warnings
03:54
84
Check contract load
05:02
85
Chain changed
03:18
86
[AI] Public-Private key
09:06
87
[AI] Reverse engineer TX
16:44
88
[AI] Reverse engineer TX part 2
11:39
89
[AI] Reverse engineer TX part 3
09:09
90
[AI] Transaction Tree
13:57
91
[AI] Radix Tree
13:48
92
[AI] Radix Impl
14:17
93
[AI] Merkle Patricia
22:23
94
[AI] Second Node in Patricia tree
15:40
95
[AI] RLP Merkle
15:31
96
[AI] FInal Hash
08:16
97
Next JS app Init
06:05
98
Tailwind Integration
07:36
99
Compiler options
07:04
100
Init Components
10:44
101
Footer and Navbar
07:11
102
More Components
09:54
103
Remaining Index Components
06:08
104
Course components
07:23
105
Base layout
08:06
106
Base Layout Different
05:56
107
Course Data
11:55
108
Get course data
04:17
109
Course List
05:32
110
Images Improvements
06:33
111
Course detail page
05:37
112
Get single course
06:19
113
Course hero
07:29
114
Lectures and Keypoints
08:30
115
Connect button & Image
06:39
116
web3 provider
10:56
117
Load Provider
07:58
118
Provider loading
02:33
119
Connect to metamask
09:44
120
isWeb3Loaded
04:35
121
Loading button
09:47
122
Disable button
06:57
123
Open page in new window
01:06
124
useAccount
14:34
125
Provider tiny refactor
02:05
126
Use Hooks Abstraction
10:27
127
Get accounts
04:45
128
Navbar account
07:16
129
useAccount event
04:40
130
Display address
04:05
131
Use swr
12:23
132
Is Admin
05:03
133
Hash Admin
03:42
134
Marketplace
06:05
135
Hide address on Marketplace
02:58
136
useNetwork
03:53
137
Network changes
06:51
138
ChainID
07:05
139
Course Card
09:54
140
Target network
05:48
141
Wrong network message
07:07
142
Has Finished First Fetch
08:25
143
Enhance hook
10:31
144
Setup Hooks fix
04:48
145
Require Install
04:07
146
Use Require install
03:11
147
Card Button
04:49
148
Course Card Styling
11:40
149
Modal
03:13
150
Order Modal
04:32
151
Modal Content
03:25
152
Open Modal with Code
08:29
153
Get ETH Price
10:49
154
Eth Price
06:50
155
Price per item
04:59
156
Eth image
06:05
157
Can Purchase
06:41
158
use wallet info
03:08
159
[AI] Hooks Intuition
13:10
160
Breadcrumbs
06:24
161
Marketheader
08:23
162
Market pages
11:24
163
Active Link
08:05
164
Active Link 2
09:29
165
Order Price
07:49
166
Enable Price
07:28
167
Get form data
03:50
168
Form status
08:17
169
Agree TOS
08:23
170
Component changes + Message
15:08
171
Loader 1
08:37
172
Loader 2
06:58
173
Truffle init
10:52
174
Course hash
11:47
175
Store Course
07:51
176
Getter functions
09:58
177
Check course owner
10:29
178
Owner of the contract
04:28
179
Transfer ownership
12:29
180
Remigrate marketplace
01:43
181
LoadContract
08:06
182
Load Contract first solution
10:15
183
Load Contract second solution
11:14
184
Load Contract third solution
12:14
185
Prepare values
14:17
186
Purchase Course
11:56
187
UseOwnedCourses Start
08:13
188
Create web3 state
04:35
189
Owned Courses
11:09
190
Get course by hash in hook
13:46
191
Normalize course
06:20
192
Display owned courses
07:34
193
Course Card styles
08:01
194
Eth rates improvements
14:06
195
Walletbar improvements
12:23
196
Navbar and Filter improvements
08:40
197
Course Status improvement
06:25
198
Card improvements
05:51
199
Use owned course
08:16
200
Check if owner
04:04
201
Course state messages
09:49
202
State curriculum
07:47
203
Check for no courses
07:17
204
Check isEmpty
12:11
205
Check if empty account
07:37
206
Hook improvements
08:18
207
One time event
06:30
208
Handle locked in course
04:48
209
Use managed courses
06:57
210
Fetch managed courses
07:44
211
ManagedCourseCard
11:13
212
Managed card values
08:59
213
Verify identity
09:29
214
Verify Proof
10:29
215
Verification input
05:57
216
Disable managed courses
03:29
217
useAdmin
17:29
218
Activate Course contract
09:02
219
Preparing test
12:24
220
Test course by index
10:21
221
Test course data
06:29
222
Test activation
06:37
223
Catch revert
10:48
224
Transfer ownership test
10:21
225
Repurchase course test
02:08
226
Activate course frontend
09:50
227
Deactivate course
04:54
228
Repurchase course in contract
05:44
229
Deactivate course test
10:28
230
Repurchase course test
11:32
231
Check buyer balance
14:19
232
GetGas abstraction
02:48
233
Check contract balance
05:55
234
Check balance after deactivate
07:39
235
Deactivate course impl
18:28
236
Handle wallet changes
09:07
237
Lookup table
09:49
238
Course states display
08:50
239
Handle Switching Networks
09:15
240
Set Listeners
05:05
241
Repurchase button
02:34
242
Move course state
12:22
243
Button sizes
04:58
244
UX Improvements
04:06
245
Differentiate purchase
06:59
246
Repurchase working
06:57
247
Search input
05:47
248
Search Course
09:05
249
Search course display
09:42
250
State Filters
05:56
251
Display filter courses
06:41
252
Stop contract
08:43
253
Withdraw functions
10:09
254
Test transfer
06:59
255
Test withdraw
10:00
256
Emergency withdraw test
09:55
257
Test Selfdestruct
06:22
258
Ethereum Changes
07:25
259
Get Ropsten Ether
05:08
260
Truffle ropsten config
13:06
261
Setting up infura
10:20
262
Generating mnemonic
12:55
263
Deployment
14:04
264
[AI] Gas fees
18:15
265
Transfer ownership
11:39
266
Test Purchase on Ropsten
04:48
267
React Toastify
09:44
268
Improve toast message
11:56
269
Display toast with tx
04:47
270
Course in Progress
14:24
271
Mutate courses
11:48
272
Mutate repurchase
08:51
273
Pre-deployment
07:32
274
Fix Colors
07:24
275
App Deployment
09:22
276
Testing Application
05:09
277
End of Course
07:25
Unlock unlimited learning

Get instant access to all 276 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prior knowledge do I need before enrolling in this course?
Before enrolling in this course, it is beneficial to have a basic understanding of JavaScript, as Solidity is influenced by JavaScript, Python, and C++. Familiarity with web development concepts, particularly using React, will also enhance your learning experience. While the course does cover foundational topics like 'What is Blockchain' and 'Smart Contracts,' having a background in programming will allow you to grasp these concepts more quickly.
What projects will I build during the course?
Throughout the course, you will work on developing decentralized applications (dApps) using React and Next JS. You will create and deploy real smart contracts on the Ethereum blockchain, starting with a 'First Smart Contract' and moving on to more complex applications, such as implementing a 'Migrating Faucet' and managing 'Funders' through smart contracts. These projects will help solidify your understanding of how to create practical blockchain solutions.
Who is the target audience for this course?
This course is designed for individuals interested in blockchain technology and decentralized applications. It caters to both beginners who are new to Ethereum and Solidity, as well as developers who want to expand their skills in building dApps with React and Next JS. The course is particularly useful for software engineers, web developers, and anyone looking to explore the potential of smart contracts and blockchain technology.
How does this course compare to other blockchain courses?
Compared to other blockchain courses, this course provides a focused approach to developing decentralized applications using React and Next JS, alongside creating smart contracts in Solidity. It covers practical web3 interaction, smart contract deployment, and Ethereum-specific topics such as 'Gas Fees' and 'Keccak256,' making it suitable for those aiming to integrate blockchain technology into web applications. This course is more specialized, emphasizing hands-on project development rather than just theoretical knowledge.
What platforms and tools will I use during the course?
During the course, you will use various platforms and tools essential for Ethereum development. These include Ethereum Remix for writing and testing smart contracts, Truffle for managing smart contract deployment, and Ganache for creating a personal Ethereum blockchain. You will also interact with the Ethereum blockchain using Web3 and integrate these functionalities into React and Next JS applications. Additionally, Metamask is introduced for managing Ethereum wallets and transactions.
What topics are not covered in this course?
The course does not delve into other blockchain platforms outside of Ethereum, nor does it cover alternative programming languages for blockchain development, such as Rust or Go. It focuses specifically on Solidity and the Ethereum ecosystem. Advanced topics like blockchain consensus mechanisms or in-depth cryptographic algorithms beyond basic 'Keccak256' are also not covered. The course maintains a practical focus on DApp development rather than exploring blockchain theory extensively.
How much time should I expect to dedicate to this course?
The course consists of 277 lessons and is designed to be comprehensive, covering a wide range of topics necessary for building and deploying Ethereum DApps. While the total runtime is not specified, students should expect to dedicate a significant amount of time to complete all lessons, practical exercises, and projects. The time commitment will vary based on your prior experience and familiarity with the topics, but an estimated average is several weeks of part-time study.