> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/property-directory-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/property-directory-template/pages/index-homepage.md). # 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](#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**](https://manual.bubble.io/help-guides/structuring-an-application/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:

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

{% hint style="info" %} **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. {% endhint %} 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.