Index (homepage)
Last updated
Last updated
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.
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.
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.
GroupFocus - Filters: Contains additional search criteria.
Group - Property Container: Contains a repeating group that shows properties. These properties can be clicked on to navigate to the individual property page.
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.
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.
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.
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:
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.
