Dapp Boilerplate for XDC COE (Front End Integration)

What is Frontend and why we need in DAPP ?

Frontend, often referred to as the "front end," is the part of a software application or website that users directly interact with. It's the user interface (UI) and user experience (UX) component of an application, and it encompasses all the elements that users can see, touch, click, and interact with on their screens.

Frontend in a decentralized application (DApp) refers to the user interface and user experience layer of the application that users directly interact with. It's essential in DApps to provide a user-friendly interface for users to access and interact with the blockchain-based smart contracts and decentralized features. The frontend ensures that users, even those without technical expertise, can easily engage with the DApp, view blockchain data, submit transactions, and manage their digital assets.

To Create the Front End for a DAPP what are the knowledge you need before staring frontend for an application.

1. HTML -> Design the layout
   Tutorial Link :(https://www.w3schools.com/html/default.asp)

2. CSS -> To add style to your application
   Tutorial Link :(https://www.w3schools.com/css/default.asp)

3. JS (Javascript) -> for the bussiness logic or maniplulation
   Tutorial Link :(https://www.w3schools.com/js/default.asp)

4.Bootstrap - UI Framework easily to develop fast and responsive website.
Tutorial Link :(https://www.w3schools.com/bootstrap5/index.php)

Above are basic things to develop the web application,In the real time product companies are prefferd their app to develop by using the framework. Ex: React,Next JS,Laravel etc...

Our Boilerplate is developed using React JS framework. React is JS based UI library provides developer easily to create the frontend application with help of reuse the component and pre defined library predefined library from NPM (https://www.npmjs.com/)

React Js Tutorial Video : https://www.youtube.com/watch?v=SqcY0GlETPk

INSTALLATION REQUIRED
Before run the boilerplate DAPP you need to install below things your System
Node JS -> https://nodejs.org/en/download
GIT -> https://kinsta.com/knowledgebase/install-git/

How to install & use React boilerplate DAPP

  git clone https://github.com/GoPlugin/xdc-coe-boilerplate.git

  cd xdc-coe-boilerplate 

  npm install 

  npm start

NPM Package used in Boilerplate
https://www.npmjs.com/package/react-solidity-web3-v2

*Steps to integrate and intract with the blockchain smart contract *

After successfull deployment of the smart contract you have to get ABI and Contract address from remix will needed later steps.

Let's deep dive in to the code

1. Connect Your Wallet

const instance = await connectWallet(connectOptions);

2.Create Web3 Provider

const { provider, signer } = await createWeb3Provider(instance);

Provider - Act as the bridge between your application to blockchain network
Signer - Send signed transactions to the Ethereum Network to execute state changing operations. (For Write Operation)
3.Create Contract Instance

 const Contract  = await createContractInstance(<CONTRACT_ADDRESS>, <ABI>, signer);

4.Invoke Contract Function

For Write the Transaction :

    var delayTxn = await executeTransaction(Contract, provider, 'functionname', [inputa,inputb]);

For Get the Date from Smart contract :

    let balance = await queryData(contract, provider, 'balanceOf', [input]);