Introduction to the 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.

Listings Page

Individual Listing Page

This page presents the details about the listing. Users can make a reservation for the listing from this page.

Individual Listing Page
Individual Listing 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.

Account Modal

Creating and Managing Listings

From the Listings Page, a host user can create listings and manage existing listings via modals.

Create Listing Modal
Update Listing Modal

Building the Frontend

In the coming sections, we will build the frontend in the following stages:

Built by Quinence

Quinence Logo

Quinence - Digital product specialists from Singapore.