Getting Started
Explore how to improve user experience for smart contracts by building a frontend application using Next.js and Tailwind CSS. Learn why React is preferred for scalable UI development, how Next.js structures React projects, and how Tailwind aids styling. Understand the prerequisites like Metamask installation and prepare to create a Web3 app frontend from scratch.
We'll cover the following...
Overview
We built a smart contract using Solidity that can be deployed on the Ethereum blockchain. Our smart contract works as expected, but it doesn’t offer the best user experience. We’ll now build a front-end application to make interacting with this smart contract easier. For this purpose, we’ll be using the Next.js framework and the Tailwind library. Before diving into the implementation, let’s explore the reasoning behind these choices.
The front-end tech stack
We might come across some arguments around the redundancy of using frameworks or libraries like React to develop web applications. After all, we could just be building the same application using Vanilla JavaScript! That might be true for simple web pages with a minimum amount of interactivity. However, for anything beyond that, React is extremely useful, not only because it makes the development process easier, but because it makes maintenance less painful.
Note: It’s less painful because React helps us write modularized code that has clear boundaries of separation (with the help of components).
With React, it’s very convenient to write maintainable and testable code.
However, one challenge of using React is the lack of comprehensive conventions to help us through the development process. React is just a UI library, so decisions regarding app development— such as file structure or the router to be used—are for the user to decide. This can get overwhelming.
Next.js is a production-grade framework built on top of React. It brings structure to React development and simplifies otherwise complicated things such as routing or server-side rendering.
One of the things that we can customize with Next.js is which CSS library to use. We’ll be using Theme-UI, which makes it easy to apply themes to the applications we’re building. For this walkthrough, we’ll give Tailwind a try. Think of Tailwind as a CSS library that defines many atomic, single-purpose utility classes. We can style our application using these utility classes without writing any CSS. The advantage of using this library is that it becomes easy to build an application that looks visually appealing, however it requires us to know which classes to use. Additionally, the abundant usage of atomic utility classes to style the application could make reading the code a bit harder.
Prerequisites
We assume you have basic knowledge HTML, CSS, JavaScript, and React. You also need to have Metamask set up and installed in your browser. We’ll be using Metamask to interact with the Ethereum blockchain.
Follow the instructions in the Appendix chapter to do a local setup. On the Educative platform, each setup has already been completed, which means a local setup is not required to complete this chapter.
Let’s add the contents of the pages/index.js file. We’ll be starting from scratch.
Click the “Run” button in the code widget below to run the application:
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
</>
);
}
export default MyApp;
- Lines 1–7: We create a simple web page that prints
Hello World.