This is the repo for the article titled:

DEMYSTIFYING WEB3: BUILDING A TODO APP WITH SOLIDITY AND JAVASCRIPT

AUTHOR: ABDULHAKEEM MUHAMMED IBIYEMI

(BLOCKCHAIN/CRYPTOCURRENCY/SMART-CONTRACT DEVELOPER, SOFTWARE ENGINEER, DATA ENGINEER, AI/ML ENGINEER)

LinkedIn

X.com

EMail

Link to individual Articles would be updated as soon as they are accepted and published.

Smart Contract Article

Client Article

SMART_CONTRACT: BUILDING AND DEPLOYING A SOLIDITY SMART CONTRACT TO THE ETHEREUM BLOCKCHAIN (SEPOLIA TESTNET)

TABLE OF CONTENTS:

1. INTRODUCTION TO WEB3
    1.1    Introduction to the Internet
    1.2    Differences between Web3 and Web2
    1.3    What is a Blockchain (overview) 
    1.4    What is Solidity 
    1.5    Why Solidity?
    1.6    Introduction to dApps
    1.7    Ethereum Virtual Machine (EVM) (overview)
2. SETTING UP DEVELOPMENT ENVIRONMENT
    2.1    Development Environments (Testnet vs Mainnet)
    2.2    Smart Contracts security vulnerabilities (overview)
    2.2    Development tools and libraries
3. DEVELOPING A TODO APP SMART CONTRACT USING SOLIDITY PROGRAMMING LANGUAGE 
4. DEPLOY THE SOLIDITY SMART CONTRACT 
    4.1    Deploy our TODO App Smart Contract to the Sepolia Testnet (using Hardhat on the CLI)
    4.2    Verifying our Smart Contract on the Etherscan block explorer using the CLI
    4.3    Verifying our Smart Contract on the Etherscan block explorer using a Browser
5. CONCLUSION 
    5.1    Interacting with our TODO Smart Contract on the Backend
    5.2    Summary and Conclusion
    5.3    What’s Next (Part 2: Connecting to our TODO Smart Contract from the Client Side using React, JavaScript, and Web3.js)

CLIENT: CONECTING TO A DEPLOYED SMART CONTRACT ON THE CLIENT SIDE USING REACT AND WEB3.JS

TABLE OF CONTENTS:

1.INTRODUCTIONS
2.CREATE A REACT PROGRESSIVE WEB APP
    2.1   Create a new React-PWA project using Create React App
    2.2   Complete the PWA Setup 
    2.3   Install all the needed dependencies (MUI and others)
3.SETTING UP PAGES FOR CLIENT 
    3.1    Set up the App.jsx file for routing
    3.2    Create Frontend Landing Page
    3.3    Create the Dashboard page for Interacting with the TodoApp Smart contract
    3.4    Create other Interaction Components and Pages
4. CONNECT TO THE TODOAPP SMART CONTRACT USING WEB3.JS 
5. TEST CONNECTIONS BY INTERACTING WITH THE SMART CONTRACT  
    5.1    Fetch all Todo tasks in the smart contract
    5.2    Add new Todo task to the smart contract
    5.3    Delete a Todo task in the smart contract
    5.4    Mark a Todo task as completed in the smart contract
6. CONCLUSION 
    6.1    Summary and Conclusion
    6.2    What’s Next (Part 3: Unit testing a smart contract)

PLEASE FOLLOW THE ARTICLES FOR GUIDES ON RUNNING THE PROJECTS (SMART-CONTRACT AND CLIENT).

Please follow (me)[https://github.com/ennas-de/] for more articles and guides.

Thanks.