Frontend
In this section, we will build the frontend application for accessing RentOnZilliqa.
Technology
The frontend is built using Create React App with TypeScript enabled. We rely on Tailwind CSS for styling the application. The setup for these is freely available on the respective documentations.
Using ZilPay, we will connect the frontend elements to the transitions and state of the Smart Contract.
Pages
The frontend will consist of a homepage which shows all the available listings. Details about each listing will be displayed on a separate listing page.
Listings Page
This page lists all the houses that have been posted on the platform. For users with a host account, it also shows the listings managed by them.
 |
|---|
Individual Listing Page
This page presents the details about the listing. Users can make a reservation for the listing from this page.
 |
|---|
 |
Modals
Most actions, including account and listing creation, booking, etc., will be accessible via modals.
Account creation and ZilPay
On the Listings Page, the user can create an account. This is done via a modal, which provides options to connect ZilPay and the form for account creation.
 |
|---|
Creating and Managing Listings
From the Listings Page, a host user can create listings and manage existing listings via modals.
 |
|---|
 |
Building the Frontend
In the coming sections, we will build the frontend in the following stages:
Built by Quinence
