How to develop a property listings system in Bubble.io: Step-by-Step Guide

Go to Data tab → Data types and create a new type called Property with fields: Title (text), Description (text), Address (geographic address), Price (number), Bedrooms (number), Bathrooms (number), Square_Feet (number), Property_Type (Option Set), Status (Option Set), Photos (list of images), Listed_By (User), and Listed_Date (date). Create two Option Sets: PropertyType with options Apartment, House, Condo, Townhouse, Land; and ListingStatus with options Active, Pending, Sold, Withdrawn. The geographic address field automatically stores latitude and longitude for map display.

Create a new page called add-listing. Add input elements for each property field: an Input for Title, a Multiline Input for Description, a Search Box for Address (set to Geographic places), Inputs for Price, Bedrooms, Bathrooms, and Square Feet, Dropdowns for Property Type and Status (data source: All PropertyTypes and All ListingStatuses), and a Multi-file Uploader for Photos. Add a Submit button. Create a workflow: When Submit is clicked → Create a new Property with each field mapped to its input element, Listed_By = Current User, Listed_Date = Current date/time. After creation, navigate to the listing detail page using Go to page with the new Property as a parameter.

Create a page called listings. At the top, add a Search Box (Geographic places type) for location search, a Dropdown for Property Type filter, an input range for Min Price and Max Price, and a Dropdown for Bedrooms (1+, 2+, 3+, 4+). Below the filters, add a Repeating Group with Type: Property, Data source: Do a search for Properties with constraints: Status = Active, Property_Type = Dropdown PropertyType's value, Price >= Min Price Input's value, Price <= Max Price Input's value, Bedrooms >= Dropdown Bedrooms' value. Check 'Ignore empty constraints' on each. Inside each cell, add an Image (Current cell's Property's Photos:first item), Text elements for Title, Price formatted as currency, Bedrooms/Bathrooms count, and Address.

On the listings page, click the + icon and search for Map. Drag the Map element onto the page beside or below the Repeating Group. Set the Map's data source to the same search as the Repeating Group (Do a search for Properties with the same constraints). Set the 'Marker address field' to Address. Customize the map style and zoom level in the element properties. To make map markers clickable, create a workflow: When a map marker is clicked → Go to page property-detail, sending Current marker's Property as data. You can also add a Map element on the individual property detail page showing just that property's address.

Create a page called property-detail with Type of content set to Property. Add a Slideshow or Repeating Group (horizontal, 1 row) with Data source: Current page Property's Photos to display the photo gallery. Add Text elements for Current page Property's Title, Description, Price (formatted as currency), Address, Bedrooms, Bathrooms, Square Feet, Property Type's Display, and Status's Display. Add conditional formatting on the Status text: when Status is Active show green background, Pending show yellow, Sold show red. Add a Contact button that triggers a workflow to send an email to the Listed_By user or create an Inquiry record.

Create a page called manage-listings. Add a Repeating Group with Type: Property, Data source: Do a search for Properties where Listed_By = Current User, sorted by Listed_Date descending. In each cell, show a thumbnail (Photos:first item), Title, Price, Status, and a Dropdown to change the Status. Create a workflow: When Status Dropdown's value changes → Make changes to Current cell's Property → Status = This Dropdown's value. Add a Delete button with a confirmation popup — when confirmed, delete the Property. Add Privacy Rules: only the Listed_By user can modify or delete their own listings.