1. Overview
General information
After you write and deploy a smart contract, the next step is to build an interface so users can interact intuitively and simply instead of having to fumble to interact with the smart contract function.
Currently, React (and frameworks built on React) are the most popular in the Web3 industry. Thanks to React's number of libraries and open ecosystem, other frameworks like Vue or Angular are rarely used.
How does the interface interact with smart contracts?
Frontend UI can interact with smart contracts by connecting to an RPC blockchain node. RPC stands for Remote Procedure Call, basically a protocol that helps clients (here meaning interfaces) connect to the blockchain network to request data or perform actions such as sending transactions, interacting with smart contracts.
You can use a blockchain node that you install and operate on your server yourself or use Node-as-a-service provider (Node service providers). If your connection needs are small, Node-as-a-service provider will help you save a lot of money.
2. Structure of a frontend project
We will use the technical stack to build the following frontend:
- Next.JS - React production framework
- TailwindCSS - Utility class library for CSS
- Shadcn UI - Tailwind-based React component library
- Wagmi v2 - React hook library for interacting with blockchain
- WalletConnect - Communication protocol to connect DApp and Wallet
- Rainbowkit - Component library to connect wallet with DApp
- React Query Tanstack - Library to execute queries for React
Below is the layout of a sample project to build UI for FundMe smart contract in the Solidity section.
.
├── README.md
├── abi
│ └── FundMe.json
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ ├── page.tsx
│ └── providers.tsx
├── components
│ ├── abi.ts
│ ├── fund-me-balance.tsx
│ ├── fund.tsx
│ ├── my-fund.tsx
│ └── ui
├── components.json
├── lib
│ └── utils.ts
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ ├── next.svg
│ └── vercel.svg
├── tailwind.config.ts
└── tsconfig.json
