Index (homepage)

Overview

This is the homepage of the app and typically the first page that users will encounter. It shows all properties listed on the site by default, with users able to narrow their search based on a number of criteria.

Page components

The index page can be broken down into 5 main components

• Navbar A: Reusable element that is used to navigate to the dashboard/sign-in page. A conditional statement is used to show/hide the dashboard/sign-in link depending on whether the user is logged in or not.

Navbar A from Property Directory Bubble.io template

• Group - SearchBar Container: Contains the various search options a user can change to filter for properties. Read more about how this works in the functionality section below.

Group - SearchBar Container from Property Directory Bubble.io template

• GroupFocus - Filters: Contains additional search criteria.

GroupFocus - Filters from Property Directory Bubble.io template

• Group - Property Container: Contains a repeating group that shows properties. These properties can be clicked on to navigate to the individual property page.

Group - Property Container from Property Directory Bubble.io template

• Footer A: Reusable element that is used to navigate to the dashboard/sign-in page. A conditional statement is used to show/hide the dashboard/sign-in link depending on whether the user is logged in or not.

Footer A from Property Directory Bubble.io template

Functionality

Search functionality

Users can filter for properties based on a number of criteria, including:

• Location (including distance from selected location)

• Min price

• Max price

• Min beds

• Max beds

• Min baths

• Max beds

• Min sq. feet

• Max sq. feet

• Type of property

Please note that some of these search filters are located in the Group - Searchbar Container and others in GroupFocus - Filters element. The location of the various search criteria will change depending on the size of the screen the user is on.

For example, the min/max beds dropdowns are in the Group - Searchbar Container when the screen size is >1100px, but in the GroupFocus - Filters element when the user is using a device with a screen size of ≤1100px.

Hiding the min/max beds dropdowns when screen width is ≤1100px

Custom states are used to store the search criteria selected by the user. There are 10 custom states that are associated with the "index" page.

Custom states on index page

Each time a user changes one of the search criteria, a workflow is triggered that changes the value associated with each of these custom states. For example, when a user types a value in the Input - MaxPriceDesktop's element, the below workflow is triggered:

Workflow triggered when a user types a value into the Input - MaxPriceDesktop's element

Note: You may notice that a number of the workflows have both a "desktop" and "mobile" version. This is because a number of elements will appear in either the Group - Searchbar Container or the GroupFocus - Filters element depending on the screen width.

The values stored in the various custom states are used as constraints on the RepeatingGroup Property element. The values in the custom states basically act as filters, so that the RepeatingGroup Property element only shows properties that meet the criteria selected by the user.

Constraints on RepeatingGroup Property element