Web Application Overview
Explore building a React frontend for an Ethereum dapp by creating user interface components for auction interaction. Understand routing between pages, state management with React hooks, and input validation to prepare for blockchain integration in upcoming lessons.
We'll cover the following...
In this lesson, we'll start building a web frontend for our smart contract. We'll begin by implementing the visual components of our application without adding any Ethereum/MetaMask-related code. Then, once we have this ready, we'll start adding blockchain-related features in the following lessons.
Web interface overview
Let’s first start with an overview of how the UI of our web application will look like. When a user goes to the home page, they'll see a text input where they'd need to provide an address of a smart auction contract they want to interact with and click the “GO TO CONTRACT” button.
Once a user clicks on this button, they'll be directed to a page with information about the state of the auction with the provided address. At the bottom of the page is an interface for making a bid in the auction. A user can provide a bid amount and click “BID” to send a bid to the auction.
