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

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

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 38.5 Hours | 21.0 GB

Create real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.

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 takedown. 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. 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). 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:

  • 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:

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:

  • Next js(SSR) Integration with Web3 and Blockchain
  • Creation of more complicated Smart Contract
  • Email hashing and order verification feature
  • Testing solution (tests will cover every feature of the smart contract)
  • Pagination and Filtering of orders

What you’ll learn

  • Create real-life apps on the blockchain.
  • Build Smart contracts and DApps with ease.
  • Understand complex Ethereum topics in practical and fun way
  • Get complete toolkit to work with any blockhain.
Table of Contents

1 Introduction
2 How to approach errors

App Setup
3 Init App
4 Remove React JS content
5 Terminology

[AI] Ethereum Essentials
6 [AI] What is Blockchain
7 [AI] Smart Contracts
8 [AI] Miners, Networks, Wallet
9 [AI] Ethereum Remix

Private blockchain & Truffle
10 Truffle init
11 Installing Ganache
12 First Smart Contract
13 [AI] Ints
14 [AI] Int Correction
15 Migrating Faucet

[AI] Transaction Details
16 [AI] Gas fees
17 [AI] Gas Fees Bonus
18 [AI] Keccak256
19 [AI] Function Signiture
20 [AI] Bits, Hex, Decimal

Access Smart Contract
21 Access Contract with console
22 Web3 Interaction part
23 [AI] EVM & Truffle
24 Receive function
25 Send transaction
26 [AI] etHash and nonce
27 [AI] Modulo Operator
28 Blockchain link

About Bytecode
29 [AI] Bytecode instruction
30 Additional Resources
31 Add funds
32 Call function by its signiture
33 Show function in Remix
34 Method Calls + JSON RPC

Smart Contracts Functions
35 Funders
36 Get Funders
37 Public vs External

[AI] Memory
38 [AI] Memory details part 1
39 [AI] Memory details part 2
40 [AI] Memory & Ascii
41 [AI] Memory Offset
42 Private & Internal

[AI] Storage
43 [AI] Storage
44 [AI] Storage Debugging

45 Funders mapping
46 Get all funders
47 Prevent duplications
48 lutFunders

[AI] Storage part 2
49 [AI] Storage mappings
50 [AI] Keccak256 values
51 [AI] Storage arrays

Solidity features
52 Withdraw
53 Require statement
54 Modifiers
55 Only owner
56 Inheritance
57 Abstract contract
58 Interface
59 Function Accessors

60 Metamask Installation
61 Metamask Accounts
62 [AI] Signing transaction
63 [AI] Signing transaction+
64 [AI] nonces

Project 1 Application
65 Add Bulma
66 Enable ethereum
67 Web3 integration
68 Get accounts
69 Request accounts
70 Get provider
71 Connect on click

Load Contract
72 Change contracts dir
73 Load Contract
74 Get deployed contract
75 Load Balance
76 Add funds
77 Reload effect
78 Withdraw func
79 Handle account changes

Project 1 – UX Improvements
80 Account Lock
81 No Provider
82 Provider improvement
83 Fix Warnings
84 Check contract load
85 Chain changed

[AI] Transactions
86 [AI] Public-Private key
87 [AI] Reverse engineer TX
88 [AI] Reverse engineer TX part 2
89 [AI] Reverse engineer TX part 3

[AI] Merkle Trees
90 [AI] Transaction Tree
91 [AI] Radix Tree
92 [AI] Radix Impl
93 [AI] Merkle Patricia
94 [AI] Second Node in Patricia tree
95 [AI] RLP Merkle
96 [AI] FInal Hash

Project 2 (Marketplace) – Next JS
97 Next JS app Init
98 Tailwind Integration
99 Compiler options
100 Init Components
101 Footer and Navbar
102 More Components
103 Remaining Index Components
104 Course components
105 Base layout
106 Base Layout Different

Course Related Components
107 Course Data
108 Get course data
109 Course List
110 Images Improvements
111 Course detail page
112 Get single course
113 Course hero
114 Lectures and Keypoints
115 Connect button & Image

