282
Lectures
38
Hours
Watch Intro Video

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:

  • 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

Requirements

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

Course curriculum

  • 1

    Introduction

  • 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

    • Get Ropsten Ether

    • Truffle ropsten config

    • Setting up infura

    • Generating mnemonic

    • Deployment

    • [AI] Gas fees

    • Transfer ownership
  • 41

    App with Ropsten

    • 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

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 in React(Next JS): The Complete Guide"

    $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