Skip to main content

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
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

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