330
Lectures
43
Hours
Watch Intro Video

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.

Requirements

  • Basic knowledge of JS or any other OOP language.

  • Good to have HTML and CSS knowledge but not a must.

Course curriculum

  • 2

    App Setup

    • Init App

    • Remove React JS content

    • Terminology

  • 3

    [AI] Ethereum Essentials

    • [AI] What is Blockchain

    • [AI] Smart Contracts

    • [AI] Miners, Networks, Wallet

    • [AI] Ethereum Remix

    • Quiz

  • 4

    Private blockchain & Truffle

    • Truffle init

    • Installing Ganache

    • First Smart Contract

    • [AI] Ints

    • [AI] Int Correction

    • Migrating Faucet

    • Quiz

  • 5

    [AI] Transaction Details

    • [AI] Gas fees

    • [AI] Gas Fees Bonus

    • [AI] Keccak256

    • [AI] Function Signiture

    • [AI] Bits, Hex, Decimal

    • Quiz

  • 6

    Access Smart Contract

    • Access Contract with console

    • Web3 Interaction part

    • [AI] EVM & Truffle

    • Receive function

    • Send transaction

    • [AI] etHash and nonce

    • [AI] Modulo Operator

    • Blockchain link

    • Quiz

  • 7

    About Bytecode

    • [AI] Bytecode instruction

    • Additional Resources

    • Add funds

    • Call function by its signiture

    • Show function in Remix

    • Method Calls + JSON RPC

    • Quiz

  • 8

    Smart Contracts Functions

    • Funders

    • Get Funders

    • Public vs External

  • 9

    [AI] Memory

    • [AI] Memory details part 1

    • [AI] Memory details part 2

    • [AI] Memory & Ascii

    • [AI] Memory Offset

    • Private & Internal

    • Quiz

  • 10

    [AI] Storage

    • [AI] Storage

    • [AI] Storage Debugging

  • 11

    Mappings

    • Funders mapping

    • Get all funders

    • Prevent duplications

    • lutFunders

  • 12

    [AI] Storage part 2

    • [AI] Storage mappings

    • [AI] Keccak256 values

    • [AI] Storage arrays

  • 13

    Solidity features

    • Withdraw

    • Require statement

    • Modifiers

    • Only owner

    • Inheritance

    • Abstract contract

    • Interface

    • Function Accessors

  • 14

    Metamask

    • Metamask Installation

    • Metamask Accounts

    • [AI] Signing transaction

    • [AI] Signing transaction+

    • [AI] nonces

  • 15

    Project 1 Application

    • Add Bulma

    • Enable ethereum

    • Web3 integration

    • Get accounts

    • Request accounts

    • Get provider

    • Connect on click

  • 16

    Load Contract

    • Change contracts dir

    • Load Contract

    • Get deployed contract

    • Load Balance

    • Add funds

    • Reload effect

    • Withdraw func

    • Handle account changes

  • 17

    Project 1 - UX Improvements

    • Account Lock

    • No Provider

    • Provider improvement

    • Fix Warnings

    • Check contract load

    • Chain changed

  • 18

    [AI] Transactions

    • [AI] Public-Private key

    • [AI] Reverse engineer TX

    • [AI] Reverse engineer TX part 2

    • [AI] Reverse engineer TX part 3

  • 19

    [AI] Merkle Trees

    • [AI] Transaction Tree

    • [AI] Radix Tree

    • [AI] Radix Impl

    • [AI] Merkle Patricia

    • [AI] Second Node in Patricia tree

    • [AI] RLP Merkle

    • [AI] FInal Hash

  • 20

    Project 2 (Marketplace) - Next JS

    • 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

  • 21

    Course Related Components

    • Course Data

    • Get course data

    • Course List

    • Images Improvements

    • Course detail page

    • Get single course

    • Course hero

    • Lectures and Keypoints

    • Connect button & Image

  • 22

    Web3 Provider

    • 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

  • 23

    Hooks

    • Get accounts

    • Navbar account

    • useAccount event

    • Display address

    • Use swr

    • Is Admin

    • Hash Admin

    • Marketplace

    • Hide address on Marketplace

  • 24

    Network Hook

    • 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

  • 25

    Order

    • Card Button

    • Course Card Styling

    • Modal

    • Order Modal

    • Modal Content

    • Open Modal with Code

  • 26

    Web3 Components

    • 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

  • 27

    Finishing Order Form

    • Order Price

    • Enable Price

    • Get form data

    • Form status

    • Agree TOS

    • Component changes + Message

    • Loader 1

    • Loader 2

  • 28

    Marketplace Contract

    • Truffle init

    • Course hash

    • Store Course

    • Getter functions

    • Check course owner

    • Owner of the contract

    • Transfer ownership

    • Remigrate marketplace

  • 29

    Contract in Next JS

    • LoadContract

    • Load Contract first solution

    • Load Contract second solution

    • Load Contract third solution

    • Prepare values

    • Purchase Course

  • 30

    Owned Courses

    • UseOwnedCourses Start

    • Create web3 state

    • Owned Courses

    • Get course by hash in hook

    • Normalize course

    • Display owned courses

  • 31

    Style Improvements

    • Course Card styles

    • Eth rates improvements

    • Walletbar improvements

    • Navbar and Filter improvements

    • Course Status improvement

    • Card improvements

  • 32

    Owned Course

    • 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

  • 33

    Managed Courses

    • Use managed courses

    • Fetch managed courses

    • ManagedCourseCard

    • Managed card values

    • Verify identity

    • Verify Proof

    • Verification input

    • Disable managed courses

    • useAdmin

  • 34

    Unit Tests

    • Activate Course contract

    • Preparing test

    • Test course by index

    • Test course data

    • Test activation

    • Catch revert

    • Transfer ownership test

    • Repurchase course test

  • 35

    Activate & Deactivate

    • Activate course frontend

    • Deactivate course

  • 36

    Unit tests - part 2

    • Repurchase course in contract

    • Deactivate course test

    • Repurchase course test

    • Check buyer balance

    • GetGas abstraction

    • Check contract balance

    • Check balance after deactivate

  • 37

    Deactivate, Repurchase & UX

    • 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

  • 38

    Filters

    • Search input

    • Search Course

    • Search course display

    • State Filters

    • Display filter courses

  • 39

    Withdraw Functions & Tests

    • Stop contract

    • Withdraw functions

    • Test transfer

    • Test withdraw

    • Emergency withdraw test

    • Test Selfdestruct

  • 40

    Smart Contract Deployment

    • New Changes

    • Get Sepolia Ether

    • Truffle sepolia config

    • Sepolia Reminder

    • Setting up infura

    • Generating mnemonic

    • Full Config

    • Deployment

    • [AI] Gas fees

    • Transfer ownership

  • 41

    App with Ropsten

    • Sepolia

    • Test Purchase on Ropsten

    • React Toastify

    • Improve toast message

    • Display toast with tx

    • Course in Progress

    • Mutate courses

    • Mutate repurchase

  • 42

    App Deployment

    • Pre-deployment

    • Fix Colors

    • App Deployment

    • Testing Application

    • End of Course

  • 43

    Bonus: Adopt Pet (Hardhat & Polygon)

    • 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

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of such a really extensive course

    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.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Solidity & Ethereum with React/Next - Complete Guide (2023)"

    $29.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now