Web3 Provider
116 web3 provider
117 Load Provider
118 Provider loading
119 Connect to metamask
120 isWeb3Loaded
121 Loading button
122 Disable button
123 Open page in new window
124 useAccount
125 Provider tiny refactor
126 Use Hooks Abstraction

127 Get accounts
128 Navbar account
129 useAccount event
130 Display address
131 Use swr
132 Is Admin
133 Hash Admin
134 Marketplace
135 Hide address on Marketplace

Network Hook
136 useNetwork
137 Network changes
138 ChainID
139 Course Card
140 Target network
141 Wrong network message
142 Has Finished First Fetch
143 Enhance hook
144 Setup Hooks fix
145 Require Install
146 Use Require install

147 Card Button
148 Course Card Styling
149 Modal
150 Order Modal
151 Modal Content
152 Open Modal with Code

Web3 Components
153 Get ETH Price
154 Eth Price
155 Price per item
156 Eth image
157 Can Purchase
158 use wallet info
159 [AI] Hooks Intuition
160 Breadcrumbs
161 Marketheader
162 Market pages
163 Active Link
164 Active Link 2

Finishing Order Form
165 Order Price
166 Enable Price
167 Get form data
168 Form status
169 Agree TOS
170 Component changes + Message
171 Loader 1
172 Loader 2

Marketplace Contract
173 Truffle init
174 Course hash
175 Store Course
176 Getter functions
177 Check course owner
178 Owner of the contract
179 Transfer ownership
180 Remigrate marketplace

Contract in Next JS
181 LoadContract
182 Load Contract first solution
183 Load Contract second solution
184 Load Contract third solution
185 Prepare values
186 Purchase Course

Owned Courses
187 UseOwnedCourses Start
188 Create web3 state
189 Owned Courses
190 Get course by hash in hook
191 Normalize course
192 Display owned courses

Style Improvements
193 Course Card styles
194 Eth rates improvements
195 Walletbar improvements
196 Navbar and Filter improvements
197 Course Status improvement
198 Card improvements

Owned Course
199 Use owned course
200 Check if owner
201 Course state messages
202 State curriculum
203 Check for no courses
204 Check isEmpty
205 Check if empty account
206 Hook improvements
207 One time event
208 Handle locked in course

Managed Courses
209 Use managed courses
210 Fetch managed courses
211 ManagedCourseCard
212 Managed card values
213 Verify identity
214 Verify Proof
215 Verification input
216 Disable managed courses
217 useAdmin

Unit Tests
218 Activate Course contract
219 Preparing test
220 Test course by index
221 Test course data
222 Test activation
223 Catch revert
224 Transfer ownership test
225 Repurchase course test

Activate & Deactivate
226 Activate course frontend
227 Deactivate course

Unit tests – part 2
228 Repurchase course in contract
229 Deactivate course test
230 Repurchase course test
231 Check buyer balance
232 GetGas abstraction
233 Check contract balance
234 Check balance after deactivate

Deactivate, Repurchase & UX
235 Deactivate course impl
236 Handle wallet changes
237 Lookup table
238 Course states display
239 Handle Switching Networks
240 Set Listeners
241 Repurchase button
242 Move course state
243 Button sizes
244 UX Improvements
245 Differentiate purchase
246 Repurchase working

247 Search input
248 Search Course
249 Search course display
250 State Filters
251 Display filter courses

Withdraw Functions & Tests
252 Stop contract
253 Withdraw functions
254 Test transfer
255 Test withdraw
256 Emergency withdraw test
257 Test Selfdestruct

Smart Contract Deployment
258 Get Ropsten Ether
259 Truffle ropsten config
260 Setting up infura
261 Generating mnemonic
262 Deployment
263 [AI] Gas fees
264 Transfer ownership

App with Ropsten
265 Test Purchase on Ropsten
266 React Toastify
267 Improve toast message
268 Display toast with tx
269 Course in Progress
270 Mutate courses
271 Mutate repurchase

App Deployment
272 Pre-deployment
273 Fix Colors
274 App Deployment
275 Testing Application
276 End of Course