DApp Development with Solidity and React Online Course

DApp Development with Solidity and React Online Course

This course equips you with the skills to build decentralized applications (DApps) on the blockchain. Starting with blockchain fundamentals and decentralization, you’ll progress to hands-on development with Solidity, Ethereum, smart contracts, and React for front-end integration. You’ll learn to create, compile, and deploy smart contracts, build user interfaces, and interact with the Ethereum blockchain. Advanced modules cover token creation, NFT marketplaces, and DeFi concepts, reinforced through projects like building a voting system. By the end, you’ll have practical experience in DApp development, real-world project structuring skills, and a strong foundation for freelancing and blockchain career opportunities.

Who should take this Course?

The DApp Development with Solidity and React Online Course is ideal for blockchain enthusiasts, web developers, and software engineers who want to build decentralized applications on Ethereum. It is also well-suited for students, tech entrepreneurs, and professionals exploring Web3, smart contracts, and decentralized ecosystems, providing them with hands-on skills in Solidity programming and front-end integration using React.

What you will learn

• Understand and code in Solidity for smart contract development
• Build user interfaces with React and Bootstrap
• Learn to interact with blockchain networks
• Develop real DApps such as yield farming systems and ERC20 tokens
• Master Mocha and Truffle for contract testing
• Set up a local blockchain environment for DApp development/testing

Course Outline 

Introduction to DApps

• Intro to the Course!
• What Is a DApp (Decentralized Application)
• Introduction to Blockchain
• Centralization Versus Decentralization

Introduction to the IDE Remix: Ethereum

• Introduction to IDE (Remix: Ethereum)
• Introduction to Text Editors
• IDE Solidity Compiler and Deployer
• Download Your First Text Editor
• Overview On What Is a Smart Contract

Introduction to Solidity (Smart Contract Basics)

• Create Your First Solidity File
• Writing Comments in Solidity
• Pragma Solidity
• Pragma Solidity Version Conditions
• Exercise - Solidity Operator Basics I
• Smart Contract as Defined In Solidity
• Create Your First Smart Contract!
• Introduction to Variables (In Solidity)
• Optional - General Introduction to Variables in Programming and Solidity
• Introduction to Functions (Solidity)
• '˜Public' Keyword (Solidity)
• Exercise - Write the Shell of a Basic Function
• Final - Simple Storage Contract
• Solidity Compiling and Debugging Introduction
• Deploy Your First Smart Contract (IDE - Remix: Ethereum)
• Interacting (Transactions) with Smart Contracts
• Exercise - Deploy a Smart Contract (Solidity)
• Simple Storage Contract Solution

Build Your First Solidity DApp (Decentralized Application) from Scratch

• Overview of Introductory-Level DApp Section
• Review: Ide Remix: Ethereum
• Creating Variables for the Will Smart Contract
• Introduction to the Constructor Function in Solidity
• Modifiers in Solidity
• Introduction to Arrays and Objects
• Mapping in Solidity (Key Store Value)
• Exercise - setInheritance Function (Scoping and Argument)
• setInheritance Function Recap (Address and Amount)
• Introduction to For Loop in Solidity
• Recap: Will Smart Contract (Steps So Far)
• Oracle - isDeceased Function
• Compiling and Deploying the Smart Contract
• IDE: Deployment Review - Will Smart Contract
• Interacting with the Blockchain and Oracle

Solidity and Smart Contract Glossary

• Overview of Glossary Section
• Solidity Address Variable Type
• Solidity Mapping
• Solidity Scoping with Variable
• Global Variables in Solidity
• Solidity Modifiers
• Solidity Constructor
• Blockchain Transactions
• Returning Multiple Datatypes with Functions in Solidity
• Destructuring and Multiple Returns from Functions in Solidity
• Exercise - Destructuring and Multiple Returns from Functions in Solidity

Build a Basic Crypto Token (Solidity - Smart Contracts)

• Crypto Token Contract Setup
• Minting Function in Solidity
• Send Tokens Function in Solidity
• Review: ERC20 Contract Introduction
• Deploy Your First Crypto Coin

Optional: OpenSea NFT Marketplaces and Collections (KryptoBirdz Case Study)

• Introduction to NFT Marketplaces and Collections (KryptoBirdz Case Study) Part I
• The Power of NFT Metadata and Properties
• How to Read an NFT (KryptoBirdz Exercise)
• Making NFTs Work for You (From Algorithms to Acrylic Paintings)

Blockchain Smart Contracts and DeFi Lectures

