This is minimum front-end website designed to interect with Hardhat Fund Me Smart Contract.

The Hardhat Fund Me smart contract runs on loclhost blockchain and we use metamask to interact with it.

The front-end has following UI to intereact with smart contract

A button to connect to blockchain through metamask.

A Fund button to fund the contracts with input ETH value in the text box.

A Balance button to check the funded amount so far in our contract address.

A button to withdraw all funds from Fund Me contract.

To run and test the code in your local development machine copy the repo with following command. We have used yarn package manager. You can use NPM.

git clone https://github.com/sanjaydefidev/html-js-fund-me-frontend

Since we are using TypeScript. You shoud run the following command.

yarn install

We have also used vscode Go Live extension to run a local http server so that we can test our html-js frontend locally.

Make sure you have Hardhat Fund Me on your local machine and to run a local hardhat newtork use following command from the root of Hardhat Fund Me project folder.

yarn hardhat node

For futher detail of this tutorial check this link.

Special Note:

Thank you @PatrickAlphaC for creating such and awesome tutorial.