How To Build A Zillow Clone With No-Code Using Bubble (2023 Flexbox)

today we're going to be building our own property selling Marketplace just like Zillow without writing a single line of code using a tool called Bubble before I say another word though let's dive in and take a quick look at what we're going to be building over in a preview of my application I've currently opened up my Zillow clone home page and as you'll see we have a long list of featured properties now this list will include properties that are both for sale as well as properties that are rentals and look it goes without saying that this page alongside our full application is going to be completely responsive today so regardless of our user's browser size or even the device they're viewing this on they're going to have a beautiful end user experience and that's even going to include the small things like our navigation menu if we close this off you'll see that we now have this dropable menu here and look it's just the small details like that that are really going to take our application to the next level if I expand my page back out though what I'm going to do is now perform a search for a specific region in which I want to discover properties so I'm just going to type in San Francisco I'll select on this it's going to run a workflow and it's going to send us through to a search results page where we're going to now see a list of all of the properties based in this region and of course we're not only going to see a list of all of these properties formatted As Nice cards but we'll also be able to interact and see where these properties are within our map now if I really wanted I could also choose to filter these properties down so let's say I want to search for all of the properties that are for sale and where the minimum price is above 1.5 million dollars because hey your boy's a big spender over here and look if you really wanted you could further refine this search by the bedroom count the bathroom count or even what type of property it is but look my eyes being called out to this property here so I'm going to select on this it's going to open up a pop-up and it's going to display not only the full details of this property but it'll also display all of the property features a full list of all of this property's images as well as the extended property summary I can also choose to bookmark this property so if I select this little heart icon it's going to save that to my list of favorites and if I really wanted I could choose to contact the agent who has listed this property from which I could just add in all of my details and a message that I would like to send them now over in the back end of my application if I'm logged in as a real estate agent or a property manager I can view a list of all of my current property listings or even those properties that are now off market so these are the properties that have already sold or I'd potentially lease them out now if I was to select through and view the details of a specific property so in this case I'd like to view all of the information for this property I've listed I'm going to click this button here and it's now going to send me through to a dedicated dashboard where I can see how many views this property is received how many saves it has as well as a list of all of the contact form submissions from potential buyers of this property and so when I view this here it's going to open up this pop-up and display all of the information for that contact form finally if I just jump back to this page where I can manage my property listings you'll see that I also have this option to create a new listing here and on this page I'll just be required to add in some information about this so things like what type of listing this is the address if I click next it'll then require me to add in all of the details for things like the bedroom count the bathroom count as well as all of the images I'd like to add and when I publish that it will then become visible in our marketplace now look this is just a handful of the features that are going to power our Zillow clone today there's still so much happening behind the scenes that I can't wait to show you in more detail if you've ever tried to build your own app or startup I'm sure you know firsthand just how complicated it can be to bring your vision to life and look by complicated I just mean time consuming expansive and confusing as hell well if you're a non-technical person just like this guy bubble's gonna be your new best friend when it comes to creating your own custom application bubble is what's known as a no code tool which in simple terms just means that you can create fully functional features by visually stitching your application together it's kind of just like creating an app using Lego blocks instead of having to actually code now when it comes to no code tools a bubble is by far my favorite not only does it allow you to create your own custom database but you can design the interface of your application you can stitch everything together using visual workflows and you can also integrate with third-party tools and services now each one of these would be a standalone no code tool so it truly just blows my mind that all of that is included in one single platform now of course the other benefit to that is that you don't have to spend as long learning a whole bunch of different tools and it's just going to save you money you only have to pay for one tool instead of four different ones now look by this point I've already said enough so why don't we just grab our Bible editor and I can start walking you through the process foreign clone today the first thing I just wanted to cover was not necessarily a core user-facing feature but instead I just wanted to take the time to set up and configure our own custom database which will be used to power the rest of our product now throughout our tutorial today I've taken the time to create this checklist of all of the data types and Fields that we're going to add into our database as well as a long list of all of the features we're going to cover within our build today and as you can see this is a pretty damn extensive list there truly is so much that I want to cover within this build but what I love about using notion is that it allows you to create a checklist of items which you can tick off as you add them into your bubble editor and so that way you can just stay up to date with where you are throughout the build now of course I'm going to be sure to share a link to this within the description of this video so that way you can easily make a duplicate of this template and follow along with me but for the time being I just wanted to quickly take the time to explain how we're going to set up our database and when it comes comes to the process of creating a database in bubble particularly if you are brand new to the tool it can definitely be overwhelming there's a lot of things that you need to factor in within the beginning in order to get the rest of your application right and so when it comes to the process of creating a database before I add anything into my bubble editor I first like to sit down and think about what my data types and fields are going to be that I need to power my application and that leads me to the very first point that I wanted to cover when it comes to building out a database in bubble there's two key things you'll need to remember when you're building a database you'll have what's known as your data types and then your data fields now your data types are the overall entities you create within your database and you'll see here in my list that my data types are the larger headings so we've got our user data type we've got our property data type we've got a property satellite data type and even a form submission data type and I'll explain what each of those are in a moment but a data type type is essentially an overall thing that your users will create inside your database so when I do sit down and I think about how my application is going to be structured the very first thing I like to do is think about what items are users going to create within our app so users are going to want to create user accounts so when they register an application we're going to need to create an account for them in our database if a user is let's say a real estate agent or a property manager they'll most likely want to create a property listing and so because they're creating a property that's going to be an overarching thing that's going to be created so that's a data type then when someone submits a contact form entry so when someone wants to express that they're interested in a property we're going to create a new form in our database and that will be known as a form submission and so these are all of the overarching things that users are going to create and so these will be data types and then inside of every data type so every item them created in your database you'll want to store some information about that thing and this is where your data fields come into play and so you'll see below my data types I have this checklist of items here and these are my data fields and your data fields will store all of the information you want about that particular thing and so perhaps the best example is if I scrolling up to my user data type so whenever someone creates a new user account I might like to store some information about each person so there's things like their name their profile photo their profile type so are they a buyer or a seller and then even things like a list of properties that they want to save inside of their account and so all of this information is my data fields and once again before I ever open up bubble I like to sit down and just create a manual checklist here of all of the information I'd like to store under each data type so that way by the time that I actually do open up bubble I have a clear idea of everything I need to add into my database and it just creates a much more succinct process when it comes to building your application from scratch now today I am going to walk you through my thought process behind every single data type and data field as I actually add them into bubble so what we're going to do is open up a brand new bubble editor here so I've created a brand new application from scratch and I haven't changed a single thing at this point in time what we're going to do is open up our data Tab and straight away what you'll notice is that under our data types menu option we already have a pre-built user data type and the reason why this already exists is because bubble knows that when users actually need to register an account for your application so whenever someone actually wants to use your app they will need a user account and so that's why your user data type comes standard with any application so we actually don't need to create that it's already built in for us now on the right hand side here to our data type you'll see a list of items and these are all of our data fields so by default our user data type actually comes with an email data field and the reason for that is because once again bubble knows that by default whenever someone signs up to your application they'll need to either register or log in with an email and a password so bubble automatically stores an email data field for us under our user data type it does also store a password field but you just won't be able to see this in plain text from privacy reasons however it is there so we don't need to create that and so on the right hand side this is where you would add in all of your data fields under your user data type however before I add in any data fields what I personally like to do first is add in all of my data types and the reason for that is because what you'll find is that some data fields can actually link to different data types so for instance under my user data type I have this data field known as saved properties so whenever someone would like to actually bookmark a property and view it later I'm storing a list of properties within this field and course because I'm storing a list of properties which my property being a separate data type you can see how we need to link our data fields to our data types and look I know that if you're brand new to bubble that can definitely sound confusing so I'm going to be sure to explain that in even more detail in a moment when we actually cross this bridge but for the time being the first thing I'd like to do is add in all of my data types and I'll explain why I've created these so we already have our user data type but the next one will be a property now I previously mentioned this just before but if we're building something like a property Marketplace people are going to need to be able to create properties to list on that Marketplace and so users will be able to create property listings so if I head over to my data type I'm going to add in a new data type here and I'm going to call this property now one thing I should also point out is that when you create a data type you should almost in absolutely every use case never use a plural so this will always be the word property not properties and the reason for that is because although in our database we will store multiple properties a user will only ever be able to create one property at a time and the reason why I point this out is that because if you use a plural here it's going to confuse you later on when you have to reference this data type but I just wanted to point this out for the time being because I see a lot of people doing this when they start using bubble but please please please try and avoid using a plural when it comes to the name of your data type after adding this data type in though we're going to jump back to our notion checklist we're going to scroll on down and I'm going to select on my next data type and this is known as my property satellite and I know that I've probably already confused the hell out of you if you're brand new to bubble and this really isn't going to help because I'm going to add another layer of complexity into the whole process of creating a database and so in order to explain why I've actually created this I should first talk about how we're actually storing all of our data fields under our property data type so as you can see here our property data type has quite a few data fields there's a lot of information that we need to store about each individual property but thankfully all of this information is relatively small so there's things like the address there's the bedroom count which is a number there's the bathroom count which is also a number then there's things like the price the year it was built and look all of this is relatively small and easy to load data and that's completely fine because whenever we need to load a property what bubble will actually do is load all of the data fields under our property data type and because this is all relatively light information so just a couple of different numbers or some basic text this information will load relatively quickly but when it comes to larger data fields so things like long form text videos or even a list of images all of that data can take up quite a bit of space and it can start to slow your application down if you're loading a lot of properties at once so let's say for instance on our home page of our Zillow clone we wanted to display a list of 20 properties bubble would load every single data field for each one of those properties even if we're not displaying the information of that specific data field on that page and so this is why I've split my larger data fields into a separate data type and the reason for that is because if we were loading 20 properties and I had to load 20 long form descriptions or 20 lists of additional images and on our home page we actually don't need to display that information we obviously only want to display that information when someone clicks on a property and is sent through to another page to view its full details and so what I've done is I've actually split all of that larger information into a separate data type and so that way all of this larger data isn't going to bog down our property data type and I know this might seem like a lot of work in the beginning when you're setting up your database but trust me it's going to help you get a lot more out of your application in the long term performance so it's so important to take this step right now but thankfully because I'm storing this information in a separate data type I like to refer to that data type as a satellite because technically this will be linked to a property so you can see here my last data field under my property data type is known as the full details and later on I'm going to create a link to my separate data type and that's why I like to call this the property satellite because if you can think that my property data type is here my property satellite is going to sit over here and these are still going to connect to each other so I've kind of got the satellite floating around in space and it's going to contain all of the additional information inside of it and whenever I need to retrieve that information I can easily just talk to my satellite and ask it to send the relevant information back down to my main property data type and later on throughout my tutorial when I actually explain how we can show the full description of a property as well as the list of additional images this is going to make a lot more sense but for the time being I'm just going to add my property satellite data type into my database so if I jump over into bubble I'm going to create a new data type and I'm going to call this property satellite I'll then choose to create this then if we jump back into notion I have one last data type and this is known as our form submission so whenever one of our users who's looking to buy a property today views the full information about a property listing that they might be interested in I'm going to allow them to submit a contact form to the real estate agent who published that property so that way they can book something like an inspection or they can show their interest in buying that property or even renting it for that matter and so every single time someone creates a form submission I'm going to need to store that in my database so if we jump back over into bubble I'm going to create another data type called form submission and then we'll create that and thankfully that is all of our data types we'll need to add into our database there's actually not too many when it comes to our Zillow clone however there is one last thing I just need to cover before we go ahead and build out all of the data fields which will power our data types and and that is if we scroll on down you'll see I've referenced this list of option sets now just when I know you're already confused enough particularly if you are brand new to Bubble I'm going to throw yet another spanner in the works and I know you're probably thinking at this point Lachlan please just shut up and stop confusing me but look this truly is in your best interest to learn this because it's going to make your life so much easier when it comes to Building inside a bubble and if you're not familiar with option sets so if you are relatively new to Bubble it's my job to explain these in as much detail as possible as well as try to simplify the whole process of understanding their core use and the best way to understand what an option set is is by referring to our data types So within bubble under our data tab you'll notice we have this menu option called data types where of course we can add a data type like we've just done and then in a moment We'll add all of our data fields within our data types but what you'll also notice is that we have this menu option known as option sets now look if you want a further breakdown about what option sets are there is this little tutorial that will help explain this and look trust me my feelings will not be hurt if you still need to watch this tutorial after my explanation but to be completely Frank with you an option set is kind of like a data type that your users are not able to create and only you as the admin of your app can choose to create and so if I was to just jump over into my notion dock here you can see I've got a series of different option sets so things like the profile type as well as the listing type the property type and property features and the reason why I've created these as a list of option sets is because whenever someone let's say registers an account in our database they're gonna need to select what profile type they are so are they a buyer or are they a seller now if users were able to create their own profile type under a normal data type this would give them the ability to type in whatever option they would want so they could say that they're a seller they could even say that they're an admin or they could say that they're a seller but just add a typo into that so you would start to see a lot of duplicate entries within your database and so in order to control the options that users can select from what we can do is create what's known as a list of option sets and within this list we as the admins will be the only people who can create the options that users choose and so we're going to create two options you can either be a buyer or a seller you can't be anything else and because users are selecting from these two options we can just ensure that the quality of the way these are spelled is consistent and it's just going to make it easier for our users to decide which account they have because they only have to select from two options they don't need to add in their own and so this is the power of option sets if you ever have any information in your app that you need to control as the admin you should create that as an option set whereas if you want your users to create information so things like creating a property or a form submission that should be a data type and so today of course I'll be sure to explain what each of these option sets does and the purpose behind them but we'll start by adding our profile type option set into our database and now the reason why I'm adding my option sets before my data fields is that because some of my data fields will also reference these option sets so it's important to first build these out before we can then go on and create that link so if I just jump into my bubble editor here I'm going to create a new Option set and I'm going to call this the profile type now what you'll even see here is that the process of creating an option set kinda looks like the process of creating a data type so on the left hand side you've got the overarching thing and then on the right hand side you can add in what looks like data fields and so this is where I'm going to add my different options into this list so there was my buyer option and then there was my seller option and now users will only ever be able to select from one of these two choices they won't be able to Freestyle it and add in whatever selection they want they can only choose between these two so it gives me more control as the owner of my application now for each of these option sets we're just storing the title of these as the display text and I just wanted to point this out because later on throughout our tutorial if we ever need to reference our profile types so if we want to add it in something like a drop down menu in order to display each of these options we just need to reference the display text which is just the text within the options we've just added it's pretty self-explanatory what we're going to do though is just jump back into our notion checklist tick off these two option sets and then we'll head to our next one which is known as our listing type so if I jump back into bubble I'm going to create another option I'll call this the listing type we'll create that and the purpose of this listing type is to once again have control over the options people select for a property listing so is it either a property for sale or is it a rental property and they're the only two options I want to support on my platform today okay I don't want users to list that they're trying to sublease a property or they're trying to list it as a short-term rental I'm only going to give them the two options and that will once again just give me more control over how our users interact and engage with our platform and so the two options within this list is first of all going to be the sale and then a rental so when someone lists a property there's going to be a drop down menu and they can select from one of these two options we'll jump back into notion we'll tick these two options off and if we scroll on down the next option set list is the property type so we'll jump into bubble we'll type in the property type I can see I just have a small typo there I'll fix that up and we'll choose to create this and now the property type will once again just allow someone to select when they're listing a property what type of property it is so is it a townhouse is it a house is it an apartment and again the reason why I'm creating this as an options at least is because I want my users to only select from the options I provide and the big benefit to that is let's say if I was to enable users to create the property type themselves users might type in that they want to list a house there's no guaranteeing that they would all spell the word house the same some users might add typos others might add capital letters and so there would be no consistency between all the options and on our search results page when someone actually searches for a property we're going to create a series of filters which allows a user to determine what properties they want to view so there's going to be a drop down menu and they can filter through houses apartments or townhouses and so because I'm in control of the three options that are going to display within that drop down menu it'll just enable us to filter all of the relevant properties in our database whereas if I was to display a drop down menu based on items that users create for our property type that would be a super long list because they would create all kinds of different stuff and then if you were to filter through houses if a user added a typo on their word house it might not actually show up under that filter and I know that this might sound confusing again but when I build that feature out you're going to see exactly what I mean but for the time being what we're going to do is add in our three options for this so I'm going to add in a house an apartment and a townhouse and when it comes to the townhouse I might actually just make that one word there but that's everything I want to include here now I'm only using three examples today because I want to keep this relatively simple but if you wanted to add in more options so things like a loft a warehouse there's nothing stopping you from pausing this tutorial and adding those in now but again I just want to keep things relatively straightforward when it comes to the process of building a Zello clone let's jump back into notion though tick off this list of option sets here and the very last one is going to be our property features so when someone lists a property today we're going to give them the option to select from a long list of features that that property includes now my list is actually going to be relatively short I'm only going to include four options but once again you could include a longer list if you would like so I just want users to be able to select if the property has something like air conditioner a furnace a garage or even a pool so I'm just going to jump into my bubble editor I'm going to create another option set called property features and within this I'm going to add in all of those choices so the First Choice was air conditioning I'll create that then there was a furnace there was a garage and then there was a pool and look once again as I mentioned I'm keeping this list relatively short but you can also add in whatever additional features you would like I'll then jump back into my notion checklist and tick off that we've finished building out all of those option sets and that's everything we need to cover for this section of our database the last thing we need to do is just add in all of our data fields which are going to be used to power our data types so we're going to start by focusing on our user data type so every single time someone creates an account and uses that throughout our application this is the information I'd like to store within that person's account at any point in time so if we jump into bubble head to our data types tab we're going to open up our user data type and the first thing we're going to do is create a data field which will be the user's name so this one's pretty self-explanatory we're just going to store a user's name so that way we can reference them at any point throughout our app now when you create a data field you'll also see the option to give this field a type so this is the format in which bubble is going to store this data in your database so you can select from text a number a date an image a file and the list just goes on but for now the name is just going to be text it's super straightforward I'll choose to create this and just like that we have our first data field in our database and they're going to create another field and I'm going to call this the profile photo field now one thing you may have noticed is that when I've added two separate words here within our data field instead of adding a space between these two words I've just added a dash now there is a specific reason why I do this and that is because when we go to reference our data fields later on inside of our bubble editor instead of using spaces if I was to just use a dash I can easily just tell what is the data field and then what is a data type because if you remember all of my data types had spaces between the words whereas my data fields will not so that's just another little tip that I thought I'd give you now now for this field type I'm going to set this to be an image because a user will be uploading a photo I'll choose to create that now for our profile photo what I'm also going to do is upload a default image and the reason for that is because once a user registers an account if they don't have a profile photo what I'd like to do is just display a temporary photo in their place and so that way I'll just avoid displaying no image at all and so under our default option here you'll see the option to upload an image and so I'm just going to upload an image from my local device that I have here and as you'll see this image is kind of just like a default Alias now if you'd like to upload this same image that I just used what I've also done is I've taken the time to upload all of the assets we'll be using throughout our tutorial today into this Google drive folder and of course I've be sure to include a link to this within the description of this video but you can see here your user profile photo is easily accessible so you can just download that and you can upload that into your database I'm just going to close this for the time being because the next data field I'd like to add in is going to be the profile type that this user is so are they someone who's looking to buy Properties or are they someone looking to sell properties and so I'm going to create a data field here and I'm going to call this profile type now when it comes to this field type I'd actually like to link this to my option set list that we had just created because if you remember in that list we'd already created our two options and so this is where you'll really start to see the power of bubbles database come to life it's at this point that we can start linking our data fields to separate data types or even option sets and that's what's known as creating a relational database but if I was to take all that jargon away it just means that all of your different data points can talk to each other inside of your app so for this field type I'm going to select that this should be our profile type option set list I'll create this and I'm also going to give this a default value so you'll see here on this drop down menu we can select one of the two options that we have pre-created so there was our buyer and there was our seller Now by default when someone registers an account I'd like to list that they should be a buyer and then later on we're going to build out a feature that allows someone to upgrade their account to become a seller so if they're a real estate agent or a property manager they'll then have additional features where they can list properties but for now that's all we'll need to create the next data field is going to be known as saved properties and this data field is going to be used when we create our bookmarking feature so let's say if someone's viewing a list of properties within our search results page and they just want to save a property to view later what they're going to do is click a little bookmark button and I'd like to save that property within this list so for this field type I'm going to select that this should be a property and I'm also going to tick this option here to make this a list with multiple entries because your users should be able to save more than one property into their account so right now I'm going to save a list of properties I'll then choose to create this and finally there's two additional data fields I'd like to add into my user data type and these data fields are going to be used for those who are listed as sellers in our application so it's more for the real estate agents and property managers of our app and the First Data field is just going to be called Contact number so when someone upgrades their account to become a seller in our platform I'm going to display some additional fields that they can store some extra information in so that way if they add their contact number someone can actually contact this real estate agent and ask them about a listing now contrary to what you might think this field type is just going to be a text value not a number the only instance you'd select to add a number is if you ever want to perform a calculation or use that number as a filter but in this case I'm just going to actually display someone's number I'm not going to perform a calculation on it so this is just going to be plain text I'll choose to create that and then finally there's one last field which is called the agency name so when someone upgrades to become a seller they'll be required to add in their real estate agent name or I should say the name of their real estate business and so for this field type it's also just going to be a text type it's super straightforward now that's everything I need to add into my user data type so we're going to jump over to our notion checklist and tick off all of these options here and then we can move on down to our property data type and this is where a lot of the information is going to be stored today so if we jump into bubble open up our property data type the very first field I'd like to create is going to be known as the address and this address field type is actually going to be a geographic address which later on will allow us to integrate this with Google Maps so that way we can reference real world addresses within our own app I'll select that and I'll choose to create this then below this I'd like to create another new field and this is going to be known as our bedroom count so every single time someone lists a property they're going to need to store how many bedrooms this property has and for this field type I would actually like this to be a number because later on when we create our search results page we're going to allow people to filter down properties based on their bedroom count so if let's say someone only wants to search for a property with more than two bedrooms because this is a number we could exclude any property with less than two bedrooms and I'll explain that in more detail later on but for the time being I'm just going to set that as a number and I'll create that I'll then do the exact same thing but we'll be calling this our bathroom count so once again this field type is going to be a number we can choose to create this then for every property I'd also like to create a field known as the featured image now this is just going to be a single image which is kind of like the thumbnail image for the property that's going to display on things like your home page and your search results page and because this field is only going to be a single image I am going to add this to my main property data type because a single image isn't going to take too long to load however a long list of images would and so for this field type I'm going to set this to be an image I'll choose to create that then for every property I'd also like to determine what either its sell price will be or its monthly rental price will be so I'm going to create two separate Fields here the first one is going to be called sell price and this field type will be a number because later on we're going to store that as a currency and you can perform calculations on things like numbers I'll create this but of course not every property is going to be a property for sale we're also going to have rental properties so I'm going to need to create a way to store the monthly rental price as opposed to the total sell price so I'm going to create a separate data field here and I'm going to call this data type the monthly rental price and this will once again be a number number I can choose to create that then as we're working our way through the list the next field I'd like to create is going to be the year that this property was built now I am going to set this as a number because once again you could create a search filter later on where a user can only display properties that were built after a certain date and so if we store that year build as a number it will allow us to do that I'll create this the next field will be relatively similar it's going to be a number but in this case it's going to determine the square footage of each property so this will be the actual size of the property and this will once again be a number because I'd like to either perform a calculation or use that number as a filter later on we'll create this the next field we'll create is then going to be called is available so when someone lists a property by default it should be visible on our platform so it will be available however if let's say someone actually buys that property today we're going to create a feature that allows our real estate agent to our our property managers to update that property as sold or leased so it would no longer be available on the market and so this is available status its field type will be a yes no choice because a property is going to be available or it's not going to be available I'm going to choose to create this and what we'll also do is update the default value of this field to be yes so that way whenever a property is listed it automatically is available and it should be visible on our Marketplace from here our next data field will be known as the listing type so this will determine if the property is a property that's for sale or if it's one that is a rental and this field type is going to reference our listing type options at least where we had already pre-created those two options so I'm going to select to create this here and I won't give this a default value I'll allow our real estate agent to determine what it is when they list that property I then like to create another field which is going to be called the property type so this will determine if the property is a house an apartment or a townhouse and of course we'd already pre-created those options as another option set list so if we open up our field type we're going to scroll on down to our property type we'll select that and choose to create that and once again we're not going to give this a default value because we'll allow our real estate agents to do that whenever they actually list a property we can then choose to create yet another data field and this one's going to be called property features and you might have guessed by now but this is going to link to our property features data type so when someone lists a property they can select all of the different features that this property will have so will it have air conditioner will it have a garage or even a pool and because a property can have more than one feature I'm going to tick this option here to make this a list with multiple entries so that way a real estate agent can select from as many options as they would want from our main options at list I'll choose to create that there and at this point we're almost at the end of our property data type there's just a few additional Fields we'll need to add the next one is going to be called views so every single time someone views the full information for this property what I'd like to do is increase the view count so later on when we build out a dashboard page for our real estate agents to manage each property they can see how many views a property has received as well as how many saves a property has received and we're going to build out that saves field next for this field type I'd like this to be a number because we're going to be keeping count of something I'll choose to create this then as I mentioned I'd like to create another field and I'll call this saves so every single time someone bookmarks a property I'd like to increase the total count of saves that that property has received so for this field type it will also be a number because we'll be performing calculations on this field and then finally there is one last data field we'll need to create and that is going to be a field that actually links our main property data type through to our satellite data type so this is where where we can create that connection that allows us to pull data from our satellite whenever we need it and so I'm going to create an additional field here and I'm going to call this the full details field because this is where we're going to reference the full details stored in our satellite and this field type will be linked to our separate property satellite data type and when we create that we can now build a connection between those two data types it truly is as simple as that and thankfully that is all of the data fields we need to add under a property data type I know there was quite a lot here so we're going to jump back into our notion checklist once again highlight all of these data fields and tick that we've finished adding those in and we're almost down to the bottom of our list the next data fields we'll need to add in is under our property satellite data type and thankfully this one is relatively straightforward we're going to jump back into bubble open up our property satellite and we're going to choose to create a field here which will be known as the full description now the reason why I've stored this full description in our satellite like is because when it comes to the description of a property there's no telling how long this is going to be a real estate agent could write a couple of sentences or they could write a short novel it's really up to their interpretation about how much information they want to list for this property and look if you are storing quite a large bit of free text this can take up quite a bit of data for bubble to actually store and so that's why I just want to store this field under our property satellite data type and this field type is just going to be a text type it is super straightforward I'll choose to create this and then finally I'd also just like to add in a list of additional images that a real estate agent can upload for this property and so I'm going to create a field here and I'm just going to call this images this field type will be an image but I'm going to tick this option to make this a list with multiple entries because as I just mentioned someone could upload a full list of images we'll then create that and that is all of the data fields we'll need to add under this data type I'll then jump back into notion tick these two Fields off and we have one very last data type we need to build out and that is our form submission so back in our database here we're going to open up our form submission data type and we're going to create a new field here and the very first field we're going to add in this is going to be called the contact name so every single time a user submits a form I'm going to have them write in the name of the person that the real estate agent should contact and so this field type is going to be super straightforward it's just going to be a text field and by adding this contact name in as a separate field it allows someone to also add in that they're contacting a real estate agent on someone else's behalf so if let's say I listed a property and you wanted to submit a contact form entry but you didn't want to use your name you wanted to use the name of your partner or a friend this would allow you to store their name in this so that way you can submit this on their behalf I'll choose to create this here and they're going to create another field which will be called Contact number now this is going to be used for the exact same purpose this this field type will just be a text field because I'm not performing a calculation or anything on this number it's going to be super straightforward I'll then do the exact same thing for the email so I'll call this contact email and this will once again be a text type and because we're storing this as its own separate field a user by default won't have to use the email associated with their account instead they could add in whatever email address they would like so that way if they have a preferred email address that you should contact them on they can easily add that in I'll then choose to create this I'd also like to create another field which is known as the message for this form so whenever someone submits a contact form they should be able to type in a short message about a question they might have about this property so asking when it's available for inspection or asking if the price is negotiable and so I'm going to create a field known as the message and I'm going to set this field type to be a text option it's going to be super straightforward and then finally for every form that is submitted I'd also like to reference which prop property this form was submitted against so that way when a real estate agent opens up a dashboard they can see which contact form is related to which specific property that they've listed so I'm going to create a field here and I'm going to link this back to an original property and to abbreviate that I'm just going to call this OG property and this will link to our property data type so if I scroll down I'll select the property option I can choose to create that and just like that that is everything we'll need to add into our form submission data type so we can jump back over to our notion checklist tick all of these options off here and that actually concludes all of the data fields we'll need to add into our database however there is just one very last thing I just need to cover within our bubble editor here and that is that under our data types here you may have noticed that our user data type has this text saying that it has some privacy rules applied to it by default now if I was to click on this it's going to take you through to your privacy Tab and what you'll see is that as I just mentioned it does have a default Privacy Rule attached to it now if you're new to Bubble to put things into the most simplest terms possible this Privacy Rule as it stands right now only allows users to view the information that they create themselves now while that might be handy for things like internal tools or project management software when you're building something like a marketplace where you want someone to create let's say a property listing and then for everyone else to be able to view that this is not the experience we want to create so what we're going to do is actually head over to this little Trash Can icon and click this and we're going to delete that Privacy Rule and now what you'll see is that our user data type is publicly visible and if you are new to Bubble please take the time to do this now I really don't want you to be that person who messages me when you go to run a preview of your app and you say that you can't view any properties when in fact you just haven't taken the time to delete this Privacy Rule but this is just something important that I wanted to point out now at the beginning of our tutorial but look for now that is absolutely everything we'll need to cover within the section of our tutorial today I know it did take quite a bit of time to build out our database but as I mentioned once we've set this up this will be used to power the rest of our entire application so that's why it's so important to take care of building your database out first foreign after taking the time to configure our database we can move on down to the list of features I have set out for us in our notion checklist and as you'll see this list is quite extensive I truly don't want to spare any detail when it comes to our Zillow clone now at the very top of my list I just want to take a moment to start building out the Zillow home page so this is going to be the main page of our app that users will land on whenever they open it and for this page I've broken this down into two separate sections the first section is going to cover how we can actually design the main Crux of the page itself and then from there I have a separate module which is going to cover how we can build a navigation menu which will sit at the top of our page now when it comes to the Zillow home page if I was to open up the real world product there's actually not a lot happening on this home page in comparison to some other apps that I've created so at the top of our page you can see this navigation menu which as I mentioned we're going to build out in a separate module but below that we have almost like this hero section where we've got an image we've got some text as well as the search bar and then below that we just have a list of featured properties and so thankfully when it comes to building this whole experience it's not too difficult inside a bubble but of course your boy's got to explain everything in as much detail as I can so if we were to jump into our bubble editor I'm going to open up our index page so within our page drop down you'll see that by default you have a page created called your index page now this is the default home page for your application so whenever a user opens this app this is the page they will be sent to and as you can see at this point in time this page is blank there's nothing on it and so before we start to build out all of the elements to replicate the real world Zillow product we're just going to need to take care of a little bit of housekeeping and the very first thing we'll need to do is just configure the layout style of our page and so what do I mean by that if I was to double click on my page it'll open up our property editor and inside a bubble this is where you can customize all of your elements so you'll see here that you can customize things like the background color of our page age but within this we also have what's known as our layout tab and this is just going to determine how the page is structured and displayed to your end users and if we were to dive deeper into our layout tab you'll see this option here known as the container layer now this is incredibly important when it comes to building applications in bubble so the container layout will determine in which order elements are displayed across your page now the word container is used because when you think about it your page is like a big container so if you were thinking of something like a tupperware container it's this box that contains all of the ingredients inside of it and so any elements you add onto the page so things like buttons images text they're going to be all of the ingredients that sit inside this overall container so our page is kind of like a house for all of those elements now if we were to open up this drop down menu you'll see four options and if you're brand new to Bubble I know that can be super confusing thankfully when it comes to building and bubble I actually only ever use two of these four options so if we scroll on down to the bottom you'll see this option known as a row and the other known as a column and what's the difference between these two options the best way to illustrate this is by adding some elements onto my page so I'm going to head over to my visual elements and by all means you don't need to do this this is just for an example but I'm just going to add two button elements onto my page so I can click and add these absolutely anywhere then if I was to click on my page once again and open up my layout tab if I was to set the container layout of my page to be a row you'll see that these two buttons will be placed side by side so they're going to be scaled horizontally across our page so that's what a row means a row just means it's going to position elements side by side if we were to open up this drop down and select the column option however you'll now see that it does the opposite so it's going to stack elements vertically not horizontally so now you'll see our two button elements are stacked on top of each other and the reason why I just wanted to take the time to explain this is because when you're building fully responsive applications inside a bubble all it's important to understand the difference between both a row and a column container layout and look when it comes to the overall structure of our page in 99 of scenarios I will use a column layout because when you think of it any website or modern application are always built from the top down so if we were to look at the real world Zillow product here you'll see that at the top of the page it has this navigation menu then stacked below that is this hero section then stacked below that is this list of properties now of course as you'll see within the navigation menu we do have things like our text menus that are stacked horizontally across our page but when it comes to the overall page structure everything is stacked on top of each other and we'll learn how we can stack things horizontally even though we have a vertical page structure in a moment but before we do that I just want to focus on building out this hero section here and so if we jump back into bubble we're going to leave our container layout as a column then from here I'm just going to select my two buttons and choose to delete the and it's at this point in time that we can now start building out the actual Crux of our home page and so on our home page the first thing we'll need to add is this image here you see within the hero section of zillow's app now inside of this image what I can actually see is that it stores some text so as you can see we've got this heading as well as a search bar that are placed on top of the image and the reason why I just wanted to point that out is because back in bubble if I was to head to my visual elements and let's say add an image element onto my page and then also add a text element what you'll see is that because our overall page structure is set to that column container layout both of these elements are actually going to stack on top of each other whereas as you just saw on the real world Zillow product we want this text to be positioned inside of this image not below it so how can we do that thankfully in bubble there's an element known as a group and these are going to be your new best friend inside of bubble throughout our whole tutorial today you're going to see me reference groups multiple times so by the end of this tutorial you'll be incredibly familiar with them if I scroll on down to my containers menu here before I add in my image or my text I'm going to add a group element onto my page now what is a group a group is kind of like a mini page inside of your overall page so similar to how our overall page was a container meaning it could contain all of the elements inside of it our group will also act like another container hence why it was in the containers menu and so if this group here is like a small page within my existing page that means that if I was to head over to my layout tab I also have the ability to update the container layer and I can choose between a row and a column and so if you ever wanted to stack elements horizontally across your page you could add a group onto your page and set the container layout to be a row because it would stack elements side by side now for our example today I do want to select a column option because when we look at Zillow here the way I see this is we've got one big group and the background an image of that group is this house that you see then inside of that group we've got this text element followed by this search bar so these two elements are stacked on top of each other which means when we're stacking elements vertically we need to set the container layout to be a column and before we add those elements in I'm just going to jump to my appearance tab of this group because I'd like to upload a custom background image and that image is going to be the house you just saw in Zillow so I'm going to select to detach the style of this group and when it comes to the background style I'm going to select that this should be an image and from here I'm going to upload a static image that I have on my local device now if you wanted to get access to the same image that I'm going to be uploading in my example today what I've done is I've taken the time to upload all of the image assets we'll be using throughout our tutorial into this Google drive folder so you can download these and follow along but you'll see inside of this we have our hero image we have our Zillow logo and we've got a couple of different icons we're going to use later on but for the time being if I was to just close is this and jump back into bubble as you can see at this point in time this group element doesn't really show the full image and that's because it doesn't span across the full width of our page and so it's at this point that we're going to need to make this group fully responsive so if we were to jump into our layout tab what you'll see is the settings to customize things like the width and the height of any element you're working with and if we wanted to make this element fully responsive across our page what we'd need to do is unselect that this should be a fixed width and so what this means by being a fixed width is that this group is going to take up 280 pixels across our page so this is this width that you see here and because it is a fixed width it's going to be no larger or no smaller so it's always going to be this exact size you see right here inside your editor and that's not the experience we want to create so what we're going to do is unselect that this should be a fixed width we're going to set the minimum width here to be zero and we're going to leave the maximum width is infinite so what that means is that at the smallest possible size this element will take up zero pixels so that means it can shrink down to the smallest possible size imaginable then when it comes to the maximum width if we set that as infinite this means it's going to continually scale across our page regardless of the user's browser size and so if I was to quickly just jump into my responsive tab here what you'll see is that this group will continually expand in and out regardless of the size of the page and so this is where we can create a fully responsive experience now traditionally when I work with elements you'll also need to update the minimum height and also the maximum height but for this group what I'd like to do is set the minimum height here to be 300 pixels and by doing that I'm just saying at the smallest possible size for the height of this element it's going to be 300 pixels which is this height that you see here now there's no scientific reason why I selected 300 pixels that's purely just a personal preference I think that that's enough to show the actual image of the house as well as add in the room to display the two elements I want to include so that's our 10 next element in our search box and so right now you can start to see the heroes section of our page coming together nicely if I just jump back into my UI Builder here the next thing I'll need to add into this group is the text element so if we head to our visual elements I'm going to grab a text element and add this into my image and you can just faintly see that it's sitting inside the top left hand corner and if I wanted to replicate the same heading from The Real World Zillow product this will just display the words find it tour it own it so I'm just going to jump back into bubble and I'll type that in so I'll say find it tour it own it very inspirational then from here what I'm going to do is actually choose to customize the style of this text before we then update the responsive settings for it as well so if I was to scroll on down here what I'm going to do is choose to detach the style of this text and the first thing I'm going to change is the font the font I'm looking for is known as tinos so t-i-n-o-s and that's just going to look more in line to the same styling as the text used in the real world Zillow product I'm then going to also update the font size here to be 40. I'll then choose to align this text in the center of the element I'll also choose to bold this text and update the color of this to be white now although this text is white I still can't really see the outline of it within our hero section so what I'm going to do is just scroll on down and select this option to show the text Shadow and what this is going to do is add a faint Shadow behind the text but it's still set to White whereas what I'd like to do is set this to be a shade of black so I'm going to add in my own custom black color code here so if you'd like that it's five six five six five six I'm also then just going to update the horizontal offset here I'm going to set this to be two just so that way the shadow is slightly more recognizable and then from here we're gonna need to make our element fully responsive so once again if we head over to our layout tab you'll see the options to update the width of this element now similar to our hero image what I'm going to do is unselect that this should be a fixed width and I'm going to set the minimum width to be zero and leave the maximum width is infinite so now this text element is going to take up as little or as much space as it possibly can on my page I'm also then going to update the minimum height here to be zero and the reason I'm doing that on our text element is because we have this option selected by default to fit the height of the actual element to the content inside of it and that just means that the text element is going to collapse nicely around all of the text that sits inside of it now today when I create response of experiences within bubble you're going to see me leverage these exact same settings time and time again in fact it's probably going to become so repetitive that you're going to be sick of me saying it but you just need to remember that in order to create a fully responsive experience your minimum width should be zero and your maximum width should be infinite so that way elements can take up as little or as much space as they can on the page the only other thing I'd like to change when it comes to this text element is the margins around it so the margins just allow you to add some spacing so that way this text element doesn't sit directly at the top of our page and when it comes to the margins I'm just going to add in 50 pixels of margin at the top I won't add any on the bottom but I'll also add in 20 pixels of margin on the left and 20 pixels of margin on the right and that's just going to ensure that this text element won't touch the borders of the group that it sits within and now below this text element we're just going to add in a search box which of course will allow someone to search for a location and later on that's going to power a custom search feature that we create so in order to add this search field I'm going to scroll on down to my input forms and you'll see the option to add in an element known as a search box and the very first thing I'm going to change when it comes to this search box is not any of the design or responsive settings instead I'm just going to update the name of this so I'm going to call this search box location now the reason I'm doing this is because whenever I work with input Fields inside a bubble it's so important to take the time to name these properly because when you create workflows later on you're going to need to reference the values stored within input fields and in order to recognize which input fields you should select from giving the right naming conventions will save you a massive amount of time and stress so it's important to do this as you add them onto your page and you'll see me do that a lot throughout our tutorial today before we also update the design settings we're also just going to need to configure the actual search settings for this search field so what you'll see here within our search field is this option known as our choices style so when it comes to a search field you can add in a list of static choices which you can type in and then if a user wanted to perform a search they could start typing something in and search through all of the options you list you could also have a list of dynamic choices which I won't confuse you too much right now but that essentially just links to your database so that way users can search for information stored inside of your bubble app but today what I'm interested in doing is selecting this option known as Geographic places and what this is automatically going to do is connect our search field to Google Maps so now users will have the ability to search through real world addresses and things like cities suburbs and countries and that's all taken care of for us inside a bubble the only thing I should point out is that what you might see at this point in time is two issues within your bubble app so if I was to select on this and open up my issue checkup what you'll see is that bubbles just prompting me to Source my own Google Maps API keys and now what that essentially just means is that every single time one of our users wants to search for a location or an address out bubble app's going to communicate with Google Maps just to verify what that address format is and then Google Maps is going to send some information back to our Bubble app and so that's where the power of an API will come into place now thankfully when it comes to sourcing your own API Keys it's a super straightforward process it might sound technical but you actually don't need to write any code for this if you were to actually just select on the issue within your issue Checker it's going to take you through to your settings page and open up your general settings and if I was to just close my issue Checker and then scroll on down my page what you'll see is this section here for your Google Maps API keys and right here you'll see there's two input Fields so you need to Source two API keys and thankfully bubbles already taken the time to write some thorough documentation that explains exactly how to get these so if you just select on this linked document here what you'll see is Bubbles documentation page which includes a video tutorial as well as written instructions on how you can Source your own API Keys now this this process is super straightforward so I'd recommend just pausing this tutorial here and following that from bubble's end I'm not going to dabble too much into that because this tutorial already does a great job of explaining everything whereas what I want to focus on today is building out the rest of our Zillow home page so I'm just going to choose to close this now jump back into my design Tab and now we can finish the process of Designing our custom search field and the very first thing I want to do is just update the placeholder text that sits inside of this search field so placeholder text is just the text inside of the field that's just displayed until someone actually Clicks in this and starts typing in something of their own and if I was to copy the real world Zillow clone here you'll see that this text displays something like enter and address neighborhood City or zip code and so what I'm going to do today is just create a simplified version of that so I'm just going to say enter and address neighborhood Etc and when we update the background color of our search field you'll see that text displayed in a moment so in order to customize that color we're going to scroll on down to our style we're going to detach the default style here and when it comes to the background style I'm going to set this to be a flat color and we'll be leaving that as white and when it comes to our styling that's all I'm going to change for our search field I will just jump over to our layout tab because we'll now need to make this element fully responsive and so similar to before I'm going to unselect that this should be a fixed width I'm going to set the minimum width to be zero so that way this search field can collapse down to the smallest possible size however when it comes to the maximum width you'll see here that when it's set to infinite this search field is going to take up all of the width across my page and this just looks a bit silly whereas what I'd like it to do is only just take up a small section of our home page so in order to create that experience I'm going to need to actually set a maximum width so that way bubble knows to not allow this search field to be be larger than a certain width that we give it and that width is going to be 500 pixels now once again there's no scientific reason why I selected 500 pixels I just think that that's enough to display a reasonably sized search field and when it comes to the height I am also going to leave this as the default option so you'll see here that the height is fixed at 48 pixels which just means that the height is always going to be this size it's not going to be any smaller or larger and look I'm pretty happy with that experience this looks like a great input field the only other thing I will need to do is just horizontally align this element in the center of my page which obviously just means it's going to center it and then finally I'll add in some margins so that way there's a little bit of space between my text element above it there and so if I scroll on down here to my margin settings I'm going to add in 20 pixels of margin at the top I won't add any on the bottom but I'll also add in 20 on the left and 20 on the right and that is all of the elements we'll need to add into our hero section in a data section of our tutorial we are going to build out a workflow that's going to power this search experience so that way we can send someone through to a search results page and then show a list of all of the relevant properties to their search but for the time being I just want to finish off building our home page here and so below our hero section I just like to display a list of properties that are near the current user and before I add in that list I'm just going to add a small heading that will sit above it so if I just scroll it up to my visual elements I'm going to grab another text element here and this is going to display the words homes near you now when it comes to this text element I'm just going to detach the style of this I will update the font size to be 18 and I'm also going to choose to bold this text just so that way it stands out like a heading I'll then need to make this element fully responsive so if we jump into our layout tab similar to before we're going to unselect that this should be a fixed width we'll set the minimum width to be zero leaving the maximum width is infinite so now our text element will take up as little or as much space as it can on my page for the height of this element I can see that we've got quite a bit of empty space at the bottom of this so if I set the minimum height to zero we have this default option selected which is just going to collapse the height of this element around the text that sits inside of it finally I'm also going to add in some margin around this text element so that way it doesn't touch the group that sits above it so I'm going to add in 20 pixels of margin at the top 20 on the left and 20 on the right and now from here we can add in an element that's going to display a list of properties that are located near the current user now when it comes to displaying lists inside of bubble there's a special element that's going to do this and it will also become your new best friend throughout the process of building so if we scroll on down to our containers menu you'll see this element known as a repeating group and as you can see this element looks just like a list or kind of something like a Google sheet or an Excel sheet where you've got a series of different rows right now and so repeating groups symbol will allow you to display lists of items and perhaps the best way to explain this is by giving you a real world example of when you might use a repeating group so let's say you were building something like a social network app so something like Instagram where you wanted to display a feed post on your home page so a feed of images or videos because all of your users would have taken the time to upload posts into your database a repeating group is actually the element you would use to display a list of images or I should say a list of those posts and So within our repeating group you can see here it just visualizes things like the repeating group item number one the item number two the item number three and so on and so if this was our Instagram homepage feed the very first cell in our repeating group would display the first photo that someone has uploaded the second cell would be the second photo the third cell would be the third photo and so on so each of these would be their own individual posts and that is the power of repeating groups it just allows you to dynamically display lay a list of information stored in your database and by the word dynamic I just mean that it's going to be different for every single user so in our Zillow clone today let's say you live in America whereas I live in Australia when you open up this application you'll want to see a list of homes that are near your location and so your location is going to be completely different to mine which means you'll need to be displayed homes based in the United States whereas I would see homes based within Australia and so that's where you can really start to see the power of bubble coming to life it just allows you to create a truly custom experience for every single user at scale and look if you are new to Bubble repeating groups can definitely be confusing to get your head around it took me quite a bit of time to understand the concept in the beginning but as we build this element out I'm going to be sure to explain everything I can in as much detail as possible so the very first thing we're going to need to do is jump into our appearance Tab and the reason for that is because we're going to need to configure the data source for this repeating group and so if we want to display a list of items from our database we just need to identify what items we actually want to show and so if I open up the type of content what I'd like to do is display a list of properties so I'm going to select on our property data type that we had previously created then when it comes to the data source this is just going to allow bubble to determine of all the properties in our database which ones should we display to each user so for our data source I'm going to perform a search through our entire database for all of the properties where first of all the location of this property is within a certain radius of the current user so the person who is logged in and wants to see a list of properties near them so I'm going to add a constraint here and I'm going to only display all of the properties where the address of the property is within and now you can customize this to whatever proximity you would like but I'm just going to set mine as 50 kilometers so so I'm just going to type in the number 50. again you can make this whatever you would like you can make it 100 kilometers 200 miles because what you'll now need to do is select the formatting of this distance so as I mentioned I'm going to be using kilometers because I use the metric system but you could also select miles if you would like and so now I'm going to display a list of properties where the address is within 50 kilometers of and we'll now need to select the current user's location and so what we can do is scroll right down to the bottom here and you'll see the option to select the current Geographic position so that's automatically going to pull the location of a user through their browser and so that will just ensure that we display a list of relevant properties to that user's current location now the other thing I'd like to do is add another constraint because I'd only like to display a list of properties that are currently available I don't want to display any properties that are off market so if I was to scroll on down to this is available option I'm only going to display properties where the is available status equals yes meaning this property is currently available now when it comes to the Sorting of these properties I'm going to choose to sort these in a random order so if I scroll right down to the bottom you'll see the option to select the random sorting and what that's going to do is just ensure that each property has an even amount of distribution so it's going to randomly display properties to any user at any point in time but of course all of those properties must meet these constraints here now that is how we can configure our data source for our repeating group so at this point in time we've created a truly custom experience for our end users but now we need to actually format this repeating group so if I was to jump into the real world Zillow product and just scroll on down to the list of properties here what you can see is that each property is displayed almost like within this little card or this tile here and inside of that tile we've got things like an image so this is the featured image of that property we've then got the price as well as some information about this property and of course the address of that property and so in order to replicate this experience if we jump into bubble we're just going to need to First configure a couple of different settings within our repeating groups and repeating groups unlike traditional elements do have a few extra settings and this is where things will get quite complex and so right now if I was to look at these settings this repeating group has a fixed number of rows set to four and a fixed number of columns set to one so what this means is let's say we had 20 properties that should be displayed to a user that's near them right now it's only going to display four of those items because we have a fixed number of rows to be four and that's not the experience we want to create we want to display as many or as little properties that are relevant to this user as possible so I'm going to unselect that that should be a fixed number of rows I'm also going to unselect that this should be a fixed number of columns because at this point in time there's only going to be one property on each line in our repeating group whereas if I unselect this what you'll see in a moment is that it's going to display a full grid of homes now when we're working within our repeating group element we'll just quickly jump to our layout tab and we'll update the width settings so that way you can just take up the full width of our page and the reason I'm doing this now is because I obviously don't really have much space to work with in our repeating group so I just need to change this so when it comes to the width I'm going to unselect that this should be a fixed width I'll set the minimum width to be zero leaving the maximum width as infinite now later on I will come back and update the height settings but while we're in our layout tab I'm also going to update the container layout of this repeating group and so inside of our repeating group you'll see a bunch of different cells so each little square here is going to be a different home that's displayed so you'll see that right now it would be displaying quite a few and inside of each cell is a little group and each one of these cells inside of our repeating group is a group in its own so that's where it gets the name from a repeating group because it's just a series of groups that repeat and share data and so you can choose to update the container layout for all of the items inside of each group now I'm going to be setting this to be a column because I'm going to be stacking elements inside of this from top to bottom but while we're also configuring our repeating group I'm just going to jump over to my appearance tab once again and I'm just going to change these settings here for the minimum height of the row as well as the minimum width of each column and the reason for that is because right now the minimum settings are set to be a hundred by a hundred so that's why we have lots of little squares now when I'm working with repeating groups what I like to do is just start by setting the minimum height of each row to be 300 and the minimum width of each column to also be 300. now there's nothing scientific about this just yet the reason why I've selected 300 by 300 is because as you'll see it's going to give me more space to work within what I do tend to find with repeating groups is that they're just a matter of trial and error so you'll often find that you'll have to come back and update some of these Dimensions here and there in order to get the perfect configurations in the end and that is completely fine look I've been using bubble for four years and I still have to do that and of course I'll be sure to explain my thought process as I walk through this but at this point in time look I'm pretty happy with how the repeating group is looking right now what I'm interested in doing is adding in as I mentioned before this tile or this card that's going to display all of the details of each property so if we jump back into bubble what I'm going to do is first of all add a group element into my repeating group and the reason for that is because our group is going to be this card so it's going to be this white container that has all of this information inside of it and I can also see that there's this nice little Shadow around that group so if we jump into bubble we're going to head to our containers menu and we're going to add a group element inside of our repeating group now what I love about repeating groups is that whatever you customize in the first cell will automatically duplicate across every other cell and perhaps the best way to illustrate that is just by showing you what happens when I change the design of this white group so when it comes to this group I'll head to my style and choose to detach the default style for the style here I'm just going to set the aroundness of this group to be five which just means that it's going to have some curved borders for the shadow style I'm going to set this to be an outset and this is where you can now start to see that our repeating group cells are mimicked across our entire repeating group and that's all I'll need to change for the design settings of this white group what I will need to do though is update the responsive settings of this because right now I can see it's only taking up a small fraction of the space that it has whereas I'm going to want this to take up as much space as it can so if we jump to our layout tab the first thing I'm going to do is update the container layout for this group so once again groups are like many pages within your overall app so these are going to store a bunch of different elements and these elements will be stacked from top to bottom because if I jump into Zillow I can see at the top here we have our image below that we have our price and then all of the addition information and look all of these elements are stacked on top of each other so in bubble I'm going to set the container layout of this group to be a column we'll then need to update the responsive settings of the width for this group so like always I'm going to unselect that this should be a fixed width I'll set the minimum width to be zero leaving the maximum width to be infinite so now this group is going to take up as little or as much space as it can within each repeating group cell now for the height I will come back and update this in a moment but before I do that I'm going to add all of my elements inside of it and the reason for that is because if I was to Now set the minimum height to be zero you'll see that because we have this default option selected to fit the height of our elements to the content inside of it when there's no content inside of it it's just going to disappear so that's why I traditionally wait until I finished adding all of my elements inside of the group before I then come back and change this height the only other thing we're going to do while we're here is just add in 10 pixels of margin around every single border for this group so the top the bottom the left and the right and now you'll see that that's going to evenly space these out inside of my repeating group now inside of our group here we're going to start by adding the featured image for each property so if we scroll on up to our visual elements I'm going to grab an image element I'll add this into my group and what I'd like to do is reference the featured image of the property that belongs to each repeating group cell now one thing I should also just point out is that our image here doesn't actually sit inside of our repeating group our image sits inside of a group that then also sits inside of a repeating group and so in order to reference the data of a property from our repeating group we're going to need to pass some data through to our white Group which is then going to pass that data through to the image that sits inside of it so it's almost like one of those Russian dolls where you just continually pull out layers and so if I was to select on my white Group which is just a little bit confusing to see right now on our page so what I might do is just give this a flat background color and set this to be a light shade of red so we can actually see where it sits on our page for the time being now when you go to preview or publish your app of course you can just remove this color and then it'll look beautiful once again but when I'm working inside a bubble what I like to do is color code all of my groups and that way it just feels like I'm building with a bunch of different Lego blocks which is just visually easier to follow so if I leave this as a red group for the time being what you'll notice is with groups they have the ability to store data inside of them and as I mentioned I'm going to want to pass the data on from each house or property into this red group so then I can reference it within my image element that sits inside of that red group so for the type of content I want to store inside of this red group I'm going to have this be the property and for the data source I'm going to have this pull the information from the current sales property now the current sales property just refers to the property displayed in each cell of our repeating group so if I was to jump into Zillow here this cell here would be property number one so it would be cell number one this would be be cell number two cell number three and so on and so right now our white group is just storing the information of each individual property so that way we can then pass it on to all of the elements we're going to display inside of that group and so if we just jump back into bubble here if I was to now select on my image element which sits inside of my red group the first thing I'm going to do is give this a dynamic image data source and once again by the word dynamic this just means that it's always going to change to display the relevant information of whatever property needs to be displayed so I'm going to choose to insert Dynamic data and I'm going to reference the parent groups property now the parent group is the red group that this image sits within and the reason why it's called a parent group is because our red group is kind of taking care of all of the elements that sit inside of it so it's known as the parent and of course the red group is pulling data from our repeating group and so that just means that it's going to pull all of the relevant information from the applicable property at the time and from that property I'd like to display the featured image now a personal preference of mine and I know I probably confused the hell out of you out of this point but this is just something that's going to make your application look much more visually enticing is that whenever I work with Dynamic images I also like to select this more option and if I choose to process an image with images I'm just going to tick this option here which just resizes and fits the dimensions of an image by cropping it so that just means that if an image doesn't quite fit the space that we allocated bubble's just going to zoom into it and crop it nicely so that way it fits all of this space and it just creates a much better end user experience Now by all means this isn't completely necessary this is just a personal preference of buying but I really do think that if you take the time to do this it will create a much nicer experience for your end users I'll then choose to just close this here so at this point in time we now have a data source for our image the only other thing we'll need to do is update the design of it as well as the responsive settings for it so in our appearance tab I'm just going to scroll on down and remove the default style of this image now while I'm working on this image I'm just going to add a solid border around this so that way if I was to click away I can actually see where it sits inside of my red group of course when you go to preview or publish your app you can choose to remove this border so that way it's not as visible later on but for the time being that's all I'm going to do I'd also like to update the roundness of its borders to be slightly curved because if we were to look at the real world Zillow clone here you can see that the top borders are curved to match the white group that they set within however the bottom borders are not curved here they have pointy edges and so in order to replicate that experience we can take this option to Define each border independently and then if I just set the top left border to be five and the top right border to be five it's just going to curve the edges of the top borders only which is the exact experience we wanted to create now that's all I'd like to change within my design what we're going to do is jump over to our layout tab and we're going to make this element fully responsive so I'm going to like always unselect that this should be a fixed width I'm going to set the minimum width to be 0 and leave the maximum width is infinite so now this image is going to take up as little or as much space as it can within my red group when it comes to the height of this group however I'm not going to manually update the minimum height here instead I'm going to use this option to keep this element's aspect ratio fixed and if I set this to be a three to two ratio what you'll just see is that that's going to make this more like a rectangle and so that just means that if this image increases in size or decreases in size it will always remain a perfect rectangle because the aspect ratio is fixed at this particular ratio here now in order to get this ratio I honestly just experimented around I think I started with something like a two to one ratio but I just found that that was a little too narrow although to be honest that probably could work but I think I just settled on a three to two ratio just because I liked this particular size here but again there's no scientific reason why I selected this ratio I truly just played around with it now I'm not going to add in any margins for this image here but below this image I'd now like to display the price of this property so if we head up to our visual elements I'm going to add a text element into my red group and it's going to sit below my image then when it comes to this text element I just like to display the total price of the property so I'm going to choose to insert Dynamic data and I'm going to reference once again the parent groups property and if I scroll on down I'm going to select the sell price now because in our database we're storing the sell price as a number I'm going to select this more option and choose to format this here as a currency which now means that I can add a currency prefix so I'm going to set mine to be dollars and I'm also just going to select to add a thousand separator which is just going to create a much cleaner experience I'll then choose to close this here and if I was to scroll on down I'm just going to update the design of this text element I'm going to set the font size to be 18. I'll choose to bold this text and now we can update the responsive settings of this so if we jump to our layout tab I'm going to sound like a broken record here because what I'm going to do is unselect that this element should be fixed with I'm going to set the minimum width to be zero and I'll leave the maximum width is infinite so now it's going to take up as little or as much space as it possibly can now when it comes to the minimum height whenever I work with text elements I do set this to be zero just to ensure that the actual text element will collapse around the text inside of it there and then finally I'm just going to add in 10 pixels of margin at the top none on the bottom but 10 on the left and 10 on the right and that will just ensure it doesn't touch any of the elements that sit around it now while we've added this text element in so as you can see on our data source this is going to display the sell price of this property but what happens if a property being just displayed is not a house that's for sale what happens if it's a rental instead of displaying the sell price what we'll need to do is display the monthly rental price and so in order to create that experience we're going to need to leverage yet another powerful feature inside of bubble and that feature is known as conditions So within our property editor here you'll see this tab known as the conditional tab now conditions are essentially a way to create some sort of rule whenever a behavior is met inside a bubble now if you're new to Bubble I expect everything I just said to be complete gibberish to you so what I'm going to do is explain this in a real example at this this point in time this text element is displaying the sell price of a property but as I said what I'd like to do is first of all identify if a property is a rental not a house for sale so with the condition what we can do is Define a condition and just recognize when the parent group's property when the listing type is in fact a rental not a sale property what I'd like to do is update the text that's displayed here and instead of referencing the sell price data field I'd like to reference the monthly rental price data field so what we can do is then update the text that's displayed and we can completely just Swap this out with a separate value so now instead of displaying the sale price I'm going to reference the parent groups property its monthly rental price and because this is once again a number I'm going to select the more option and I'll format this as a currency I'll add our thousand separator and I'll set my currency here to be dollars that is perfect and so now this is automatically going to update and display a rental price whenever a property is in fact a rental below this text element I'd like to add in yet another which if we look at the real world Zillow product here this just displays the number of bedrooms bathrooms as well as the square footage of this property so in order to do that I'm going to head to my visual elements I'll grab a text element I'll add it into my red group if I wanted to move this below my existing text element I could just jump to my layout tab and move this to the next position here then from here if I jump to my appearance tab what I'm going to do is add in a combination of dynamic and static text and I'll show you what I mean by that so if I'd like to first of all display the total count of how many bedrooms a property has I'm going to choose to insert Dynamic data and I'm going to reference the parent groups property its bedroom count now that's just going to give me a number so if a property has three bedrooms it's just going to display the number three so what all they need to do is add a space type in the letters BDS so that's just the abbreviation for beds I'll add another space and then I'm going to add a straight line here followed by yet another space and now from here I'd like to display the number of bathrooms so I'm going to insert Dynamic data once again and I'm going to reference the parent groups property and in this case the bathroom count then from here I'm going to select in this input field once again I'm going to type in the abbreviation ba for bathrooms I'll add a space a straight line followed by another space and then finally I'd like to display the square footage of this property so once again I'm going to insert Dynamic data and I'm going to reference the parent groups property and if I just scroll on down we can reference the square footage and now because this is a number and it might be quite long it might be in the thousands or ten thousands what I'm going to do is select the more option and choose to format this as a number which it already is but the reason I'm doing this is because I just like to add my thousands separator in there so that way it just formats this nicely I'll then choose to close this I will select into my input field I'll add a space and I'll just type in the abbreviation for square footage so sq ft and thankfully that is all of the text we'll need to add into this text field now I'm quite happy to leave the design of this text as the default settings however we will just need to update the responsive settings of this text so if we jump over to our layout tab here we're going to unselect it this should be a fixed width of course we're going to set the minimum width to be zero we'll leave the maximum width is infinite so now this text element can take up as little or as much space as it needs when it comes to the height I'm also going to update the minimum height here to be zero and the reason I'm doing that is because we have this option selected here to fit the height of this element to the content inside of it so that just means it's going to collapse nicely around that text and then finally I'd also like to add in 10 pixels of margin around every single border for this text element so that way it doesn't touch any of the additional elements that sit around it there now below this text element that displays the details of the property I just like to display the actual address of this property and so in order to do that I'm going to head over to my visual elements I'll grab yet another text element add this into my red group and when it comes to this text element I'm just going to insert Dynamic data and I'm going to reference the parent groups property its address it's as simple as that for the design of this text I'm just going to scroll on down and update the font size to be 16 so that way it's slightly larger I'll then jump into my layout tab and make this element fully responsive so I'm going to unselect that this should be a fixed width I will set the minimum width to be zero leaving the maximum width is infinite of course then for the minimum height I'm also going to set that to be zero and you'll see that it will now collapse nicely around the text element and then finally I'll add in 10 pixels of margin at the top 10 on the left and 10 on the right and I can actually just see that I've accidentally added 10 pixels of margin at the bottom of our text element that sits above this I apologize I didn't want to do that sorry I just want to leave that one as zero but after updating this there is one very last field I'd like to add into our entire card here and that is going to be the name of the agent who has listed this property and so we're going to head up to our visual elements we'll grab a text element add this into our red group now I'd like to move this text element to the very last position of my red group so if we jump to our layout tab I can move this to the next position then when it comes to our appearance tab here I'm going to start by typing in some static text and I'm just going to type in the words listed by semicolon and I'm going to keep that in all caps and they're going to add a space and I'm going to choose to insert Dynamic data and in this case as the name would suggest I'd like to display the name of the agent who has listed this property so I'm going to reference the parent groups property and if I scroll on down you'll see the option to reference the person who created this property so every single time a user creates something in your database bubble is automatically going to attach that to the user who in fact created that and so that's going to be known as the Creator field so if I select on this I can now reference who the person was that created this property and because that person is a user which is linked to our user data type you'll see that I have the ability to reference all of the data fields within that data type and in this case I'm going to reference the agency name now because I'd like to format this in all caps I'm going to select the more option and I'm just going to choose to make all of the letters here in uppercase and that is all I'll need to change for the data source of this text I would just like to scroll on down to my design settings here and update the font size to be 12. so I'm going to make this text quite small that's all I'll need to change for my design though so if I jump into my layout tab once again we'll need to make this element fully response offensive so as you probably guessed that means we're going to unselect this should be a fixed width we'll set the minimum width to be zero leaving the maximum width is infinite we'll update the minimum height to also be zero so that way it collapses nicely around all of that text and because this is in fact the very last element I'd like to add into our group here I'm going to add in 10 pixels of margin around every single border so that also includes the Bottom now as I mentioned this was the very last element I wanted to display inside of our red group so I can now select on my red group jump to my layout tab and it's at this point that I can now update the minimum height to be zero and because we have this option selected by default to fit the height of this element to the content inside of it it will just collapse nicely around all of the details of our property and now once we've finished configuring our red group we can now select on the overall repeating group so this is our repeating group property we can head to our layout tab and we can now update its minimum height to also be zero which means that when it collapses to fit the height of the element around the content inside of it it's going to fit nicely around our red group I'd also just like to add in some margins around this repeating group and for these margins I'm not going to add any at the top however I'd like to add in 20 pixels of margin at the bottom and 10 on the left and 10 on the right and that's just going to ensure that our repeating group won't directly touch the borders of my page and now the very last thing we'll need to do to configure this repeating group is jump over to our appearance Tab and what we can actually do is now update the minimum height of each row to also be zero now what this means is that similar to before it's just going to collapse the height down and make sure it fits nicely around all of our elements and you remember before how I explained that when it came to these settings here you'd need to just kind of experiment with what's going to work today when it came to the number we'd added in it actually worked out to be perfect and the reason for that is because right right now the minimum width of each column for our repeating group is 300 pixels so by each column that just means each repeating group cell that you see here so each one of these will have a minimum width of 300 pixels meaning they will not be able to shrink below 300 pixels in width now the reason why that's perfect is because if I was to open up my responsive tab here what you'll see is that we have the ability to expand the width of our page out and as you'll see bubble will continually add in more cells into our repeating group however as we shrink the page bubble will remove repeating group cells and it'll just stack them down our page but the reason why 300 pixels is perfect is because if you were to look at this on a mobile device at the smallest possible size on a mobile device your application is going to be 320 pixels in width now I personally find that most modern mobile devices so things like an iPhone 14 usually have a width of about 380 pixels if not larger but if you've got someone using your application that still lives in the Stone Age and they have something like an iPhone 5 the smallest possible screen size that they will have is 320 pixels here so that's kind of like the absolute bare minimum you need to design for when it comes to creating a responsive experience in bubble and the reason why I said the 300 pixel minimum width on our repeating group is perfect is because as I mentioned the absolute minimum width of each column is 300 pixels but we also just need to factor in the 10 pixels of margin we have on each side of our repeating group so 300 plus 10 pixels of margin on the left and 10 pixels of margin on the right is 320 pixels so that now creates a fully responsive experience on any mobile device size so on anything as small as an iPhone 5 all the way up to something like an iPhone 14 as well as all the way up to a full desktop browser and now that is how you can create a fully responsive experience on our home page now I know at this point in time time it doesn't look like we've created much on our home page but as you can see it took quite a bit of time to run through all of the finer details throughout the process and if you were to run a preview of this page now you wouldn't actually see anything on it aside from your hero section the reason for that is because at this point in time we actually haven't created any properties in our database so we don't have any properties to display within our repeating group but of course later on when we build that feature out you'll be able to see a nice list of all of the properties that are based near you for the time being though what we're going to do is jump back into our notion checklist and we're going to tick off that we've finished building at the home page which included building out the base of our search feature so I explained how we just needed to add in that custom search field as well as configure our own Google Maps API keys and then from there we took the time to build out the repeating group that's going to display a list of properties based near the current user now that we've finished building out the Crux of our home page I just wanted to move along to one of the next core features that's related to that specific page and that's going to be building out a navigation menu which of course will allow users to jump between all of the different pages we're going to create in our app today so if I was to just quickly open up the real world Zillow product you'll see at the top of the page we have this white navigation menu and inside of this we have a Zillow logo as well as a bunch of different text Elements which when clicked will send someone through to that relevant page now contrary to what you might think there is quite a few little nuances involved within building a navigation event and it's more just around creating a responsive experience because if I was to just look at this navigation event it is just a series of text elements and a logo in the middle but when things get complex is when you actually reduce the width of your browser or if you view this on a mobile device so as you'll see once the browser becomes below a certain width the text options in now ahead and menu disappear and we now have this little drop down menu which will display all of the same menu items whenever you click this little hamburger icon and so today we're going to actually be building out that entire experience within bubble and I'm going to break this down into two separate modules once again and so in our first section here we're actually going to build out the design of the navigation menu you see and we will make that fully responsive but then in the second section we're going to build out that mobile drop down menu so that way when the menu collapses itself your users will still be able to navigate between all of these separate pages in your app now if we jump over into bubble when it comes to the process of creating a header navigation menu as you just saw you essentially just add a group element to the top of your page and because you'd like to display a series of elements horizontally across your page you would set that elements container layout to be a row then from there you can add in all of your text elements and even your Zillow logo now although we could do that on our home page here what I'm actually going to do do is instead create something known as a reusable element in bubble and the reason I'm going to do this is because our navigation menu is not just going to be displayed on our home page we're going to want the exact same menu to be displayed across every single page in our app today and so instead of having to recreate this each individual time on every page of our app Bubble has this feature known as reusable elements where it essentially as the name would suggest allows you to build an element once and then just reuse it wherever you would like within your app and in order to build a reusable element what you'll need to do is open up your page drop down menu in the top left hand corner and right at the bottom you're going to see this option to add a new reusable element we're going to click on this and we're going to call this our header menu we'll then choose to create this and now we'll be sent through to what looks like another page in our app and this is where we can design our reusable element so if I was to double click on this the first thing you'll notice is that our header menu here is a reusable element which is a group and when you're building reusable elements you can create things like pop-ups or floating groups but today we're going to be using the Standard Group option so we won't need to change anything there what I would just like to do while we're in our appearance tab is just add a solid border around this group so that way when I click away I can see where it actually lies within my bubble editor and then later on when I add it onto my actual page we'll easily be able to distinguish where this element starts and ends now after updating the design of this element we'll also need to jump into our layout tab because of course like any group we're going to need to make this group fully responsive now for the container layout as I alluded to before for your navigation menu you're going to want to display a series of text elements across your page which means you'll be stacking elements horizontally so that means that the container layout will need to be a row not a column and then once we update our container layout we'll have access to all of the width and height settings only they're just going to look a little bit different to the traditional group elements you would build on work with inside a bubble one of the good things about a reusable element though is that by default it is fully responsive so you can see our minimum width here is zero pixels and our maximum width is infinite so that means it's going to take up as little or as much space as it can on our page however the reason why this group is quite small at the moment is because we have this other width setting known as the width of a UI Builder so this is just the width that's going to be displayed while we're actually building the reusable element and right now it's set as 200 pixels what I'm actually going to do is set this to be 960 pixels and the reason why I've selected 960 is because that is a good format for a desktop device but just bear in mind this is just the width of how it's being displayed in your editor as I mentioned this group is still fully responsible with these two settings here now within this group we will come back and update the height settings but before we do that we're going to need to add in all of the elements I'd like to display inside of it and the very first element is going to be a group that contains a series of text elements on the left hand side of my menu so when I look at the real world Zillow product here I can personally see that this navigation menu is broken into three different sections we've got our section on the left hand side we've got our logo in the middle and then we have our section on the right hand side so if I was looking at this I would picture that this is one big group on the left hand side then we've got our image in the middle and then we have another group which contains more text elements on the right hand side and so if we were to jump into bubble what I'm going to do is scroll on down to my containers menu and add a group inside of my existing white group now the first thing I'll do with this group is actually just update the name of this to be called group left because this is going to be the group that's displayed on the left hand side of our navigation menu I'm also going to jump to my appearance Tab and I'm just going to detach the style of this because I'd like to set the background style to be a flat color and I'm going to select that this should be a light shade of red again this is just a personal preference of mine but it easily allows me to distinguish where this new group sits inside of my overall reusable element now for this group I'm going to jump to my layout tab and I'm going to set the container layout to be a row because as you saw before we're going to be stacking a series of text elements side by side and then I'm also going to make this group fully responsive so I will unselect that it should be a fixed width we'll set the minimum width to be zero and the maximum width as infinite now from here we can add our text elements into this group so I'm going to scroll on up to our visual elements I'll grab a text element and I'll add this in now for this text element I'm just going to have this display the word by I'll then head on down to my design settings and just update the size of this font to be 20 and I'm not going to make any other changes from there I will however need to update the responsive settings of this so I'll jump to my layout tab I will unselect that this should be a fixed width I will set the minimum width to be zero but when it comes to the maximum width I'm actually going to select this option to fit the width of this element to the content inside of it and that just means that instead of taking up as much space as it can on our page it's automatically just going to fit the width to the exact dimensions it needs to display this text element I'll then do the exact same thing for our height so if I set the minimum height to be zero it's also going to collapse around the height there and that's all I'm going to change here while we're working on this text element I would just like to add a margin to the right hand side of 20 pixels and the reason for that is because we're about to add yet another text element beside this if I wanted I could also choose to vertically align this text element in the center of my red group and that's just going to allow me to ensure that all of the items I add into our group are going to be perfectly aligned from here I'm just going to add another text element in but to streamline that whole process I'm just going to make a copy of this existing text element so I'm using a Mac so I'm just going to use the command C shortcut if you're on Windows it's Ctrl C I'll select into my red group hit command V and I'll paste in in another text element now for this text element I'd just like to jump over to my appearance Tab and update this to display the word rent and then finally I'm going to make one last copy of this only this time I'm going to update the text to display the word cell and because this is the very last text element I'd like to add into this rate group here what I'm going to do is jump over to my layout tab and just remove that right margin and that's just going to ensure that when we collapse this red group it'll fit nicely around all of our elements so from here I can select on the overall red group I can jump to my layout tab and the first thing I'll do is update the height of this group I'm going to set this to be 0 and what you'll see is that it will now collapse nicely around all of the text elements when it comes to the width I'm also going to once again select this option to fit the width of this element to the content inside of it and once again it's going to collapse nicely around all of our text elements we can then choose to vertically align our overall red group into the center of our white group and then finally I'm going to add in 20 pixels of margin around every single border for this red group and the reason for that is because when I close off all of the empty space for my overall white reusable element group I don't want the borders to touch my Red group so this will just ensure that there still is some space but at least now I can control how much there is now beside this group I'd like to add my Zillow logo so in order to do that I'm going to head to my visual elements I'll add an image into my white group and when it comes to this image I'm going to upload a static image from my local device here now of course you can also access the same logo through the Google Drive link that I've provided before but when it comes to this image we'll just need to jump to our layout tab and obviously update the formatting of this for this image I'm going to set the width of this to be 200 pixels and I am going to keep this as a fixed width I don't want this image to continually scale up or down based on the size of our page I'm always going to want it to be the exact same size and that size is going to be 200 pixels I'm also going to take this option to keep this element's aspect ratio fixed and that aspect ratio is going to be four to one so this is just the aspect ratio that's going to work nicely with this logo while we're here I'll also vertically align this image in the center of my white group and then finally I'll add in 20 pixels of margin around every single border just like we've done with our red group and now after configuring our image I'd like to add yet another group into our overall reusable element and that's going to be the group that displays on the right hand side so I'm going to head on down to my containers menu add a group into my existing group and I'm first of all going to update the name of this to be called group right now before I make any changes to this group I just like to jump to my appearance tab detach the style of this and set the background style to once again be a flat color so that way I can set the color to be let's say a light shade of green and now I can easily see where this sits on my page I'll also jump over to my layout tab I'll update the container layout to be a row because I I'll still be stacking text elements in this across our page so horizontally I can then unselect that this element should be a fixed width I will update the minimum width to be zero and for the time being we'll leave the maximum width is infinite and now within this group I just want to add two elements there's one text element which is going to allow someone to manage their listings when it's clicked and the other is just going to display the profile photo of a user and when that's clicked it's going to send them through to their settings page and so in order to add the text element I'm actually just going to select on one of our existing text elements here I'll select our buy text element I'll make a copy of that I'll select into our green group and paste a version of that in and because I've copied this across it's copied all of the format again styling so we don't need to change anything there the only thing we'll need to update is in our appearance Tab and that's going to be the actual text that we want to display so this is just going to display the words manage listing and I should actually add an s on that because a user could manage multiple listing not just one now beside this text element I'd like to display the user's profile photo so if I scroll on up to our visual elements I'm going to grab an image element I'll add this in and when it comes to the data source of this image I'm going to want to display a dynamic image so this will be the image that a user has uploaded as their profile photo but what you'll also need to remember is that if we were to open up our database under our user data type we'd already taken the time to upload a default image for the user's profile photo so as soon as a user registers an account by default we do have an image to actually display so if we jump into our design tab what I'm going to do is head to our Dynamic image I'm going to insert Dynamic data and I'm going to reference the current user so the current user is the person who is logged in viewing our application and I'd like to display their profile photo now when it comes to working with Dynamic images I always like to select this more option so that way I can choose to process these images with injects and this will give me the option to select and resize and fit the dimensions by cropping it just so that way if an image is quite small and it doesn't take up all the space it will just expand it out and make it larger and then going to choose to close this here and we can now update the design settings for this image I'm going to scroll on down and choose to detach the style of this image and for the time being I'm just going to add a solid border around this so that way when I click away I can actually see where this image sits on my page I'll select back on my image though because I'd also like to update the roundness of its borders to be 100 now that's going to help us make this a perfect circle from here we can then jump to our layout tab because of course we'll need to update the size of this image and when it comes to this image I'd like to set the width of this to be 40 pixels now I am going to keep this as a fixed width because I'm only ever going to want this image to be 40 pixels no larger and no smaller I'll also select this option to keep this element's aspect ratio fixed and if I leave this at a one to one ratio it's going to make it 40 pixels by 40 pixels which now makes it a perfect circle we can then choose to vertically align this in the center of my green group and that is all of the elements I'll actually need to add into this green group so I'm going to select on this group here head to my layout tab and we can now close off all of this empty space so we're going to update the minimum height here to be zero and what that's going to do is collapse nicely around all of the elements that sit inside of it I'm now going to need to do the exact same thing for my width so I'm going to select to fit the width of this element to the content inside of it and once again it's going to fit nicely around our elements I will vertically align this in the center of my white group and finally I'll add in 20 pixels of margin around every single border for this group now at this point in time if I was to just close my property editor here what you'll notice is that all of my elements are currently positioned to the left hand side of my overall white group whereas what we'd like to do if we were cloning the real world Zillow product is have one of our groups on the left the image in the middle and then our right hand group to the right hand side so how can we replicate that if we jump into bubble and select on our overall white reusable element and if we head to our layout tab of course at this point in time we've set the container layout to be a row which means we're going to horizontally stack elements across our page but as you can see the container alignment here is positioned to the left so the container alignment just determines in which way elements are going to be positioned inside of your group so if I was to let's say Center this you'll see all of our elements will be positioned smack bang in the center of our white group but what I'm interested in selecting from today is this option here known as the space between and what this is going to do is add an even amount of space between each element inside of this group so it's going to replicate this exact experience we want here now at this point in time we're not quite done with all of the groups we need to add into to our main navigation menu so what I should point out right now is that of course in our right hand group we're displaying a user's profile photo but what happens if a user actually doesn't have an account what happens if they just visit our Zillow clone and it's the first time they've landed on our application we obviously wouldn't have a profile photo to display because that person actually hasn't signed up for our app and that leads me to my next point is how can we actually get people to sign up for our app and so if I was to just quickly jump over into Zillow I'm logged in at the moment when I'm viewing this app but if I was to just grab this URL here make a copy of it then open up an incognito browser and paste in that URL what you'll see is that we now have the option to sign in or sign up to this application and so that's something I'd like to replicate within our own Zillow clone today so if we were to jump back into bubble what I'm actually going to do is add yet another group to the right hand side here and within that group I'm going to display that to users when they're logged out and then I'm going to select only display this green group to users when they're logged in so in order to do this I'm going to grab another group and add this into my existing white group here now I'm going to jump to my appearance Tab and for this group the first thing I'll do is just attach the style of this so that way I can give it a flat background color I'll set this to be something like a light shade of let's say purple it doesn't really matter I just want to be able to see where this sits on my page I'll then jump to my layout tab and I'll update its container layout to once again be a row because I want to Stack elements horizontally within this for the width settings I'm going to make this fully responsive for the time being so I'm going to unselect that this should be a fixed width I'll set the minimum width to be zero leaving the maximum width is infinite now of course we will come back again and update these settings in a moment but before I do that I'm just going to add in two text elements one's going to display the word sign in and the other is going to display the word sign up and then later on in our application I'm going to run you through the process of how we can actually register a user's account and also create an experience that allows them to log into an existing account so what I'm going to do is select on any text element here let's just say I'm going to select on my buy text I'll make a copy of that select into my purple group and paste a version of that in now once again all of the formatting has copied across the only thing I'll need to change here is within my appearance Tab and I'm first of all just going to display the words sign in then from here I'm going to make a copy of this text element and I'm just going to change this to Now display the words sign up and I'll just need to remove this margin on the right hand side of this text element because this is the very last element we're going to add into our purple group so if I jump to my layout tab I'm going to head down to my right margin and I'm just going to set that to be zero and because that is the very last element I'd like to add into this purple group I'll select on the overall group itself head to my layout tab and I'm going to update the minimum height here to be zero so that way once again it collapses around our text I'll they need to do the same thing for our width I'm going to select this option to fit the width of this element to the content inside of it and of course once again it has collapsed nicely around the width of our elements I will then vertically align this in the center of our white group and of course add in 20 pixels of margin around every single border now another thing I should point out is that I'd like to be able to distinguish between our two groups on the right hand side here so I'll need to update the name of this group to be called group right logged out because this is the group I'd like to display to users when they're actually logged out of our app whereas the green group is going to be the group that's going to be displayed to users when they're logged in so I could select on this and update the name of this to be called group right logged in and now it's at this point that I'd just like to highlight how we can actually hide and display one of these groups to the relevant user at the relevant point in time so let's say if you're brand new to my application you open up the home page you should shouldn't see this green group you should only see this purple group because that's going to prompt you to either sign into your account or sign up for a new account and so what I'm going to do is double click on my green group and open up our property editor and then going to head to my layout tab and I'm actually going to unselect this option that makes this element visible on page load so that just means that by default this element will be hidden I'm also going to choose to select this option to collapse this element when it's hidden because as you can see although this element isn't being displayed it's still taking up the same amount of space on our page or I should say in our group so what I'm going to do is Select this option to collapse when hidden and now that means it's not going to take up any space at all and our purple group will move over and take its place however I am going to need to create a condition on this group that's just going to recognize when the current user is in fact logged in I'd like to display this group not the purple one so I'm going to define a condition here and I'm just going to recognize when the current user is logged in I'd like to then select that this element should be visible and tick that that should be true and what I love about Bubble is that you can choose to toggle these conditions on and off so if I wanted to see what this condition looks like when it is true you'll obviously see that this element is now visible again now from here I'm going to need to do the exact same thing for my purple group only in this instance I'd like to display this whenever a user is logged out so the first thing I'll do is select on the group head to my layout tab and unselect that this should be visible on page load I'm then going to select to collapse this element when it's hidden and if I jump over to my conditional tab I'm going to define a condition and I'm going to recognize when the current user is in fact logged out I'd like to select that this element is visible and tick that that should be true and of course I can choose to toggle this on and off so that way I can see what this is going to look like when that behavior is met and now that is how we can start to create a truly Dynamic experience for any user of our app another thing I should to point out is that at this point in time we have a series of text elements that aren't going to be relevant to every single user so let's say if someone signs up for our application and they're only interested in buying or renting homes in that case we shouldn't actually display this option that allows them to sell a house or even this option that allows them to view all of their property listings and so what I'd like to do is create yet another condition on each of these individual text elements that just recognizes that they should only be displayed once a user has upgraded their account to become a buyer because if you remember in our database if I was to head to my user data type we have a data field known as the profile type which is linked to our option set list and that option set list just had two options you could either be a buyer or you could be a seller and by default we've said that everyone is a buyer so not everyone is automatically going to be able to sell properties later on throughout our tutorial I'm going to explain how users can actually upgrade to become sellers but by default everyone is a buyer so they actually shouldn't see these two options and so what we're going to do is select on our cell text here I'm going to double click on this I'll do the exact same thing as our groups so I'm going to jump to my layout tab and then first of all going to unselect that this element should be visible on page load then I'm also going to tick this option to collapse this element when it's hidden so that way it doesn't take up any space there I'll then jump over to my conditional tab I'll Define a condition and I'm just going to recognize when the current user when their profile type is in fact a seller not a buyer this element should be visible and I will check that that should be true and if I wanted to toggle this on I can see what this is going to look like when this condition is met and now from here I'm going to need to do the exact same thing for our manage listings text because I'd only like to display this to someone who is a seller not a buyer so I'm going to head to my layout tab I will unselect this should be visible on page load I will select to collapse this element when it's hidden I'll then jump to to my conditional tab I'll Define a condition and I'm just going to recognize when the current user when their profile type is in fact a seller I will select that this element should be visible and tick that that should be true and I'll just toggle this on for the time being so that way I get a good idea of where this element is going to sit on my reusable element and now after adding in all of those conditions we can start to actually make our header navigation menu functional and then once we've done that we can close up all of this empty space and make it fully responsive and so what I mean by making this navigation menu functional is actually creating the workflows that are going to run whenever someone clicks on one of these options because if someone wants to click on that say the buy option we'll want to send them through to a search results page if someone clicks on the sell option we'll send them through to a page where they can create a new property listing and we're going to do that for almost every element here and so I'm actually going to start with the cell text here and the reason for that is because our buy and rent texts are going to have a little bit more involved within the Y workflows but I don't want to confuse you right out of the gate so what I want to do is just show you how simple it is to build out a workflow that sends someone through to a new page in our app so I'm going to double click on this cell text and I'm going to choose to add a workflow here and within this workflow this is where you'll really start to see the power of bubble come to life so this is where we can visually create the logic within our application so essentially what you're doing here is visually coding and it is a super straightforward process so within this workflow it's going to be pretty basic all we're going to do is send someone through to a new page within our app and that is the page where they can create a new property listing because they'll want to sell a property so within my workflow I'm going to add an action here and we're going to select from the navigation events and choose the go to page trigger now from this point you'll need to select a destination page and at this point in time our page does not yet exist because we have not yet created it so we're going to create a brand new page from scratch and this page age will be called our listing page I'm going to choose to create this then from our destination drop down I can select that we'll send someone through to that listing page it truly is as simple as that now at this point in time I should also just point out that we won't need to send any data through to this page but we will be doing that later on throughout our tutorial but for the time being this is all we'll need to add to this particular workflow now when I'm building out workflows I also like to personally color code these so that way I can easily identify what features in my app they belong to so if I select on my workflow trigger here I'm going to head to my event color and set this to be red now throughout today in my tutorial I'm going to set all of my navigation events to be read so that way on any page when I open up my workflow editor I know that all my red workflows send people to different pages in my app we can then jump back into our design Tab and we're going to build out the workflow that runs when someone clicks on the manage listings text so I'm going to choose to start a workflow here when this is clicked and similar to before what I'm going to do is select a navigation event choose the go to page action and I'll set the destination page here to be a brand new page that we need to create so I'm going to head on down and select to create a new page and we're going to call this page the manage page so on that page we're going to display a list of all of the properties that someone has created and then from there they'll be able to manage them so they can choose to change the details of them and anything else that's relevant to that property I'm just going to choose to create this for now though and I'm going to set that as our destination page so I'll select our manage page we can then jump to our workflow trigger once again and select that the event color here should be read Because this is also a navigation event now what you'll also see is as we're creating these Pages these will now be displayed within your page drop down menu and of course at this point in time all these pages should be blank because we've only given them a name we haven't actually made any changes to them if we were to jump into our design tab once again I'd like to select on my user's profile photo and in this case I'd like to send someone through to a settings page when this is clicked because this is the page where a user could update any additional settings within their profile so we're going to choose to add a workflow here we're going to once again select from a navigation event choose the go to page action and we'll need to create a brand new page so I'm going to open up my page drop down menu select to create a page and I will call this the settings page I'll choose to create this then from my drop down menu I can open this once again and select that my destination page should in fact be that settings page and I won't need to send any data through to this so I can leave that field blank we'll then select on our workflow trigger we can update our event color here to be red and if we were to jump back into our design tab that covers almost all of our text elements now for the sign up and the sign in text elements we're not going to build any workflows out right now in this section of our tutorial instead in a future module I'm I'm going to explain how we can actually display a pop-up on our page whenever someone clicks on either of these options and in that pop-up they'll be able to either sign in or sign up to an account so we don't need to create any navigation events for these right now what I could do though is select on my Zillow logo and create a workflow that will send someone back to our home page so if I double click on this logo I'll choose to add a workflow and whenever this image is clicked I'm going to once again select from a navigation event I'll choose the go to page action and in this case our destination page does already exist so our home page is our index page because that is the standard page that comes by default in any bubble application we'll then select on our workflow trigger and update the event color to be read and now finally we can build out the two workflows that are going to run when the buy and the rent text are clicked now the reason why I left these till last is because we're going to need to send some information through to our destination page whenever one of these options is Click it and I'll explain what I mean in a moment let's click on our buy text for the time being and choose to start a workflow whenever someone selects this option in our menu now within this workflow we're once again going to select from a navigation event and choose the go to page action and at this point in time the destination page does not yet exist so we will need to create this and when it comes to this page we're going to be calling this the search results page so I'll select to create this here then I will select that that should be the destination page for this workflow but if I was to just take a moment and pause right here and then head over to the real world Zillow application and click on this buy button here what you'll see is that we've been sent through to our search results page which just displays a list of properties as well as a map and we've got these additional filters here but what you'll see is that when we were sent through to this page we're now only being displayed properties that are for sale not properties that are for rent and so this is the experience I wanted to create today when someone clicks on the buy text I want to send someone through to the search results page and allow them to look at homes for purchase whereas when someone clicks on the rate text I'll send them through to the same page but I would only like to display properties that are available to rent and so in order to do that we're going to jump back into our bubble editor and within this workflow where we've sent someone through to our search results page I'm going to need to send through some information about whether someone would like to either buy or rent a property and in this case that user would like to look at properties that are available for sale and the way in which we can do this is by using a tool known as page parameters so if we were to select this option here to send page parameters to our destination page it's going to allow us to send through multiple bits of information and in this case I'd like to send through the fact that someone's going to want to buy a property so they'll only look at properties that are for sale and then I'd also like to send through their current location so that way we can just display a list of properties that are near their current suburb now if you're relatively new to Bubble you might not be familiar with page parameters but as a user of the internet I can guarantee that you have come across page parameters at some point in time in fact right now if you were to look at the URL in your bubble editor you'll see a whole series of page parameters so if I was to open up my URL here I can see that I'm currently looking at bubble dot IO and then I have this page string here which is called my page but beside that I have this little question mark and then you have all of these random bits of text and characters and these are known as your url parameters or page parameters for that matter So within this URL parameter bubbles storing a whole bunch of different information so for instance you can see that there's a URL parameter here which is called the ID of my application and beside that after the equals value it actually has the name of your application stored within it and so then bubble knows within its edit data to display that application I can also see that there's another URL parameter which just determines what tab I have opened within my editor and so I can see here that because I have my workflow tab open this is my tab 2. so it goes one two three four five and the list goes on and so that's why I can see that under my tab parameter bubble knows that I currently have Tab 2 open now if I was to delete tab 2 and added Tab 3 then refresh the page what you'll see is that it's going to reload my bubble editor here and it's going to open up tab 3. so this is where a page parameters come into play they allow you to store information within a URL and then from there you can have your application react to that in real time so if I just open up my workflow editor once again you'll see that my parameter will update but I'm going to open up my workflow that we just created when the buy text was clicked and as I mentioned I'd like to send through two page parameters and I'm going to be sure to explain this in a lot of detail as we walk through it so if I select to add add a perimeter the first thing you'll need to do is give this parameter a name and the technical term for this is known as the key but let's forget that let's just call it a name now the name I'd like to give this parameter is going to be called listing type and something I just want to point out is that you may have noticed that I've formatted this in all lowercase letters and the reason for that is because later on in our course when we build out our search results page we're not going to do it right now so you don't need to worry but we're going to need to reference the exact same value we send through in our page parameter from our navigation menu and in order to reference that parameter we're going to have to type it in once again and if we were to let's say on our search results page type in the words listing type but add a capital l because there isn't a capital l in our parameter name that we've originally created here there wouldn't actually be an exact match meaning those two parameters wouldn't be able to communicate and send data through to each other and so that's why I just like to create a standardized way of naming my parameters so I have a rule where I only use lowercase letters and another thing I should point out is that I don't use spaces so you'll see between these two words I added a dash and the reason for that is because whenever you're working with URL if you were to add a space in it it would just completely break that URL that's why you'll only ever see dashes or underscores within URLs and they're just used to replace spaces now for this parameter here we're sending through a listing type and this listing type should be properties that are for sale and so of course what I can do is reference the different listing types within my options set list that we've already pre-created so if I just quickly sidestep over into my data tab here and open up my option sets menu you'll remember that we've created an option set known as the listing type and inside of this we had two options there was the properties that were listed for sale and there was the properties that were listed as rentals now if I want to reference one of these options in this case it will be the properties for sale what I can do is jump into my workflow editor and for the value of this parameter so this is the value you see after the little equals symbol in the URL of your current browser what we're going to do is Select to get an option so this is going to fetch data from any options that we want in our database and that option is going to be our listing type and the option we'll reference is of course going to be the sale option I can choose to close this but because in a URL you can only display text or numbers I'm just going to need to reference the display text of this option set and if you remember the display text was the actual name of the option so in this case it's just the word sale so if I was to now click on this someone would be sent through to our search results page and in our URL you would see the word sale because then our editor would know that it would only need to display properties that are for sale now the other parameter I'd like to add is just going to allow us to determine the location of a user that they would like to search for properties in now on our home page if you're a member similar to the real world Zillow product we added a custom search experience so this allows someone to type in a particular location that they want to search for but if someone was to just come up and select this buy text what I'm actually going to want to do is send them through to a search results page and just automatically display properties within their own neighborhood and so what we're going to do is jump over into bubble we're going to add another perimeter and we're going to call this parameter the location then from here when it comes to the actual location we'll send through this is fairly straightforward we'll just scroll on down to the bottom and you'll see the option to reference the current Geographic position of the user so this is their current location based on their browser settings and in this case I'm going to select the more option and I'm going to actually choose to extract a value from this Geographic address and I'm going to pull through the city that they live within now if you wanted you could pull things like their neighborhood their stay or even their country but in this case I'm going to pull the city now if someone doesn't live in a city it will in fact pour their suburb so I'm just going to leave that as is for now and choose to close this and what you'll now see is that we're now sending through two parameters within our workflow here now again I know that if you're brand new to Bubble this is a lot to take in but I just wanted to explain this now so that way when we build out our search results page it's a little easier for you to understand how I'm actually going to pull this data from our URL now from here I'm going to select on my workflow trigger and update the event color to be red because this is a navigation event and now finally there is just one very last workflow we'll need to create so if we jump back into our design tab I'm going to click on this rent text and instead of actually double clicking on this and choosing to create a brand new workflow from scratch what we could do is actually just make a duplicate version of the workflow that ran whenever the buy text was clicked but in that case we just need to update the value we're sending in our perimeter to just notify that we want our app to display rental properties not properties for sale so I'm actually just going to contradict what I said and jump back into my workflow editor I'm going to right click on our workflow that runs whenever the text buy is clicked I'm going to choose to make a copy of this I'll then right click here and paste in another version of this workflow and I'll just need to update the element that's clicked in order to trigger this workflow and in this case it's going to be the text rent so when our menu option is clicked to view rental properties this workflow will run and of course because we've made a duplicate version of our existing workflow it's already going to send someone through to our search results page the only thing we'll need to update is the listing type we're sending through here and so I'm going to choose to delete all of this information here and rebuild this bit from scratch and in order to do that you can just right click on this and choose to clear this expression I'll then select to insert Dynamic data once again I will get an option from my option set waist that list is our listing type and the option I'll select is the rental option I can then choose to close this and I'll reference its display text which is the name of the actual word rental and from here I won't need to change anything else for our location parameter that is all the same and just like that that is the very last workflow we'll actually need to build out for our navigation menu if we just jump back into our design tab it's at this point that we can now finally update the last few settings for our overall reusable element so if I was to double click on our white group here so our group that contains all of the elements I'm going to head over to my layout tab and I'm now going to update the minimum height to be zero which means it's going to collapse nicely around all of the elements inside of it and now before we add this reusable element onto our home page what I'd just like to show you is how this is going to function within our responsive tab here so as you can see when we're viewing this on a desktop device every everything looks great so we've got our group on the left our image in the middle and our group on the right and as the page expands all of the elements will continually expand outwards but when we start to preview this on a smaller device size what you'll see is that all of these elements are going to stack on top of each other and if we were to preview this at 320 pixels which is the smallest possible mobile device size you can see that this menu doesn't really look that great to put it simply and so how can we create a responsive experience that allows us to replicate the real world Zillow product and so once again I'm just going to jump over into Zillow and I'm just going to show you what this looks like when I reduce the size of my browser so you can see that at a certain point in time all of our menu options disappear here and then we have this little hamburger menu That's positioned on the left hand side of our menu from which when that is clicked it opens up this vertical menu and so we're going to replicate that today and for the time being in this module I'm just going to focus on how we can hide all of these existing groups and then display our hamburger menu so if we just jump back into our UI Builder here what we're going to do is head over to our visual elements here and I'm just going to add an icon element into my header navigation menu here now I'd like to position this at the very front of this group so if I jump to my layout tab I'm going to make this the first element in my group there I'm then going to jump over to my appearance Tab and one thing I noticed is that by default the icon is actually the exact icon we want it's this little hamburger menu what I'd also like to do is just update the name of this I'm going to call this icon hamburger menu and the reason why they call this a hamburger menu is because it kind of does look like a hamburger you've got your two buns and then you go paddy in the middle and so that's why it is called a hamburger menu if I open up the icon color I'm just going to update this to be a custom color code I have which is a darker shade of black if you'd like this color code it's zero eight one seven four seven and they're going to jump to my layout tab because I'd like to update the dimensions of this icon on so when it comes to the size of this icon I'm going to set the width to be 40 pixels and I'll also set the height to be 40 pixels now I'm going to keep these both as fixed values because I'm only ever going to want this little icon to be this exact size no larger and no smaller I'm also going to vertically align this in the center of my white group and I'm going to add in 20 pixels of margin around every single border here now one thing I should point out is that by default I actually don't want this icon to be visible on our navigation menu I only want it to be displayed when our browser becomes a certain width where we can no longer display all of our menu options so while we're in our layout tab I'm going to unselect this option to make this element visible on page load I'm also going to tick this option to collapse this element when it's hidden and now what we're going to need to determine is within our responsive menu when we should actually display that icon and remove all of our existing groups that have all of our menu options in them so if I was to expand our page out here what I'm going to do is head over to my elements tree and I'm going to take this option to only show my hidden elements so that way I can click on all of my additional text elements here and I can view this full menu now for the time being I'm also going to choose to hide my purple group I'm only going to display my green group and the reason for that is because this group is larger than my purple group so I'm just going to be building for the largest case scenario here which is going to cover us on all bases and so in order to hide my purple group I'm going to head over to my group logged out I'm going to unselect that and that will now hide this now if I was to slowly start reducing the width of my page everything's responsive it's responsive and I can see at this point here so at about 686 pixels this is where elements start to collapse on top of each other so this is where things become problematic so what I could actually do is create a condition on all of my groups and I could choose to hide these whenever the page is smaller than 690 pixels and then when all of these groups are hidden I could choose to display my hamburger icon and so what I'm going to do is start by selecting on my green group here now if you remember this green group is not visible by default so it's hidden when the page is loaded if I jump over to my conditional tab we've also created this condition that recognizes that this should only be displayed when the current user is logged in whereas what I now like to do is select the more option and I'd like to only display this group when the current user is logged in and when the current page width is larger than that 690 pixel Mark and so in order to reference that I'm just going to type in the word width I'm going to recognize when the current page width is in fact greater than 690 pixels this element should be visible and now this group will be hidden so it's not going to take up any additional space in our navigation menu one thing I should point matter is that if we were to reduce the width of our page right now you'll still see that this element is visible and the reason for that is because this condition is currently not true because right now within our bubble editor there's no way to tell if we're logged in or not but of course when we go to preview this application in a moment what you'll see is that if we were logged in this would become fully responsive now we're going to need to replicate the exact same thing on our right group logged out so I'm going to select to display this within my elements tree here I'm going to click on the purple group itself and I'm going to add the same extension onto our existing condition here so with this I'm going to select the and option and I'm going to recognize when the current user is logged out and when the current page width is greater than 690 pixels this group should in fact be displayed then from here we'll do the exact same thing for our red group we won't need to do it for our logo though because I'm always going to want that to be displayed regardless if a user is viewing this on a desktop or a mobile device so I'm going to select on my red group here and now I'm just going to define a condition on this group that will just recognize when the current page width is less than 690 pixels what I'm going to do is Select that this element should be visible and unlike our existing two groups I'm actually going to unselect that this should be true and the reason for that is because if we were to jump over to our layout tab by default this group is always going to be visible regardless if the user is logged in or logged out and so if it's always visible in my condition I'm just going to need to create a way to make it invisible what I'll also need to do is jump over to my layout tab and tick this option to collapse this element when it's hidden so that just means that when it's no longer visible it will not take up any space within my navigation menu and then finally the very last thing we'll need to do is just create a condition on our hamburger icon so under my elements tree I'm I'm going to select on my hamburger icon I will click on this and if you remember by default this element was not visible on our page load so we're going to create a condition and we'll need to recognize when it should in fact be displayed we're going to define a condition here and we're going to recognize when the current page width is once again less than 690 pixels and in this case I will select this element should be visible and I will tick that that should be true now when it comes to those two groups here you'll see that these will hide and display because they don't have any additional conditions that recognize when the user's logged in or out you can really start to get a good idea of how this is going to function and look to be honest that's everything we'll need to include within our navigation menu I know it took a long time just to get to this point but from here it's time to jump back to our home page so we can actually add this navigation menu onto it so if we head up to our page drop down menu we're going to open up our index page then on this page if we were to scroll right down to the bottom of our elements tree I'm just going to move my head out of the way here you'll see this menu which references all of your reusable elements and at this point in time we have our header menu that we've just created so I'm going to add this onto my page here and then if I select on my layout tab I'm going to make this the very first element at the top of my page and what I love about this reusable element is that because we've already taken the time to build it we can now just add it on to any page we would like and all of the formatting the workflows the responsive settings they're all going to copy across so you don't need to rebuild those from scratch again one thing I should just point out though is that if you ever want to make changes to your menu you won't be able to do this directly on your page instead you'll just have to jump back into the header menu itself and you'll need to make changes here but of course they'll be reflected in real time onto your home page now if I was to quickly just jump back to my home page and run a preview of my application here what you'll see is that in my navigation menu by default because I'm not logged into an account I have the menu option here to either sign in or sign up and if I was to reduce the size of my browser here you'll see we now have a fully responsive experience once our page is below 690 pixels and of course if we ever wanted to navigate between all of the pages in our app so let's say we wanted to buy properties we could click on this text element it would run our workflow and it'll send us through to our search results page which at this point in time our page is blank but another thing I should point out is that you'll notice here we have our URL parameters that have been sent through with it so we have our listing type parameter which just says that we're interested in properties that are for sale and for our location it's just pulled through our city jumping back to our notion checklist I'm just going to tick off that we're finished building out the features to create a navigation menu which of course within that we built out the workflows and we went above and beyond and made that fully responsive moving down through our list of features within my notion checklist today the next thing I wanted to do was actually skip ahead and instead just focus on this feature where we can create a property listing now this is going to be one of the first real core features that powers our platform today because when you think about it if users can't create property listings then we actually can't display those listings and so this feature is going to power a large portion of our app today now I hope you're ready because this one is going to be a long section of our tutorial and I'm going to be sure to explain everything I can in as much detail as possible so that way you can clearly understand all of these steps and follow along with me and so the first thing we're going to do is jump back into our bubble editor now at this point in time if we were to open up our page drop down menu we've created this page known as the listing now the reason we've created this is because within our navigation menu when we'd originally built out the navigation workflows we created a way for users to be able to list properties on our Zillow clone and so that's why why this page has already been created but of course at this point in time it is blank there's nothing on it and we haven't made any changes to it so what we'll need to do first of all is double click on the page open up our property editor and give this page a container layout so we're going to head to our layout tab here and we're going to update the container layout to be a column because we'll be stacking elements in this from top to bottom so that means all of the elements will be positioned vertically then once we've updated the container layout I'd like to add my reusable navigation menu to the top of my page and so in order to do that I'm going to move my head out of the way here I'm going to scroll right to the bottom of my elements tree and I'm going to grab my header menu under my reusable elements I'll add that onto the page and that is all I need to do honestly every time I add that reusable element onto my page it brings a tear of joy to my eyes because it saves so much time having to rebuild that but from here what I want to do is focus on building out the actual experience which allows us to upload a new property listing to our property Marketplace and so when it comes to this experience I'm going to actually break this down into two different sections so when a real estate agent wants to actually list a property I'm going to start by grabbing some basic details about that and I'm going to display all of that information in a group now when they select that they want to move on to the next step in the process of listing a property what I'm going to do is then hide that first group and display a second group which will allow them to add in all of the full details for each property listing so things like all of the additional images the description the amenities and the list just goes on and by breaking this down into two different sections it just helps enhance the end user experience because if someone had to add all of that information at once they would kind of be overwhelmed with how much they need to add for their property listing whereas by breaking it down into more manageable steps it's just going to create a nicer end user experience for them so as I mentioned the first thing I'd like to do is add a group element onto my page so under my containers menu I'm just going to grab a group I'll add this onto my page here and the first thing I'll do with this group is just update the name of this I'm going to call this group step one because this is going to be step one in the process of listing a property and now going to jump over to my appearance tab quickly because I'd like to detach the style of this group just because I want to add a solid border around the group itself and then I'd also like to update the roundness of this group's borders to be five so now when I click away I can easily see where this group sits on my page I'll then select on my group again and head over to my layout tab and the first thing I'll need to do here is give my group a container layer because we'll need to determine in which order elements are going to be placed inside of this container and for the container layout this is going to be a column because I'll be stacking elements from top to bottom now we can make this group fully responsive so I'm going to unselect that there should be a fixed width I'm going to like always set the minimum width at zero while leaving the maximum width is infinite so now this group's gonna to take out as little or as much space as it can on my page I will come back and update the height and the margin settings in a moment but before we do that we need to focus on adding all of the elements we want to display inside of this group and the very first element I want to add is going to be a large heading so if I scroll on up to my visual elements I'm going to grab a text element and add that inside of my group and for this text element I'm going to have this display the words let's add your property now for this font because this is going to be our main heading I'm going to scroll on down and choose to detach the default style I'm going to update the font size to be 30 and I'm also going to choose to bold this I'll then need to make this element fully responsive so if I jump to my layout tab I will unselect that this should be a fixed width I'm going to set the minimum with a zero leaving the maximum width is infinite so now of course this is going to take up as little or as much space as it can inside of my group for the height I'll also set this to be zero and that's going to collapse nicely around all of the text inside of it and then finally for the margins around this text element I'm going to add in 30 pixels of margin at the top 20 on the left and 20 on the right here so that way this just ensures that this text element doesn't touch the borders of my actual group now below this text element I'm going to add yet another and following that is going to be a series of input fields which will allow the user to start adding the information for the property they want on a list and so instead of having to rebuild a heading from scratch I'm just going to make a copy of my existing heading here I'll head over to my appearance Tab and I'm just going to update this text to display the words listing type so below this is going to be an input field where a user can determine what type of listing this is so are they looking to sell a property or are they looking to rent a property now for this heading I don't need it to be this large so what I'm going to do is just update the font size here to be 14 but I am happy to keep this bold and I'd also just like to remove some of that top margin there so I'm going to jump to my layout tab and just update the top margin here to be 20. and because we made a copy of our existing heading element we don't need to update any of the responsive settings those were all duplicated across when we copied our elements now below our second heading here I'd like to add an input field which as I mentioned will allow a user to determine what type of property listing this is going to be and so if I scroll on down to my input forms what I'm going to do is actually use a drop down input field and look I'm sure you're probably familiar with drop downs even if you haven't used them in bubble before drop downs are everywhere across websites and mobile apps and as the name would suggest when a user clicks on this it's going to drop down with a series of options that they can choose from and so the first thing I'm going to do is just update the name of this input field I'm going to call this drop down listing type so that way when we build out our workflow later on we know exactly which input field to reference when we're storing the listing type for a new property now when you're using drop down menus in bubble you have the ability to add in a series of manual choices or you can reference a list of dynamic choices and in our case today we are going to use the list of dynamic choices because if you remember when we first set up our database we created a series of option sets and one of those was known as the listing type so if we just quickly open up our data tab here and head to our options sets menu you'll see straight away we have this listing type option set and within that we have two options there's the option for this property to be for sale or this option for it to be a rental and So within our drop down menu I'd just like to reference these two options here and this is where you'll start to see the power of options that's come to life because I've already taken the time to create these users can only select from these two options they can't add in a third option or even add a typo into something they type it just truly gives me as the admin of my application full control over the options that they can select so if we jump back to our design tab under our choices style here we're going to select to display a list of dynamic choices then from here we'll just need to Define which type of choices we'd like the users to select from and in this case it's going to be our listing type which is our option set for the choices source so this is going to determine of our option set which options are going to be displayed this is going to be super straightforward I want it to be all of the listing types and in that case there's only two there's our sale and there's our rental then for the caption this is the text that's actually displayed within our drop down menu this is just going to be the display text of each option so the display text is the actual name or the title that's referenced in that option set list and look that's all we'll need to create for now what we will need to do though is just jump over to our layout tab because what I'd like to do is make this element fully responsive so at this point in time this drop down menu is fixed at a value of 250 pixels now while I'm quite happy with the width of this element I actually don't want this to be fixed what I'd like to do is instead unselect that this should be a fixed width and I'm going to still set the maximum width to be 250 pixels but I'm going to set the minimum width to be zero which just means that if the screen was to collapse in size or Shrink I should say this element will be fully responsive and continue to shrink with it but that being said with the maximum width of 200 it will be no larger than the current size you see here when it comes to the height I am happy to keep this at a fixed value of 48 pixels because I think that's the perfect height for this drop down menu and look we don't need this to expand downwards it just needs to take up this much space now finally I'd also like to add in some margin around this element I'm going to add in 5 pixels of margin at the top 20 on the left and 20 on the right there now below this what I'd like to do is add in yet another input field and that input field is going to determine the address for this property listing but before I add in that input field I'd just like to copy across my existing heading here I'll jump to my appearance Tab and this is just going to display the words street address so that way the user knows that below this is where they're going to add in the address for the property now when it comes to the input field we're going to use we'll head to our input forms and I'm actually going to use a search box here because similar to our home page I'd actually like to update the choices style to reference a list of geographical places which means that this search box is now going going to connect with Google Maps so that way users can search and select from Real World addresses while I'm here I'd also like to update the name of this I'm going to call this search box address and then finally we'll need to make this element fully responsive so if we jump to our layout tab I'm going to unselect that this should be a fixed width I will set the minimum width to zero but I'll leave the maximum width here as 500 pixels now 500 is purely just a personal preference there's nothing scientific about it I just think that 500 pixels is enough to display a full address if you wanted to make this longer or shorter though feel free to do that for the height similar to our drop down menu I'm going to leave this fixed at 48 pixels so we don't need to change anything there but I'd also like to add in the same margins we did before so five pixels of margin at the top 20 on the left and 20 on the right and then finally within our first group here I'd like to add in one additional input field and that's just going to allow a user to select what type of property this is so is the 10 townhouse is an apartment and of course that's going to link to an existing option set list we've already created but before we do that I'm just going to make a copy of our heading element and they're going to jump to our appearance Tab and I'm going to update the text here to display the words property type and they're going to need to add in yet another drop down menu but in order to streamline that process I'm just going to select on our very first drop down menu and make a copy of that now for the copied version I'm just going to start by updating the name of this I'm going to call this drop down property type and what we'll also need to do is just update the option set list that we're referencing so if I was to just jump over to my data tab under our option sets menu you may remember that we had this list known as the property type and within this list we had three options property could be a house an apartment or a townhouse Now by all means if you wanted to add any additional property types you could do that but I'm just going to keep my list nice and simple at three options so what we're going to then do is jump into our design design Tab and just update the choices here to reference our property type options at list I'm then going to update all of the choices Source because I'd like to reference all of those options in that list and the caption will once again just be the current options display now because we duplicated this drop down menu across we don't need to update any additional layout settings those were all copied across when we made a copy of the element now this is all of the input Fields I'd like to add into my very first group so below our drop down menu I'm just going to add a button element and that'll be the very last thing we add into this group here so if I scroll on up to our visual elements I'm going to grab a button I'll add this into the group and then if I just head to my layout tab I can move that to the next position so that way it is the last element inside of this group now when it comes to this button I'm just going to update the name of this I'm going to call this button next step one because this is the button within our step one group I'll also jump over to our appearance Tab and update the text within this to display the word next and then finally I'd just like to update the size and the margins for this button so if we open up our layout tab once again we can update the width of this button to be 120 pixels and look I am happy to keep this as a fixed width and the reason for that is because we'll never need to worry about our page being so narrow that it touches the borders of our button so I'm quite happy to leave this as a fixed value what I would like to do though is just update the minimum height to be 40 so that way the button is slightly more narrow and then finally We'll add in 20 pixels of margin around every single border for this button here and now because that is the last element I'd like to add into our first group I'm going to select on the group itself so this is our group step one and they're going to update the minimum height to be zero and because we have this default option selected to fit the height of the element to the content inside of it it's just going to ensure that it will collapse nicely around all of our elements then from here I'd just like to add in some margin around this group I'm going to add in 30 pixels of margin at the top 30 on the bottom 20 on the left and also 20 on the right and that concludes everything we'll need to add into our very first step of the process of listing a property now what I'd like to do is build out a second group which is going to contain a lot more input Fields this is where a user is going to store most of the information about a property and in order to streamline that process what we're going to do is actually make a copy of our existing group but before we do that I just like to expand the height of my page down because right now we're almost running out of space so if I just click on my overall page and open up the layout tab I'm just going to set the minimum height to be 2000 for the tone being now you can always come back and update this later on but this is just going to give me plenty of space to work with here then from here I'm going to select back onto my group step one I'm going to make a copy of this and I'm going to paste this onto my page and that's just going to save me a whole lot of time having to update the layout and the design settings for our second group but the first thing I will need to do is just update the name of this group I'm going to call this group step two because this is step two in the process of listing a property now from here we can start to update all of the elements that sit inside of this second group and the very first thing I'm going to change is the main heading here so if I select on this and open up my appearance tab I'm just going to update this text to display the words tell us more because this is where we're going to prompt someone to add in all of the additional details for this property then below this I'm going to add in a series of input fields and before I do that what I'm going to do is actually select on our drop down menu as well as our search box and finally the second drop down menu and I'm just going to choose to delete these but you'll notice that I did keep one of the headings here and the reason for that is because I'd still like to reuse this heading only in this instance I'd like this to display the words bedroom count and then as you've probably guessed below this I'm going to add in an input field which allows someone to add how many bedrooms this property will have so if I scroll down to my input forms I'm going to add a standard input field below this text heading and the very first thing I will do is just update the title of this I'm going to call this input bedroom count now because the bedroom count is stored as a number in our database so if I quickly just jump over to our data Tab and open up our data types under our property data type you'll see we've got things like a bathroom count and a bedroom count and these are listed as numbers whereas over in our design tab by default an input field is listed as text so I'm going to need to format this as a number which if I open up this drop down menu I'm going to select from the integer and so an integer is just another way of saying that we're storing a number in this field so users will only be allowed to type in numbers in this field they won't be able to type text which is the exact experience we want and then going to jump over to my layout tab because I'd like to make this input field fully responsive and when it comes to that process I'm going to unselect that this should be a fixed width I'm going to set the minimum width to be zero but I'm going to leave the maximum width as 200 pixels and the reason for that is because because I think that 200 pixels is more than enough to display a couple of numbers so I don't want this to be very long when it comes to the height though I'm quite happy to leave that fixed at 48 pixels but for the margins I'm just going to add in 5 pixels of margin at the top 20 on the left and then 20 on the right now below this I'd actually like to make a copy of both these elements because I'd now like the user to add in the bathroom count so I'm going to select on both my heading and my input field I'll make a copy of that I'll select in my group and paste those in I can then just move these above my button element there and I'll select on my heading head to my appearance Tab and just update this to display the words bathroom count I can then select on my input field and I'm going to update the title of this I'm going to call this input bathroom count and once again because we're going to be storing a number in this we're going to need to have the content format as an integer but thankfully all of that copied across when we made a group duplicate of the input field itself so we don't need to make any additional changes right now below this though I'd like to make another copy of this input field because I'd like someone to add in the year that this property was built so I'm going to once again select on my input field as well as my heading I'm going to move these above my button I'll select on the text element and I'll have this display the words yeah built I'll then select on my input field I'll update the name of this to be called input year built and I'm actually going to keep this as an integer because in our database once again under our property data type the year built is set as a number and to be honest most of the input Fields we're going to add today are going to be set as numbers so I can see there's things like the square footage the sell price as well as things like the monthly rental price and all of these are listed as numbers so that's why we need to set our input Fields as integers if we just jump back into our design tab I'm going to make yet another copy of our heading and our input field so I'm going to select on both of those elements make a copy of them and move them above my button here and the very first thing I'll change with these new elements is just the heading I'm going to have this display the words property size and then in Brackets just square feet so that way a user knows that this is where they need to add the square footage of a property then I will select on the input field below this and I'll update the title to be called input size square feet and then below this input field I'd like to add in one that's just going to determine the sell price for this property and now this is where things are going to change up slightly if we were to just take a moment and scroll back up to our very first group here you may remember that in the first drop down field a user was selecting the listing type for this property so it could either be a property for sale or a property for rent now if I was to add an input field within my second group which determines the sell price of the property that might not be relevant to someone who just wants to rent a property and so what I'm going to need to do is create a way to make sure I only display the relevant price input field based on the listing type for this property and so essentially if a user is wanting to sell a property I'm going to add an input field which allows them to add the total price they want to sell it for but if a user is wanting to just rent a property I'm going to have a separate field which is just going to allow them to add the monthly rental price for that property and I'll only want to display one of those at any given point in time and so because I'd like to add a heading and an input field for each one of those two options and of course one of those options will be hidden I'm going to actually add those into a group so that way I can just choose to hide all of the elements in the group with one condition as opposed to having to replicate the same condition across two different elements and so what I'm going to do is head to my containers menu here and I'm going to add a group element below my input field and I'm going to update the name of this group to be called group sell price because within this group we're going to add an input field which allows someone to determine what price they would like to sell the property for now when we're working with this group the first thing I'm going to do is detach the style of this just so I can give this a flat background color and if I set this to be something like a light shade of red it'll just allow me to see where it actually sits in my overall white group now by all means when you go to preview or publish your app you can just remove this here but for the time being this is going to be a great visual cue I'll then need to make this element fully responsive so if I jump to my layout tab here the first thing I'll have to do is set a container layout for this group now similar to our existing input Fields I'm going to have a heading at the top and then below that I'm going to have an input field which means I'm going to be stacking elements vertically so that means the column option is going to be the most appropriate for this group I'm then going to head on down to our width settings and going to unselect that this element should be a fixed width I'm going to set the minimum width to be zero and then I'll leave the maximum width as infinite it doesn't really matter because again when you go to preview your app you'll update the background color of this group to be white once again so you're actually not going to be able to see this group on your page it'll just blend in with the background now I will come back and update the height and the margins in a moment but before I do that I'd like to just add my two elements inside of this group so I'm going to select on my heading here as well as my input field I'll make a copy of those I'll then click into my red group and paste in a version of them then when it comes to these two elements I'm going to select on my text element first I'll jump to my appearance Tab and I'm just going to update the text within this to display the words sell price I'm then going to jump over to my layout tab because what I'd like to do is remove all of the margin around this text element and the reason for that is because I'm going to add the same margin onto my overall group so under my layout tab here I'm just going to set all of my margins back to zero and then we'll need to make change just to the input field that sits below this so the first thing I'll do is update the title of this input field so I'm going to call this input sell price now if we jump over into our appearance tab here I'd actually like to update the content format of this input field so at the moment this is storing just an integer which is a number whereas although I would like to actually still store this as a number I'd just like to format this as a currency because that will allow me to add a currency prefix into this and so that's just going to look like a dollar value but in our database it will still store as a number I'm now going to jump over to our layout tab once again and I'm just going to update the maximum width for this input field to be 400 pixels just because hey if we're selling properties for a couple mil we're going to need some space to add in all those zeros and so I just think 400 pixels is going to be the perfect size there I'll still leave the height fixed at 48 pixels but I'd also just like to remove the margins on this side of this input field but I do just want to note that I'm going to keep the top margin there just to space this input field away from our heading so for the left margin I'll set that to zero and I'll do the exact same thing for my right margin and that's all of the elements I'd like to add into this group so I'm going to select on the overall group head to my layout tab and just update the minimum height here to be zero and that's now going to collapse it around all of the elements inside of it now I'd like to add in the same margins around this group that we had on our text element so I'm going to add in 20 pixels of margin at the top 20 on the left and 20 on the right and now you'll see it will fit nicely with all of our existing input Fields but as I mentioned when I first talked about adding this group onto my page I don't want this group to always be visible I only want this group to be shown when someone selects that the listing type for this property is a property that's going to be for sale not for rent and so what we're going to do on our red group here is just head to our layout tab and we're actually actually going to unselect that this group should be visible when the page is loaded I'm also going to select to collapse this group when it's hidden so that way when it's not shown it doesn't take up any empty space within our second white group here but what we'll need to do now is create a condition that just recognizes when this group should be displayed and that condition should fire whenever someone selects the option from our drop down menu that they want to sell a property so if I just select on our conditional tab for our red group I'm going to create a condition and I'm just going to recognize when the drop down menu with the listing type so if I just type in the word drop I can reference the drop down listing type when its value is in fact a property that's going to be for sale what I'd like to do is Select that this element is visible and tick that that should be true and so that is how we can Now display this input field in the relevant scenario however of course what happens if someone wants to list to property as a rental not a property for sale what we're going to do is create another duplicate version of this red group and we're going to have a price which determines the monthly rental cost for that property and will only display that second red group when someone selects that they want the property to be a rental not a property for sale so in order to streamline that process I'm just going to make a copy of my red group here I'll move this above my button element and the first thing I'll do is just head over to the title of this group and I'm going to call this group rental price I'll then select on the heading inside of this group and if I jump to my appearance tab I'm just going to update the text to display the words monthly rental price then from here I'll select on my input field below this and I'm just going to update the name of this to be called rental price and once again this is going to be a currency so we won't need to change the formatting here the only only thing we will need to do is select on our red group once again and just update the condition that's going to determine when this group should be visible and in this case I'd only like this group to be shown when the drop down listing type when its value is in fact a rental and so that is how we can now create an experience where only one of these groups is displayed based on the relevant option that was selected now from here we can continue adding in all of the additional input Fields I'd like to add into our second group here and the next thing I'd like to do is enable someone to upload a featured image for this property so the featured image is going to be the thumbnail image that's displayed in our repeating group of properties on things like our home page or our search results page and so in order to add this in the first thing I'm going to do is just copy a heading element I'll drag this above my button and I'm just going to jump to my appearance Tab and I'll have this display the words featured image now for this image I'm going to scroll on down and I'm going to add in a picture uploader element which I can just see my head is in the way so I'm going to grab a picture uploader here and I'll add that below my text heading I'll then just pop my head back over there now before I make any changes to this picture uploader I just like to update the title of this so I'm going to call this picture uploader featured image then once I've changed that I'd like to also update the dimensions of this element so if we head to our layout tab I'm going to unselect that this element should be a fixed width I will set the minimum width to zero but I don't want to leave the maximum width is infinite because right now it's quite long it takes up the full width of our page so I'm going to set the maximum width to be 400 pixels so this is going to be the same width that we just used for the input Fields above it now for the height I'm actually going to update this to be 200 pixels and look I am going to keep that as a fixed width because I'm quite happy with the image that's displayed in here to always be this height it just means that when the page collapses in width the image will just continually expand and crop to fill in the required space that it has and perhaps when I run a preview of my application you'll see that in action but for the time being while I'm in my layout tab I'd also like to update the top margins here to be five the left margin to be 20 and the right margin to also be 20. now when it comes to a property listing today users will be able to upload a featured image for that property but what I'd also like to do is enable them to upload a series of additional images and so that way when someone clicks on a property to view the full details of it I'm going to display all of those additional images and so when it comes to uploading multiple images in bubble we're going to run into a small dilemma here and that dilemma is around our picture uploader element so with the standard picture uploader element you're only able to upload one image at a time whereas as I just mentioned we need to be able to upload multiple images but thankfully the solution to this is that we're going to install a free plugin built by Bubble which will enable us to do this so if we jump over to our plugins tab here we're going to add a new plugin and we're going to type in the word multi and the plugin I'd like to install is this multi-file uploader which is a free plugin as I mentioned built by Bubble once we've installed that we can close our plugin Library jump back into our design Tab and under our input forms what you'll now see is the ability to add in a multi-file uploader and so I'm just going to add one of these below our picture uploader but on top of this file uploader I should actually add in another heading so I'm just going to make a copy of my existing heading here and I'll move this above my multi-file uploader and I'll just update this heading to display the words additional images then from here I'm going to select on my multi-file uploader and the first thing I'll do is just update the title of this I'm going to call this multi-file uploader additional images now while we're working on this element I'm also going to scroll on down and just update the border around this to be a solid color so that way when I click away I can actually just see where this sits on my page for the time being I'll then select back on my multi-file uploader jump over to my layout tab because I'd now like to update the dimensions of this now when it comes to the size of this element I'm going to unselect that this should be a fixed width similar to our existing picture uploader element I'm going to set the minimum width to be zero and I'm going to also set the maximum width to be 400 pixels now when it comes to the height I am going to do something slightly different and before I do that I should actually just explain how this multi-file uploader will work so when it comes to a standard picture uploader when someone selects an image that they want to upload a preview of that image will be displayed inside of this element whereas with a multi-file uploader let's say if you were to upload four Images at once it's actually not going to display a preview of those images instead it's going to display the title of the files for those images and so if a user uploads something like 10 photos it's going to display 10 different file names and so for the height on this element here I'd like this to continually expand down and display as many file names as it needs to so I'm going to unselect that there should be a fixed width now I'm going to set the minimum height here to be 150 pixels and there's no particular reason why I selected 150 it's mainly just because I think this is enough space to display a few different file names but if I leave the maximum height as infinite if someone was to upload a long series of files this element would continually expand down and display all of the file names and so that's why I'm going to leave this value as infinite I'm also then just going to add a top margin here of five a left margin of 20 and a right margin of 20. now as I just mentioned this multi-file uploader will only display the file name of an image that's uploaded whereas what I'd still like to do is create an experience where we can display a preview of all of those images and so we're actually going to have to manually build that out ourselves and we're going to do that by adding a repeating group on our page which is going to display a preview of all of the images uploaded into this element now this repeating Group by default should not be displayed on our page it should be hidden the only time I'd like it to be shown is when there is a value in this file uploader so when someone has uploaded at least one image and so similar to our previous input fields that were hidden on our page I'm going to add a group element onto my page and then within that group I'll add a repeating Group which will display a list of all of those images so under our containers menu I'm going to grab a group element and add this below my multi-file uploader now for this group I'm going to update the name of this to be called group image preview and I can see I just have a small typo there I'm going to fix now similar to before when it comes to this group I'm also going to update the color of this so if I jump to my appearance Tab and detach the style I'm going to add a flat background color and I'll set that to be a light shade of red then from here I can jump over to my layout tab and make this group fully responsive now when it comes to the container layout for this group I'm actually going to only ever have one element inside this group and that will be our repeating group so it doesn't really matter if you select from the row or the column option because we're not really stacking elements but I'm just a column guy myself so I'm going to select the column option I'll then unselect that this should be a fixed width I'll set the minimum width to be zero we'll leave the maximum width is infinite and now we will come back and update the height of this group in a moment but while I'm here I would in fact like to add the margins around this group just so that way it doesn't touch the borders of my page or the element that sits above it so I'm going to add a top margin of 10px a left margin of 20 and a right margin of 20. and you'll see why I've done this here in a moment long story short it's just going to help us when it comes to the process of making our repeating group fully responsive because at this point in time we already know that we have 20 pixels of margin on each side of this group but I'll explain that in more detail in a moment from here as I mentioned we're going to add a repeating group into our red group and when it comes to this repeating group the first thing we'll need to do is jump over to our appearance Tab and we're going to need to give this repeating group a data source so that way it knows what list of items to display now for the type of content we're going to scroll all the way down and we're just going to select that we want to display a list of images and for the data source so this is where we'll determine what list of images we want to show I'd like it to equal the value of all of the images uploaded into a multi-file uploader so for the data source I'm going to type in the word multi and I'm going to reference the multi-file uploader its value then when it comes to to the number of rows and columns here I'm going to unselect both of these options because at this point in time it was only displaying four entries which is all good and well if you only ever wanted to display four Images what happens if someone uploads five images six images or even 10 images I want to make sure I can display them all now while we're working in this group I'm also just going to update the minimum height of each row and the minimum width of each column to be 300 by 300. now there's nothing scientific about why I've selected these values I just think that this is going to be enough space to start working within when I add my image into our repeating group cell but as I've mentioned in the past when it comes to finding the perfect settings for a repeating group it's definitely just a matter of trial and error so you'll see firsthand today how it takes me a little bit of time to figure out the perfect settings and of course I'll explain to you my thought process along the way but after updating these settings here I'm going to jump over to my layout tab and just make this repeating group fully responsive inside of our red group and so the first thing I'll do is just head to my container layer I'm going to set this to be a column now once again it doesn't really matter if you select between a column or a row inside of this repeating group we're only going to display one image so it's not like we're stacking elements on top of each other I'm then going to unselect that this should be a fixed width I'll set the minimum width to be zero leaving the maximum width is infinite and we'll come back and update the height and the margins in a moment for now though what I'd like to do is add my image element into this repeating group so I'm going to scroll on up to my visual elements I'll select to grab an image I'll place that in my repeating group and now what I'll need to do is give this a dynamic image data source so that way this knows which image to display and of course it's going to be the image stored within my repeating group cell so I'm going to choose to insert Dynamic data and I'm going to reference the current cells image it's truly as simple as that one additional thing I would like to do when I'm working with Dynamic images is just to select this more option so I can process this image with injects and just take this option to resize and fit the dimensions by cropping it which just means that the image will span out and take up the full space that I give it here and they're going to choose to close that now while I'm working on this image I'm just going to detach the style of this and I'm going to give it a solid border just so that way when I click away I can see where that image sits inside of my repeating group and then going to click on my image head over to my layout tab and I'm going to want to make this image fully responsive so in order to do that I'm going to unselect that this should be a fixed width I will set the minimum width to be zero leaving the maximum width is infinite so now this image is going to take up as little or as much space as it can within my repeating group cell but what I'd also like to do is Tick this option to keep this image's aspect ratio fixed and if I set this at a two to one ratio you'll now see that it's going to be a perfect rectangle at any given point in time so regardless of how large or small this image becomes it will always take this shape then finally in our layout tab I'm just going to add in 10 pixels of margin around every single border of this image so that way it doesn't touch the edge of my repeating group cell and that is all of the elements I'll need to add into my repeating group so I'm going to click on the repeating group itself head to my layout tab and I'm now going to update the minimum height to be zero which means that it's now going to collapse around all of the elements inside of it I'll then jump over into my appearance Tab and I can now set the minimum height of each row to be zero and once again that was just truly ensure that it collapses around the height of the image but when it comes to the minimum width here this is where things can get a little bit complex and so how can we find out the perfect width for this repeating group cell that allows it to be fully responsive across both the desktop and a mobile device if I was to quickly just jump over into my responsive tab here and just show you what this looks like on a desktop this repeating group's just going to continually expand out and display more images based on how much size we have to show however when I start reducing the width of this as you'll see it's fully responsive but at 320 pixels you'll see that my image is getting cut off here and the reason for that is because we're currently viewing our page at 320 pixels which again is the smallest possible device someone could ever use your application on and at this point in time the minimum width of our repeating group column is 300 pixels which although it is less than 320 pixels you need to remember that on our repeating Group which sits inside of our red group here we have 20 pixels of margin on each side so we've got 300 pixels plus 20 pixels plus 20 pixels so that's 340 pixels so it's already too big but the other thing we need to factor in is that our red group actually sits inside another group which also has 20 pixels of margin on each side so from 340 we need to add another 20 plus another 20. so that's 380 pixels in total and so in order to find the perfect dimensions for our repeating group column width what we could actually do is work backwards so let's say we've got 320 pixels in total we're going to start by taking off the 20 pixels of margin on each side of our white group here so 320 take 20 take 20 is 280. then inside that our red group has another 20 pixels of margin on each side so 280 minus 20 minus 20 is going to be 240 and so the perfect size for our repeating group width is in fact going to be 240 pixels and as you'll now see that is going to make this fully responsive on the smallest possible mobile device whereas as we continue to expand our page out these images will just continually add additional slots within our repeating group but this is truly what I mean about repeating groups being experimental I can't recall a time where I ever got the dimensions perfect the first time around sometimes it is just a matter of trying to do some basic math in order to find the perfect Dimensions once we've finished configuring our repeating group though I'm just going to jump back over into my UI Builder I will select on our overall red group and I can now jump over to my layout tab and update its minimum height to be zero and that will just ensure that it collapses around the repeating group inside of it but we're not done just yet if you remember from before I'd mentioned that this group should only be displayed Whenever there actually is an image to show a preview of within our multi-file uploader and so it's at this point that we're going to create that feature so if I was to head to my layout tab for our group image preview this is our red group what I'm going to do is unselect that this should be visible on page load and I'm also going to select to collapse this element when it's hidden so that way it doesn't take up any empty space in our white group I'm then going to jump over to our conditional Tab and I'm going to define a new condition here and within this condition I'm just going to recognize when the multi-file uploader when it's value when the count of how many files have been added into this is greater than zero meaning someone has uploaded at least one image what I'd like to do is Select that this element should be visible and tick that that should be true and that is all we'll need to add for this condition while we're just building out our application I'm just going to display this red group just so I can get an idea of all of the elements that are going to sit within my page here at this point though we're almost on the home stretch there's just a few additional input Fields I'd like to add into our second group and so what I'm going to do is grab this heading here make a copy of that move it above my button element and I'm going to open up my appearance Tab and have this text display the words property description so this is where someone's going to be able to add the full description for this property listing now this description is going to be quite lengthy it's going to include all the information about the property potentially who the real estate agent is and a whole lot more so when it comes to the input field we're going to use we're actually not going to use a standard input field instead we're going to select the option below this which is known as a multi-line input field now a multi-line input field as the name would suggest allows a user to add in multiple lines of text in a standard input field if someone was to write in a long string of text it would continually just expand outwards whereas with a multi-line input field if there's more than one line of text it will continually expand downwards so this is where you can start to display a long paragraph of text which is perfect for things like property descriptions now when it comes to this multi-line input I'm just going to update the name of this first of all to be called multi-line input product description just so that way when I build up my workflow in a moment I know which element to reference I'll then jump over to my layout tab because I'd like to make this element fully responsive I'm going to unselect that there should be a fixed width I'll set the minimum width here to be zero and then when it comes to the maximum width I'm not going to leave this as infinite instead I'm going to set this to be 800 pixels and the reason for that is because I just think 800 pixels is enough to add everything I need by all means if you want this to be smaller or larger you can set this maximum width to be whatever you want for the height I'm also going to update the minimum height to be 48 pixels and the reason why I've selected 48 pixels is because that is the same height as any other input field on our page but if I was to leave the maximum height as infinite that will just ensure that this multi-line input field will continually just expand down as it's needed so that way we can display a long paragraph of text while I'm here I'm also just going to add in 5 pixels of margin at the top 20 on the left and 20 on the right and that will just ensure that this element sits in line with all of our existing elements on the page below this I'm going to add in yet another input field I'm sure you're probably sick of me saying that by now but I promise we're almost there so in order to do that I'm going to first of all copy this text heading which drag this above my button and I'll update this text element to display the word property features so I'm just going to get rid of that second word there and I'll update this now if you remember in our database we had created an option set which displayed a list of property features so if I was to quickly just jump over into my data tab open up my option sets you'll see the option here known as property features and inside this I just gave four small examples a property could have air conditioner a furnace a garage or a pool and if I was to open up my property data type under my data types here what you'll see is that a property can have multiple features so it's not just limited to having one feature and so when it comes to the input field we're going to need to use we're going to have to install yet another plugin and the reason for that is because if I was to add something like a drop down menu in and reference that options at least from a standard drop down menu users are only able to select one option whereas in this case I want my users to be able to select as many options that are relevant to the house as possible and so if we jump over to our plugins tab we're going to open up our plugin Library once again and similar to before we're actually going to type in the word multi now the very first plugin Here is known as the multi-select drop down and as the name would suggest this is a drop down field where users can select multiple items so they're not just limited to one so I'm going to choose to install this here I'll close my plugin Library I'll jump back into my design Tab and now under our input forms you'll see the option to add a multi drop down onto your page we're going to do that here now the first thing I'm going to do is like always update the name of this I'm going to call this multi-dropdown property features then similar to our previous drop down menus on our page I'm going to update the choices style to be a list of dynamic choices so that way users can only select from my predetermined list of option sets for the type of choices I'm going to reference the property features option set that I just shown you for the choices I want to show I'm going to select all of the property features we've created and then for the caption I'm just going to reference the current option it's display text which is the actual name of the feature and that's all we'll need to do for now you'll see this element in action in a moment when I run a preview of my page but what I'd like to do is just jump over into my layout tab so we can make this element fully responsive and so when it comes to the width I'm going to unselect that this should be a fixed width I will set the minimum width to be zero and with the maximum width I'm going to set this to be 400 pixels so that way it sits in line with all of my additional input Fields above it for the minimum height I could also set this to be 48 pixels because if you remember that is the same amount of pixels as the height for all of my previous input Fields now I am going to leave the maximum height as infinite so when someone selects an option from our multi drop down menu here it almost adds like a little tag inside of it and these tags can be a little bit bigger than text so if it ever needs to display multiple tags I'd like this menu to continually just expand down so that way it fits all of them inside of it finally I'm now going to add in 5 pixels of margin at the top 20 on the left and 20 on the right and after this we have just one last input field to add I promise this is the very last one and that input field is going to be a checkbox and so I don't need to copy across a heading because a checkbox kinda looks like a heading I'll show you in a second but under our input forms you'll see an option to add a check box here now for this input I'm going to start by updating the name of this to be called checkbox is available so this is just going to determine if a property is available on the market or not and so for the label of this checkbox I'm going to have this display property is available on the market and I can see I just have a small typo there and by default I'm going to actually set this to be checked because when a listing is created I'd like it to be checked that it is in fact available then later on if someone sells a property they can come back to this page and uncheck this from which it will then remove that listing from being displayed anywhere in our marketplace now when it comes to the design of this element I'm just going to detach the default style and I'm just going to choose to bold this text so that way it stands out as its own heading I'll then jump to my layout tab and I'm going to make this element fully responsive across my page so like always I will unselect that this should be a fixed width I will set the minimum width to be zero now I am going to leave the maximum width is infinite because this looks like just a standard text element and then for the minimum height I'm also going to set that as zero because we have this default option selected to fit the height of this element to the content within it and then finally I'm just going to add in 20 pixels of margin at the top 20 on the left and 20 money on the right and as I promised that is in fact the last input field we'll need to add onto our page as you can see this second group took a very long time to piece together just because there's so many different types of input fields we had to leverage but all we need to do now is build out the workflow that's going to run in order to publish a listing and now that is exactly what I would be saying if that was all that was left you didn't think it was going to be that easy did you one thing I need to point out is that at this point in time if we were to scroll on up to the top of our page at this point in time both of our groups here are currently being displayed by default whereas as I mentioned at the start of this module I only want to display one of these groups at a time so how could I do that the way in which we can achieve that feature is by using what's known as a custom state in bubble now if you're new to Bubble I don't expect you to know anything about custom States it's my job today to teach you and the best way to describe a custom state is that they're like a data field that you can store inside your page without having to actually reference your database now why would you ever want to do that in bubble you might need to store some information without actually referencing something in your database or creating an entry in your database as well and so a custom state allows you to do that as I mentioned it's just a temporary value that sits inside your page and as soon as your page is refreshed or reloaded that value completely disappears and it resets itself and the reason why I mentioned custom States is because today what I'd like to do is create a custom State on my page which just determines which one of these two groups should be displayed at any point in time so as soon as this page is loaded I'd like to display my first group and I want my second group to be hidden then when someone clicks on our next button I'd like group one to be hidden and group 2 to be shown and so what I'm going to do is actually double click on my overall page so this is my listing now if you were to select this little information icon here it's going to open up a backdoor menu I'm just going to move this across so you can see it clearer but inside this menu you'll see the option to create what's known as a custom State now when I click this it's going to look exactly like the process of where we created a data field in our database and that's because we're essentially creating a data field on our page and today I want to call this state display step one so Step One is our very first group and if I set the value of this state to be yes no so I either do want to display step one or I don't want to display it I can choose to create this now I can also give this a default value exactly like how I can with a data field and so if I set the default value to be yes Bubble knows as soon as my page is loaded it should be displaying step one and they're going to create another custom State and it's going to be much the same I'm going to call this display step two now for this stay type it's once again going to be a yes or no value because I either do want to display Step 2 or I don't want to I'm going to choose to create this and for the default value you of this state I'm actually going to set this to be no because by default as soon as the page is loaded I won't want to display this second group and so now this is how you can store a data value in your page without it referencing your actual database but what we'll need to do is now create a way to have our groups reflect the value stored in our page so if I was to just close this element inspector click on my very first group so this is my group step one what I'm going to do is unselect that this group should be visible on page load and I'm going to select this option to collapse this group when it's hidden so that way when it's shown it doesn't take up any empty space on my page and then from here what we can do is create a new condition and I'm going to recognize when my overall listing page so if I scroll right down to the bottom you'll be able to select on your listing page and right at the bottom of this menu you'll be able to reference your two custom States so when the display Step 1 custom state is in fact yes which if you remember it is by default what I'm going to do is Select that this group should be visible and tick that that should be true and that now means that this group is going to be shown as soon as the page is loaded and so what we're going to do is select on our second group here and I'm going to jump to my layout tab once again and I'm going to unselect that this element should be visible on page load I'm going to also collapse this element when it's hidden I'll then jump to my conditional Tab and I'll Define a condition and I'm just going to recognize when our listing page so if I scroll all the way to the bottom I'll select when the listing when it's display step two custom state is in fact yes this group should be visible and I will tick that that is true and now if I wanted to display both my groups again I could scroll on up to my elements tree and just visualize these but another thing I need to cover is how we can actually turn on and off our custom States based on which group we want to show so by default the display Step 1 state is set to yes meaning this group will be visible but when someone selects this next button what I'd like to do is turn off our display Step 1 custom State and then turn on our display step to custom State and so in order to do that I'm going to click on my next button here I'm going to jump to my appearance Tab and I'm going to choose to start a workflow whenever this button is clicked and within this workflow I'm just going to type in the word State and you'll see an option to set the state of an element now the element I'm going to reference is our listing page and you'll now see the ability to select from one of our two custom States and so when this next button is clicked what I'd like to do is update the display Step 1 custom state I'm now going to set its value to be no meaning we no longer want to display our first group and then if I set another custom state I'm going to say that the display Step 2 custom State Should now equal yes which means that our second group would become visible and just like that that's how we can create almost like a custom menu feature where we can jump between the two different sections of this page and when I run a preview of this you'll be able to see that in real time but it's finally at this point that we can build out the workflow that's going to run to actually create a new property listing in our database so if we scroll all the way down to the bottom of our page I'm going to select on the next button in my second group here and I'm actually going to update the text within this to display the word publish I'm also going to update the title of this I'm going to call this button publish so that way when I build out a workflow I can easily tell this apart from the existing workflow when the very first button was clicked so when this is clicked I'm going to run a workflow and inside of this workflow I'm going to need to do a couple of things the first thing I'm going to need to do is actually create a way to store all of the larger data fields in our separate property data type and so if I was to just open up my data tab once again you may remember that we had two property data types there was our original property here so this does displays all of the top level information so these are just small data points like numbers or even just data linked to our option sets whereas we also had this separate data type known as our property satellite so this was our satellite floating off in space that contains all of the larger information that we then want to beam down and connect to our original property and inside of this we were storing the information of things like the full description as well as all of the images so first of all in our workflow I'm going to create this satellite and then I'm going to create a property and I'm going to link this property to that satellite so if I jump to my workflow tab I'm going to first of all head to our data Tab and I'm going to choose to create a new thing now the type of thing I'd like to create is first of all going to be a property satellite I can then choose to add all of our Fields here and I'll just need to link the relevant data field in our database with the input field on our page so for the full details if I type in the word multi I'm going to reference the value within our multi-line input the product description now for some reason I've called this product description what I actually meant to say was property description so if I jump back into my design tab I'm just going to quickly update the title of this I'm going to call this property description look if I can be honest a week ago I recorded another tutorial where I was creating products not properties so forgive me if my brain is completely fried at this point but I'm having a hard time telling between the two so if I've ever mentioned the word product throughout this tutorial and I haven't noticed it what I actually meant to say was property and I'll be sure to try my best to say the word property going forward but let's just jump back into our workflator to here what I want to do is just make sure I can link the full description to our multi-line input its value and now you'll see that that will configure nicely for the images so this is going to be a list of images I'd like to set this list as the value stored within our multi-file uploader so I'm going to reference the multi-file uploader its value and now that's all we'll need to do when it comes comes to the process of creating our satellite data type so the next thing we'll need to do is add an additional step within our workflow we'll head to our data tab once again and choose to create another new thing the type of thing we'd like to create here though is going to be a property and now I'm just going to add in all of the data fields and once again we'll just need to match these with all of the relevant fields on our page so for the address this is going to be the address stored within our search box so if we head all the way down to our search box we can reference its value for the bathroom count I'm just going to type this in but I'm going to reference the input bathroom count its value for the bedroom count we'll do the exact same thing so if you just type in bed we'll reference the input bedroom count its value and look I apologize if I'm going to run through this pretty quickly but it truly is just a matter of finding the relevant input field on your page and selecting from it for the featured image this is going to be my picture uploader featured image its value now for the full details this is where we're going to create create that satellite connection between our very first data type here so for the full details I want to link this to the result of Step One in our workflow which now means it's going to create a connection with our property satellite and later on you'll see how we can actually reference that connection but for the time being I'm just going to power ahead and add in all of the additional data fields for the is available status this is going to be the value of our checkbox is available it's checked for our listing type I'm just going to type in the word drop down and reference our drop down listing type for the monthly rental price if I just type in the word rent I can reference the input rental price its value for the property features now what I need to do here is also once again set a list because if you remember this is where we're using our multi drop down menu so I'm going to choose to set a list and that list will be within our multi drop down the property features for the property type I I know that this is once again in a drop down menu so I'm just going to type in the word drop and I'll reference the drop down property type its value I'm going to keep scrolling down for the total count of saves we actually don't need to do anything for that right now so I'm actually going to delete this for the sell price I'm just going to type in the word sell and reference the input sale price its value for the square footage of this property I'm just going to type with the word size and reference our input size square feet for the views we don't actually need to change this as well so I'm going to delete this and for the year build if I just type in the word year I'm going to reference the input year built now look I know that was a lot to take in but if you've taken the time to add all of the right naming conventions to all of your input Fields it's truly going to streamline the whole process of updating all of the data fields here but thankfully that's all we'll need to do here there is just one last thing I want to to do on this workflow though and that is once a property has been created I'd like to redirect someone through to a separate page in our app where they can view a list of all of their property listings so what I'm going to do is add an additional step in my workflow I'm going to head to a navigation event and select the go to page action and the destination page here will be our manage page because this is where a property owner or a landlord or a real estate agent will be able to manage all of their property listings and to be honest at this point I'm absolutely exhausted there was honestly so much involved in this module but thankfully that is everything we need to create so let's jump over and take a preview of what this whole experience is now going to look like over in a preview of my application the first thing you'll notice on my listing page is that my first group is only being displayed my second group is currently not visible and that's because of course by default our custom state was going to show this first group now what I'm going to do is start by selecting my listing type I'm going to say this is a property for sale for the address I'm just going to type in an address here in San Francisco for the property type I could say that this is a house and now when I select this next button it's not only going to hide our first group but it will Now display our second group and it's from here that I can start to add in all of the information for this property so I'm going to say that this has four bedrooms two bathrooms it was built in let's say 1860 property square footage is 2 200 square feet the sell price let's say I want it to be 1.2 million dollars here and I mean in this economy look that's probably even a steal but one thing I should just point out is that you will notice here that because we're selling a property we only have access to add in our sell price not our monthly rental price and that's because our conditions have triggered perfectly on our red groups if I then upload a featured image here that will display within my picture uploader and they're going to scroll on down and select into my multi-file uploader and upload a series of additional images and what you'll see is that as those files upload a repeating group will now become visible and we can see a long list of all of the additional images we need to preview and so that looks great we can then go to our property description what I'm going to do is just paste in some text here this is just dummy text and then for our property features I'm just going to select that this property has air conditioner it's got a garage and it's got a pool and as I mentioned when we were originally adding in this multi drop down menu all of the options here are displayed as tags and you can choose to remove and then re-add anything you'd like and finally I'm going to list that this property is available on the market I'm going to select to publish this that workflow is going to run and it's going to not only create a new entry in our database but it's now going to redirect us through to our manage page as you can see within the URL here and now at this point in time this page is blank so that's why you can't see see anything on it but if you were to look into your database you would now see that you would have a new entry store there which displays your first property super exciting from here though I'm just going to jump back into my notion checklist because what I'd love to do is just tick off that we've finally finished building out all of the features involved in creating a new property listing and look don't say I didn't warn you at the start of this module it was a big one but thankfully this is one of the core features of our application so it's such a relief to finally get that out of the way and at this point that is all I have time to include within this video as you can see we've been building for literally hours and there's still so many features that I need to cover in as much detail as I possibly can if you're interested in watching the rest of this course I'd recommend hitting the link in the description so that way you can get access to it from my website now look while this full course is going to cost you money I'm confident that it's going to save you months of your time having to learn how to rebuild all of these features from scratch and look on top of that it's just going to help you launch your Apple startup as quickly as possible within that full course there's still so many features that I want to cover this includes everything like being able to register user accounts allowing users to log into their existing accounts creating a user settings page building a dashboard where property managers can actually manage their listings allowing property managers to edit the details of existing listings displaying the full details of each property creating a bookmarks feature allowing users to actually contact property agents and honestly the list just goes on I really wasn't lying when I said there's still a whole Suite of features that we need to cover if you wanted to stay up to date with any additional bubble tutorials I share though I'd always recommend hitting that subscribe button so that way you can be the first to know whenever I drop a new video for now though I just wanted to say a massive thank you for taking the time to watch this video and I wish you all of the best on your own NOCO Journey [Music] thank you

Channel: Building With Bubble

Views: 5,253

Keywords: Bubble, bubble.io, no-code, no code, no-code development, visual programming, buildcamp, coaching no-code apps, makerpad, adalo, webflow, zapier, no-code tools, app development, minimum viable product, MVP, Bubble no-code, software development, Zillow, Zillow clone, Zillow marketplace, marketplace app, Property marketplace, Airbnb clone, Airbnb marketplace

Id: AtAXCXiL4PA

Length: 217min 11sec (13031 seconds)

Published: Fri Jun 30 2023