how to use web3.js instead of Ethers in react Dapp and connect to hardhat node

i created a repository that is the same as a truffle react box however i use web3.js instead of ethers and functional components and hardhat instead of truffle, just follow the steps in this repository repository