How To Build A Yelp Clone With No-Code Using Bubble (2024 Flexbox)

today we're going to be building our own Crown Source reviews platform just like Yelp without writing a single line of code using a tool called Bubble now look there is so much that I want to cover within this video today but before I say another word let's dive in and take a quick preview of what we're going to be building over in a preview of my Yelp clone I'm currently logged in as a user and I'm viewing my homepage now if I was to scroll on down as you'll see we've got a long list of all of the recent reviews that have been published with in our platform now one thing I should also point out while we're here is that of course every page inside of our app today is going to be fully responsive so regardless of whatever device or browser size your user views your application in they're going to have a beautiful end user experience now inside of each of these reviews I can of course see who published them some additional photos they've shared as well as a star rating and the review itself and look we're going to come back to our reviews feature in a moment but before I show you that what I want to do is show you our search experience today so if I scroll on up to the top of my page let's say I want to search for sushi restaurants in San Francisco I'm going to perform this search here it's then going to redirect us through to our search results page where I can see a list of all of these sushi restaurants within San Francisco and of course on the right hand side of my page here I have a map in which I can see where all of these restaurants are located now when I'm looking at each individual restaurant I can see the average star rating for each listing and if I really wanted what I could also do is refine this list down by some additional filters so I could filter these by categories or even features so let's say I want to search for only sushi restaurants where dogs are allowed and as you can see we only have one listing here but if I remove that I can also filter this by an average star rating so let's say I want to search for restaurants where the average star rating is four stars or more and of course as you'll see there's still only one listing that fits that requirement so what I'm going to do is Click through to this restaurant and it's going to send me through to that page and on this listing page I can open up and view all of the photos that users have published within their reviews here I can also scroll on down save this to my list of bookmarks I can view all of the amenities here the description of the business as well as all of the reviews themselves that have been published for this listing now let's say I be to this restaurant and I want to leave a review myself I'm just going to scroll on up here select to write aw riew I'm going to give this 4 and 1/2 Stars here I'll add in some text and then I'm going to upload some images then once I'm happy with all of the content of this review I'm going to publish this here and if I scroll on down I'll be able to see that review on this listing as well now while we're looking at all of our reviews what we can also do is Click through to someone's profile because of course on a user's profile you're going to be able to see a list of all of the reviews that left at different restaurants now from here switching things up I also just wanted to show you how things are going to work on the back end for those users who want to publish a restaurant listing so right now you'll see that this user here has the ability to add a new business and when I click on this it's going to take me through to an experience where I can add things like the business name the email address the phone number as well as all of the listing information once a users then published one or more listings they'll also have access to this dashboard page on the back end where they can manage all of those listings so that way if a user has a of restaurants or as a franchise owner they'll be able to easily add all of their locations now look this is just a handful of all of the features that we're going to create within our Yelp clone today there's still so much happening on the back end that I can't wait to dive in and show you if you've ever tried to build your own app or startup I'm sure you know firsthand just how complicated it can be particularly if you're a non-technical Founder just like I am your options are quite limited when it comes to building your own product you can either try and Source a technical co-founder which look from my experience takes a whole lot of time and a whole lot of butt kissing or you can pay someone else to build it for you and I can tell you right now that is not going to be cheap but thankfully when it comes to building your own product bubble is going to be your new best friend on your startup Journey bubble is what's known as a no code tool which in simple terms just means that it allows you to create fully functional apps without having to write a single line of code as a tool bubble off offers absolutely everything you need in one simple solution it not only allows you to create your own custom database but it also allows you to easily design the user interface of your app Stitch everything together and make it functional using visual workflows and of course the ability to integrate with any third party tool or service you could imagine look when it comes to no Cod tools a bubble is by far my favorite unlike most nood tools that do one particular thing well bubble does them all exceptionally now look by this point I've Ram LED on for long enough there's so much that we need to cover within this tutorial today so let's just grab our bubble editor and we can dive right into it within our course today the first thing we're going to do is actually not build out any core user facing features instead we're going to take the time to set up and configure our own custom database which is going to be used to power the rest of our Yelp clone now for the sake of our tutorial today what I've done is I've created a dock here which includes all of the different data types and data fields I'm going to add into my database as well as a long list of all of the features that I'm going to cover throughout this tutorial and look as you can see it's quite an extensive list of everything that I'd like to cover and for this checklist today I've created this using a tool called notion which if you're not familiar with notion it's just a great note taking tool and I personally just use it to create a checklist now of course I'll be sure to include a link to this checklist in the description of this video so that way you can make a copy of this and follow along with me as well but when it comes to building out your own custom database inside of bubble I know that this can be quite overwhelming or challenging particularly if you are brand new to using bubbles tool but look my job today is to make things as easy as possible for you so what I'm going to do is explain a couple of Core Concepts as well as walk you through how I would personally structure a database then we're going to jump right into bubble and we're going to do that ourselves and so when you're setting up a database in bubble there's two key Concepts you really need to understand and that is the difference between data types and data fields so what on Earth are these two words that I've just mentioned when you're creating data inside of a database you need to store this in a certain structure and so every single time a user creates something that you want to store inside of your database that is known as a data type because it's a type of data you're going to store in your database and so you'll notice here within my checklist that above all of my checklist items I have this title and these titles are in fact my data types and so before I open up any bubble editor what I like to do is just sit down and have a think about all of the different data types I need to add into my app and look as I mentioned when it comes to data types if your user is going to create something inside of your app at any given point in time that should be a data type so for example here I have a data type known as the user because of course users will need to register an account in our database so they're going to create a new user account so that is why I have a data type here known as my user if we were to scroll down the list the next data type is known as a listing now for the sake of our tutorial today my Yelp clone is just going to be focused on displaying restaurant listings but I'm going to refer to these as listings so if a user ever wants to upgrade their account and become let's say a business owner so they can list their business on our platform they're going to create a listing in that process so a listing is kind of like a business then of course if I continue scrolling down I have a data type known as a review and that of course is because users can create and leave reviews on particular listings and then separately I have another data type here known as the review satellite and I'm not going to dive too much into this right now but there is a reason why I've separated this from my main review data type and look I'll explain that as I build out all of my data fields so please don't overthink this right now but what you'll also notice is that under each data type we have all of these checklist items and these are our data fields so for every single piece of data that someone creates in our database so for every new entry we're going to need to store some information about that new thing that someone creates and in a good example every single time someone registers a user account I might want to store things like their name their profile photo their bio and so on and the same goes for a listing so every single time someone creates a business listing we want to store the business name the featured image and look to be honest in my opinion data fields are a bit easier to comprehend the most challenging thing when it comes to setting up your own custom database is actually determining what should be a data type but look I've done the hard work for you today and I've gone ahead and done this for you now as we add all of these data types and Fields into our database I'm going to reiterate the purpose of each individual field just so that way you can understand exactly my thought process but for now what we're going to do is open up our brand new bubble editor here now inside of this editor I haven't made any changes what I'd like to do though is jump over to my data Tab and the first thing you'll notice is that under our data types on the left hand side here we already have a user data type now bubble adds this by default because of course in order for someone to use your app they're going to need to register a user account so that's why this already exists then what you also might notice is that on the right hand side here we have all of our data fields under our user data type so by default your user data type already comes with an email field because of course when a user signs up an account they're going to need to add an email and a password now bubble does automatically include a password field as well but you just won't be able to see this in plain text for security reasons but anything on the right hand side here is going to be a data field now from here when we're building out our database what I normally like to do is add in all of my different data types and the reason for that is because some of our data fields are actually going to link to our separate data types so it's important that we add all of our data types in first so if you remember we had our user data type which is already added in by default then we had our listing data type so we're going to jump over into our bubble editor type in the word listing and choose to create this then there was our review data type I'm going to create this as well and then finally I had another data type known as my review satellite now trust me this is important why I've separated this and I'll be sure to explain why I've done this when we start building out our data fields now before we can start building out all of the data fields under our new data types there is one additional concept that I need to introduce and that is what's known as option sets now just when you thought you were starting to get the hang of things I'm going to throw another spinner in the works here but but trust me I wouldn't do this unless we absolutely had to option sets to put things simply are kind of just like a data type that you as the admin can only create so if you remember when I mentioned before about how we create data types I said that when your users ever need to create something in your database that should be a data type but what happens if you have some information that you don't want your users to create but instead you as the admin want to create this is the perfect use case for option sets and I feel like that was probably a bad explanation so perhaps even a more simplified version to look at it is that when it comes to data types this is information that will be created whereas with option sets you can actually pre-create and store this data in your database from the beginning so it's information that should already exist and it most likely won't ever change now why would you want to use option sets as I mentioned if you as the admin of your application ever want to create some permanent information that most likely won't change this is the perfect use case for option set and in a great example here I have an option set known as the account type so within our platform today we're going to have two different types of accounts there's going to be the plain standard users and then there's going to be the business owners and the reason why we have two different types of accounts is because we want to give our business owners the ability to actually create and publish business listings whereas we don't want our users to have that privilege and so this is why I've already taken the time to create the two different types of accounts now the reason why this is an option set and not a data type is because I as the admin of my application know exactly which two types of accounts should be created I don't want my users to be able to create their own kind of accounts because if it was up to them they'd probably make themselves like a master admin or there's no guaranteeing that when they type in the word user they're all going to spell it the exact same someone might spell it with a lowercase letter someone might spell it with an uppercase letter someone might make a typo just like I did so things wouldn't be consistent so this is the power of creating option sets and so today what you'll see is I've created a few different option sets for information that will never be changed so I as the admin want to have full control over the different types of accounts that users can select from I also want to have full control over all of the categories for my restaurants so when a restaurant creates a listing I want them to select from my predetermined list of categories I don't want them to create their own unique categories and then finally every restaurant will also have some features so I want the restaurant to be able to select what features they offer from my my existing list and now in order to create option sets if we jump back into our bubble editor within our data tab over on the right hand side of our menu you're going to see this option known as option sets and look if you found my explanation quite confusing there is an additional tutorial video that you can watch here and trust me my feelings won't be hurt if you watch this I think this is a great tutorial that can also help explain things in much more detail but if you're feeling Reckless or if you're up to speed what we're going to do is skip over this tutorial and we're going to create our own option sets and what you'll see here is that the process of creating option sets kind of looks the same as the process of creating a data type on the left hand side you add your data type so within our option sets menu here what you'll see is on the left hand side we can add our option set so my first option set was known as the account type and I just have a typo that I need to fix and when I create this option once again what you're going to see is that on the right hand side we have the ability to add in all of the information so this kind of looks like the process of creating data fields so if we were to remember under our account type option set there were two options that I the admin wanted to create there was our user and then there was the business owner so I'm going to create these two options here and so now whenever we're giving someone an account type they will only be able to choose from these two options nothing more and as the admin of my app that is the exact experience I want today I want to have full control over which type of account each user is and this is all that's involved in the process of creating an option set so let's jump back into our checklist and tick off that we finished adding in our account type option set then below this we had our category option set so as I mentioned whenever someone creates a restaurant I want them to be able to select from a list of relevant categories that it fits within and I want to be in control of that list just to ensure that our restaurant owners don't add any duplicate options or add any typos and it's just going to help me Str Ure our application in a much more unified approach and look that's going to be quite helpful when it comes to the process of creating things like search filters because later on we're going to allow our users to filter down restaurants by particular categories and so if all of the categories are structured the same it's going to make things work nice and easily so let's jump back into our bubble editor and within our option sets menu we're going to add another option set known as the category I'm going to create this and then I'm just going to add all of these different options in so first of all there was the tie option there was Italian there was Japanese Chinese and finally burgers and Mexican now today for the sake of that tutorial I'm just going to add a short list of categories here but if you wanted to add a much longer list of categories you can pause this tutorial here and you can add in whatever list of items you would like you just need to create them all as new options from here though I'm going to jump back into my checklist highlight all of these options set and I'm going to tick those off and then finally the very last option set is going to be our features so if we jump back into bubble we're going to create an option set known as the feature and this of course is going to be a list of all of the additional features that a restaurant can offer so do they have things like Wi-Fi do they allow pets are they good for kids and so on and once again I just want to make sure that I as the admin am in control of structuring all of these different features that a restaurant can select from because of course if we give our restaurants control they most likely going to make typos or even create duplicate options and so when it came to our features today there was the dogs allowed private parking and so on so I'm just going to type this in dogs allowed private parking there was delivery there was also good for kids free Wi-Fi was also on that list and finally there was the feature where they serve alcohol now once again this is all of the features I'm going to add within our Bild today but if you wanted to add more you could pause this tutorial and add anything else in that I haven't covered here but I'm just going to keep this list nice and short so that way I don't bore you to death having to watch me type all of these out so from here we can jump back into our notion checklist tick all of these items off and after adding in all of our option sets we can now scroll up and finish completing our database by adding in all of our data fields so as I mentioned before when it comes to data fields this is all of the bits of information we're going to store for every single entry of of a data type created in our database so let's focus first on our user data type so if we jump over into our bubble editor we're going to head back to our data types Tab and we're going to select on our user data type here now if we're to create a brand new data field the first field is going to be the name so this is going to of course be the name that someone can add to their profile now when you're creating a data field you're also going to need to select what type of information you want to store this field as now if we're storing someone's name this is just going to be a bit of text so if we scroll down our list here under our basic types we're going to be able to select that we want to store this as text but as you can see there's a long list of different options you can store things as numbers dates yes no values images files addresses and the list truly just goes on but for now we're just going to keep this simple and store this as text I'm going to create this here then the next data field was the profile photo now one thing I should point out is that you may have noticed notic that when I've spelled these two separate words I haven't added a space between them instead I've just added a dash now that was purely intentional when I'm creating data fields and if they have two words in the name I personally just like to add a dash because I just know that under my data types I leave spaces between two words whereas with my data fields I leave dashes and so later on when I go to reference some different data types and Fields inside of my bubble editor I can easily tell the difference between the two now bio means that it's not completely necessary but it's just a little practice that I follow now for this profile photo data field the field type is of course going to store an image so if we scroll all the way down to the bottom we can select an image and choose to create that now once we've created our profile photo data field what I'm actually going to do is head over to the right here and give this what's known as a default value so as you'll see for every data field you can give this a default value which just means that when this entry is created in our database this field will have this existing value Now default values aren't something you use very frequently but in the case of my profile photo I am going to add a default value now why would I want to do that let's say a user signs up to our app on our registration screen we're going to require them to add in things like their name their email as well as a password but we're not going to ask them to add a profile photo in instead we'll allow them to do that on something like our settings page but in some cases a user might never upload a profile photo and if they start creating and Publishing reviews within our platform I want to display a little profile photo next to their name and so what I'm going to do is actually upload a default profile photo Avatar so it's just going to be like a dummy image that's going to sit there and take its place until they actually upload a custom image of their own now when it comes to the default image what I've done is I've already taken the time to upload this into a Google Drive for you now within this drive I've uploaded a series of different images that we're going to use throughout our tutorial today and once again if you want access access to this I'll be sure to include a link to this in the description of this video but as you can see here the first image is just a default profile photo so it just looks like a little Avatar so once you've downloaded that we're going to upload this into the default value here and once I've uploaded that image we can move along to the next data field and when we create a new field this is going to be called the bio so this is going to be like the About Me section on someone's profile now this field type is super straightforward it's just going to store some text we can choose to create this and then I'm going to create another field known as the account type now of course this is going to be where users can determine if they're a user or a business owner and because we've actually already created the options for our account type we can link this data field to our option sets now this is why I took the time to create all of our option sets before we built out our data fields because our data fields can actually reference the data of our option sets so right at the top here you can see that we can select from one of the three option sets we created and today we're going to select the account type option so I'm going to choose to create this here and what I'm also going to do is give this a default value so every single time someone creates an account by default I want this to be just a standard user not a business owner later on throughout our tutorial though we're going to build out the feature where we can update someone's account type to be a business owner but by default as soon as they register an account they should just be a standard user then finally there's one last field I'd like to add under my user data type and that is going to be called saved listings so let's say if a user is browsing our application and they want to bookmark a restaurant listing so they can view it later this is where we're going to store a list of all of those listings that they have in fact saved or bookmarked now when it comes to the field type here what we're actually going to do is link this out to our separate data type which is known as our listing and once again this is why it was important to add all of our data types in before we built out our data field Fields because our data fields can actually connect to our separate data types and if you really wanted to get technical that is what's known as creating a relational database so all of our fields and data types can now intertwine and connect just like a big web and this is truly the power of bubble it allows you to create a fully customizable database that's incredibly powerful but for now what we're going to do is link this to our listing data type but as the name of this field would suggest we don't want users to just be able to bookmark one listing instead we want them to be able to add as many different restaurant and listings as they want to their saved list so we're going to need to tick this option here to make this a list with multiple entries so now this is going to create this as a list of listings and look that's a bit of a tongue twister but that's all we need to do we're going to create this here now if we jump back into our notion checklist we can highlight all of the data fields under our user data type and check those off and then we can move on down to our listing data type so for each listing this is going to be a restaurant that someone lists on our platform and so that's why I've just called it a listing for today but the first field is just going to store the name of this business so let's jump back into bubble open up our listing data type create a new field and we're going to call this the business name now similar to the user's name this is just going to be a plain text field we can create that then for our next field similar to our user data type I'm going to want to store something like a profile photo for each listing but instead of calling it a profile photo I'm going to call it a featured image and for this field type once again it's going to be an image I'm going to choose to create this and look similar to our user data type I'm going to give this a default value So within our Google Drive there's a photo that has a couple of buildings inside of it so if I jump into the drive it's this image at the bottom here and so by default when a listing is created today I want this to be the image that's shown until they actually upload a custom featured image of their own so I'm going to select upload this as the default value and that is all we'll need to change for this field here then when we create our next field this is going to be known as the description and this is kind of like the bio for the business and I can just see I have a small typo there that I need to fix I'll also set this field type to just be a plain text field it's super straightforward then for our next field I'm going to call this the address field and for this field type we're going to scroll right down to the bottom and select that this should be a geographic address now the beauty of selecting a geographic address is that this will automatically be able to integrate with Google Maps so that means that you can source and store a real world address inside of your app and then if you ever want to display that on a map it's super straightforward so we're going to select this Geographic address option we'll choose to create that and now we can move on to the next field which is going to be the website for this business so this is of course where a restaurant owner can just add an external or link to a website if they ever want people to visit that now this field type is just going to be a text field because they're just going to store the URL inside of that field it's super straightforward I'll choose to create this here then from here while we're storing information about the business I'm also just going to store the business email now this email is going to be separate from the email that a business owner might store under their own personal user account because of course this is the business email that people will reach out to for business inquiry now for this field type it's just going to be a text field because of course we're just going to store that email formatted as text I'll then choose to create this then for the next field I'm going to call this the phone number and for this field type contrary to what you might think this is going to be a text field not a number field the only time you ever need to select the number option is if you ever want to perform calculations on something whereas with our phone number today I simply just want to display the phone number I don't need to calculate calate anything so I can just store this as text because I'm only displaying this within a text element I'll then choose to create that there and look we're almost there when it comes to adding all of our data fields in there's just three more the next one is going to be known as the categories so of course when a listing is created the business owner should be able to select a list of categories that are relevant to this listing and of course we've created an option set known as our category so I'm going to select this but once again as the name would suggest this is a plural a business owner should be able to select multiple categories not just one so I'm going to tick this option to make this a list with multiple entries I'll create this and then I'm going to do the exact same thing for our features so I'm going to create a new field here known as the features and for this field type I'm going to link this to our feature option set and I'm going to tick that this should be a list with multiple entries I'll then also choose to create this and then finally there's one last field I'm going to create create which is known as the is featured now this is going to be like a little status when it comes to each listing so if you as the admin of your application would like to feature a listing on your homepage I want you to be able to jump into your database and update each listing to say yes this listing should be featured or no this one shouldn't be featured so for this field type here I'm going to scroll on down and select that this should be a yes no value so a business either is featured or it's not not featured and when I create this here what I'm going to do is set the default value of this field to equal no so by default any listing should not be featured we only want to be able to feature businesses that we select as the admin so later on throughout our application today I'm going to explain how you as the admin can come into your database and update the value of any listing to be yes so that way you can choose which listings get a prominent spot on your homepage but look for the time being that's all of the data fields that we need to add into our listing data type so let's jump back into our notion checklist highlight all of these fields and check those off and look we're almost there the next data type is our review data type so if we jump over into our bubble editor open up our review data type the very first field I'd like to add is known as the message so this is going to be the actual message that someone types in for the review so I guess you could say this is like the actual content of the review now for this field type this is going to be super straightforward it's just a text field we're just typing in some text that's going to be added with this review I'll choose to create this here then for the next field we're going to call this the rating so if someone gives this let's say a one to five star rating this is where we're going to store this now for this field type this will in fact be a number because later on we're going to want to actually calculate the average rating that a business has received across all of their reviews so that's why it's important to set this as a number then for every review that's created in our database we also need to identify which business this review belongs to so if you post a review about a particular restaurant we need to make sure that we can clearly identify that this review belongs to that restaurant so what I'm going to do is create a field and I'm going to call this the reviewed business and for this field type I'd like this to be linked to our listing data type and I'm not going to select that this should be a list with multiple entries because one review should only belong to one listing at a time time so I'm going to choose to create this here and now the very last field I'd like to create is actually going to be a link between our separate review data type and this is where I can finally explain the difference between these two things here traditionally when it comes to our review when we're building a Yelp product I want to store things like the message the rating and the business but I'd also like to store a list of images so that way someone can upload a series of images that they've taken while they were at that restaurant but the thing about storing a long list of images is that it takes up quite a bit of space inside of our database now while bubble can handle that one thing you should just knowe is that anytime you load a data type in Bubble it's going to load all of the data fields within it even if you choose not to display them so what do I mean by that let's say we're viewing the profile page of a restaurant so we're seeing all of the details about a restaurant and then at the bottom of that page I want to display a list of all of the reviews that that restaurant has received and in this example let's say say that that restaurant has 100 reviews that have been published against it for each of those 100 reviews bubble's going to load every single data field for each review and so even if we're not displaying the images of each review bubble would still load them if the images sat within our review data type and so that's why I'm going to separate my images to sit under what's known as my review satellite so if you're not familiar with the process of a satellite data type it kind of works as the name would suggest in that it's a satellite so let's say this is my main review data type here and I don't want to store my images under this data type what I can actually do is create a separate data type known as a satellite so this is just going to float around in space and it's going to store all of my images inside of it and it's only when I ever want to display images for my review that I'm going to reference this satellite and I'm going to say hey I'm communicating with you to send me the images and then these two data types will come together share that information and then they can fly off in space and do their own thing again and so while this does add a little bit more complexity into our build today it's going to ensure that your application is built for long-term Speed and Performance so that's why it's so important to do this but look thankfully it's a super straightforward process under our review data type all we need to do is create a field known as the satellite and for the field type I'm going to link this to my review satellite data type so I'm now creating a connection between my main data type and that satellite that's just floating around then under my review satellite data type here I just need to create one data field and this is going to be called my images and this field type will of course be an image and I'm going to tick that this should be a list with multiple entries because I want to store as many images as the user would like to upload so when I create this here we now have all of the images stored in this data type but we can easily reference those images through our data field here which creates that connection between these two types and just like that that is actually everything needed to add into our database here so we can tick off all of those remaining data fields but there's one very last thing I just need to highlight and that is if we jump back into our bubble editor under our user data type you might notice that by default here we have this little thing known as a Privacy Rule that is applied to our user data type now if I click on this it's going to take us through to our privacy Tab and as you can see there's an existing Privacy Rule that sits under this data type now I'm not going to confuse you with Jon but in simple terms this Privacy Rule is creating a huge restriction on our app right now what it's actually doing is ensuring that users can only view the data that they create now while that's going to be helpful for things like internal tools or crms when you're building something like a Yelp clone which is a public or I guess you could say social kind of platform because users can see all the reviews that other people have created and of course they can view and interact with listings that other people have created this Privacy Rule actually takes away from that EXP experience so in order to allow users to interact with each other as well as all of the information that they create what we need to do is delete this Privacy Rule so we're going to head over to our trash can icon select to delete that and now you'll see that our user data type is publicly visible and look to be honest just like that that is absolutely everything I wanted to cover within this section of our tutorial today now I know that if you are brand new to Bubble there was definitely a couple of complex Concepts that I had to walk through there and if you found yourself getting lost I'd always recommend to pause this tutorial and rewatch any of those steps so that way you can understand them but look it's kind of crazy that we were able to create a fully custom database without writing a single line of code using bubbles tool after taking the time to set up and configure our database we can move on down to the list of features that I want to build out within our tutorial today and look as you can see this is quite an extensive list there is a ton of things that I need to cover the very first thing that I want to touch Bas on is designing the Yelp homepage and within this section of our course today we're going to learn a whole lot about the design process of using bubble and perhaps before we should even open up our bubble editor it might be worth jumping over to Yelp to see what this whole experience looks like so on the Yelp homepage I noticed that there's a few core elements at the top of our page we've got this navigation menu which contains a search bar and then below this we have this hero section which displays a list of root rotating images now this is something that we are going to replicate within our tutorial but I'll get to there in a moment if we scroll on down we can then see let's say a list of recent activity and there are also a list of suggested places that you could leave reviews for but today I'm more interested in just focusing on this list of recent activity so as you can see if someone leaves a review it'll display within this feed here and we can see an image or a list of images that these people have published with their reviews and so if we were going to build out this entire page from scratch the first thing I'd just like to focus on is actually not the navigation menu at the top of our page but instead this hero section here look I'm going to break this whole homepage down into a couple of different modules just because it's going to help it make it much more bite-sized and achievable so what we're going to do is start by jumping into our bubble editor now whenever you open up your editor the first thing you'll notice is that you have a blank page in which you can edit and this is known as the the index page so if you open up your page drop- down menu here you'll see that we've opened the index page and now the index page is just another word for the homepage so this is the default page that's going to be opened whenever someone views your application and of course at this point time this page is blank now before we can start adding elements onto our page the very first thing we'll need to do is take care of a little bit of housekeeping and if you're brand new to Bubble this is going to be a really important concept that you need to understand and it's how you actually structure the design of your page so if I was to double click on this page it's going to open up our property editor so this is where you can update the styling and the layout settings of any element in bubble this is going to be your main tool box that you work within and if we were to open up this layout tab you'll see this option here known as the container layout now whenever you add a new page into your app this is the first thing you'll need to change the container layout just determines in which order elements will be placed on your page because when you think about it a page is like a big container it's one of those big topware boxes and you're going to stuff a whole bunch of elements inside of it so it's going to be housing all of those Elements which is why it's known as a container now if we were to open up this drop- down menu you're going to see a long list of confusing options but don't worry I only ever used two of these options there's the row and the column and so what on Earth are these options a row and a column will just determine in which order elements will be positioned on your page so if you select the row option it will stack elements horizontally across your page and perhaps the best way to explain this is just by illustrating a real world example so if I quickly just select the row option and then if I just grab two buttons and add these onto my page what you'll see is that these are going to be positioned horizontally across my page so side by side whereas if I double click on my page again and open up my layout tab and now set the container layout to be a column it's going to do the opposite it's going to stack these vertically down my page so now you'll see see my buttons are stacked on top of each other now although on some pages you might want to Stack elements across your page what you'll find though is that when it comes to the overall page structure so the container layout of your overall page this will always need to be set as a column and the reason for that is because when you think about it most modern applications are built from the top down so if I was to open up Yelp once again and scroll to the top you can see at the very top here we have a navigation menu and although these elements are SP stand horizontally across our page the actual navigation menu itself sits at the top of our page then below this we have this little hero section and then below this we have all of these additional reviews that you can add followed by a list of all of the reviews that have been published so you can see that these are all stacked on top of each other so they're scaled vertically down our page so when it comes to our pages today you're always going to see me use the column option so the first thing you'll need to do is update your container layout to be just that I'm just going to delete these buttons off my page though because the first thing I'd like to add is not my navigation menu I'm going to build that out in a dedicated module because there is quite a bit involved in that process but for now what I want to do is just get some quick wins on the board and I want to help you understand how we can design the core elements of this page and really bring our Yelp clone to life so the very first section that I want to build out is this hero section so this is this list of rotating images as well as some of the businesses that are stored within Yelp so how can we recreate this one thing I've noticed when it comes to this section is that it's kind of broken down into its own little section of this page and in bubble this is known as a group so whenever you want to group a series of elements together and create their own little section there is a specific element that allows you to do this so if we were to scroll on down in our elements tree here you're going to see this option known as containers and look containers that sounds familiar and that's of course because we just selected the container layout of our overall page so if you were to grab a group element and add this onto your page a group is kind of like a small page that sits inside your overall page so why would you want to use a group well if you have a small page sitting inside your overall page you need to remember that when it comes to a page they have the ability to update the container layout and so do groups so if you ever wanted to stack a series of elements horizontal L across your page but make sure that the overall structure of your page is stacked from top to bottom you would add a group onto it and set the container layout to be a row but look in our example today inside of this group we're going to set this to be a column because if I was to look at the real world Yelp product here what I can see is that inside of this group we've got a background image we've got some text and then below that text is a button so these two elements are stacked vertically on top of each other and so so that's what we're going to do today the first thing we'll do when it comes to this group is jump over to our appearance Tab and the reason for this is because the first thing I'll need to do is actually store some data inside of this group so within our example today what we're going to do is we're going to create a group that features a series of up to three different restaurants or businesses on our homepage to users so if you remember within our database under our listing data type we had this field here which was called is featured and this was set to a yes no value and by default every listing is not going to be featured however you as an admin could come along and update the featured status of a listing to be yes which means that it should then be displayed in the hero section of our homepage today and so what we'll want to do is search for all of the listings in our database where that featured status is set to yes and we'll want them to rotate within this group here and so because we want to display the information of a listing what we're we're going to need to do is store a type of content within our group and this is another key benefit to working with groups groups allow you to store data from your database inside of them so it's known as a type of content and as you'll see if we scroll on down we can reference any data type here so I'm going to store a listing inside of this group now one thing you might notice here is that this is going to allow us to store one listing not multiple listings and so later on we're going to need to come back and create some sort of way to rotate between our three featured listings but we'll get to there in a moment I don't want to overwhelm you right now now after telling bubble that we want to display an individual listing inside of this group bubble currently has no idea which listing it should show so what we'll need to do next is give this group a data source and a data source just means that bubble's going to know from our database what data it should show and in this case it's going to be alistic so what we can do is perform a search in our database B here and this is a very common thing you're going to do time and time again in bubble and we're going to search for all of the listings where the is featured status so our is featured data field equals yes meaning that we as the admins have come along and said yes this restaurant should be featured on our homepage we can then close this data source so this is currently searching for a list of listings where the featured status is yes whereas as I just mentioned before bubble's only going to allow us to display one listing in this group not multiple which is why you see we've got this error here so from that list for the time being what I'm going to do is only display the item number and if I just type in one and hit enter it's going to display the very first listing where the featured status is yes and of course you can update this if you would like you could make it item number two item number three and so on but for the time being I'm just going to leave that as item number one now as I mentioned later on we are going to come back and allow this to rotate but for the time being I'm just going to display the first item within that list now the next thing I'd like to do while we're here is just update the background image of this group so right now this group is currently white so it just sits on our page and if I was to click away you couldn't even see that this group actually lies on the page so what I'm going to do is select on the group and if we head to our styling here I'm going to detach the default style and if you scroll on down your background style you can choose for this to be an image and now the image I'd like to display is going to be the featured image for the listing here so if you remember within our data tab under our listing data type we had this field known as the featured image and we're taken the time to upload a default image to this so that way when a listing is created this is the image that's going to be displayed by default and of course a restaurant owner could choose to update that image if they would like and so what we're going to do is jump back to our design tab here and we're going to need to insert a dynamic image and now that word dynamic is something you're going to hear a lot throughout our tutorial today and look if you're new to Bubble you might have no idea what that means and that is completely fine the main difference between bubble and other no code tools is the ability to create Dynamic applications and so if you think about the difference between a website and an app a website is what's known as a static piece of content you design the website once and it will always look the same whereas when it comes to an application these are Dynamic which means that every user is going to have a different experience and so a good example for this is that if you log into Instagram right now and if I was to log into Instagram we would see completely different things you'd see a feed of all of the posts from people that you follow or the interest that you have and I would see a long list of all of the content that I follow or I'm also interested in and so Instagram as an app is dynamic it const constantly changes to suit and cater to each individual user and so that's what bubble means by the word dynamic because you're storing data directly in your database inside of bubble bubble has the ability to actually grab that data fetch it and display it on your page to a user so anytime you hear the word dynamic it just means we're going to reference something from our database and in this case if I choose to insert Dynamic data here I can reference the featured image of the listing stored with in this group which is the listing item number one so the first listing that is featured in our database and if we were to ever change which listing is the first featured listing it would automatically update and so you wouldn't need to come back to this page and manually make that change bubble will do that automatically for you and that is the power of bubble and so in this case what I'd like to do is reference the listing stored within this group so if I scroll on down to my elements I'm going to reference the group listing which is the name of the element we've clicked here the group listing I'm going to reference the listing stored within it so the listing is the type of content and now what you'll see is that because we're storing a listing I can reference all of the data fields that sit inside of that data type and in this case I'm going to reference the featured image now just a personal preference of mine when I work with Dynamic images is that I also like to scroll on down and select this option here to process this image with MX and what this just means is that if an image isn't the perfect size for this shape here because of course there's no telling what dimensions or aspect ratio a restaurant owner is going to upload their featured image with what this setting does is that it allows us to tick this option here to resize and fit the dimensions by cropping them which just means that if an image doesn't take up this exact size it's going to expand it out and crop it automatically so that way it becomes a perfect fit and look it's just going to create a much nicer end user experience Now by all means this isn't essential but this is just a personal preference of mine I'm just going to choose to close this here there's no specific image to display inside of our bubble editor it's only when we run a preview of our app that bubble's going to fetch this data here so what we'll also do is scroll on down to the borders of this group and we're going to just add a solid border around this which now means if I click away I can at least see where this group sits on my page if if you really wanted to actually see where this group lies you could click on this and you could just update the background style temporarily to be a flat color and you could make this something really bold like a shade of a red and what this will do is it just allows you to actually see where this sits on your page of course when you go to preview or publish your app though you will need to make this an image or else your background style is just going to be red but for the sake of our tutorial today I'm just going to set this to be a flat color for the time being just to simplify where everything everything is going to be positioned on my page the thing I love about color coding all of my groups and my elements is that to me it just feels like I'm building with Lego blocks so I can stack everything together and create the exact experience that I need now right now as it stands this group is just a small little square on my page but of course if we want to display a nice hero section we need this to span across the full width of my page and I want it to display the full image so what we need to do in order to update the dimensions of this group is jump over to our layout tab and so this is where we updated the container layout for this group and if you scroll on down you'll see the ability to update the height and width settings of any element now when it comes to our application today I'm only interested in creating a fully responsive experience across both desktop and mobile devices and look thankfully bubble makes this super simple to do right now as you can see when it comes to the width of this group it's set at 280 pixels and we have this little check box ticked which says that this is a fixed width so that just means that this group is fixed at 280 pixels so right now you can see that this space here on my page takes up 280 pixels and because it is fixed at that value it will only ever remain that size it won't expand out or contract based on the size of our browser so right now this group is not responsive in any way or form so in order to make this responsive what we're going to do is unselect that this should be a fixed width and I'm going to set the minimum width here to be zero and I'm going to leave the maximum width to be infinite and what you'll now see is that by adding these settings in our group at the smallest possible size can be zero pixels which is essentially nothing but because our group has a maximum width of infinite it will continually expand out and fit the entire width of our page regardless of how wide someone's browser is so if I was to quickly just scroll on up and open my responsive tab here what you'll see is that on a desktop device of 1200 pixels this group is fully responsive if I expand it out even further this group continually takes up as much space as it can and if I reduce the width of my screen what you'll see is that this group is also fully responsive because it can reduce right down to zero pixels so today throughout our tutorial you're going to see me use these settings time and time again I'm going to sound like a broken record but in a lot of cases I'm going to set the minimum width to be0 and the maximum width to be infinite you're probably even going to get PTSD every time you hear me say those words in the future because I'm truly going to be so damn repetitive with it now the other setting we can update here is the height but I'm not interested in changing that right now because when it comes to the height of any group I like to keep this option selected to fit the height of this group to the content inside of it which just means that it will always collapse around all of the content we add into the group and so because there's no content inside of this group if I was to also set the minimum height to be zero as you'll see It'll collapse around nothing so it becomes completely invisible so what I'm going to do is keep this as the default option for now and I will come back later and update this but for the time being I just want to add two elements inside of this group so following the real world yup product I'd just like to add the name of the business that's being featured as well as a button which allows someone to go on and view that listing and so the first thing I'll do is add a text element inside of this group so if I head to my visual elements I'm going to grab a text element here I'll add this into my group and when it comes to this text here I'd like to display the name of that featured listing and so how can I pull the information of that listing I can insert Dynamic data so if I insert Dynamic data here I'm going to reference the listing stored within my group so if you remember that group was called group listing so I'm going to select on that listing and now I can reference all of the data fields for this listing and in this case I'd like to reference the business name if I then click away that's going to validate and it will display that text now when it comes to this text I'm also going to scroll on down and detach the default style here and I'm going to just update the font size to be 36 pixels I'll set the font color to be white and I'd also like to bold this text but as you'll see right now this text is not responsive it only sits in the top leftand corner so what we'll need to do is jump over to our layout tab and make this fully responsive and how can we do that we can unselect that this should be a fixed width we can set the minimum width to be zero and leave the maximum width as infinite so now this text element will take up as little or as much space as it can on our page I'll also do the exact same thing for the height so I'm going to set the minimum height to be zero and because we have this default option selected to fit the height of this element to the content inside of it what you'll see is that it's going to collapse perfectly around all of the text inside of it there now the other thing I'd like to do while we're here is just add some margins around the borders for this element so the margins will just make sure that it doesn't touch the borders of the red group that it sits inside of so what I'm going to do is actually add 150 pixels of margin at the top 50 on the left and 50 on the right and now if I jump over to my responsive tab what you'll see is that as I expand the page out or Shrink it down this text will never touch the borders of my red group so it is also now fully responsive and of course Bel this text I just like to add in a button which is just going to allow someone to view this listing when they click it so if I head to my visual elements I'm going to grab a button add this into my red group and in my version of Yelp today I'm just going to keep this super simple and have this display the word view whereas right now this button is actually bright blue whereas I want that to be red like the real world Yelp product so how can we change this we can scroll on down and look we could detach the default style of this button and then make changes to it here but what I'm actually interested in doing today is editing this primary button style which then introduces another concept what on Earth is a style so inside of bubble whenever you add an element onto your page it has a default style but if you don't like the way that it looks you can always detach the style and make any oneoff changes within this menu here and so if I was to change this button to be let's say a shade of red this button's color would update which is great but what happens if on the same page I'd like to add yet another button and I want it to be the exact same shade of red as our first button here what I'd need to do is come over to our first button highlight this color code copy it across detach the style for our second button and paste that in and now this can get annoying when you do this across multiple pages so let's say we create another page in our app in order to get that red color do we need to come back and then grab that color code jump back to our other page and paste it in and if you're adding quite a few buttons butons that are going to look the exact same it's going to be quite annoying to have to do this manually every single time and so this is the benefit to Styles storing a custom style allows you to actually design the look and feel of an element once and then later on you can reference that wherever you would like within your app so if I just delete these two buttons I'm going to add a brand new button in here and instead of detaching the style I'm going to edit the primary button style here so if I choose to edit this style it's going to then take us through to our styling tab where you'll see we'll be able to change the exact same settings but every single time a button references the primary button style this is how it's going to look so whatever changes we make here are going to reflect that button across any section of our app where we use that similar style and so when it comes to this primary button here what I'm going to do is update the color of this to be a custom red color code and this is the same color code that Yelp users and if you'd like this code it's F1 a 1 a and then also just going to jump over to this conditional tab here because by default every button style has this condition that just changes the color of the button when it's hovered so whenever someone puts that Mouse over the button this is the color it will become and if you want to toggle this on and off you can see what that's going to look like so right now it just looks like a big American flag where it's just going to change between red and blue and so what I'm going to do is actually update the background color here to be another shade of red that's slightly darker so if you want this color code it's E2 and then 5 Z after that so now you'll see when we toggle this on and off it just looks more subtle so it's a much nicer design experience if we then jump back to our design tab here what you'll see is that of course the color of this button has been updated I'm just going to update the text once again but if I now go to add any other button onto my page and if it references the primary button style it's now going to have the exact same color code as our existing existing style and now Styles aren't something that I use for every element so for instance for elements like my white text here this is the only place in my app that I'm going to use this large white text that's 36 pixels and is bold so it's kind of pointless in me creating a style for that but if you're going to be referencing Styles time and time again it is worth your time creating a custom style that's stored in your app now that's enough on Styles what I'd like to do is Select this button and just update its position within my red group here so if I jump to my layout tab what I'm going to do is update the margins around this button now for the sizing of this button I'm quite happy to leave the width as the default setting here so right now this button is fixed at 150 pixels and look I'm quite happy with that because I don't want my button to take up the entire width of my page if I was to do this it would kind of look like a very strange button and so that's why I'm quite happy to leave it fixed at 150 pixels so at any given point in time regardless of how wide or small the page is the button is always going to be this exact size here and I'm completely okay with that the thing I do want to change though is the margins around this button so I'm going to give it a top margin of 20 pixels because this is going to be the last element inside of my red group I'm also going to give it a bottom margin of 50 pixels and then a left margin of 50 pixels and a right margin of 50 pixels so that way it sits perfectly in line with the text element above it there and now that is all of the elements I need to add into my hero section here so I'm going to select on my red group I'm going to head to my layout tab and in theory what I traditionally do is just set the minimum height to be zero and of course because we have this option selected to fit the height of this element to the content inside of it it's going to collapse nicely around the last element which is our button with 50 pixels of margin but look when it comes to our hero section I actually want this to have a little bit more height on our page and so this isn't something I do all the time but what I'm going to do is actually give this a minimum height so right now with the minimum height set to zero bubble just thinks that this group needs to collapse around all of our elements whereas what I'm going to do here is set the minimum height to be 400 which just means that at the smallest possible height it should be this exact size here which is 400 pixels and if I just close my property editor you can see that this kind of replicates something that's more in line with your real world Yelp product now look that's everything we need to build out when it comes to our hero section for now as I mentioned I am going to come back later on and explain how we can rotate a series of images because right now this is only displaying one listing so if we were to feature a listing right now it's only going to show one of those options whereas if you remember the real world Yelp product it rotated between three separate listings but for the time being what I want to do is focus on building out the next section of our page which is where we're going to display the recent activity that's happened on our platform so this is going to show any recent reviews that have been created and already I can see that I'm starting to run out of space on my page so what I'm going to do is just double click on my page so this is my index element and if I just scroll on down to the minimum height I'm just going to set this to be something like 1500 pixels for now and look there's no scientific reason behind 1500 pixels I just think that this is going to give me more than enough space to work with when you go to preview or publish your app you'll most likely set your minimum height to be zero so that way laes around all of the elements on your page but for the time being I'm going to leave it as 1500 for the next element on my page though I'm going to add a heading below my red group so if we jump to our visual elements I'll grab a text element add this below my red group and if you remember the container layout of My overall page was set as a column so it's going to stack this vertically below that red group then for this text element I want this to be a static heading which means that I'm not going to insert Dynamic data I'm just going to type some text into it and this is going to display the words recent activity so this text will always be this it's not going to change and if we scroll on down to our styling I'm not going to create a custom style I'm just going to create a oneoff variation for this text and for this text I'm going to set the font size to be 24 I will align this text in the center of the element and I'm going to choose to bold this text as well I'll then need to make this fully responsive so if I jump to my layout tab I can unselect that this should be a fixed width I'll set the minimum width to be zero leave the maximum width is infinite and now as you'll see It'll be able to take up as little or as much space as I can on my page I'll also update the minimum height to be zero and of course because we have this default option checked to fit the height of this element to the content inside of it it's going to collapse nicely around all of that text and then finally we'll just need to add some margin around the borders of this element and so I'm going to add 50 pixels of margin at the top I won't add any on the bottom bottom but I'll add 20 on the left and 20 on the right and if I just close my property editor you can see that that is positioned in the center of my page now below this this is where things are going to get a little bit more complicated just when you thought you were starting to get your head around bubble I'm going to throw another core concept at you and this one's a little bit confusing to learn but of course it is my job to make things as easy as possible for you to understand so below this text what I want to do is display a list of the 12 most recent review viws that have been published in our platform so if you remember in our database we have this data type known as a review and every single time someone creates a review we're going to store some information about that so we're going to store what that business was that they reviewed the message within it the rating and then we're actually also going to link this through to some images that someone could upload for that review and so if I want to display a list of the 12 most recent reviews how on Earth can I do that because if you remember a group can only store one thing in it whereas right now I want to display 12 and so if we scrolling down to our containers menu thankfully there is a very special element in bubble known as a repeating group and this repeating group is going to become your best friend throughout the entire process of working in bubble as the name would suggest a repeating group allows you to display a series of different groups so anytime you ever need to display a list of items inside of your app you will need to use a repeating group and as you can see right now it kind of just looks like a big spreadsheet and that's because it essentially is the best way to illustrate how a repeating group works is that it can connect to your database just like our single group did but it can display a long list of items from a data type and so a good example of this in the real world is once again back to my Instagram use case if you were to log into your Instagram app right now on the homepage you'd see a feed of all all of the posts that people have published and so that feed would actually be built on top of a repeating group so inside of each cell here you would have one individual post and when it comes to the data source of this repeating group it can dynamically reflect any interest or behavior that your users specifically have so everyone's going to see a different experience and so throughout any app you build in bubble you're going to be using repeating groups quite a bit so it's important that you really understand how they work and look if you are new to Bubble they are a little confusing to get your head around don't worry it took me a long time to figure out repeating groups but of course I'm going to try and simplify the whole process for you so the first thing I'm going to do is actually just move my repeating group below my text element so it should sit below my heading I'm then going to need to give this repeating group a type of content so if I want to display a list of items bubble needs to know which list of things from my database it should show and in this case the type of content should be a review because I want to display a list of reviews then for the data source bubble needs to know from all my reviews which ones should it show from my database and so if I select on my data source I'm going to perform a search in my database for all of the reviews that have been created and if I update the sorting by here to be the created date and set the descending value to equal yes what this means is that it's going to reference all of my reviews in Reverse chronological order so in my list of reviews the most recently created reviews will sit at the top which is great because in this repeating group here I want to display a list of the 12 most recent reviews that have been published on my application I'm then going to choose to close this data source and if I was to just click away and leave this as is right now this repeating group would display every single review in my database so if I had let's say 1,000 or 5,000 reviews this recent activity section will literally just continually scroll rrolling down for eternity because it will display every single one of those options and look if you're loading 5,000 items at once that's also going to slow your application down because it's going to search through so much data in your database but if you remember at the beginning of this section here I said I only want to display the most 12 recent reviews in my database so what we could do is Select this more option here and from all of the reviews that have returned from my database search what I want to do is display the first 12 items so I'm going to reference the items until and if I type in the number 12 it will just display the 12 most recent items there and that is all we'll need to configure for this data source the next thing we'll need to do is update the number of rows and columns for this repeating group so right now this has a fixed number of rows as four so as you can see there's 1 2 3 and four rows and so even though we have a data source searching for the 12 most recent reviews right now this repeating group would only display four and that is not the experience we want to create so what we're going to need to do is unselect that this should be a fixed number of rows and now this repeating group will just continually expand down and display all 12 even though you can't see 12 it will display them and then the next thing is the number of columns so right now you could see that one review will be positioned on each line whereas if I jump over to the real world Yelp product and scrolling down to the recent activity here what you'll see is that there's a whole different series of columns and so so what I want to do is actually unselect that this should be a fixed number of columns and now this will allow us to display as many entries as we can fit on the page but what you'll also notice is that we now also have these minimum values here so what this is doing here is just telling bubble that for each cell in our repeating group so for each individual review it should only take up 100 pixels by 100 pixels which is quite small and so what I'm going to do is just update the value of each width of the col column to be 300 pixels now there's no scientific reason why I selected that and in fact when it comes to working with repeating groups I still find that years into the building process getting the right dimensions is just a matter of trial and error so what we can do is take a guesstimation of how much width we need for each column and then once we finish adding all of the elements into that we can come back and fine-tune these settings to get the exact dimensions we need to create a truly responsive experience so for the time being I'm just going to leave that at 300 pixels and I'm fairly certain that we're going to need to come back and change that because that is probably going to be the incorrect value what I also want to do right now though before we add any elements into our repeating group is jump over to our layout tab and allow this repeating group to be responsive across the entire width of my page so right now you can see this repeating group is fixed at a value of 280 pixels so what I'm going to do is unselect that that should be a fixed value I'm going to set the minimum width to be zero and of course leave the maximum width as infinite so it will take up as little or as much space as it can on my page when it comes to the container layout because we're working with groups we have the ability to determine in which order elements should be positioned inside of each cell of our repeating group and in this case I'm going to just set this to be a column and if I can be completely transparent it doesn't really matter what option you select here because if you look over in the real world Yelp product inside of this repeating group from what I can see they've added in yet another group here which houses all of these elements and this group has obviously stacked elements vertically inside of it so what we're going to need to do is add a group into our repeating group so that way it looks like we have these nice little cards or tiles that sit on our page so if we jump back into bubble here that is something that we can do now so what I'm going to do is scroll on down and I'm going to grab a group element and I'll add this into my very first cell of my repeating group and this is where you'll start to see the power of repeating groups come to life if we're displaying the 12 reviews in our database that have recently been published you wouldn't be entirely wrong to think that we'd have to design each of those 12 reviews but that is where you would be wrong when it comes to a repeating group you only need to design the very first cell and any changes you make here will automatically be applied to every other cell so it's kind of like how we worked with a style where you create it once and bubble's going to take care of all of the heavy lifting for you so perhaps in a good example if if I was to quickly just give this a flat background color and make this a shade of red what you'll see is that it's automatically going to make the exact same changes for every single review inside of my repeating group so this is what review number one would look like this is what review number two would look like and so on and look when it comes to this group I'm actually just going to remove that flat color because what I'd like to do is just give this a solid border instead so that way I can still see where it sits but I just don't need it to be a bright shade of red right now and they're going to jump over to to my layout tab because when it comes to this group I'll need to update the container layout so I need to determine in which order all of our elements are going to be stacked and as I mentioned before this is going to be a row because we're going to stack all of our elements from top to bottom I'll then also update the width I want our group to take up the entire width of each cell in our repeating group so what I'm going to do is of course unselect that this should be a fixed width I will set the minimum width to be zero and leave the maximum width is infinite so now each group here is going to take up as little or as much space as it can inside of each repeating group cell but the next thing you might notice is that all of these groups are now touching so if I just scroll them down to my margins I'm going to add 10 pixels of margin around every single border and that's going to ensure that this group won't touch the edge of each repeating group cell so now these have really started to take the form of a tile or a card so there's a nice even amount of spacing between them now for the we will come back later on and update this but before we do that I'm interested in adding all of my elements inside of this group and if I jump back over to the real world Yelp product as you'll see the very first thing I'd like to add in is the person who created this review and something you might notice is that when we're displaying the details of that person we're displaying their profile photo as well as their name side by side so these are stacked horizontally which means that inside of our overall group here which is current L set as a column so it's stacking elements vertically we're going to have to add yet another group and we're going to have to set its container layout to be a row and this is something that you'll need to do quite a bit inside a bubble today in order to create the exact experience you want it's perfectly normal to stack a bunch of different groups inside of each other and in fact that's why I like to color coat my groups as I mentioned if you're stacking groups on top of each other and they're color coded it looks like you're just stacking Lego blocks so you can easily see where everything sits so inside of my main group here I'm going to grab another group I'll add this in and the first thing I'll do is jump over to my appearance Tab and I'm going to detach the default style of this group and I'm going to give it a flat background color and I'm going to set this to be a light shade of red once again so that way I can easily see where this group sits inside of my existing group now for this group as I mentioned I'm going to jump to my layout tab and I'm going to need to set the container layout to be a row because I want to stack two elements side by side side so horizontally within my page I'll also then update its responsive settings so I will unselect that this should be a fixed width as I always mention I'm going to set the minimum width to be zero and leave the maximum width to be infinite so now it will take up as little or as much space as it can inside of that existing group and now inside of this group I'd like to display the profile photo and the name of the person who has created this review so if we just scrolling up to our visual element M I'm going to grab an image and I'm going to add this into my red group now because I want to pull the information of the person who created this review but what you'll find is that as you insert Dynamic data there's no way to reference the individual review that we're displaying and the reason for that is because this image doesn't actually sit inside of our repeating Group which is displaying those reviews the image sits inside of our red group and that red group is the element that sits inside our repeating group so it's kind of like one of those Russian dolls where you open it and there's just a ton of different layers so what we need to do is create some sort of way to send the data of our review in our repeating group through to our red group in which case our image could then reference the dynamic data from that specific review so if I was to select on this red group of course you might remember that groups can store content within them so if I say inside of this red group I want to store the information of a review what I could then do is update the data source to reference the review from the repeating group but I still don't see the option to reference each individual review from our repeating group and why is that you might remember that this red group actually sits inside of another group so we've got yet another layer to work with and look for the sake of our tutorial today I'm just going to quickly jump to my layout tab here and just set the minimum height here to be 50 just so that way you can see the border of the white group that we first added into our repeating group and I apologize if this is is a little bit confusing but if you do the same thing you'll be able to select on the white group we originally added so for me this is called Group B now if I jump to my appearance tab what I'm going to do is set the type of content for our first group to be a review and if I open up my data source you'll now see the option to reference what's known as the current cells review so in each repeating group in cell number one this will be displaying review number one in cell number two this will be review number two cell number three review number three and so on and so if we reference the current cells review it's going to pull the information from the cell that it sits within and so that's how we can pass data from our repeating group to our first group which is that tile if I then select my red group here I can reference the data from the parent groups review and so the parent group is the white group because the red group sits inside of the white group so the white group is taking care of it just like a parent and now by this point I completely understand if you've just been confused by how many times I said group parent container there's a whole lot of jargon in this process but essentially what I'm trying to do is send the data from my repeating group through the chain of events to get to my profile photo so we've sent it to the first group we're going to send it to the second group now so we're going to reference the parent groups review and if I now click on this image we can insert Dynamic data and reference its parents group review because it sits inside of our red group so the red group is taking care of our image and I feel like I just went on a huge tangent there but don't worry this is a completely normal practice inside a bubble most applications will have tons of different layers that you need to send data through to but thankfully that is the power of bubble you have the ability to do this so you can create the exact experience that you want now at this point I'm referencing the review itself from my repeating group and of course I now have the ability to pull information from all of my data fields and in this case I'd like to reference the creator of each view because whenever something is created in your database bubble's automatically going to detect which user created that so in this case I want to reference the creator of this review which is a user and because I'm now referencing a user I can pull any of the data fields under our user data type and in this case I want to pull the profile photo now just another personal preference of mine is that when I'm working with Dynamic images I like to process these with IMX just so I can take that option to resize and 50 Dimensions by cropping them which just makes sure that the image expands out and takes up all of the space inside of the image I'm then going to choose to close this here that's all we'll need to change for our data source but while we're working on this image I'm just going to give it a solid border because if I was to click away you can't actually really see where the image sits in our page so I'm going to select on the image scroll on down to my styling here and attach the style because I'm going to create a oneoff style for this image I'm going to add a solid border around it and I'm going to set the roundness of its borders to be 100 so that way it becomes a perfect circle so you can really start to see where this image is going to sit on our page but at this point in time it's quite large so in order to change the size of that we'll need to jump over to our layout tab here and for the dimensions of this image I'm going to update the width to be 50 pixels and look I am going to keep this as a fixed value because at any given point in time I only want this image to be this exact width I don't want it to expand or contract based on the size of my page I only ever want it to be this size here I'm also going to tick this option to keep this elements aspect ratio fixed at a 1: one ratio which just means that it's now going to be 50 pixels by 50 pixels so it is a perfect square and then finally I'm just going to make sure that this group is vertically aligned in the center of my red Group which just means that when I add some text in beside this it's going to be perfectly centered with it and from here that's everything we needed to add for this image so what we can now do is add in the name of the person that created this review so if we head to our visual elements I'm going to grab a text element here I'm going to add this into my red group and if I insert Dynamic data I'm just going to reference the parent group's review the creator of that review their name this field is super straightforward then from here if I scroll on down to my styling I'm just going to detach the default style of this because I'd like to update the font size to be 16 and I'm also going to choose to bold this text here here we'll then need to make this element fully responsive inside of our red group so if we jump to our layout tab you've probably guessed it but I'm going to unselect that this should be a fixed width I'll set the minimum width to be zero and leave the maximum width is infinite for the height I'll do the exact same thing here I'll also then vertically align this text element in the center of my red group and then just add in 10 pixels of margin on the left so that way this text element doesn't directly touch the image element that sits beside it and now that is everything we needed to add into our red group here so I'm going to select on the overall red group I'm going to jump to my layout tab and I'm now going to set the minimum height to be zero just to ensure that it will collapse around all of the elements that sit inside of it but the other thing I'd like to do is add some margins around this group because right now it's directly touching the border of my tile whereas as you can see there's some space around this in the real world Yelp product so if we jump back into bubble here what I'm going to do is just set the top the left and the right margins to all be 10 and that is everything we'll need to create here now thankfully all of the additional elements we're going to add into our main tile here don't require us to add another group with a container layout that's a row but the next element I'd like to add in is just going to be an image element which just displays the actual image that someone has uploaded to their review and so what we're going to do is head to our visual elements I'm going to grab an image I'll add this into to our white group and for this image what we're going to do is insert Dynamic data and we're going to reference the parent groups review but if you remember the images weren't stored directly inside of our reviews if I quickly just digress and open up my data tab you might remember that when we built out our database we had our main review data type which just stored all of the lightweight information but then we had this dedicated satellite data type known as the review satellite and this is where we we're going to store the larger files so all of the images for a review and then of course under our main review data type we had a data field which was connected to our satellite data type so in order to reference all of the images here stored for a review what we need to do is jump over to our design Tab and for the parent groups review we need to reference the satellite data type here and all of the images within that satellite and now this is going to raise a another point that I need to make and that is that if you remember under our review satellite this images field here was a list of images so it's not just one image but someone could upload as many images as they would like and if we open the real world Yelp product you'll see this firsthand so in this review here someone's just uploaded one image but when someone uploaded multiple images it displays these as tiles of their own so what we need to do today is create some sort of way to recognize when someone uploads just one image and another way to recognize when someone uploads multiple images in which case if they've uploaded one image I just want to display the one image and if they've uploaded multiple we're going to create a list of all of those images so the first thing I'm going to do in my bubble editor here under our image that we just added which is only able to display one image is that I'm going to select the more option and I'm going to display the first item within this list now if someone's only up loaded one image to their review there will only be one item in that list so we're displaying the first and only item here but as I mentioned if someone's uploaded multiple images I actually want to display a repeating group with a list of images inside of it not just one image so how can we do this what we can do is quickly just jump to our layout tab and what you'll notice is that right at the top we have this option checked by default which just makes this element visible on page load so as soon as this page is loaded this element will always be shown what I'm going to do is actually uncheck that which now means that it will be hidden by default I'm also going to choose this option to collapse this element when it's hidden which just means that it's not going to take up any empty space when it's not being shown because if you don't check this option and this element's not being shown it's still just going to take up all of this space on our page so this's just going to be a huge Blank Space which is not a good user experience so now by default this element is hidden and not visible so where I'm getting at here is what I'd like to do is create some sort of way to recognize that if this review only has one image I'd like this image element to be displayed whereas if that review has multiple images I don't want this image element to be displayed instead what I'm going to do is add a repeating group of images and display that instead so if I jump over to my conditional tab here conditions is yet another core concept that I'm going to introduce and in bubble they're a really powerful feature conditions allow you to recognize when certain behavior is met and then you can change how your application looks and functions based on that and so what I want to do today is just create a condition that's going to recognize if a review has at least one image because of course not everyone's going to upload an image for a review what I'd like to do is display this image here but if that same review has more than one image so two images I won't want this to be displayed instead as I mentioned I'm going to add a repeating Group which will display a list of images so what I'm going to do is reference the parent groups review when it's satellite data type and the list of images stored within that data type when the count of those images so how many images are stored for this review is greater than the number zero and when the number of images is less than two meaning there is only one image for this review so in order to do that I'm going to reference the parent groups review Once Again the satellite data type its images and I'm going to recognize when the count of these images is less than and I'm going to type in the number two here and this is where things can start to get a little bit complex if you don't have any technical experience so what you've done right now is essentially just written out a piece of code and I know it might not look like it because you just use plain English but this right here is a very powerful piece of code what you've done is you've just told bubble that when there is at least more than zero images but no more than two what we'd like to do is change the behavior of this image element and in this case I'm going to recognize that this element should now be visible and tick that that should be true so just to reiterate if you remember from our layout tab this element is no longer visible when the page is loaded but it will only now be visible when this condition here is true and so that is the power of bubble this will dynamically change based on whatever review is published now after building that condition out we of course do just need to make this element fully responsive and update the dimensions of it like any other element so I'm just going to jump to my appearance tab here and I'm just going to quickly scroll on down to my styling and detach the default style of this just because I'd like to give this a solid border then from here I'm going to jump to my layout tab and make this image fully responsive so I'm going to unselect that there should be a fixed width I'll set the minimum width to be zero leaving the maximum width is infinite and what I can see here is that for some reason it's stacking horizontally with my red group and I think I have a suspicion why if I select on the tile Group which contains both of these elements I can see that I've accidentally set the layout to be a row this should be a column so now they will stack on top of each other and if I then select on my image once again what I'm going to do is move this to the next position within my group so that way it's stacked below my red group and for the dimensions of this image although it is fully responsive I'm just going to tick this option to keep this element aspect ratio fixed and if I set this as a 2:1 ratio what this means is that the height is automatically going to change based on the size of the width so right now the width should be twice the size of my height so it's going to create a perfect rectangle and then finally what we're going to do is just add 10 pixels of margin around the top the left and the right of this element and that's just going to ensure that it won't touch the borders of my repeating group now something else I should point out is that if you remember this image element is not visible on page load so if I as to refresh my page right now what you'll notice is that you can't actually see the image element inside of here and that's because that is actually how it should behave but if you ever want to display this image element all you need to do is head up to the top of your elements tree here and if you've got this option selected to show all of your hidden elements you'll be able to tick this little eye icon next to the image itself and it will now be displayed and look you can toggle this on and off based on if you want to view it inside of your editor now from here inside of our group which looks like the tile which is of course displaying a review we've learned how we can actually display just one image but what happens if someone uploads multiple images to that review as I previously alluded to what we're going to need to do is add a repeating group into this tile group and that repeating group is going to display a list of images and similar to our main image here it's going to be hidden by default and it's only going to be displayed if someone uploads more than one image and so let's start that process so if we scroll on down to our containers we're going to add a repeating group inside of our tile group and just when you thought it was complex to add in all of these different layers right now we have a repeating group that sits inside of a group which sits inside of another repeating group so we've got layers upon layers right now but it's going to help us create the exact experience we want now in inside of this repeating group and I should say the reason why I'm adding a repeating group is of course because I want to display a list of items but for this repeating group I just want to display a list of images so for the type of content I'm not actually going to set this to be a data type because what I want actually do is just display a list of images now traditionally with a repeating group you will reference a data type but in this use case as I mentioned we're just going to scroll on down to our basic types Tab and we're just going to reference an image here and the reason for that is because when it comes to the data source bubble's going to need to know which list of images it should display inside of this repeating group and for this data source I want to reference all of the images stored within the review satellite data type so for my data source I'm going to reference the parent groups review I'm going to select the satellite data type which is the connection to my separate data type and then within that separate data type I'm going to reference all of the images there and so right now it's going to display a long list of images now for this repeating group similar to before what we're going to do is unselect that there should be a fixed number of rows and unselect that this should be a fixed number of columns because I don't just want to display four Images I want to display as many as there are so if there's two images it will display two if there's 10 images it will display 10 the only other thing that I do want to change when it comes to this repeating group is something that we haven't touched base on yet because we haven't needed to but that is the scr roll direction of this repeating group so if this repeating group is displaying a long list of items in order to see all of those items you're going to need to scroll through that list kind of like how you would scroll through the feed on your Instagram homepage Now by default the scroll direction of every repeating group is set to be vertical so that way you scroll up and down it however when it comes to the scroll direction of this repeating group this will be one of the few instances where I'm going to set the scroll direction to be horizontal now this isn't something that I do quite often but what this now means is that our repeating group is going to allow us to swipe across to view all of the images and so what that'll allow us to do is make sure that we don't take up a whole bunch of vertical space that we don't need to display all of these images and look when we run a preview of our app later on it'll make perfect sense but for this repeating group we're going to set the scroll direction to be horizontal now for the minimum height and width of each cell in our repeating group I don't really need these images to be very large because if we're display multiple images I don't want them to take up as much space as our single image I want them to be smaller kind of tiles similar to the real world Yelp product you can see that these images here are about half the size of the main single image so what I'm going to do is actually just leave these settings here as they are now of course later on if I ever need to change these I can come back and update these settings as I mentioned before the process of creating a repeating group is just a matter of trial and error so we'll we leave these as they are and we'll see how we go but what I would like to do is also jump over to my layout tab and update the responsive settings of this repeating group and so if I head to my width here I'm going to unselect that this should be a fixed width I'll set the minimum width to be zero and I'll leave the maximum width is infinite so that way it takes up as little or as much space as it can inside of my overall group for the container layout it doesn't really matter if I select from a row or a column because I'm only going to add one element into our repeating group and that's just going to be the image itself and so because we're not snacking multiple elements on top of each other it doesn't matter if you select from a row or a column I am going to just select a row today though but again if you wanted to choose a column that's completely fine and while we're in our layout tab I'm also just going to scroll on down to my margins and just add 10 pixels of margin at the top 10 on the left and 10 on the right and for the height we will come back and update that in a moment but before I do that I just want to add my image element into my repeating group so if I was to scroll on up to my visual elements I'm going to grab an image I'll add this into the first cell of my repeating group and when it comes to the data source of this image I'm going to insert Dynamic data and I'm just going to reference the current cells image and because this is a dynamic image I'm going to choose to process this with mxs so that way I can tick this option like always to resize and fit the dimensions by cropping them and then going to choose to close this here and for this image while we're working on it inside of our bubble editor I'm going to scroll on down to my style and just attach the default style because what I'd like to do is add a solid border around it so that way I can see where it clearly sits on my page so for the Border style I'm going to make this a solid border I'll then jump over to my layout tab and we can determine what size we want this image to be now I personally think that about 200 pixels in width is going to be the right dimension for this image so I'm going to set my width to be 200 and I'm going to leave this as a fixed value so that way it will only ever be 200 pixels it's not going to be fully responsive like the image above it here but what this means is that if our page ever has more than 200 pixels it can start to display the next image beside this and of course a user can swipe through these horizontally if they want to view that image what I'm also going to do is Tick this option to keep this elements aspect ratio fixed at a 1:1 ratio so that way it will become a perfect square that is 200 pixels by 200 pixels and then finally from here I'm just going to add 5 pixels of margin on the left and five on the right and that's just going to ensure that my images won't touch each other but there's not going to be a whole lot of space between them so they're going to be quite close there I'm not going to add any margins at the top or the bottom though this is all I need to do for now but look as you can see when it comes to this repeating group The formatting isn't quite right so after adding our image element into the first cell we can select on our repeating group jump to our layout tab and now we can update the height of this now when you're working with a repeating group that's horizontal scrolling you need to remember that it doesn't need to expand down because it's not going to display a long list of images vertically down our page instead it's going to display them horizontally across our page so for the height of this repeating group it can always stay the exact same value because it's not going to expand down so what I'm going to do is make the height of this the exact same height as our image the width of this image was 200 pixels and it had an aspect ratio that was 1 1 so the height was also 200 pixels so when it comes to the minimum height I'm going to set this to be 200 pixels and what you'll now see is that it's the exact same height as our image and because I don't ever want this height to change I'm going to tick this option to make this element a fixed height so right now it will only ever be 200 pixels and that's completely fine because we only ever need to add this image into it and to be honest that's all we need to change when it comes to the configuration of this repeating group so the way this this is going to work is that you'll clearly be able to see the first image and then beside this you'll see half of the second image which will just prompt a user to continually swipe through and view all of those images there now the other thing I should point out is that under our appearance tab when it came to the minimum height and the minimum width of each column it turns out that we actually didn't really need to change this so these are both minimum values which just means that if the repeating group cell needed to expand Beyond 100 pixels by 100 pixels it was able to do that so we actually don't need to change these settings here we can leave it as is the only other thing we'll need to do with this repeating group though is just add a very similar condition to our first image element which will just determine when this repeating group should be displayed because we only want to display it when this review has more than one image uploaded to it so the first thing we'll do is jump over to our layout tab and we're going to unselect this option to make this element visible on page load which now means it's going to be hidden by default I'm also going to tick this option to collapse this element when it's hidden which just means that when it's not being shown it's not going to take up any empty space on my page I'll then jump over to my conditional Tab and I'm going to define a condition which is going to be very similar to the condition that we built out on our very first image here and so if we select on our repeating group what I'm going to do is just recognize when the parent groups review when the satellite data type when it's list of images within that data type when the count of how many images have been uploaded is in fact greater than one what I'd like to do is Select that this element is visible and tick that that should be true so in fact this condition was much easier to create than our first condition so right now if there's no images that have been uploaded this repeating group won't display if there's one image that's been uploaded it's still won't display but if there's any more than one image so two images or more this repeating group will be displayed and of course our first image will not be displayed because it's only showing when the count of images is less than two so that's everything we needed to build out for that repeating group and look I feel like I've really done you dirty here on our very first module for this course today because there is so much that we had to factor in here I show you that most of my tutorials aren't normally this difficult but when we're building our homepage I really wanted to try and get it right so that's why I wanted to go into this much detail below this repeating group though what i' like to do is just add in the name of the business in which this review was published for so what we can do is head to our visual elements I'm going to grab a text element and I'll just need to add this in our main group but please just be cautious that you don't add it into your repeating group because if you do that what you'll find is that it'll break the formatting of your repeating group here so I'm going to select on this text element that I've just added into my tile group and for this text element I'd like it to display the name of the business that this review was published for so I'm going to to insert Dynamic data and I'm just going to reference the parent groups review which if you remember this data field is linked to our listing data type so I'm going to select on this here and then I'm going to reference the name of that business there if we then scroll on down to our styling I'm going to detach the default style I'd like to update the font size to be 16 I'd also like to bold this text then we'll need to make this fully responsive and move this down so it sits below our repeating group so if we jump to our layout t we can first of all move this to the next position within my overall group I'll also make this fully responsive so as you might have guessed I'm going to unselect that this should be a fixed width we'll set the minimum width to zero we'll leave the maximum width as infinite and then we'll do the exact same thing for the height so if I set the minimum height to zero it will collapse around all of the text inside of it finally I'll also add 10 pixels of margin at the top 10 on the left and 10 on the right just to ensure that this text element doesn't touch the borders of my group group now we're almost getting to the end of the process of building out this group there are just a few more elements that we need to add in and the next element is just going to be the actual star rating that someone has given for this review now in order to display a series of stars we don't actually have an element that allows us to do that so what we're going to need to do is install a free plugin built by Bubble which will allow us to create that exact experience so if we jump over to our plugins tab here we're going to add a new plugin which will open up our plugin library and if you just type in the word star you'll see this free plugin built by Bubble which is known as the bootstrap star rating input I'm going to choose to install this here I'll then close our plug-in Library jump back to our design Tab and if we scroll all the way down to our input forms and if I just move my head out of the way right at the bottom you'll see this option to reference a star rating input field and I'd like to add this within my group so once I've added that in I'll just move my head back over what you you'll see is that this displays a series of stars and this is actually an input field which we're going to use later on when users want to give a star rating to a review and I think that perhaps the best way to illustrate how this works is by just moving this outside of my group for the time being please don't do this yourself but I just want to run a quick preview of my homepage here so you can see how this input field functions so when you hover over this it's going to allow you to add a review and when you click on this it'll save that star rate that you added now the benefit to an input field is that you can choose to display a dynamic value inside of it and in this case today I'd like to show the star rating that was given for each individual review so if I drag my star rating back into my group here what I'm interested in changing is the value known as the initial content field so the initial content is like the dynamic data source for an image only when you're working with inputs like text inputs or a number input put like this star rating it's called initial content it just means that it's going to grab an initial value stored within your database and in this case I want to set the initial content here to be the parent groups review its rating which was a number value so if the rating was four this input field will color in four stars if the rating was five it'll color in five stars now while we're here I'm also just going to quickly update the star size here to be xxs just so that way it doesn't take up as much space inside of my group grou I'm then going to jump to my layout tab move this to the last position inside of my group and one thing I should point out is that when you're working with this star rating input field it currently doesn't have the options to make it fully responsive so unfortunately you have to set a static width and a static height you can't do let's say for instance set the minimum width to be zero and the maximum width to be infinite you just have to change these manually and look I'm not too concerned about the width but for the height I can see that I have a whole bunch of empty space below my stars there so I'm just going to update the height here to be 30 pixels then from here I'm also going to add 10 pixels of margin at the top 10 on the left and 10 on the right so that way when I click away this sits in line with all of my existing elements inside of my group and look finally there is one very last field that I need to add into my group and that is the actual content of the review so the message that someone has typed inside of that review and so if I scroll all the way up to my visual elements I'm going to grab a text element I'll add this into my group grou and if I insert Dynamic data I'd like to reference the parent group's review the message of that review now something I should also point out is that if someone types A Very Long review let's say we had a Karen who went into a restaurant and they didn't get their way and they wanted to speak to the manager but they're still not happy about it so they decided to go and Yelp and tell the world their thoughts and they want to write a short 1,000w description about how appalling the service was I'm going to be real with you I don't want to display all of the 1,000 words all I'm interested in doing is displaying the first 100 characters of this review and if someone ever wants to review the full contents of that review they could go to the actual listing page for that business and see the full message there but on a homepage I just want to display a shortened version of it and so what I'm going to do is scroll on down after I've selected the more option and choose this option here known as truncated 2 what truncating means is that it's just going to cut it off at a certain point after a certain number of characters and that number of characters is going to be 100 so at 100 characters it's going to cut this text off and if I just click into this field I'm just going to add some static text which is three dots so that way it just indicates to someone that they're going to need to select on this actual listing to take a look at the full review now that's everything I need to change when it comes to the value of this text I'm also not going to make any changes to the default styling I'm quite happy with how it is however I am just going to jump over to my layout tab and make this fully responsive but before I do that I'm just going to move this to the last position within my group I'm going to then unselect that this should be a fixed width I'll set the minimum width to be zero leave the maximum width is infinite I'll set the minimum height to be zero so that way it collapses around all of the text and of course because it has a maximum height of infinite if this review was quite long let's say it took up the 4 100 characters this text element would just continually expand down and fit all of those into it and finally I'm going to add 10 pixels of margin around every single border here including the bottom because this is the very last element I'd like to add into my tile Group which means I can then select on the tile group itself so this is my group review and what I'm going to do is open up my layout tab and now set the minimum height to be zero just to ensure that it will collapse around all of my Elements which it already will but I just want to ensure best practice and then after we finished configuring this group we can select on our overall repeating group here and do the exact same thing so if I select on my layout tab I'm going to set the minimum height to be zero and that will just ensure that it collapses around the group that sits inside of it and then finally while we're here what I'm going to do is just add some margin around the borders of this repeating group so I'm going to add 20 pixels of margin at the top I'll add 50 on the bottom because this is the very last element I'm going to add onto my page and then 20 pixels of margin on the left and 20 on the right and if I just close my property editor that's going to ensure that it doesn't touch the borders of my page there so you can now see how this repeating group has come together however there's one last setting that we just need to change and that is the responsive design for this repeating group so if I was to jump over to my responsive tab what you'll see is that on a desktop this repeating group is automatically going to expand out and display as many reviews as we can across our page and they'll also expand down so that way it will display the full 12 reviews that we want as the page decreases in size it's going to do the exact same thing so you can see that this is fully responsive but one thing I should point out is that at the smallest possible device size which is 320 pixels here so when I click on this it's going to collapse it to the smallest possible size someone could view your app on and 320 pixels for reference is the size of something like an iPhone 5 so if you're still stuck in the Stone Age and you have an iPhone 5 and somehow it's still functional this is how the app is going to look like for you and as you can see our text here is slight being cut off so it's not fully responsive something I should point out is that if you're on something like an iPhone 12 14 or even 15 you'll find that your screen size is more around the 380 to 440 Mark so it's much larger so in reality it's going to be about this size here so it will look nice on that phone but let's just make sure we cater a responsive experience for everyone so right now at the smallest possible size we need to factor in for 320 pixels and if I double click on my repeating group you might remember that in our appearance tab here the minimum width of each column so for our whole repeating group from side to side is going to take up 300 pixels which is in fact less than 320 pixels so why is this repeating group still getting cut off if it's less than the value of the page width something that you need to factor in is although the width of our repeating group column 300 pixels we have 20 pixels of margin on each side so 300 + 20 + 20 is actually 340 pixels so we're now over the threshold here for the responsive mobile device so what we need to do is get 320 pixels and subtract 20 and then subtract another 20 which would take us to 280 pixels and so if I set the minimum width of this column to be 280 pixels what you'll now see is that we have a perfect responsive experience because 280 + 20 + 20 is 320 pixels right on the money so now we truly do have a fully responsive experience across any device size you could imagine and just like that that is the last thing we'll need to change when it comes to the reviews that I want to display here I know there was so much to cover within this experience particularly when it came to adding repeating groups onto your page and look we didn't just create one we added two repeating groups of course with that list of images so please don't stress if this was a lot to take in I mean my voice is starting to hurt from having to talk so much but just when you thought we were done there's still one last thing that I need to cover on this homage and that is how we can create that rotating experience between the featured listings within our hero section of our page so if we jump back into Yelp here and scroll up to the top as you'll see these images rotate every let's say 5 Seconds between a different listing type so what I'm going to do is jump back into bubble here and I'm going to explain how we can create that experience because if I was to double click on this red group here what you'll remember is that we're only displaying the first item from our list of featured listings in our database whereas today I did promise that we were going to display the first three and they were going to rotate and so to summarize how we're going to do this the first thing I'd like to do is quickly just digress and jump back to my data Tab and open up our listing data type and once again just highlight this field here known as is featured so in your database when whenever you create something you can open up your app data and you'll find all of the entries that have been created in your database inside of this table here now currently I have nothing because of course we haven't built out the feature to create a listing but later on throughout our tutorial I'll show you how you can manually make changes to each listing so that way you as the admin can determine which listings should be featured and which listings should not but let's say if you wanted to feature three listings at any given point in time what we'll need to do is jump to our design tab here and of course just remember that right now we're only displaying item number one so if we're performing a search through our database for all of the listings where the is featured status is yes and you've manually updated three of those listings we're only displaying the first item and so what we'll need to do is update which item we're displaying every 5 seconds and to save you having to manually come in and change that yourself every 5 Seconds which is pretty much impossible and borderline psychotic what we're going to do is jump over to our workflow tab here and I realize we haven't actually built out a workflow yet but this is where you can actually build the functionality of your application and bubble and what we're going to do today is add a new workflow by clicking in this and we're going to make a workflow run every 5 seconds and if you really wanted you could change this interval to 3 or 10 seconds it doesn't really matter but I'm going to keep mine at 5 Seconds today so every single time 5 Seconds passes this workflow will run here and what I'd like to do do is update this number so if the number is currently one I want this to update to two if the number is two I want it to update to three and if the number is three I want it to revert back to number one so that way it will rotate between all of the listings and so how can we actually store which specific number I want to display at any given point in time so it should be number one two or three what we can use is another powerful feature in bubble known as a custom State and custom states are normally a slightly more advanced feature but for our use case today it's going to be super straightforward and given how much jargon just came out of my mouth in the last 5 seconds I'm sure you're overwhelmed right now so what I'm going to do is give you a more simplified version in bubble we obviously have a database which allows us to store information on a server which we can pull out and extract at any given point in time but what happens if we just want to store some temporary information on our page that we don't need to store in our database and what's a good example of that let's say for instance we just want to store a count on our page of which number of image should be displayed so should it be image one image 2 or image three what I'd like to do is just store a number on my page which determines which number of image is currently being shown and because I'm just storing three numbers I don't really need to store that in my database because it's not really related to any of my users and so this is the power of custom States custom states allow you to temporarily store information on a page inside of your app so you don't need to store it in your database on a server and as I mentioned custom States can be a more advanced feature inside a bubble but today I'm going to keep it super straightforward so if we just double click on our page here so our white page which is known as our index element what you might notice is that in the top right hand corner we have this little information icon and if I click on this it's going to open up what I refer to as the gates of nania so this is like when you walk into the cupboard and you discover a whole new world and this is because on our overall index page we're now going to be able to create a custom State and when I click on this it's going to look very much the same as when we created a data field in our database and that's because we essentially are we're just creating a temporary value that stores in our page and what do I mean by temporary with custom States if you have a value stored in the page and then you refresh the page the value in that custom state will also be reset and lost and that is the main difference between a custom State and a database when you store information in your database it's always there when you store information in a custom State it's only temporary and both options have their own benefits and drawbacks but today we just need a custom State and so when it comes to this state I'm going to call this the featured number I can see it just has a small typo there and for this state type I'm going to set this as a number and what I mean by featured number is that of the three featured listings in my hero Group which number of listing do I want to display will it be number one two or three and so that's why I'm going to store this as a number and what you'll now see is that similar to a data field we can also give this a default value so I'm going to set the default value here to be one so that way as soon as the page is loaded I'd like to reference listing number one then if we jump back into our workflow tab what we can do whenever this workflow runs every 5 seconds is update the number in which we're storing in our custom state so if I just add a step here and type in the word State I can set the state of an element the element will be my index page and the custom state will of course be our featured number then from here what I'd like to do is take the existing number which by default is one and I'd like to add to that another one so I'm going to reference the existing number stored in our index page so if I scroll on down I'm going to reference the index page it's current featured number and I'm going to plus to that that the number one so I'm going to type in one there so that means that if the state is currently one it will then make it two and if the state is currently two it will then make it three but what we need to do is also make sure that when the state is three it doesn't go up to four instead it goes back down to one so how can we do that what I'd like to do is add an additional step within my workflow here and I'm going to do the exact same thing as before so I'm going to set the state of an element and the element will be my index page the custom state will be my featured number and in this case what I'm going to do is actually just set the value of this state to be one so it's going to reset that value but I don't want this step of my workflow to run all the time instead I only want it to run when the current state number is three so that way it resets it to one so what I can do is add a condition on this workflow which is just going to recognize when the value of my featured number is in fact three it should actually just reset it back to one so I'm going to add a condition here on this workflow step and only allow this to run when the index page When It's featured number is in fact number three then what this is going to do is set it back to one but this also then raises another point and that is if I open up the first step of my workflow here right now this is always going to add one to the number within my featured number and as I mentioned before I only want this to add an additional number provided that the number is not three so if it's one or two go ahead add another number to it but the second that featured number becomes three I want it to stop and then this workflow should kick in and reset the value to be one so this is going to be like a little cycle in a way or a loop so what I need to do is Select my first workflow step and I'm only going to allow this to run when the index page when the featured number which is my custom State stored in that is not the number three in in which case this will then proceed to run now I know all of this was confusing but I'm sure you probably asked the question right now what do any of these featured numbers have to do with the actual listing that we're showing so if I jump back to my design Tab and double click on my red group here so my group listing you might of course remember that we were displaying the first item within our database here whereas what I'd like to do now with this number is instead of having this as a static value so I've just typed in the number one which which means this will always be number one what I could do is reference the current featured number stored within the custom State on my page so if I just remove the static value here what I'm going to do is scroll on down and reference my index page and the featured number stored in that custom state which is now going to be dynamic it's going to constantly change so that means every 5 Seconds the data source here for this listing will update which means that the text here which is referencing the business name of this listing is also going to update and if you also set the background style to be an image similar to the text it's going to reference the featured image of that listing and so that is how we can create that rotational feature to toggle between these three different featured listings Now by all means you don't need to capit at three if you wanted to have five featured listings you could do that you just need to update all the workflows so that way you're only setting the state up to the number five not to the number three but another really important thing I should point out is that although this feature is quite cool please just trade cautiously when it comes to this workflow here so in bubble the way in which you're charged as a user of bubble is known bi a metric known as workflow units so every single time you run a workflow it uses up a little bit of your allowance within your account as to how many workflows you can run and look when you're on a free account you're obviously not going to get as much as you would on a paid account but because this workflow is going to run every single 5 seconds it's just going to chew up a lot of your workflow usage so please just be weary that although this feature is technically possible to create in bubble sometimes it might just be best to display one feat listing on your homepage instead of allowing them to rotate now the other thing I should point out is that if you ever want to disable this workflow you can click on the workflow trigger here and if you tick this option it'll just disable this workflow so if you run a preview of your app it won't rotate between all of the different options but if you want to put this back into usage you could uncheck that and as you can see it will now allow it to run now at this point I've been talking for what it feels like an absolute short Lifetime and I apologize that I've rambled on for so long but when it comes to the design page of our Yelp clone I really wanted to get this right so I tried to spare absolutely no detail and as I mentioned before if you're brand new to Bubble it wouldn't surprise me if everything I've just said Has Gone straight over your head that is completely fine there's a lot of technical information that I just threw right at you here so if you found yourself getting confused please take the time to pause this tutorial and rewatch any sections I really want to make sure you understand all of these Core Concepts that have just introduced before we move on to the next section of our course for the time being though what I'm going to do is just jump back into my notion checklist and we can finally tick off that we finished designing the homepage of our Yelp clone and this is really going to be one of the core pages that users interact with within your app today as we work our way through the checklist of items here the next thing I want to focus on is kind of like an extension of our homepage and that is building the navigation menu which is going to allow users to jump between all of the different pages that we create inside of our Yelp clone today now a navigation menu is essential for any app that you create so you can take what we learned today within this lesson and apply it to any application you build in the future now if we were to jump over to the real world Yelp product the first thing you'll notice about this navigation menu is that it's kind of broken down into a couple of different sections over in the left section we've got the Yelp logo as well as this search feature and then over on the right section we've got the users profile photo which when clicked will send them through to something like a settings page now of course this profile photo is being displayed because I'm currently logged in but if I was to log myself out what you'd see instead of this profile photo is a couple of different buttons that prompt me to either log into my account or sign up a new account and so when it comes to the process of rebuilding this entire navigation menu what we're going to do is jump over into our bubble editor and now of course when you're creating a navigation menu as you just saw all of the elements were stacked horizontally across your page so in theory if we were building this out all we'd need to do is add a group element onto our page set its container layout to be a row and then we could easily just add all of the elements we need inside of it but today we're going to go one step step further than that and we're not going to add just a standard group onto our homepage here instead we're going to create what's known as a reusable element and if you are brand new to Bubble the concept of a reusable element probably just sounds like another foreign language but don't stress it's a super straightforward feature and so what is a reusable element as the name would suggest a reusable element is an element that you can create once and reuse across any page in your app so in theory today if I was to build out my navigation menu on my homepage as I mentioned you would add a group to the page move it to the top of the page you'd set its container layout to be a row and you'd let it take up the full width of your page now while we could easily do that here on our index page if we then want to add the navigation menu to any other page in the future we're going to have to rebuild it from scratch every single time and even if we were able to copy and paste this element across if we ever wanted to make a minor tweak to the actual navigation menu you'd have to also go to every single page that uses a navigation menu and also make that tweak there as well so it's going to be very timec consuming and complex to keep up to date with and so this is the benefit of a reusable element a reusable element allows you to build the element once and then you can simply just paste it onto any page and then if you make any changes inside of that reusable element they will automatically be applied to any of the places in which you've referenced that element inside of your app and reusable elements are perfect for navigation menus because across every single page we are going to add a navigation menu and it's going to look pretty much the exact same on every page so what I'm going to do is actually delete this group that I've just added in and we are going to recreate that group but we're going to do it as a reusable element so where can we do this if we were to open up our page dropdown menu here right at the bottom you're going to see this option here to add in a new reusable element so if we were to click this what we'll need need to do is create a new element and I'm going to call this the nav menu I'll choose to create this and what this is going to do is send us through to what looks like a separate page but if you were to double click on this and if we open up our appearance tab what you'll notice is that this is actually an element not a page and so you can choose between whether you want this to be a group a popup or something called a floating group and in this case today we're just going to keep this reusable element as a group and before I build out anything on this group perhaps I should just illustrate how reusable elements will work so let's say if I make a change to the background color and I set this to be red what I could then do is jump back to my index page and if I just move my head out of the way here I can scroll all the way down to the bottom of my elements tree and you'll see I have access to a reusable element and inside that is the nav menu that we've just created so if I was to add this nav menu onto my page as you'll see it's automatically applied any of the changes that I made inside of it so so right now the background color is red if I was to jump back to that nav menu and then update the background color to be let's say green I could then open up my homepage once again and as you'll see it's automatically updated there in real time and so that is the benefit of a reusable element you can build it once and then you can easily just drag it onto any page and look when I'm working in bubble I don't use reusable elements too often it's more or less for things like navigation menus that will always be the same across any page inside of my app so what we're going to do is jump back to the reusable element itself here and we're going to start working on this so I'm just going to quickly revert those changes where I updated the color and because this element is a group what we'll need to do is jump over to our layout tab and first of all update the container layout like we would with any other group so because I'm going to be stacking all of my elements in this horizontally across my page I'm going to set the container layout to be a row and what you'll notice is that when it comes to this layout tab it looks slight slightly different to when you're working with a traditional group on your page and one thing I should actually point out is that when it comes to the minimum and maximum width what you might notice is that this reusable element is automatically responsive because its minimum width is set to zero and its maximum WID is set to infinite so that of course means it's going to take up as little or as much space as it can on my page and if I was to scroll on up to my responsive tab this is what it's going to look like as we expand the browser out or even shrink it but that then the question why is it so small inside of my editor here if I double click on this and open up my layout tab again what you'll see is that we have this value here known as the default Builder width and this is set to 200 pixels and what this value means is that this is just the size of the element as you work with it inside of your bubble editor it doesn't mean that this is going to be the actual size of it when you add it into your app because as we just saw it is fully responsive but just while you're working on it you can set it as a custom s size and so today I'm just going to set this to be 960 and look there's no scientific reason why I selected 960 I normally just think that that's enough space to work with as we build this element out but we will come back in a moment and also update the minimum height because it's quite large but before we do that what I'd like to do is build out both sections of my navigation menu so as I mentioned before on the left hand side I want to add in a Yelp logo as well as a search feature and then on the right hand side I'm going to have things like the user settings and so so in order to break this navigation menu into two different sections what I'm going to do is add two groups inside of this so there'll be a group that sits on the left hand side and a group that sits on the right hand side and so if we scroll on down to our containers menu I'm going to grab a group element here I'll add this into my navigation menu and I'm going to update the title of this first of all to be called group left so that way I know that this is the group that's going to sit on the left hand side of my nav menu I'm also then just going to quickly jump over to my appearance tab to attach the default style of this and give this a flat background color and I'm going to make this a light shade of red so that way I can easily see where this is going to sit inside of my nav menu I'll then jump to my layout tab and I'd like to make this element fully responsive so first of all what I'll need to do is update the container layout and look inside of this group I'm going to be stacking elements side by side so I'm going to need to set the container layout to be a row then from here I will unselect that this should be AIX width I'll set the minimum width to be zero and of course leave the maximum width as infinite so now this will take up as little or as much space as it needs and from here we can start building out all of the elements that will sit inside of this section in our navigation menu and the very first element is going to be a Yelp logo so what I'm going to do is head to my visual elements I'm just going to grab an image I'll add this into my red group and when it comes to this image I'm just going to upload a static image here and that of course will be a Yelp logo and the reason why this is going to be a static image is because this image will never change I don't want it to be dynamic I always want it to be the exact same image and look the image I'll be using today is stored within the Google drive folder that I previously shared with you and it's going to be this clear Yelp logo here so if you wanted to follow along with my tutorial I recommend downloading that because that is the image I'm about to upload as a static image here and once I've uploaded that image I'm going to jump to my layout tab and just update the dimensions of this what I'm going to do is set the width of this image to be 100 pixels and I am going to keep this as a fixed value because I'll only ever want this image to be this exact size no larger and no smaller what I'm also going to do is Tick this option to keep this elements aspect ratio fixed and what this is automatically going to do is fit this to the exact aspect ratio that this image is and so it's going to make it the perfect Dimensions while we're here I'm also going to vertically align line this in the center of my red group and then beside this we can now build out a custom search experience and if we wanted to replicate the real world search experience that Yelp users what we're going to need to do is add two input Fields beside each other here as well as a button so the first input field will allow someone to type in a query and the second input field will allow them to select from a location and by default it's automatically going to pull through the current user's location and it'll most likely be based around their city so what we're going to do is first of all scroll on down to our input forms and we're going to add a standard input field into our red group and this is going to be the input field that allows someone to type in a search query and now when you're working with input Fields the first thing you should always do is update the naming Convention of it so when you've selected on an element inside a bubble at the top of your property editor here you'll see the ability to update the name of an input now when it comes to all of my my elements like my groups to be honest I'm pretty lazy and I don't really update the naming conventions of them but when it comes to input Fields I will always update the names of these and the reason for that is because input Fields store data and information so when you go to create workflows and Link things to your database it's important to know exactly where you've stored that information and by being able to clearly reference an input field it'll make your life so much easier inside a bubble so for this input field today I'm going to call this input search query I'm also then just going to update the placeholder text while we're here so the placeholder text as you can see is just the text that sits inside of this input field until someone actually Clicks in the input field and starts typing something out and so this is just going to display the words search listings dot dot dot and while we're inside of our appearance tab I'm also going to scroll on down to my styling detach the default style and I'm just going to update the background style to be a flat color here and make sure that it's white so that way it really stands out on my page we'll also then jump to my layout tab move this to the next position inside of my red group so that way it sits to the right of my Yelp logo and when it comes to the dimensions of this input field I'm going to update the width here to be 300 pixels just to give someone a little bit of extra space to type in any search query but look I am going to keep the width of this element fixed so it will only ever be 300 pixels and you'll see way I do this later on when we build out a mobile optimized version of our navigation menu but for now I'm just going to keep this as a fixed value I'm not going to make this fully responsive the only other things I'd like to do while we're here is vertically align this in the center of my red group and then I'll also add 30 pixels of margin on the left so that way this input field doesn't directly touch the image beside it then beside this input field I'm going to add yet another and that input field is actually going to be a search box so if I head to my input forms instead of adding a standard input field I'm going to scroll on down and grab a search box and now there is a specific reason why I've selected this element when you're working with this search box what this essentially does is connects to your database so that way you can search for any information that's actually stored inside of your app and look that's not the exact experience I'm going to be using it for today but search boxes have another very powerful feature and that is the ability to update the choices here to be a list of geographic places and what this is automatically going to do is connect this with Google Maps so that way you can search through a list of real world addresses so if someone wants to type in a city or a specific location it will format this in a way that allows you to pull and reference that address from Google Maps so it takes care of all of the heavy lifting for you and so once I've updated the choices style to be Geographic places I'm also going to update the name of this input field to be called search boox search location and instead of adding placeholder text into this field what I'd like to do is give this a default value and so what's the difference between these two values when it comes to placeholder text as I mentioned before this is text that just temporarily sits in your input field until someone actually clicks inside of it and starts typing and then that new text will replace this existing placeholder but when it comes to a default value this is a permanent value that sits in that input field so it doesn't just hover over the top of the input field and look pretty it actually serves a purpose and today what I'd like to do is pull the users location that they're currently based in so what you'll notice is that when I open up the real world Yelp product here and when I opens the page it's already pulled the city in which I live in and this is an experience we can also recreate within our own version here so for the default value what I'm going to do is scroll on down and I'm going to pull data from the current Geographic position position so if someone is viewing our website even if they're not logged in this is going to pull their location and as it stands this is going to pull their exact location so it will pull their actual address that they're currently in which is kind of creepy you don't want to say hey I recognize that you're at this exact coordinates so what we're going to do is actually generalize this and we're going to extract this city from that address so if I choose the option to extract this here what I'm going to pull from this is the city and what I personally found in the past is that this sometimes will actually pull through the suburb but if it doesn't have a suburb it will just generalize that to the city so I'm just going to choose to close that there while we're in our appearance tab I'm going to detach the default style of this and similar to our first input field what I'm going to do is update the background style to be a flat color and I'll leave that as white I'm then going to jump to my layout tab here and move this to the last position within my navigation menu I will similar to before update the width here to be 300 pixels and I will keep that as a fixed value then I'm going to vertically align this in the center of my red group and something that I should just point out is that if I click away here what you can see is that these two input Fields have some rounded edges in the middle so they don't really look like they're just one search field like the real world Yelp product so see how these are all connected so what we're going to need to do is remove the borders around each input field so if I select on my search box here and if I jump to my appearance Tab and just scroll on down I'm going to set the roundness of its borders to be zero then if I click away as you'll see all of the edges are now sharp so these are going to look like they connect perfectly but with my first input field I also need to update the roundness of its borders but I'll only need to update the roundness of its right hand side borders because I'm quite happy for the left hand side to still be curved but for the right hand side I need that to be zero so what I'm going to do is select on this input field and if we head to the borders here what you'll see the option is to Define each border independently and if we click this here it's just going to allow you to update the roundness of each specific border and so when it comes to the top left border I'm going to leave that as five for the top right border I'm going to leave that as zero because that is this border here which connects and then if I scroll on down for the bottom right I will also set that as zero and then for the bottom left this can also be five so now when I click away as you'll see all of these input Fields look like they're connected then finally the very last thing I'll need to add within this group is just a button which has a little search icon inside of it so this is our red button here but this leads to a slight problem and that is when you're working with buttons inside a bubble so if I was to grab a visual element and add a button into my group here buttons allow you to add text inside of them however you can't add an icon inside of a button so if you remember on the real world Yelp product here didn't have any text it just had this little search icon and so right now we're unable to add that search icon into this button so what can we do as an alternative thankfully there is a super simple solution to this and this is to actually create a group instead of a button and so what do I mean by that if I just delete this button here and if I click on my red group so this is the group left which is just like a container that's storing all of my elements inside of it what you might notice is that groups also have another superpower and that is that you can add a workflow whenever a group is clicked and so that means that if we were to get a group and make it look like a button you can also make it function like a button and so what you'll find in bubble is that it's pretty common for developers to make their own custom buttons using group elements not actually use the button element that bubble provides by default So today we're going to create a custom button so if we head to our containers menu we're going to grab yet another group and we're going to going to add this into our existing red group and the first thing I'm going to do here is update the name of this group to be called group search button I'll then just jump to my layout tab and move this to the last position within my red group here and then just jump back to my appearance tab now when it comes to the appearance of this group I'm just going to detach the style of this because I'd like to give it a flat background color and I'm going to make it the same shade of red as my existing button element which I have that color code here and if you'd like it it's F1 A1 a then while we're in our appearance tab here I'm also going to update the roundness of its borders and now if this group sits to the right hand side of this search box I'm only going to want to make the right hand borders round and then the leftand borders will be flat so I'm going to take this option to Define each border independently and I'm only going to update the right hand borders to be five so I'm going to select the top right and the bottom right right and that's all we'll need to change we can then jump over to our layout tab and update the size of this group because right now it's currently huge but before we do that what I'm going to do is update the container layer now inside of this group we're just going to add one element and that will be an icon so it doesn't really matter if you select between a row or a column because we're not actually stacking elements inside of this group we're only adding one element so I'm just going to select the row option here and then when it comes to the size of this button I'm going to set this to be 48 pixs by 48 pixels so I'm going to make it a perfect square and why 48 pixels well if you remember all of my input Fields have a fixed height of 48 pixels and I want this button to be the exact same height as these input Fields so if I selected my group here I'm going to set the width first of all to be 48 pixels and I'll keep that as a fixed value I'll then select that I want to update the height to also be 48 pixels and then I'll tick that this should also be a fixed value so right now it will be 48 pixels by 48 pixels I can then also vertically align this in the center of my main red group and when I click away as you can see we've got what looks like a button but of course we need to add our icon element inside of this so what I'm going to do is scrolling up to my visual elements grab an icon add this into my red group and if I just type in the word search I'm going to add this search icon here and for the icon color I'll set that to be white and then finally if I jump over to my layout tab I'm going to vertically align this in the center of my red group but I'd also like to horizontally align this in the group as well so what I can do is select on the red group and under the container layout I can also update the container alignment so this will determine where all of the elements that sit inside of this group will be positioned and so right now as you can see it's aligned to the left of the group whereas what I'd like to do is just align that in the center and that is how we can create a perfect button element now because that is is the very last element I'd like to add into the left hand side of my menu what I'm going to do is select on my overall red group here jump to my layout tab and I'm just going to Now set the minimum height here to be zero so that way it will collapse around all of the empty space there and then I'm going to do the exact same thing for all of the empty space horizontally here so under our width settings instead of leaving the maximum width as infinite I'm going to take this option to fit the width of this element to the content inside of it and that will now collapse nicely around all of the elements and then finally I'd like to position this entire red group in the center of my navigation menu so I'm going to vertically align this and as you can see when we click away our navigation menu is starting to come to life what I might also do is just add some margin around this red group so if I select on the red group once again I'm just going to add 20 pixels of margin at the top 20 on the bottom and 20 on the left but I won't add any on the right and look that's just going to ensure that it doesn't touch the borders of my nav menu now from here what we can do is build out the elements or the group on the right hand side of my menu but I can see that we're running out of space here and so what I just need to do is expand out the width of this group within my editor so if I double click on my main nav menu group I'm just going to update the default Builder width here to be 12200 pixels not 960 and once again this won't determine the actual size of the element itself it's just going to change the size of it while we edit this element inside of our editor here and so now we have a little bit more space to work with now when it comes to the next section so the section on the right hand side here I'm actually going to build out two different sections there's going to be one section that displays when the user is not logged into an account so if someone visits our Yelp clone and they're not logged in or they haven't signed up an account what I'd like to do is display two buttons one will prompt them to log into an account and the other will prompt them to sign up for an account and then if the user is logged in I'd like to display yet a separate group and that's going to allow someone to view their settings page so it's going to display their profile photo and so the first thing we'll do is build out the experience for when a user is in fact logged out so they don't have an account so what we're going to do is scroll them down to our containers grab another group add this into my main navigation menu and the first thing I'll do is update the name of this group to be called group logged out I'm also then just going to move this to the next position within my nav menu so that way it sits to the far right here I'll then jump to my appearance tab because what I'd like to do is just attach the default style of this and just give this a flat background color for the time being and look I could make this let's say a light shade of purple that will do then from here I'll jump to my layout tab and set the container layout to be a row because inside of this group I'm going to add two elements that will be positioned side by side so they'll be stacked horizontally within my group I'll then also Al unselect that this should be a fixed width and for the time being I'm going to make this fully responsive so I'm going to set the minimum width to be zero leave the maximum width is infinite and look we'll come back and update the height and the margins in a moment but before we do that I'd like to add my two buttons into this group so what I'm going to do is scroll on up to my visual elements and I can just use a standard button for these we don't need to build a custom button because I only want to display text in these buttons not an icon and so for my first button I'm going to have this display the words log in and for this button I don't want this to actually be red instead I just want this to be clear with a white border and so what I'm going to do is actually just update the style here and use the outline button style and if I click away as you'll see this is just a clear button here with a solid border around it but I'm not really interested in having this button be blue so what I'm going to do is actually edit the style of this button itself so if I click on the button again I'm going to choose to edit the style of this outline button because if I ever want to to reference this exact same style again which I probably will through this tutorial it's going to save me having to rebuild the exact same button twice and so what I'm going to do here is first of all update the color of the font to be white when it comes to the background style I'm actually going to leave this as none so that way this button is completely transparent then for the borders I'm going to set the color of this to also be white and I'm also going to update the width of the border to be two so that way it's slightly thicker and then what I'm also going to do is just scroll up to the conditional tab here and I can see that by default it has a condition that when this button is hovered it's going to become this color here and right now it is a shade of blue whereas I'd like this to be a shade of red because of course we're building Yelp so what I'm going to do is update the background color here to be the same red color code that we've previously used and if you'd like that it's F1 A1 a but right now this red makes me want to burn my eyes so what I'm going to do is set the opacity here to be 40 so so that way this is just slightly more discret we can then jump back to our design Tab and what I can see is that I left that condition on so if I quickly just edit my style jump to my conditional Tab and turn that off and then jump back into my design tab this is how our button is going to look and so from here I'm going to select on the button jump to my layout tab and I'm going to set the width of this to be 100 pixels and I'll keep that as a fixed value so this will only ever be 100 pixels and the reason why this is 100 pixels is because we just don't really need so much space inside of this button we're only displaying two small words I'm also going to vertically align this in the center of my purple group and then beside this I'm going to add yet another button so if I head to my visual elements I'll grab another button add this into my purple group and this is just going to display the words sign up I'll jump to my layout tab and I should also just specify that I'm quite happy to leave this as the primary button style but what I want to do on my layout tab here is just move this to the next position and when it comes to the width of this button I'm going to set this to be 120 pixels because it might need a little bit more space than our previous button I'll also vertically align this in the center of my group before I then scroll on down and add 10 pixels of margin on the left so that way these two buttons don't directly touch now that is all of the elements I want to add inside of this group so I'm going to select on the purple group open up my layout tab and I'm now going to set the minimum height to be zero so that way it collapses around those buttons and then I'll do the exact same thing for my width here so right now this group has an infinite maximum width whereas what I'd like to do is take this option to fit the width of this element to the content inside of it and then finally if I vertically align this group in the center of my nav menu it'll sit perfectly in line with my other group and then similar to my other group I just want to add some margins around the borders here so if I scroll on down I'm going to add 20 pixels of margin at the top 20 on the bottom I won't add any on the left this time because what I'd like to do is add it to the right because this group is going to sit to the right hand side of my nav menu which then leads me to my next point and that is right now if I was to close my property editor and click away as you can see these two groups sit directly side by side whereas what I want to happen is I want each group to sit directly on each side of my nav menu so I want there to be some space between these two groups here so how can I do that if I was to double click on my nav menu itself so this is the reusable element and what you might remember is that we have the container layout here set to be a row because we're stacking all of our elements horizontally across the page and when the container layout is in fact set as a row you have the ability to update the horizontal container alignment so right now by default all of the elements that sit inside of this group are aligned to the left so they're all pushing to the left hand side whereas what we could do is Center these push them to the right but instead what I'm interested in doing doing is selecting this last option called space between and what that's going to do is create that exact experience that I just described before where it's going to push each group to either side of the nav menu and add an even amount of space between them and if I was to jump over to my responsive tab here what you'll see is that as we expand the width of our page the groups will always sit on the side of my nav menu so it's going to create a beautiful end user experience the only other thing I should just touch based on when it comes to this group is that as I mentioned before this is the group logged out so I only want this group to be displayed to users who are not logged into an account and if this group isn't being displayed I don't want it to take up any empty space in my nav menu so what I'm going to do is actually head to my layout tab and unselect that this element should be visible on page load which now means that by default it will be hidden 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 empty space and then if I jump over to my conditional tab I'm just going to define a condition that should recognize when this group should in fact be displayed and that is of course when a user is not logged in it should be shown so I'm going to define a condition here and I'm just going to recognize when the current user so that is the person who is using your Yelp application and if I scroll on down I'm going to recognize when they are logged out and in this case what I'd like to do is Select that this element should be visible and tick that that should be true and I can toggle this condition on and off to see what that's going to look like but I'm just going to leave that off for now because what we'll also need to do is build out yet another group and inside of this group it's going to display when a user is logged in so what we need to do is once again add a new group so if we scroll on down to our containers menu we're going to add one last group into my nav menu here and the first thing we'll do with this group is just update the name of this I'm going to call this the group logged in I'll then jump to my appearance tab here detach the default style and if I just scroll on down I'm going to update the background style to be a flat color so that way once again I can see where this is actually going to sit on my page and if I set this color to be green it's very easy to distinguish I'll also then just jump over to my layout tab here I'll update the container layout to be a row because I'm going to be stacking two elements in this side by side I'll then just quickly scroll on down to my WID and make this fully responsive for the time being so I'm going to set the minimum width to be zero and leave the maximum width as infinite and now i' just like to add two elements inside of this group one is going to be a text element which prompts someone to actually add their business listing to Yelp and the other is just going to be the profile photo which when clicked will send someone through to their settings page where they can update the details of their account so for the first element I'm going to scroll on up to my visual elements here I'll grab a text element and add this this in and for this text element I'd like this to display the words add a business and I can see that I just need to add a space in between those two words there and when it comes to this text I'm just going to scroll on down to my styling here detach the default style because what I'd like to do is update the font size to be 16 I'm also going to choose to bold this text and I'd also like to update the font color to be white then from here we'll just need to make this text element fully responsive so if we jump to our layout tab what I'm to do is unselect that there should be a fixed width I'll set the minimum width to be zero and instead of leaving the maximum width as infinite what I'm going to do is take this option to fit the width of this element to the content inside of it and now the reason I'm doing that is because if I was to add in a profile photo so if I was to add an image next to this and let's just say if I quickly just set this image to be 50 pixels and just move this to the next position what you'll see right now is that because the width here is fit to the content inside side of it the image is positioned directly beside the text whereas if I was to unselect this option here what you'll see is that there's going to be all of this space between the image and the text and that's not the experience I want to create I want them to be closely positioned together so what I'm going to quickly do is just delete that image then select back on my text element and tick this option once again I'm also going to set the minimum height to be zero so that way it collapses around all of the text inside of it and then finally I'll vertically align this in this center of my green group and now from here we can add in the users profile photo so once again I am going to grab an image here I'll add this in and for this image instead of uploading a static image I'm actually going to insert a dynamic image because I want to display the profile photo of a user now if you remember in our data tab under our user data type we' already taken the time to upload a default profile photo for a user so that way by default as soon as someone registers an account there will be a profile photo to display but of course if they choose to update their profile photo which we're going to build out on our user settings page in a moment that new profile photo will be the one that's displayed so if we just quickly jump to our design tab I'm going to insert Dynamic data here and I'm going to reference the current user so once again the current user is the person who is currently logged into the app and is viewing Yelp and in this case I just want to display their profile photo and because this is a dynamic image my personal preference as always is to select this option to process an image with mjx so I can resize and fit the dimensions here I'll then choose to close this and if I head on down to my styling I'm just going to detach the default style of this and I'm going to give this a solid border and I'm going to set the roundness of its borders to be 100 so that way I can easily distinguish where this image sits inside of my group and then from here if we jump to our layout tab we can also update the dimensions of this image and in this case I'm going to set the width of this image to be 50 pixs I'm also going to keep this as a fixed value because I only ever want this to be 50 pixels no larger and no smaller I'm also going to tick this option to keep this elements aspect ratio fixed at a 1:1 ratio so that way it becomes a perfect square I'll move it to the next position within my group so it sits to the right of my text I will vertically align this in the center and then finally I'll also add 20 pixels of margin on the left so that way it doesn't directly touch the text beside it then from that is everything I needed to add into this green group so I'm going to select on the green group open up my layout tab and just set the minimum height to be zero so that way it collapses vertically around all of my elements and then I'll need to do the exact same thing for the horizontal space here so I'm going to head to my width settings and I'm going to take this option to fit the width of this element to the content inside of it and then we will vertically align this in the center of our group and if we scroll on down we're just going to add 20 pixels of margin at the top 20 on the bottom none on the left but also 20 on the right now similar to our previous group with the login buttons what I'm going to do is make this group hidden by default and I'm only going to display this when a user is in fact logged into an account so under our layout tab I'm going to unselect that this should be visible on page load I'm also going to take this option to collapse this element when it's hidden but now of course I need to create a condition that's just going to recognize when this should be displayed so if I jump to my conditional tab here I'm going to define a new condition and I'm just going to recognize when the current user and if I scroll on down I'm going to recognize when that user is logged in what I'll do is Select that this element should be visible and tick that that should be true and of course I can toggle this on and off to see what that's going to look like now another thing that we'll need to do right now is just create a separate condition on this text element here so right now by default this text element displays the words out of business and if you remember in our database under our user data type we have a data field known as the account type and this is linked to our option set list so a user can either be a user or a business owner and by default everyone is a user but when someone actually goes through the process of adding their business what we're going to do later on is update their account status to be a business owner and in that case I'll no longer want to display the words out a business because they already would have done that and so what I'd like to do instead is update this text to display something else that's more appropriate so if they've already created a business I'd like to say the words manage your business so what we can do under our conditional tab is just Define a condition and we can just recognize when the current user so once again the person who has logged in and is viewing their own account here when their account type is in fact a business owner what I'm going to do is update this text to display the words manage a business and I can see that I just have a small typo there that I need to fix and you can also toggle this on and off to see what that's going to look like now from here the only other things left to do within our navigation menu is actually build out the workflows that are going to power this experience so whenever someone clicks on any of our elements what I'd like to do is navigate them to the relevant page that they're looking for so if someone was to click on a Yelp logo it's fair to say that I'd like to send them back to our homepage so in order to create that experience what I can do is double click on this image here and choose to add a workflow whenever this image is clicked and within this workflow it's super straightforward all we need to do is head to our navigation events select the go to page action and now we can set the destination page to be the index page which is our homepage so that now means that when someone clicks on this this workflow is going to run and it will send them through to our homepage that's how easy it is now something I also like to do in bubble is actually color cat my workflows so if you select select on the workflow trigger here what you'll see is the option to update the event color and I'm going to set this to be red and today you'll see me update all of my navigation workflows to be red so that way I can just tell that yes whenever I see a red workflow I know that that is sending someone through to a different page I'll then need to jump back to my design Tab and there's two additional workflows I'd like to build out when someone clicks on this text here which is originally add a business what I'm going to want to do is send them through to a page in which they can add their business so if I select on my appearance Tab while I've clicked on this text I'm going to add a workflow here and within this workflow similar to before I'm going to select from the navigation event I'll choose the go to page action and at this point in time our destination page does not yet exist so we're going to need to create that from scratch so I'm going to add a new page here and I'm actually going to call this page the create page because this is where we're going to create a new Yelp listing then from here if I open up my drop down menu I can select that that should be my destination page I'll then select on this workflow and because this is a navigation event I'm going to update the event color here to be red then finally if I jump back to my design tab I can select on my users profile photo and when this is clicked I'd like to send someone through to a settings page where they can update any of their account information so I'm going to choose to add a workflow here once again I'll select from a navigation event choose the go to page action and I'll set the destination page to be the settings page which does not yet exist so we'll need to create a new page and I'll call this the settings page and then I can select that from the drop-down menu here and of course finally I'll select on the workflow trigger and update the event color to be red now something I should point out is that I'm not yet going to build out the workflow that powers our search experience I have a dedicated module today that's going to cover that in full detail but for the time being the only other thing we need to do is just close off all of this empty space within my nav menu so I'm going to double click on my nav menu here I'll open up my layout tab and if I just set the minimum height here to be zero what you'll see is that it's just going to collapse around all of my groups and then finally after building everything in this nav menu it's time to actually add this onto our homepage now when you add this onto your homepage I just want to preface this by saying that at this point in time this navigation menu has a flat background color if you really wanted you could remove that and it would be transparent but for the for the sake of our tutorial while we're working in our editor I'm just going to keep this as a flat color the only reason I say this is because if you open up the real world yel product you'll see that it doesn't have a solid background color on the nav menu itself but if we want to add this navigation menu onto our homepage we can jump to our index page here and it's truly just as simple as dragging our reusable element anywhere onto the page so if I scroll on down I can grab my nav menu and look when it comes to this nav menu I can either add it inside inside of this group here or I can add it on top of my group so I'm going to give you the option but if we look at the real world Yelp product in my opinion the nav menu actually sits inside of the group because as you can see it hovers over the image itself so what I'm going to do is actually add this into my group here and if you had a transparent background at the bottom it would allow you to see the image below the actual nav menu but what you also might need to do is add some additional space here inside of your hero group because right now the nav menu just took up quite a bit of space so if I select on our group listing which is our hero group I could jump to my layout tab and I could set the minimum height to be let's say 500 and that's just going to add more space for my image there now the very last thing I just like to point out is that when it comes to your reusable element here what you'll notice is that when you click on this you can't actually make changes to this element here and that's because if you ever want to change anything inside of this element you're going to need to go back to the reusable element itself and make changes directly within this and of course any changes that are made here will automatically be reflected in real time across any part of your app where you've added this reusable element onto a page but look at this point in time that is everything we need to build out for our nav menu if I was to quickly just run a preview of my app here what you'll see is that because I'm currently logged out in the top right hand corner I'll be shown the options to either log in or sign up for an account because of course I'm not yet logged in and later on we are going to build out the experience that allows us to either sign up an account or log into an existing account but what you'll also see is that my search box has pulled through my current suburb but other than that we don't really have much use for our nav menu right now but as we build out the rest of our Yelp product you'll see how this becomes an essential feature of our application today what I want to do though is just jump back to my notion checklist and tick off that we finished building out all of the steps within our nav menu here so we created all of the individual groups that sit inside of it we added some conditions we built out the workflows and then we just ran through the process of how we could add that onto our homepage working our way through the list of features of my checklist for the sake of our tutorial today I actually just wanted to skip ahead and focus on a really important feature within our overall Yelp clone and that is the ability to create and list a new restaurant within our platform so this is where our users are going to go from a stand Ed user account to someone who owns a restaurant and now there is quite a bit involved within this process but of course I'm going to be sure to explain everything you need to know in as much detail as I can so what we're going to do is jump over into our bubble editor and we can get started over in our editor you may remember that if we open up our page dropdown menu we had previously built out this page called create and we built this when we created our navigation menu because within our top navigation menu there was an option to add a business to Yelp and when that was clicked it would send someone through to this page now at this point in time this page is blank we haven't done anything else to it so of course the first thing we'll need to do is just double click on the page and update the container layout so if we jump to our layout tab here like every other page we're going to set the container layout to be a column so that way we can stack elements from top to bottom and then when it comes to this overall page what I'd like to do is actually just show you the real world experience that Yelp has so that way can get an idea of what we're about to create so if I jump over into Yelp here you'll see this option to add a new business and when I click on this it's going to take me through to a new page so this is the equivalent of our create page and you can see at the top it just has this little navigation menu and then below this what you'll see is that this page is broken down into two separate sections so on the left hand side it's asking you to add in a business name and then on the right hand side it just has this image and so if I was to just add in a business I'm going to call call this test business I'm then going to choose to add this into Yelp then it's going to take us through to our next step of the process where it's going to ask for our email address and I'm just going to say that this is test gmail.com and then when I click continue it's going to ask me for my phone number and so what I'm going to do is add in a phone number here and then when I click continue it's going to take us to our final step here where it's going to ask us for all of our information about this business and so there was quite a few steps involved in this process and as I mentioned we're going to try and replicate as much as we can of this inside a bubble but I must warn you right now there is a little bit involved and there's a couple of new Concepts that I'm going to introduce but of course I'm going to try and make it as easy as possible for you to follow so if we jump into our bubble editor here the first thing I'd like to build out on this page is that top navigation menu that you saw so this is separate from our main navigation menu and it's not really even a navigation menu it's more of just like a title that sits at the top of the page and within that title it just had the Yelp logo followed by the words for business and both of those elements were stacked side by side so what I'm going to need to do is add a group onto my page and set its container layout to be a row and then I can add my two elements inside of that so if I scroll on down to my containers menu I'm going to grab a group here I'll add this onto my page and when it comes to this group I'm just going to update this to be called group menu and if I jump over to my appearance tab I'm going to scroll on down and match the default style of this group because what I'd like to do is give this a solid border and then I'm also going to add a shadow style around this group and set it as the outset option so that's now going to make this group much more distinguishable on my page I'll then jump over to my layout tab and I'll set the container layout to be a row because as I mentioned I'm going to be stacking two elements side by side inside of this group then I'm going to need to make this group fully responsive so of course that means I'm going to need to unselect that this should be a fixed width I'll set the minimum width to be zero and leave the maximum width is infinite and now inside of this group I'm going to add two elements the first will be a Yelp logo so if we just scroll on up I'm going to grab an image element and I'll add it into my group and when it comes to this image I'm just going to upload the Yelp logo that I've included in the Google Drive that I mentioned from our previous modules so if you've taking the time to download that I'd recommend just uploading the Black version of the Yelp logo I'm going to do that right now and once this image is uploaded we're just going to need to update the dimensions of this because right now it is very large so if we jump to our layout tab I'm going to set the width of this image to be 100 pixels and I'm going to leave this as a fixed value so that way this is always 100 pixels no larger and no smaller I'm also going to take this option to keep this elements aspect ratio fixed and by default it's going to set this as the correct aspect ratio for this image then I'm going to vertically align this in the center of my group and then finally just add in 20 pixels of margin at the top the bottom and the left but not on the right then beside this image I'm going to add in some static text so if I jump to my visual elements I'll grab a text element add this into my group and I'll just have this display the words for business and I can see I just made a small typo there that I'll need to fix and then when it comes to this text I'm going to scroll on down and also detach the default style because what I'd like to do is set the font size to be 24 and I'm also going to choose to bold this text we'll then also make this fully responsive so if we jump to our layout tab we can uncheck that this should be a fixed width we'll set the minimum width to zero leave the maximum width is infinite and we'll also do the exact same thing for the height because there's quite a bit of empty space at the bottom of this element so if I set the minimum height to be zero it'll collapse perfectly around that text I'll vertically align this in the center of my group and then finally I'm just going to add 10 pixels of margin on the left and that is all I'll need to change for this text element here now that is all of the elements I'd also like to add into my group here so I can now select on my group open up my layout tab and just head on down to my height here and set the minimum height to be zero and because we have this default option checked to fit the height of this element to the content inside of it it's going to collapse nicely around all of our elements and as you can see that's how we can create that top menu that I mentioned that sits on our create page but of course from here now what I need to do is build out the very first step in our process which is where someone will add the name of their business and as you saw before that was broken down into two separate sections so it was kind of like there was a line in the middle and on the left hand side there was an input field that just asked someone to actually add in the name of their business and then on the right hand side there was like an image or an icon and we're also going to include that within our Bild today and so because we want to break this page down into two separate sections that sit side by side what we're going to need to do is actually add add a group onto my page and set its container layout to be a row so that way I can stack those two elements horizontally across my page so if I scroll on down to my containers menu I'm going to grab a group here and now the first thing I'll do for this group is just update the name of this I'm going to call this group step one because within this group we're going to display step one of the process of creating a new business now as I mentioned when it comes to this group I'm going to set the container layout to be a row and before I update any of the width settings I'm just going to quickly jump over to my appearance Tab and attach the default style of this group because what I'd like to do is set the background style to be a flat color and I could make this a light shade of red so that way I can clearly see where this group will sit on my page I'll also then open up my layout tab again and just unselect that this should be a fixed width and if we want to make this fully responsive of course we're going to need to set the minimum width as zero and leave the maximum width as infinite there now inside of this group I'm going to add two additional groups and these are going to be the two separate sections of my page so I'm going to grab one group here I'll add this in and the first thing I'll do for this group is just jump to my appearance Tab and once again just attach the default style of this so I can give it a flat background color and I'll make this group a shade of blue so that way I can easily see where this sits inside of the overall red group I'll also jump over to my layout tab and when it comes to this group I'm going to set the container layout to be a column because when you think about it inside of this group I'm going to have some text and below that I'm going to have an input field and then a button so all of those elements will be stacked vertically now before I update the responsive settings of this group I also just want to make a quick copy of this and then for our new group here I'm going to jump to my appearance tab because what I'd like to do is update the color of this group so I can easily see where our second part of the page lies and for the color of this I'm actually going to make this a specific shade of gray here and if You' like this color code it's f8 f8 f8 and similar to before in our layout tab the container layout for this group will also be a column now what I'm going to do is make both of these groups responsive so I will unselect that this should be fixed width I'll set the minimum width is zero and leave the maximum width is infinite and then I'll do the exact same thing for our blue group here so when I unselect it that should be a fixed width once again the minimum width will be zero and the maximum width will be infinite and if I close my property editor what you'll now see is that we have two separate sections of our page which is going to create the exact experience that we need today and so what we can now focus on is building at the left hand side of our page so what I'm going to do is grab a text element and I'll add this into my blue group and for this text I'm just going to display the words Hello exclamation mark let's start with your business name and for this text element I want this to look like a large heading so what I'm going to do is scroll on down and attach the default style of this and I'm going to set the font size here to be 24 and I'm also going to choose to bold this and then I'll make this fully responsive inside of this blue group so if I jump to my layout tab of course I will unselect that that should be a fixed width we'll set the minimum width as zero leave the maximum width as infinite we'll also close off all of the empty space in the height of this element so I'm going to set the minimum height to be zero and then finally just going to add 20 pixels of margin at the top 20 on the left and 20 on the right but I won't add any on the bottom then below this text I'm going to add in our first input field which will allow someone to type in the name of their business so if we scroll on down to our input forms I'm going to grab a standard input field I'll add this into my blue group and before I make any changes I'm going to update the name of this to be called input business name so that way when I go to actually create the business I know that this is where we're storing the name name of it the other thing I'd like to do while we're in our appearance tab here is just update the placeholder text I'm going to have this display the words your business name and then I'm going to make this fully responsive so if I jump to my layout tab here I can unselect that this should be a fixed width we'll set the minimum width to be zero leave the maximum width is infinite for the height I'm quite happy to leave this as the default settings and then similar to the text element that sits above it I'm just going to add 20 pixels of margin at the top 20 on the left and 20 on the right and then below this I'm going to add my very last element inside of this group which is just going to be a button so I'm going to scroll on up to my visual elements I'm going to grab a button I'll add this into my blue group and this button will just display the word continue now for this button I'm quite happy to leave the style as the primary button style but I will just jump over to my layout tab and I'm just going to add 20 pixels of March to the top once again 20 on the left and 20 on the right and I'm also quite happy to leave the width and the height settings as the default options right now so I won't need to make any changes there and that is everything that we need to build out inside of our blue group here so what I'm going to do is now select on my blue group and I can now set the minimum height here to be zero but as you can see right now this group is only taking up a small bit of space on my page whereas if you remember the real world Yelp experience the page is evenly broken down the entire height of the page so what I'd like to do is expand this blue group down the entire height so how can I do that if we open up our layout tab for this group under our vertical alignment what you'll see is that this group is currently positioned at the top of our page but if you head over to the far right hand side here you'll see an option known as vertical stretch and what this is going to do is ensure that this group here will stretch down the entire height of our page but of course that is not the case right now it's still only taking up this small amount of height on our page so how can we fix that if I could quickly just revert that change and just temporarily select to align this at the top again I'm just going to be able to see that red Group which is the overall I guess you could say container for our entire page here and if I select on that red group and open up its layout tab what you'll notice is that by default we had this option checked to fit the height of this element to the content inside of it so that means that right now it's collapsing around the height of both of our groups that sit inside of it so if I uncheck this option it's going to have an infinite maximum height so that means that it is now going to expand down the full height of our page regardless of how high that will be and so that's going to help create that experience that I want today so if I then jump back to my blue group here and once again select that I want this vertical alignment to be vertically stretched as you'll now see that's going to take up the entire height of the page so if the Page's height changes at any point in time this will just stretch down and ensure it fits in all of the space now that's everything we need to build out on the left hand side side of our page on the right hand side of our page what I'd like to do is just add in an image so if I head over to my visual elements I'm going to grab an image element and I'll add this into my gray group and when it comes to this image I've already taken the time to upload the asset we're going to use within my Google Drive folder today and this is known as the group one image so if you download that asset as well as the group two image that we're about to use in a moment you can easily follow along so today what I'm going to do is upload the group one image as a static asset here and once I've uploaded this image I'm then going to jump to my layout tab and I'm going to actually make this image fully responsive so I'm going to unselect that this should be a fixed width as you'll see right now because this has an infinite maximum width it's going to stretch and take up as much space as it can so the aspect ratio is a little thrown off here so what I'm actually going to do is Select this option to keep this elements aspect ratio fixed and that will perfectly align it to the correct size and then I'm also going to set the minimum width here to be zero so this image can be as small or as large as it needs to be inside of our second group here and then finally what I'm going to do is just add in 20 pixels of margin at the top the left and the right hand side of this image and that's all we'll need to change the only other thing we'll need to update is if we select on the gray group itself I'd also just like to update its vertical alignment to be the vertical stretch option so that way it takes up the entire height of our page now before we go on to build bu at the next step of the process when we create a business what I just want to do is make sure that this first step of the process is fully responsive so if I was to open up my responsive tab here what you'll notice is that on a desktop device this looks great Everything Is Beautiful it's fully responsive but as we start to reduce the width of our page the page gets a little bit crowded and if we view it on a mobile device it's just not really an ideal user experience so what I'd like to do today is create a responsive experience that actually hides this second group once our page is below a certain width and if I start to reduce the width of my browser here I think it's around about this 700 pixel Mark that I'd like to actually hide this second group and then just have our first group take up the entire width of our page so how can we do that if I just jump back to my UI Builder and double click on our gray group here what I'm going to do is create a condition and I'm just going to recognize when the current page width when the number of pixels is less than 700 what I'm going to do is Select that this element is visible and untick that that should be true so that means that this group would then be hidden but what I'll also need to do is jump over to my layout tab and select this option to collapse this element when it's hidden so that way when this group isn't being shown it doesn't take up any empty space on my page so if I now jump to my responsive tab what you'll see is once again as the pages expanded we've got plenty of space to to display that group but as we reduce the width of our browser below 700 pixels it is hidden and then our entire left group will take up all of the space on our page so that's how we can create a truly responsive experience throughout this process now after building up the first step of the process to creating a business we're going to create the second step and in order to streamline that process we're just going to make a duplicate of this existing group structure that we built today and so what we need to do is access that red grp group that both of these groups sit inside of so in order to do that I'm going to double click on my blue group and if I right click on that blue group again and choose to select its first parent I'm now accessing that red group here because if you remember that was called group step one so what I'm going to do is make a copy of this group and when I paste in a new version here it's going to add this below the very first section of our page and So within our second group all we'll need to do is just swap out the text the input put as well as the actual featured image but before we do any of that what I'd like to do is update the name of this I'm going to call this group step two and if I close my property editor as you can see the page is quite squished here so if I want more space on my page what I could do is head over to my elements tree and if I uncheck this option to only show hidden elements what I could do is select the I icon next to my group step one and that would actually hide that but as you can see when this group is Now hidden it's still taking up all of this empty space on my page so that means that I'm going to need to display this again and I'm going to need to open up the layout tab for my red group and just make sure that when that group is not visible it will just be hidden so I'm just going to double click on my first blue group again right click in that blue group and select its first parent and if I just choose to collapse this element when it's hidden and then if I select the I icon it will hide it and it won't take up any empty space on my page and look while we're here we should do the exact same thing for our second group so I'm going to double click on the only blue group left on our page I'll right click on that and select its first parent and of course this is our group step two so this is the new group that we just made a copy of and I'm just going to select that I want to collapse this element when it's hidden so that way it also won't take up any space when it's not shown and that's going to be quite helpful because later on we're going to create an experience that does only allow one of these groups to be shown at any given point in time so we users going to walk through a whole series of steps when they want to create a business and I'll only want to display one step at a time now within step two here what I want to get from a user is their business email so I'm going to select on our text heading and when I open this up I'm going to update the text to display the words what's your business email address question mark and I can see I just have a small typo that I need to fix there and then from here I'll also just need to update this input element so the very first thing I'll do is update the name of this I'm going to call this input business email and for the placeholder text I'm going to have this display the words your business email address now although we are storing an email address in this field we can actually leave the content format here to be text we don't need it to be an email and I just wanted to highlight this because when you're registering an account inside a bubble you will be required to store an email as an actual email type however in this case today we're not registering an account we're just creating a business listing and the purpose of this email is to just display it on a business's profile page but other than this we're not doing anything with that information so this can just be plain text the other thing I'd like to do is select on our continue button here and just update the name of this to be called continue step two so that way I can easily tell our two buttons apart because later on we're going to build out some workflows whenever these buttons are clicked and actually while I'm here that reminds me we should also update the name of the continue button in our first step so if we just quickly jump back to our elements tree and select the I icon next to group step one I'm going to click on its continue button and update this to be called continue step one and that's all we'll need to change so we can then choose to hide that again now for our second group here I'm also going to update the image that's featured on the right hand side so I'm going to select on this image and I'm going to update this to be the other image that I added into our Google Drive and once this is uploaded we actually don't need to make any additional changes to this all the configurations are set exactly how I would like them and because we made a copy of our first group all of the responsive settings have also copied across so if I was to jump over to my responsive Tab and if I just hide my group step one when it comes to group step two here as you'll see when the page width is less than 700 pixels the right hand side is going to collapse and then the Left Hand Group will take up all of the space on our page so we don't need to do anything else when it comes to the configurations of our second group now after building out our second group we're going to make another copy of this group for the third step in our process and that's where we're going to ask a business owner for their phone number so once again I'm just going to hide group step one I'm going to double click on this blue group right click on the same blue group again and select its first parent which is the red group that says below this I'll make a copy of this and then I can choose to hide my group step two but for our new group which is group step two copy I'm going to call this group step three then I'm going to choose to close our property editor and then similar to before all we need to update is the heading as well as the names of the input field and the button below this so I'm going to double click on this text and for this text element I'm going to have this display the words give customers a phone number so they can call your business and then if I select on the input field below this I'm going to to call this business phone number and while we're here I'll also update the placeholder text to reflect that so this will also display the words your business phone number and then finally if I select on the continue button I'm going to update this to be called continue step three and now for step three I'm actually also not going to change the image that's displayed on the right hand side here so that's all we need to change for this section of our creation process now when it comes to the very last step that's where we're going to ask the business owner for all of their additional details and when we do that I'm actually not going to break the page down into two separate sections instead what I want to do is just stack everything vertically so what I'm going to do is actually choose to hide group step three here and I'm going to add a new group called group step 4 but I'm going to set its container layout to be a column so that way we can stack all of our elements vertically so if I just scroll on down to my containers menu I'm going to add a new group to my page and the first thing I'll do is call this group step four I'm then going to detach the default style of this give this a flat background color and similar to before I'm going to make this a shade of red I'll then jump over to my layout tab and as I also mentioned I'm going to set the container layout to be a column because I'm not going to break this group into two separate sections it's only going to be one section I'll also just make this group fully responsive so if I unselect that that should be a fixed width we'll set the minimum width is zero and leave the maximum width is infinite and then in inside of this group I'm going to add a whole series of input fields which is just going to prompt the business owner to add any additional information they want to store within their listing but before we add those input fields in I'm just going to add a heading at the top of this group so if I scroll on up to my visual elements I'm going to grab a text element and I'll add this in and this will just display the words add your business then for this heading I'm also going to detach the default style of this and once again set the font size to be 24 I'll also choose to bold this and and of course I'll now need to make this fully responsive so if I jump to my layout tab we can unselect that that should be a fixed width the minimum width will be zero the maximum width will be infinite and the minimum height will also need to be zero and finally while we're here we're just going to add 20 pixels of margin at the top the left and the right hand side and then below this I'm actually going to make a copy of this heading because I'd like to add a subheading above each input field just so that way the business owner knows which information they should add into which relevant field so if I jump over to my appearance tab here the first input field I'd like to add is going to be the featured image for a business so whenever someone sees a Yelp listing this is the image that's going to be displayed for it so I'm just going to type in the words featured image and for this text I'm just going to set the font size to be 14 so that way it is much smaller but I'll also just jump to my layout tab and add in 30 pixels of margin at the top just so that way it separates it from our main heading there and below this text we can now add add in our picture uploader so if we scroll on down to our input forms I'm going to grab a picture upload element I'll add this into my red group here and like any input field the first thing I'll do is update the naming convention for this so I'm going to call this picture uploader featured image and while I'm working in my layout tab I'm going to unselect that there should be a fixed width I'm going to set the minimum width to be zero but I'm not going to leave the maximum width as infinite because right now it's taking up the entire width of my page which is quite a lot of unnecessary space so what I'm going to do is actually set the maximum width to be 200 pixels now there's no specific reason why I selected 200 I just think that that's going to be more than enough for what we need to upload into this image and while I'm in my layout tab here what I'm also going to do is just update my height to be 100 pixels and look I am going to keep this as a fixed value and so when the maximum width is 200 pixels and the height is 100 it's just going to make it a 2:1 ratio which means that it's going to be a perfect rectangle and then if I just scroll on down I'm just going to add 20 pixels of margin at the left and 20 on the right and look that's just going to ensure that this input field sits in line with my text elements that sit directly above it then below this picture uploader I'm going to add another input field but of course before I do that I'm just going to need to copy my subheading here and for this text I'm just going to have this display the words business name now the only other change I'd like to make to this text element is that if I jump to my layout tab I'm just going to set the top margin for this text element to be 20 because I kind of want to group all of my elements together and below this of course I'm going to add in an input field which will allow someone to add their business name and I know what you might be thinking we've already added an input field which allows someone to type in the name of their business well if we're following the real world experience that Yelp has here as you can see they also have an input field known as the business name and look this is going to pull across the existing value that we've already added into our first input field this page is kind of just like a summary for all of a business's information so what we're going to do is grab an input field add this into my red group here and when it comes to this input field I'm going to update the name of this to be called input business name but in Brackets I'm going to type in the word final so that way I can tell the difference between these two input Fields so that way when I go to build out a workflow in a moment to create a new business listing I know which data is stored in which relevant input field now for this input field instead of adding in some placeholder text what I'm going to do is actually add in some initial content so I'm going to pull through the existing value from the first input field where someone added the name of their business and I'm using initial content because I want that value to actually sit inside of this input field as a registered name I don't want it to be Place holder text where it's just going to hover over the top of it so when it comes to the initial content here I'm going to insert Dynamic data and if I just type in name I'm going to reference the value stored within my very first input field so this was my input business name and if I select its value it will place that nicely inside of that field then after configuring all of these settings in our appearance tab but we can jump on over to our layout tab here and I'm just going to make this input field fully responsive so I'm going to sound like a broken record here but I'm going to unselect that this should be a fixed width the minimum width will of course be set to zero but for the maximum width similar to our picture uploader I'm not going to set this as infinite because I don't want it to take up the entire width of our page so what I'm actually going to do is Cap this at 500 pixels now once again there's no specific reason why I've selected 500 I just think that that's more than enough space to work with him you can set this value to be whatever you want it doesn't really matter for the height I'm just going to leave this fixed at 48 pixels and then I'm also just going to add 20 pixels of margin on the left and the right hand sides of this input and below this input field we're going to add yet another which is going to store the business description so I'm going to make a copy of my subheading I'm going to update this text to display the words business description and instead of just adding in a standard input field I'm going to add a multi-line input field which as the name would suggest allows us to add multiple lines of text so where a standard input field only allows you to add one line of text a multi-line input field will just continually expand down and display as much text as you would like like and that's going to be perfect for our description because a business description might be longer than one sentence or one line of text so we need this to be able to adjust and fit in as many characters as the business owner would like to add but before we do that what I'm going to do is update the name of this I'm going to call this multi-line input business description then if I jump over to my layout tab I'll move this to the last position within my red group so that way it sits directly below the relevant heading we'll also make this fully resp responsive so I will unselect that that should be a fixed width similar to the input field above it I'm going to set the minimum width to zero and I'm going to leave the maximum width as 500 pixels now the other thing I'm going to do is set the minimum height to be 48 pixels so that way by default it's the same height as a standard input field but of course because the maximum height is currently infinite not a fixed value this field will continually expand down and fit as much text as you would like inside of it and then from here we'll just add 20 pixels of margin on the left and 20 on the right and we can now jump on to the next field which is going to store the actual address of this business so what I'm going to do is copy our text element I'll jump to my appearance Tab and this is going to display the words business address and then below this instead of adding just a standard input field what I'm going to do is actually add in a search box because of course a search box allows you to also pull Geographic locations from Google Maps and I'll show you that in a second so if we head to our input forms and if I select on a search box I'm going to add this into my red group and the first thing I'll do is of course just update the name of this I'm going to call this search box business address and if you remember from the module where we built out the navigation menu I briefly touched Bas on search boxes at that point in time and I mentioned that they're a great way to actually search through your database for existing information but they also had another superpower and that is their ability here to integrate with Geographic places so when you select this option it's going to automatically integrate with Google Maps and it's going to allow you to search for real world addresses and store those within this input field and so most of the time when I use search boxes it's for this use case here but one thing I should point out is that if you were paying attention to your bubble editor you may have noticed that we have these two issues at the top of our editor here and when I click on these what they mention is that we need to Source our own Google API keys and that's because right now we're trying to pull location data across into our app and of course location data comes from Google Maps and unfortunately like everything else in life nothing is free so what we need to do is actually take the time to Source our own Google Maps API keys and if you click on this option here it's going to take you through to your settings tab and open up the general settings section and if you just scroll down a bit so if you're at the top and you scroll on down towards the middle of this page you're going to see these input Fields here which just require you to add in your own Google Maps API keys and look thankfully when it comes to the process of sourcing these Keys it couldn't be any more straightforward bubble actually has a link to a great documentation page which not only has a video tutorial on it but stepbystep guides as to how you can actually source and create your own API keys and look today I'm not going to reinvent the wheel and walk through all of these steps so if you want to grab your own API Keys which you will need to do in order to make your app functional I just recommend pausing this tutorial now and taking the time to re read through all of this documentation and if you're not much of a reader I'd recommend watching this YouTube video here but as you'll see if you keep scrolling down it walks through the exact steps you need and includes all of the relevant links you need to know in order to not only create your API keys but connect them to your bubble app but something else that I should point out that is quite important is that after you've taken the time to create your own Google account and you've connected your API Keys you will be required to have a payment method on file and if you don't have one Google's not going to send data to your bubble app and look although Google Maps is quite generous in terms of how many free API requests it gives you each month you are just required to have a billing method on file so if you find for some reason you followed this video tutorial You' connected your API keys and it's still not working please please please take the time to make sure that you have a payment method within your Google developer account I really don't want you to be that person who sends me a DM and says llin my Google Maps keys don't work and then I have to be the person that says hey have you got a credit card on file and and then you say no and so for the sake of each other's sanity let's make sure that that doesn't happen but once you've taken the time to grab your API Keys you'll add them into these relevant Fields here and then you'll find that those two issues that we saw within our aot tracker will disappear and once we' finished connecting our API Keys we can continue on with our build here so for this search box what we're going to now do is jump over to our layout tab and move this to the next position within my red group and of course we're going to make this fully responsive just like all of the input fields that sit above it so we're going to uncheck that that should be a fixed width the minimum width will be zero and we'll set the maximum width to be 500 I'm also quite happy to leave the default height fixed at 48 pixels but I'll then need to just add 20 pixels of margin on both the left and the right hand sides of this input and from here there's still so much more information that we need to store about this business so we're going to make another copy of our subheading and in our appearance tab this is going to be the heading for our business phone number which which of course is something that we've already stored within one of the first few steps of the process when we created a business so what we're going to do is add an input field and similar to the business's name we're going to just relay that information to the end user so I'm actually going to streamline this process by making a copy of our first input field so right now this should still be called business name final copy and so in this case what I'm going to do is update the name of this to be called business number and in Brackets final and because we've already stored this information in an existing input field I'm just going to update the initial content here to reference the input business phone number the first one not the final one and I'm just going to display its value then below this we'll do the exact same thing but for the business email address so I'm going to make a copy of our text element I'll update this to display the words business email address and then I'm going to make a copy of the same input field that we just copied across before we'll update this to be called business email in Brackets final and because we've already stored this information in an existing input field I'm going to display that within my initial content so for the initial content if I just type in the word email I'm going to reference the input business email its value and look we are starting to get towards the end of the list of all of the input fields that we need to add in there is still just a few l and the next one is going to store the business's website and so what we'll do like before is just make a copy of our subheading first and this will just display the words Business website and below this I just like to add in a standard input field so I'm actually going to make a copy of an existing input field here I'll update the name of this to be called Business website and I don't need to display any initial content within this input field so I'm going to right click here and choose to clear all of that data and we can just leave that blank for now now below this input field there's just two left that I want to add in and one is going to allow us to store the categories that this business is related to so if you remember in our database we created a series of option sets known as the categories and so if we were creating a Yelp product today specifically for restaurants all of these categories are different food genres or I guess you could say different Cuisines and when a business owner creates their restaurant listing I want them to be able to select from multiple different Cuisines because of course I've only added in a small list of options here today whereas I imagine you might want to add quite an extensive list and of course different restaurants can serve multiple different types of Cuisines and so as I mentioned today I want our restaurant owners to be able to select from multiple options which leads to a slight dilemma when it comes to all of the default input fields that bubble provides there's no input that allows you to select multiple options from something like a category list the closest thing we have is something like a dropdown menu which as the name would suggest a drop-down menu just allows you to click in the input field and then it displays a long list of options that you can select from so that's the same kind of user experience we wanton but with the drop- down menu you can only select one option from that list whereas today as I mentioned I want our restaurant owners to be able to select from multiple options and so what we actually need to do is install a free plugin that is built by Bubble which is known as a multi- dropdown so it functions the same as a dropdown but it just allows someone to select from multiple options not just one but before we do that what I'm going to do is just make a copy of our subheading scroll on down and I'm just going to have this display the word categories and now if we jump over to our plugins tab here we're going to add a new plugin and if we just type in the word multi we're going to install the very first plugin here which is the multi select dropdown and as I mentioned mention this is a free plugin built by Bubble so I'm going to choose to install this here I can close my plug-in library and jump back to my design Tab and now if I scroll on down to the bottom of my input forms you'll see we have the option to add in a multi- dropdown so I'm going to add this at the bottom of my red group here and of course before I make any changes under the appearance or layout tabs I'm going to update the name of this I'm going to call this multi- dropdown business categories and now under our appearance tab what I'm going to do is update the way in which we're displaying options so when it comes to any dropdown whether it be a standard dropdown or multi- dropdown you have two ways in which you can display a list of options that are shown when a user opens up the menu you can add a list of static choices so as you can see by default the choices here is a static list which just means that you can manually type in all of the options that you want to display but today we've already taken the time to type out all of those options and we're saving them under our option sets list so I essentially just want to display all of these options here so if I jump back to my design tab what I can do is update the choices style here to be a list of dynamic choices and of course dynamic means that we're going to pull that data from our database so for the type of things I'd like to display within this drop- down menu I'm going to reference our category within our option sets and then for all of the categories I want to display this is super straightforward I'm just going to display all of the options within that list and then finally what will need to do is just select which text is going to be displayed for each option and in this case it's going to be the current option it's display text which is just the name of the actual category that we gave it and that is all we'll need to configure when it comes to this multi- drop down so what we'll do is jump over to our layout tab we'll move this to the next position within our group and of course we'll make this fully responsive so we'll unselect that that should be a fixed width I'll set the minimum width to be zero leave the maximum width as 500 pixels so that way it sits in line with all of my existing input Fields now another thing you'll notice about multi- dropdowns is that they do have a minimum height but not a maximum height by default and we're actually going to leave this as the default settings here so when you're selecting multiple options from this dropdown menu if a user has selected quite a few you're going to need to add some additional space to display all of those options in so that's why it's important to leave the maximum height as infinite so that way this input field can continually expand down and fit all of the options while we're here though also just add in 20 pixels of margin on the left and the right and then we have just one last input field to display and that's actually another multi- dropdown menu and this input Fields just going to allow our business owners to select all of the features for their listing so once again if I quickly just divert and open up my data tab under our option sets we had another list of options known as the features so these are all of the unique features that a restaurant could list and so similar to our multi- dropdown I want a restaurant owner to be able to select from multiple features not just one so if I jump over to my design tab I'm first of all just going to make a copy of our categories text here and in this case I'm just going to update this to display the word features then I'm going to make a copy of my existing multi- dropdown menu but of course I'm going to need to update the name of this to match this field so I'm going to call this multi- dropdown business features and then while I'm here I'm also going to need to update the list of dynamic choices that we can pull from and display in this dropdown menu so for the type of choices here I'm going to select that this should be related to our feature option set for the choices I'm going to display all of the features and then for the caption once again it's just going to be the current options display text so that's all we'll need to change and look thankfully that is the very last input field that we need to add So Below this what I'm going to do is add a button element into our red group and when that's CED clicked it's going to create a new business listing so if we scroll on up to our visual elements I'm going to grab a button I'll add this into my red group and for this button I'm going to have this display the words add business and when it comes to this button I'm going to jump to my layout tab I'm quite happy to leave the width and the height settings as they are but I'll move this to the last position within my red group and then I'd also just like to add some margins around this so I'm going to add 30 pixels of margin at the top 30 on the bottom 20 on the left and 20 on the right and this is just going to ensure that this button here won't touch the borders of my red group now when this button is clicked as I mentioned what I'd like to do is run a workflow that's going to create a new business listing within our database so we're going to take the time to build that out now so if we jump over to our appearance tab here I'm going to choose to add a workflow whenever this button is clicked and when it comes to this workflow we're going to add a couple of different steps the first thing we're going to do is obviously create a new new business listing within our database so if we add an action here we're going to head to our data Tab and we're going to choose to create a new thing and that type of thing is going to be a new listing then from here all we need to do is match all of the data fields in our database under our listing data type to all of the relevant input fields that sit on our page so I'm going to select this option here to add all of my fields and then we can just manually go through and match these with the input fields on my page so for the address field here if I just type in the word search I'm going to reference the search boox business address its value for the business email if I just type in the word email what I'm actually going to do here is reference the input business email final because let's say if someone takes the time to add in their email in the first field but then they decide to change the business email at the last step I just want to make sure that I have the most recent email address stored in our database so I'm going to select the business email final it's value we'll then need to do the exact same thing for the name so if I type in name we're going to reference the value from our input business name final then for the categories if you remember this is going to be linked to my multi- dropdown that's storing all of my option set categories and when it comes to our categories I don't just want to add one category instead I want to add a list of categories so if someone has selected multiple options it's going to add all of those in so I'll choose to add a list and that list will of course be from our multi- dropdown business categories here then for the description if I just type in the word multi I'm going to reference the value stored in our multi-line input business description for the featured image if I type in the word feature I'm going to reference the picture uploader featured image and look I apologize if I'm speeding through these pretty quickly but it truly is just a matter of matching all of the input Fields with the relevant data fields in your database so it's super straight forward when it then comes to the features we're going to follow a similar process to our categories so we're going to choose to add a list of features and of course that list is going to come from our multi- dropdown business features for the is featured field we're actually not going to change this here because we should only be able to change that as an admin directly within our database and I'll show you how we do that later on throughout our build but for the time being we don't need to change this here so I'm going to actually delete this field but for the remaining two Fields this is super straightforward if I just type in the number I'm going to reference the input business number final and then of course for our website if I just type in website I'm going to reference the input Business website and just like that we would have created a new listing within our database but at this point in time if a standard user has gone on to create a new restaurant listing I'd like to update their account type to no longer be a standard user but instead to be a business owner so what I'd like to do is add an additional step within this workflow and if I head to my data tab here I'm not going to create a new thing instead I'm going to make changes to an existing thing and the thing I'd like to change is the current user so the current user is the person who would be logged in at this point in time and has taken a moment to actually create their business listing and in this case i' just like to update the data field known as the account type which if you remember was linked to our option set known as the account type which had two options inside of it so there was our user and there was our business owner so what I'm going to do in this case is just select that their account type should now be a business owner and then finally I'm going to add one last step into this workflow so after a user takes the time to create a listing what I'm going to do is send them through to a dashboard page where they can manage all of their listings so I'm going to add an additional step here I'm going to select from a navigation event and choose the go to page action and at this point in time our destination page page does not yet exist so we're actually going to need to create a brand new page from scratch so if I create a new page here I'm going to call this the dashboard page because as I just mentioned in a moment we're going to build out a dashboard where someone can manage all of their different business listings and look that's going to be quite helpful if someone owns something like a franchise or if they just have multiple locations for their restaurant and so what we're going to do is create this page here and then we're going to select that from our drop down menu as the destination page and just like like that that is all we need to build out within this workflow but we're not quite done with this whole page just yet if you remember back in our design tab we have a whole bunch of different steps within the process of creating a business listing and I only want each of these steps to be shown in sequential order so I want step one to be displayed and then when someone selects continue I want step one to be hidden and then step two to be shown and so on and so what we need to do today is build out some sort of way to create that experience but how can we do that if you remember from the module where we created our Yelp homepage there was a concept I introduced known as custom States and custom States if you don't remember were just a way to temporarily store some information directly within your page so not within your database and so today what we're going to do is create a series of different custom States on our page which is just going to recognize at what point in time we should be displaying one of these four groups so by default when the page is loaded I want to create a custom state that says yes we should be displaying step number one then when someone selects continue after step one I want our custom state to recognize that step one should be hidden and step two should be shown and so in order to build out that custom State I'll need to select on my overall page so if I just double click on my red group here and then right click on that same grade group again and select its first parent it's going to select My overall page which is known as the create page and of course if you remember if we select on this little information icon here it's going to open up a backd door menu which allows us to create custom States and so now we're going to go ahead and create four different custom States but don't worry it's super straightforward we're going to choose to add a custom State here and this is going to be called display group one and for this state type I'm actually going to store it as a yes no value because we either do want to display group number one or we don't so I'm going to choose to create this and I'm also going to give this a default value and set this to be yes because as soon as the page is loaded I do want to display group one by default I'm then going to create another custom State and I'm going to call this one display group two and once again this state type will be a yes no value because we either are displaying group two or we aren't and for the default value here I'm going to set this to be no because when the page is loaded I don't want this group to be shown and look we're going to replicate this exact same process for the next two groups so we'll add a new state we'll call this one display group 3 and for the state type this is going to be a yes no value and for the default value I'll set that to be no and then for our final State we'll create another one called display group 4 and this state type will once again be a yes no value and the default value will equal no and now after building out all of our custom States we need to create some workflows that are just going to allow us to update the values of these custom States so as I mentioned if we head over to our elements tree and open up group step one here you might remember that inside of this we had a continue button now when this button is clicked what I'd like to do is actually hide group one and then show group two so what we need to do is update the custom States stored in our page so I'm going to choose to add add a workflow when this button is clicked here and if I just type in the word state I'm going to choose to set the state of an element and the element will of course be our overall create page and for the custom state I'm first of all going to set the display group one state to now equal no because when this button is clicked I want to hide group number one and then I want to display group number two so I'm also going to set another state and that state will be display group two and this will now be set to yes and because this workflow is related to a custom state I'm going to select on the workflow trigger and set the event color here to be let's say blue just so that way later on when I come back to this page I know that anything that's blue is related to a custom state I'm then going to jump back to my design tab I'm going to hide group step number one and then I'm going to display step number two and then of course I'm going to select on my continue button which is continue step two and then from here I'm going to add a new workflow and I'm going to replicate the exact same EXP experience but of course make some tweaks so in this case I'm hiding group step two and displaying group step three so for this workflow I'm going to type in the word State I'll set the state of an element and the element will of course Be My overall create page and for the custom state I'm going to first of all select display group two I'm going to set this to be no because I no longer want that to be displayed then I'll set another state and this custom state will be display group three and I'm now going to set this to equal yes and once again because this workflow is related to custom States I'll select on the workflow trigger and set the event color to be blue and then finally there's one last custom State workflow we need to build out so I'm going to hide group step two display group step three click on my continue button here and I'll choose to add a workflow whenever this button is clicked and within this workflow once again we're going to set the state of an element the element will be our create page and in this case I'm going to select from the display group three custom State and I'll Now set that to equal no and then from here I'll want to display group number four so the custom state for display group 4 will now equal yes and once again I'll select on the workflow trigger and set the event color to be blue now that is how we can set the states of all of these elements but what I need to do is actually create some conditions on each of these groups to make sure that they behave based on the custom State stored in our page so when the display group one C cust state is set to yes which it is by default what I want to do is just make sure that this group is being displayed and this group only and so in order to create that experience what I need to do is actually just double click on my blue group right click on this and select its first parent which is our group step one and of course that is the group that's holding both our blue and our gray group together and if I jump over to our layout tab what we're going to do is unselect that this element should be visible on page load and of of course we' already taken the time to make sure that this group was collapsed when it was hidden but now what I need to do is create a way to actually display this group so if we jump over to our conditional tab I'm going to define a condition and I'm going to recognize when the overall create page when its display group number one state is in fact yes I would like to select that this element should be visible and tick that that should be true and of course by default this state is set to yes so this group will be shown as soon soon as the page is loaded we're then going to do the exact same thing for group step two so we're going to display this on our page double click on the blue group right click on it again and select its first parent so this should be group step two we'll open up our layout tab we will unselect that this should be visible on page load we'll make sure that we've ticked this option to collapse when hidden which we already have we can then jump over to our conditional tab Define a condition and just recognize when the overall create page when it's display group two state is yes this element should be visible and make sure that that is ticked then we'll do the exact same thing for group step three so double click on the blue group right click again select its first parent open up our layout tab here unselect that this should be visible and we'll make sure that we're collapsing this when it's hidden then we'll jump over to our conditional tab Define a condition and look I apologize if I am speeding through this but it is the exact same condition that we just created before so we just need to type in the word create reference the create element when its display group three custom state is in fact yes what I'm going to do is Select that this should be visible and leave that ticked as true and then finally we need to do the exact same thing for our red group here so I'm going to double click on our red Group which is our group step four jump to my layout tab unselect that this should be visible on page load collapse this when it's hidden and then if I jump over to my conditional tab we'll Define a condition and we'll just recognize when the create page when its display group for state is in fact yes we will select that this should be visible and tick that that should be true and after building out that last condition that is absolutely everything that we need to cover within this section of our module there was a lot that we needed to work through within this process and look I know that when it came to the step where we had to add all of the different custom States it can seem a little overwhelming if you are brand new to Bubble so if you found yourself getting confused used at any point in time please pause this tutorial and rewatch any of those sections but if you're currently up to speed what I'm Keen to do is show you a preview of how this whole experience is now going to function over in a preview of my Yelp clone here I'm currently logged in and I'm going to go through the process of creating a new business and as you can see when I've loaded the page we only have access to group step one right now and that is of course because by default the custom State on our page is only showing that group so when it comes to our business name here I'm going to call this Kirkwoods Sushi because guess what I have a sushi restaurant now then from here I'm going to select continue for the business email I'm going to call this Kirkwood Sushi gmail.com I'll select continue again and it's going to take us through to our next step and then for my phone number I'm just going to add in a random string of numbers there I'll select continue and that's going to take us through to our final step here where we'll just need to confirm all of the additional details but as you can see with some of our input Fields we're already pulling through the initial values that we added in those first few steps so all we need to do right now is finish adding in all of these details so I'm going to take the time to upload a featured image from my local device once I've uploaded an image I'm going to scroll on down and for my description I'm just going to add in some dummy text so I'm just going to quickly jump over to a new tab and type in laurum ipsum generator if I head to this website and then just scroll on down I'm going to copy across some dummy text here I'll just copy across two sentences I think that's more than enough I'll paste this into my description field and as you can see because this is a multi-line input field it's continually just expanded down and fit all of my text inside of it for my business address I'm just going to type in an address here in San Francisco and if I continue scrolling down I'm just going to move my head out of the way my business website this is just going to be www. Kirkwood sushi.com and for my categories this is just going to be Japanese but look if you had a long list of additional categories you could definitely select a few here and for my features I'm going to say that dogs are allowed I've also got delivery as well as free Wi-Fi and then I'm quite happy with this as my listing so I'm going to choose to add this business that workflow is going to run it's going to create that listing in our database and then it's going to redirect us through to our dashboard page as you can see in our URL here but of course at this point in time this page is blank because we haven't built anything out on it yet but as you can see the entire process of creating a restaurant or a business listing is now something that we're able to do inside of our own Yelp clone so what we're going to do is jump back to my notion checklist and we can check off that we finished building out all of the features inside of this now I know that this was a very tedious module but don't say I didn't warn you at the start of this process between all of the different groups and all of the different custom states there was a lot that we needed to factor in but of course it wasn't anything that we couldn't handle inside of bubble and that is all I have time to cover within this tutorial today as you can see we've been building for literally hours and there's still so many features that I need to uncover in as much detail as I possibly can now if you wanted to get access to the entire Yelp clone course I'd always recommend hitting the link in the description of this video so that way you can purchase that from my website now while that full course is going to cost you money I'm confident that it's going to save you months of your life having to learn how to rebuild all of those features from scratch so if you're looking to build and launch your app as quickly as possible I definitely recommend checking it out throughout that full course there is still so many features that I need to walk through we're still yet to learn how we can edit the details of an existing restaurant how we can build out a custom search feature how we can create a search results page with a long list of additional search filters how we can create business profile Pages how we can bookmark listings so we can view them at a future point in time how we can create and display reviews and of course how we can create a user profile page that displays a list of all of the reviews that someone has published I truly wasn't lying when I said there's still quite a bit that we need to cover now if you wanted to stay up to date with any additional bubble resources I share I'd always recommend hitting that subscribe button on my channel so that 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 no code [Music] Journey

Channel: Building With Bubble

Views: 3,816

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, Yelp clone, Reviews app, restaurant reviews

Id: 6vLoVH7lAbs

Length: 232min 0sec (13920 seconds)

Published: Tue Jan 16 2024