Web Application Overview

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.

If a user enters an invalid URL, they'll see an error page.

In a real-world application, a user would not need to copy and paste a contract’s application. Instead, it would be ...