• The Ethereum Virtual Machine (EVM)
• Advanced - Introduction to Opcodes for the EVM
• How Contract Storage Works with Ethereum Smart Contracts
• How Blockchain Works
• What Is Crypto Mining
• What Are Non-Fungible Tokens (NFTs)
• Proof of Work Versus Proof of Stake

The DApplication Developer Environment (Complete Setup)

• Overview of Yield Farming DApplication Development
• Download and Install MetaMask.io
• Install Ganache and Important Note
• Hooking Up MetaMask to Ganache
• Install Node js
• Node Js Exercise I
• Node Js Solution
• Install Truffle Globally
• Git Clone the Code Starter Project
• Add Folders to the Project Directory
• Install Dependencies and Project Overview

Truffle Configs and Migration Setups

• Truffle Configurations (Network)
• Building the Migration Contract
• Migration Deployment Code
• Tether Smart Contract Shell
• Deployment Migration File
• Truffle Compile
• Exercise - Truffle Console

Advanced Solidity (ERC20 Token Functionality)

• Transfer Event
• The Event keyword in Solidity - Focused Study
• Transfer and TransferFrom
• Review - Token Smart Contract
• Truffle Migrate - Upgrades and Console
• Smart Contract Transactions Between Each other
• Compiling, Debugging and Migrating Contracts

Smart Contract Debugging and Testing (Mocha and Chai) - Truffle and Solidity

• Introduction to Mocha and Chai
• Setting Up Solidity Truffle Tests
• Anonymous Arrow Functions JavaScript - Focused Study
• Assertions and Mocha/Chai Tests
• Solidity Test Exercise I
• Before Hook Solidity
• Transfer Tokens Tests 1
• Transfer Versus TransferFrom - Focused Study
• Transfer Tokens Tests II

DApp Smart Contracts: Staking, Unstaking, and Rewards

• Deposit Tokens Functionality
• Staking Logic Exercise
• Staking Logic Solution
• Deposit Tokens Advanced Testing I
• Full Test Review (Truffle and Mocha)
• Issue Reward Tokens (Smart Contract)
• Unstaking and Final Mocha Tests
• Reward Scripts (Terminal Exec)

React Introduction (JavaScript, HTML, JSX, State, and Props)

• Introduction to React
• Let's Build Our First '˜Hello, World!'
• HTML, CSS, and Bootstrap Basics
• Basic In-Line Styling Example (React)
• Bonus Exercise (Stylize the Landing Page)
• Short Overview of Bootstrap Components
• Building the DApp Navbar UI
• React State and Props (Customer Account Number)

Web3 and Loading Blockchain Data (Frontend)

• Web3 and Metamask
• Web3 Docs
• Front-End Blockchain Data
• Loading Smart Contracts to the Frontend (Tether Mock)
• Review - Loading Blockchain Data
• Loading Blockchain Data Exercise I
• Loading Blockchain Data Solution
• Loading Tests - Blockchain Data

Front-End DApp Development (Web3, JavaScript, React)

• What We Are Building (Smart Contract Front-End Implementation)
• Building the Main Component UI
• Quick Note on Bootstrap
• Main Component Complete Layout
• Loading Implementation (Frontend)
• Connecting Balance from Smart Contracts to the Frontend
• Staking Tokens (Frontend)
• Unstaking Tokens Exercise
• Unstaking Tokens Solution
• Staking Button (Frontend)
• Exercise - Unstaking Button (Frontend)
• Solution - Unstaking Button (Frontend)
• Final Recap on Front-End DApp Project

UI Animation - Additional Front-End Practice (Optional)

• Particle Animation Wrapping Layer
• Particle Animation Properties
• Exercise - Particle Animation

Additional React and State Practice (Optional)

• Airdrop Code Architecture
• Airdrop Overview
• JavaScript - Timer Conversion Function
• Rendering the Timer State
• Initializing Timer State (Frontend)
• Implementing Countdown Timer
• Hooking Up the Airdrop Implementation
• Final Course Exercise (Airdrop: Reward Tokens) - Good Luck!

Build a Voting DApplication (Smart Contract and Blockchain Interaction)

• Full Project DApp Review
• Solidity Struct - (Data Types)
• Arrays, Mapping, and Addresses
• Memory Versus Storage and For Loop Review
• Debugging, Compiling, and Deployment Test
• Voting Authentication Function
• The Vote Function
• Voting Results Function
• Converting Bytes with Node and Ethers
• Final Deployment (Interacting Votes on the Blockchain)

Conclusion

• Conclusion