How To Build A Yelp Clone With No-Code Using Bubble

and when i scroll on down you can see here that my review has been displayed it includes my profile photo my name the rating and of course the content and images associated with that review [Music] hello my name is lachlan and today i'll be teaching you how to build a yelp clone entirely out of no code using bubble bubble's by far one of my favorite no-code tools as it gives you complete control over creating your own custom database your front-end design and it also integrates with third-party plugins and extensions for those of you who don't know me i've spent the past year working with the bubble team to create their how to build blog series this series took a list of the top products out there on the market like airbnb uber and instagram and explained the step-by-step process to rebuilding them entirely out of bubbles no code tool while this written series was helpful to makers all across the world i had plenty of requests to recreate this as a video series on my own throughout this tutorial i'll be walking you through the step-by-step process you'll need in order to recreate your own yelp clone without touching a single line of code this will include features like registering user accounts allowing restaurant owners to make changes to the restaurants published on our platform creating a home page with a search feature then displaying a list of search results based on a user's query displaying the dynamic information of each individual restaurant across our platform and then finally allowing users to create and display user generated reviews across our platform so grab your bubble editor and let's get started first feature within our build today isn't actually a core feature instead we'll be taking the time to set up the necessary data types and fields within our own custom database and what i love about bubble and you'll soon see in this tutorial is that as i mentioned you get complete control to create your own custom database with as many different data types and fields as you would like and you can also link these data fields within different data types so that way you can pull and store different information across different parts of your application and i know this might sound confusing when you're first getting started but throughout this tutorial i'll be taking you through the step-by-step instructions for creating your own data fields and types and i'll be explaining in detail when they're needed within our build today now for the sake of our tutorial i've created a notion doc here with all the different data types and fields as well as the different features we'll be working across today in our tutorial i'd really recommend you create your own list and follow the same procedure as well what i love about notion personally is that allows me just to tick off each of the fields once i've added them in so let's go and get started we'll head over into our bubble editor here and within an editor i'm going to go over into our data tab now the first thing you'll notice within the data tab with bubble is that it has already created a user data type for you now before i go ahead and create any other data fields within my user data type here i'm actually going to need to create the different data types first because in order to link our data fields across our application i'll need to actually create those data fields before i get started so over in my notion doc here i have a list of different data types that we'll be adding there's the user property which is already added in our editor there's the restaurant data type the restaurant images and i'll explain in a moment why they are separate then there's our reviews and then our review images so i'll head on over into my bubble editor and start by adding in the restaurant data type so i'll just call this restaurant and i'll create that now within our restaurant data type we could store different data fields about this restaurant things like the restaurant's name its location its website or even its phone number you would also want to store a list of images under this restaurant so that way a restaurant owner could go ahead and upload images to display them to our directory now although you could add your images within this data type i personally would recommend that you split them into a different data type and the reason i recommend doing this is because it'll help maintain the speed of your bubble application so let's say on your home page or your search results page you'd like to display a list of 10 restaurants now bubble itself will be able to display that list of 10 restaurants but every time it loads that list it's going to load all of the data fields within each restaurant and it won't have any problems doing this if you're adding light fields like text but if for every restaurant you're loading 10 additional images with that restaurant data it'll quickly slow down the actual speed of your application so what i recommend doing is splitting the restaurant images into a separate data type and then linking them back to the restaurant itself and then whenever you'd like to display a restaurant image you can just call upon that data type and select the images that are relevant to a specific restaurant so i'll go ahead and add a new data type called restaurant images and then i'll be adding two more data types one called reviews and then i'll also be following the same process where i'll be splitting the images from the reviews separate from the actual reviews itself so i'll add another data type called reviews images and the reason i'll be doing that is because on a particular restaurant you might have hundreds of reviews so the last thing i want to be doing is loading all those images at the same time that i'm trying to load the reviews itself so now that we've added in all of our data types we can go ahead and start adding in the necessary data fields for each one and i'll start by adding in the actual user itself so i'll go ahead and create a new field here and if i look into my notion doc the first field i'll be needing to add is the name the profile photo and account type and a list of saved restaurants so i'll go ahead and add the field name called name and this will just be a plain text field because it'll just be storing the user's name as text characters then i'll add in the user's profile photo and this will of course be an image data field next i'll be adding in the user's account type and the account type will allow us to differentiate between those who are regular users who are going to be leaving reviews and those who are restaurant owners who would like to submit their restaurant to our platform and this data field will be a text type and i'll soon be explaining how we can use this in our tutorial today and then finally the last data field i'd like to add is a list of saved restaurants so this allows a user to pretty much bookmark restaurants across our platforms that they might like to visit so this field type will be a restaurant because a user will need to actually save a restaurant and because they'd like to possibly save multiple restaurants i'll need to select that this is a list field so there'll be multiple entries meaning there'll be multiple restaurants that they can save now that i've edited my user data type and fields i can go ahead and tick those off within my notion doc and then i'll scroll on down to my restaurant data type and then i can start adding in the necessary data fields here so i'll jump on over to my editor head to the restaurant data type and once again i'll start by adding in the restaurant's name which is a text field then there'll be the description of the restaurant which will also be a text field and then we'll add in a category for the restaurant which again will be a text field so that will be the type of food category this restaurant belongs to whether it be mexican burgers thai food it'll just allow us to better structure our food categories across our platform then i'll go ahead and add another field called address and this will need to be a geographic address because we'd like to store the specific address unit within our database below this will then add in the website link for the restaurant so this will just be the url of a restaurant which is just a texturing and then i'll also add in a field for a phone number now this will also be a text field and now in order to store images for our restaurant what i'll do is i'll need to actually link the restaurant images through to our restaurant images data type so i'll explain this in more detail as i do it but i'll go ahead and create a new data field and i'll call this restaurant images and then i will link this through to our restaurant images data type now i know that might sound confusing but when you actually pull it into your editor later on it will make more sense one thing i will note is that you don't need to select that this is a field of multiple entries because on our restaurant images data type here will allow a user to upload multiple images there which means that our normal restaurant here will just call upon that list of images whenever it's needed we won't need to save a list of images over on a restaurant here so i'll go ahead and create that and now below this what i'd like to do is just add in a list of amenities that a restaurant might have so this could be options like let's say a restaurant supports vegan food and this field type itself will be a yes no field type so they either do or they don't have vegan friendly options i'll go ahead and create this and what i'll need to do at this point is also update the default value of this field so by default i'd like all restaurants to not support vegan options but when we create our restaurant dashboard page we'll also build a feature that allows our owners to update the default value of this the next amenity i'd like to add is a option for parking so if there's parking on site at the restaurant so once again i'll be making this a yes no data field and i'll be updating the default value to be no then i'll create another field called dogs allowed this will be a yes no field with a default of no and then there'll be one other amenity option which will be called delivery and once again this will be a yes no field and i'll update the default status to be no now if you're planning on adding in more amenity options for your restaurant i'd recommend pausing the tutorial here and just taking the time to go ahead and add those in now just remember that you'll need to set the default values of each of these amenities to no and if i go and look at my notion doc i can see that we're almost there with my restaurant data fields here i can see i just need to add in a list of reviews and then a published status to this restaurant so the first field i'll be adding is reviews and this will need to link to our reviews data type and i will select that this is a field with multiple entries because we'll need to support multiple reviews for each individual restaurant and finally the last field i'll need to add is a published status for a restaurant so i'll say published and this will be a yes or no field type now the reason i'm adding a publish status is because you'll soon see in a later module in the series that when a restaurant is created on our platform we won't want it to be immediately published until a restaurant owner has actually updated all of the relevant data fields within that restaurant so i'll create this and i'll go ahead and set the default value of this to also be no now i'll jump over into my notion dock and i'll highlight all of the a restaurant data fields here and tick off that i've created those the next data field i'll need to add is the restaurant images so i'll head over to my bubble editor select my restaurant images and i'll just need to create one data field here this will be called images this will of course be an image and this is where i will select that this is a list of images so whenever i create a new restaurant i'll need to first create a list of images and then attach them to a particular restaurant that's being created and again i'll be explaining that in much more detail when we get to that stage of our build today then back in my notion doc i'll tick off that i've added in the restaurant images the next data type i'll be adding in all the fields for is our reviews so i'll start by adding the review content so i'll create a new field call this content and this is just the actual text of a review so i'll create that as a single field then there was the images of the review so similar to our restaurant i'd like to link this out to our review images so that way we're not loading all of those images on each specific review so i'll create a new field here and i'll call this images and i will link this to our review images data type then i'll need to go ahead and add in a rating so this will just be a star rating for each review and this will be a number because it'll be one two three four five so i'll go and create that and then finally what i'll need to do is actually link this review to a restaurant so go ahead and create a new field and i'll be calling this review restaurant so this is the restaurant that a review is written against and then what i'll do is i'll select from our field type drop down and i'll be selecting that this is a restaurant so it will belong to a single restaurant and because it is a single restaurant that this review will be attached to we won't be selecting that this is a field with multiple entries i'll then create that now one thing you will also notice is that by default all of our data types actually have a creative field pre-built within them so every time a review is created i won't need to create a data field to record who the creator of that review was bubble automatically adds that in and registers that as a user property so if at any point when i'm displaying a review i'd like to display the name of the person or the profile photo of the person who's created that i can just integrate that to our user data type here where i have added in the fields for the name and the profile photo if i head back into my notion doc i can see that there's one last field i'll need to add and that is for our review images data type and i'll just need to add in a list of images so i'll head over into my data tab select the review images add in a data field and call this images this of course will be an image and there will be a list of multiple entries because someone can add multiple images to their own review so i'll create that and just like that you can see how easy it is to build your own custom database within bubble with as many different data types and fields as you would like i know that building a database can seem quite overwhelming for most people but you'll certainly get the hang of it with more practice over time we'll finally be able to build a user-facing feature that is core to the application itself and that is building a home page with a search function on it so a page that allows a user to input what type of restaurant they would like and then also their target location and then we'll then use this data and send it through to a search results page which we will work on later in our build but what we'll do is go ahead and head on into our application and i'll get you started so over in my bubble editor i'm going to go to my drop down menu and select from my home page that i previously created now this page will be blank so once again i'll be updating the background color of this page to have a light gray background and i'll just reiterate that you don't need to have a content type saved on this page what i'll then do is start to actually build out the page itself and this is pretty simple to do there's not a whole lot of content that will be displayed on our home page so scroll on down to our input forms and the first thing i'll do is add a search box onto this page i'll drag this out to be roughly half the size of the page and our first search box will allow users to actually identify what type of food they would like to search for so i'll update the name of this search box to be called food category because this will be the categories that we've imported into our drop down menu on our dashboard page of our restaurants and at the moment this search box is currently configured to be a list of dynamic choices meaning that we could dynamically display some data from our database i would however though like to change this to be a list of static choices and then what i'll do is import the exact same list of static choices from my drop down menu on our dashboard page so i'll head over to our dashboard page that we've previously created i'll go to our drop down category menu here and then i'll just copy across all of the options within this drop down here i'll then head back over to our home page i'll select on our search box here and then i'll paste all those values in and again the reason why i'll be copying and pasting these values is because i'm aware that these will be case sensitive so i'd like them to be the exact same value as the initial value that i created then what i'll go and do is just update the placeholder content here just to say food categories just to indicate that someone can select and search for a list of categories that matches their preferences then what i'll do is go ahead and grab another search box element i'll drag this across so it is roughly the size of our initial search box here and this search box will be our location so this allows someone to input the city or suburb that they'd like to search within so i'll update the name of this to be called search box location and then with the choices style i'm simply going to update this to be a list of geographical places and what this allows the bubble editor to do is actually integrate with a google map api which allows it to index a list of cities towns or even suburbs so i'll just go ahead then and update the placeholder of this search box to be called search location and then the last thing i want to do to our actual search function here is just add an icon next to this and this icon will just be a magnifying glass which just allows someone to actually perform a search now before i go ahead and build out the actual workflow to power our search function i would just like to go ahead and add in some categories on our home page just by using a repeating group i want to display a list of all the existing restaurants that a user could choose from so i'll add in a text element here and i'll call this all restaurants and once again i'll just be updating the style of this to be a h2 dark heading i'll make that somewhat in line with the search box there and then below this i'm going to add in a repeating group now this will obviously need to display all of the restaurants within my application so the way i'll be doing this is updating the type of content to be a restaurant because i obviously want to display a list of restaurants and then the data source of this repeating group is quite straightforward i'm just going to perform a search and i'll just be searching for restaurants so at the moment it will be searching for all of the restaurants within our application then the other thing i'd like to do within this repeating group is update the layout style not to be extended vertical scrolling but to be horizontal scrolling which just means that it allows a user to scroll horizontally through this repeating group so i'll go ahead and update the number of columns then to be three and you'll start to see that it just displays these horizontally across from left to right now within this repeating group i'll add in an image element so this will be an featured image from this particular restaurant so i'll insert dynamic data and i'll choose to display the current cells restaurants images now because this images is linked to a different data type that is a list of images i'll need to obviously select that data type so our images images and because as i mentioned that is a list of images we'll need to choose a particular image that we would like to display so in this case i'm just going to choose a random item so i'll go and just move that image up i'll expand that outwards just so it's the full width of our repeating group and then below this i'm going to add in a text element and this text element will need to display the name of the restaurant so i'll just insert dynamic data and choose to display from the current cell's restaurant's name then i'll go and update the style of this to be a h3 dark heading i will reduce the size of that element and i'll just move that down so it doesn't overlap with our image perfect what i would also like to do though is just create a list of featured repeating groups that display a list of our food categories so in this case i might like to display a list of all the featured burger restaurants across our platform and this is quite an easy function to build what i'll need to do is just expand my page downwards so there's room for another repeating group i'll then go and select my title in my repeating group i'll copy these i'll drag them down below so they're roughly in line and then i'll update the name of this title here to be called burgers and then i'm happy with the actual layout of the repeating group so displaying the featured image of a restaurant and then also its name what i will need to do though is actually add in a constraint to our data source here because at the moment it's searching for every single restaurant whereas i'd only like it to index all of the restaurants that are listed within our burger category so i'll just add a constraint that will search for all of the restaurants where the category equals and then i'll just need to backspace this option to add in dynamic data because i'd like to add in a static text element which is just burgers and once again this will need to be case sensitive with the same category type that we've used within our search box and also our drop down box on our restaurant dashboard page and just like that we now have two repeating groups one displaying a list of all the restaurants on our platform and the other displaying a list of all the restaurants that are featured burger establishments and if you also would like you can update the data source here to sort these in a particular way so if i'd like to just sort them by chronological order from when they've been added to our platform i could do that in this case that i might just like to sort these randomly just so every restaurant can be shuffled around fairly across our platform so now that we've finished building out the actual layout of our home page we can go ahead and now build out the workflow to power our search function here and the way i'll be doing this is by triggering a new workflow when our search icon here is clicked so i'll go ahead and select the start edit workflow button and then within this workflow what i'll be doing is creating a navigation event i'll be selecting a go to page option and then i'll need to actually go ahead and create a new page so i'll select from the drop down option i'll choose to create a page and i'll call this page search results i'll choose to create that and now i can select that our destination page will be our new search results page and that page won't need to have a content type attached to it so i won't need to send any data through itself what i will need to do though is send through some page parameters so at the moment on our home page we have our food category search box and also our location search box now instead of actually saving the data from the search in my database and sending it through to a page without adding entries to my database and the way i can do this is by using what's called page parameters so page parameters essentially just allow you to send data between pages without having to store it within your database so what i can do is tick this box here that allows me to send more parameters to a page and then i can add my own custom parameters and the parameters i'd like to send through is of course the food category and the location so type in a custom parameter key so the first one will be called category and then i can go ahead and mark up what that data is that should be sent through as this parameter and the data for this of course will be the input from our search box food category its value then i'll add in another parameter key and this one will be called location and of course i'll be configuring the data of this location key to be the value of our search box location now when a user performs a search it will send through both of those values which we can then extract from our search results page and display a list of relevant restaurant listings based on these parameters now i can go ahead and actually preview what this whole experience looks like within my bubble development environment so the first thing you'll notice on my home page here is that the repeating groups are displaying some data on our page and you'll notice that my san francisco burger restaurant has been displayed but you'll also see that my san francisco thai restaurant is also being displayed but it doesn't have an image and that is because the restaurant itself here hasn't actually been edited or published so what i'll need to do is go back into my editor and add a constraint to this repeating group that just restricts the restaurants here to only display once they're published so what i'll do is i'll quickly just jump back into my editor and on my home page i'll select a repeating group and i'll update the data source and i'll add in a new constraint and the constraint i'd like to add is just searching for the restaurant publish status and i would like this to be yes so now it will display all of the restaurants that have been published i'll then go and do that to my burger restaurant as well so i'll search for restaurants it's searching for the category already but what i'll do is add in a new constraint where the publish status equals yes and then while i'm here another feature i could quickly just add is an option to redirect a user to a restaurant page once they click the profile photo here so what i could do is just go and create another workflow i will add in a navigation feature i'll select the go to page option and the destination page will be our restaurant page and the data i'll be sending through of course is the current sales restaurant now that will redirect us through to a restaurant once we click on its image and you'll need to go ahead and create that same workflow across any repeating groups that you're adding to your home page here but now i'll head back into my bubble application i'll refresh our home page and now you'll see that it's only displaying my san francisco burger restaurant and there's no other options within those repeating groups because those restaurants have not been published and what i can do is also select my san francisco burger restaurant and that will redirect me through to its restaurant page which you can see is currently in our url stream we're on our restaurant page and it's sent through the unique id of that restaurant but back on my home page what i can also do is begin to search for food categories and a location so what i can do is start typing in an option here so let's say i want to search for burgers or if i want to search for thai it will actually start to index any static choices that we've added so i'll search for burgers and then i can also search for a location which will be san francisco and once again you'll see that it'll automatically start indexing any relevant search queries based on the location and then i'll go ahead and click the search icon we've added and now we've been redirected to our search results page here and you can see that it's also sending through the parameters of our category which equals burgers and our location parameter which of course is san francisco and once we've built out our search results page it'll be able to extract that data and display a list of all the relevant results so back on my notion doc i'm going to tick off that i have finished building out our search page which is our home screen for our users within this page i've added a list of repeating groups to display all of the featured restaurants by the categories i've created a search function and i've also taken the time to show you how to configure your google maps api keys now that we've finished building out our home page and we've redirected users to our search results page whilst also sending through our custom parameters we'll now go ahead and build out the search results page to display a list of all the relevant results based on a user search query let's jump on over into our bubble editor and i'll show you how this is done from our home page i'm going to go up to our page drop down here and select the search results page that we've just created and as always i'll start by updating the background color of this to be a light gray color and then i'll go ahead and add in a text element to the top of the page and what i'd like this text element to do is summarize a user's query and just clarify exactly what they're searching for on our platform so the way i'll be doing this is by first typing in some static contents it'll say discover and then i'll go and insert some dynamic data and i'll pull out our first parameter which was our category that was being sent through the url so insert dynamic data and then i'll scroll on right to the bottom and select the get data from page url option and you'll see here now it's giving me an option to extract the parameter from this then what i'll do is add in the parameter so it was the category and then i will select away and that will verify that that is pulling that information from our url string then below this i'm going to go ahead and add in a space and then i'll say discover food category so you could say discover burgers in and then i'd like to pull the location parameter from our url string so i'll insert dynamic data again i'll scroll on right down to our get data from page url option and i'll be selecting from the parameter which was called location and i will need to just update the type of parameter here to be a geographic address because that was the type of data that i was sending through in that url string now i can update the style of this heading to be a h2 i'll just reduce the actual element box itself i'll stretch that out just in case it is a bit of a long text item there and now i can add in a repeating group to display all the restaurants that meet this query so what i'll go ahead and do is just like to add a repeating group i'll add this in the middle of my page here and i will just expand this page outward because i would like to add a map on it as well at some point and the first thing i'll do is configure the type of content that i'll be displaying in this repeating group it will be a list of all the restaurants on our platform and then i'll need to update the data source of this repeating group so i'll perform a search for all of the restaurants where the food category matches the url parameter and where the location parameter matches the url parameter as well so i'll go ahead and search first from the category so i want the category to equal the same value from the url parameter we're sending through so once again i'll scroll right down to the bottom here and select to get data from our page url and the parameter name was our category similar to what we've added in our title here i'll select to close that i'll then add in another constraint where the location so the address of my restaurant is within and then i can just choose a custom distance here so i can say is within 20 i'll choose metric kilometers of and then i want the core location to be the location that i'm sending through in my url parameter so i'll select the get data from page url option again the parameter was called location and the type of content for this parameter was a geographic address and then finally there's one last constraint i'll need to add to this repeating group and that is just to only display the restaurants where the publish status equals yes so i'll select from the publish status equals yes now our repeating group is configured nicely so it will only display the restaurants that are published on our platform that also meet the parameters of our user search query now we can update the layout style the repeating group to be extended vertical scrolling and i'll update the number of rows to be 2 and now i can go ahead and start to map out the content that i'll be displaying within my repeating groups so the first element i'll add is an image and this image will just need to display a featured image that the restaurant's owner has uploaded so i'll select from the current sales restaurants images the linked data type called images which is of course a list of images so i'd like to just choose a random item of those images then i can just move that up into the corner of our repeating group and then beside this i'm going to go and add in the name of the restaurant so it will be the current cells restaurants name and i'll just move that to the side a little so it's not overlapping on our image there also update this heading to be a h2 i'll just pull that across expand that downwards a bit and now below this what i would like to do is actually just display an average star rating that this restaurant has received from all of its reviews that have been submitted against it so the way i can do this is by inserting dynamic data and i'll start by performing a search for something and the thing i'd like to search is of course a review on our platform and then within all the reviews on our platform i'd like to only filter out the ones that are published for this restaurant that we're currently viewing in this repeating group cell so i'll add a constraint and i'll choose from when the review restaurant equals the current sales restaurant and then from here i can go across and filter these by the rating of all the reviews that have been published against this restaurant and then what i'll do is i will filter out an average of all of these ratings so i'll scroll on down and select average and now that'll give me an average star rating of all the reviews that have been submitted against this restaurant so once i've calculated that dynamic data i will click below this add in a space and just type in stars so let's say it's 3.5 it'll say 3.5 stars and then below the average rating of the reviews i'd like to display an actual count of how many reviews have been submitted just to create a little bit of social proof for this restaurant so go ahead and copy in this text element for our average star rating and the reason i'll do that is because at the moment it's searching for all of the reviews that have been published against this restaurant which is what i'd like and what i'd like to do is actually just go ahead and backspace the star count the average rating and then also the rating option and i just like to search for all of the reviews and count how many reviews there actually are and then i'll add in a space and just say reviews so now it'll be performing a search for all of the reviews to this restaurant performing account on how many there are and just displaying that as a total number of reviews and now below this what i'm going to do is just add in another text element and this will just be the description of the restaurant so i'll insert dynamic data and i'll choose from the current sales restaurants description and i'll just need to make sure it's not overlapping with our image here so i'll just pull that down a bit and what i can do is also reduce the size of this element because if there is more text than a single line that will expand outwards as well and now i'll go and just reduce the size of my actual repeating group itself just so there's no empty space there i'll just pull that down a little bit and then within this repeating group i would also like to just create a workflow when the image of the restaurant or any other element here is clicked and i'd like to redirect the user through to that restaurant page itself so i'll select the image here and i'll create a new workflow and then within this workflow i would like to choose from a navigation event and select the go to page option and i'll choose the destination page to be our restaurant page and i'll be sending through the value of the specific restaurant that a user is currently clicking on within our repeating group so the current sales restaurant now back on our search results page here there's another feature i'd like to add to this page and that is a map to display a list of markers for all of the restaurants that meet the search requirements here so i'll scroll on down to our bubble map element here and i'll add that in beside our repeating group to the right i'll expand that out just a little bit more and now what i can do is configure our map here and in this case i'd like to display a list of markers because i'd like to show where all of the restaurants are that meet these search parameters here and then i would like to update the type of markers to be a restaurant and i'll need to add a data source to this to only display the restaurants that meet the user's search query so i'll go ahead and perform a search for something and obviously be searching for a restaurant and then we'll need to add constraints to the restaurants we're searching for based on the exact same constraints we added to our repeating group so i'll go ahead and select to add a new constraint and the first constraint was our category so the category will need to equal i'll scroll on down to the get data from page url option the parameter was our category and that was just a text parameter i'll close that i'll add a constraint the next one was our address and it will need to be within as i mentioned before 20 kilometers of and then i'll pull the location from our url parameter again so i'll select the get data from page url option search for location and the type of parameter is a geographic address and then finally the last constraint i'll need to add is just verifying that the publish status of these restaurants equals yes and now once we've configured the data source of our map here we can add in some additional configurations here we'll need to just verify that the address field is searching for the addresses within our restaurant which should actually indicate that by default but the other thing i'd like to do is show a title for each marker so i'm going to select the always option here and then the marker caption will need to be the current markers name so it'll be the name of every restaurant and that'll just display above the marker itself so we can identify which restaurant is where on our map and then finally there's one last feature i'd like to add to this page and that is an option to add in additional search filters here so let's say someone has originally searched for burgers within san francisco and then they changed their mind and they'd like to search for thai food within san francisco what i'm going to do is add in a drop down menu that allows them to change the search query that they've created and then update this repeating group and map based on that and the way i'll do this is by just moving across my repeating group a little bit i'll add in a text element here and this will say category i'll update that to be a h2star font and then what i'll do is add in a drop down menu here i'll make that relatively small there and also just move our title to be in line with our text here move that up a tad and what i'd like to do here is just display a list of all these static choices of food categories that a user can search from so i'll head over to our home page and copy and paste these across from our search box so if i double click on our search box here i'll just copy across all of these options head back over to my search results page and i will paste these in then before i make changes to my repeating group i'm just going to update the name of this drop down to be called drop down category and now once a user has actually selected a category we'll need to go ahead and make changes to the data source of our repeating group because at the moment if you remember it's searching for all of the restaurants where the category equals the value from our url parameter that we've sent through but in this case we'll need to update the category to equal the same category of this drop down menu here so the way i can do this is by not changing the initial data source but by creating a condition that reflects the drop down menu selection here so go ahead and define a new condition and i'll select from when the drop down category so our new element here when its value is not empty so when a user has actually chosen a new category option here what i'll need to do is update the data source of this repeating group and then i will go and perform a search and once again i'll be searching for restaurants and you'll find all our constraints here are the same as the previous constraints we've added only this time we'll be updating the category constraint to reflect the value of our drop down menu here so i'll go ahead and add a new constraint and i'll choose from the category and the category will need to equal the same value of our category drop down menu and then i'll go and add in another constraint for our address which will need to be within 20 kilometers of the same url parameter that i'm sending through so i'll select to get data from page url and then one last time i'll be searching for our location parameter and this was a geographic address and then finally the last constraint was of course our published status and this will need to equal yes so now whenever a user searches for a particular food category and location our repeating group will automatically display a list of results based on that search query however if the user changes the type of cuisine they would like so the different category it will then update the data source of our repeating group and display a list of relevant options and by all means if you'd like to add in any additional filters here so things like the amenities or average star rating the way you would do that is by adding in additional conditions for every single use case that you would have based on the filters that you've added to the page but in the case about mvp i'm just going to keep this quite simple here today and now i'll actually go ahead and show you what this whole experience looks like from our initial home page where a user searches for a query and then that data sent through to our search results page where we can display the relevant search results so over on my home page here i can go ahead and search for my category which is burgers i'll add in my search location which was san francisco i'll go ahead and perform that search and now over on my search results page you can see that my restaurant has displayed there's currently no reviews so it has zero stars and zero reviews at the moment but you'll see on my map here it's actually displaying the location of that address and it has a title of the restaurant itself as well you'll also see that my title here has pulled through my user search query so it's searching for burgers in san francisco and if i'd like to update the category to let's say thai food my repeating group will automatically update its data source and display my san francisco thai restaurant here now back in my notion doc i'm going to finally tick off that i built out my search results page which included being able to add in additional category filters to filter through different food cuisines we've also configured our map and allowed it to display a list of titles of all the restaurants on our platform and we've created a workflow to redirect users to our restaurant page when an image of a restaurant is clicked after building out our search results page the next feature we're going to focus on in our tutorial today is actually building out the individual restaurant pages themselves so what this will allow us to do is create one page on our application and then dynamically display all of our restaurants across this page whenever they're called upon within our application so let's jump into our bubble editor and get started from my page drop down i'm going to go ahead and select the restaurant page that i had previously created and the first thing i'll do on this page is just take the time to update the background color to be a light gray and then once again i also just want to reiterate that the type of content for this page will need to be set to a restaurant which we had already done within our previous workflows in our tutorial now on this page what we'll need to do is simply just display all of the information that we've saved for a restaurant and you'll find that this page actually might look quite close to the same design that we created for our restaurant dashboard page so to get started what i'll do is i'll grab a repeating group element i'll drag this across the top of our page here and what i want this repeating group to display is a list of all the images that have been saved to this particular restaurant so i'll need to update the type of content for this repeating group to be a file just remembering that we are storing our images as a list of files and then the data source for our repeating group will be the current page restaurants images and also just remember that our restaurant images is linked to our separate data type images and then when we call upon the list of images within that data type it will display those within our repeating group here and once i've configured the data source of this repeating group i'll update the layout style to be horizontal scrolling because if you look at the ui of yelp's restaurant pages it allows users to scroll across horizontally not vertically and then we'll update the number of columns to be three then within our repeating group i'm going to go ahead and just add in a image element here i'll stretch that out to be the entire size of the repeating group it sits within i'll just move that up drag that out a little bit more and then i'll go ahead and insert dynamic data for this image and this will need to display the current cells file i'll then just go and close off the repeating group so there's no space here between the image that we've just added that will do and now above this repeating group i'm going to go in and add in some text elements so i'll need to just add these below hand first and then i'll drag them on top of the repeating group i just don't want them to fall within the repeating group because it will then duplicate that content across every cell of our repeating group so what i'll do is insert dynamic data and the first thing i want to display is the current page restaurant's name and i'll update that to be a h2 style font i'll just close the size of that element and then i'll drag this over the top of our repeating group but i also just need to make sure it doesn't actually fall within our repeating group i'll move that up a little higher there as well and then what i'd like to do is just display an average star rating for this restaurant as well as the total number of reviews that it has so i'll copy this heading here i'll just move that down a tad again just making sure it's not falling within our actual repeating group cell here i'll backspace all of this dynamic content and then i'll start by performing a search for reviews on our platform and this would be quite similar to the average star rating that we created on our search results page for a restaurant i'll then need to add a constraint to the reviews that we're searching for and i'll just need to identify all of the reviews where the restaurant that it has been written against equals the current page restaurant and then within the reviews i'll need to filter through the ratings of all of the reviews and then what i would like to do is calculate the average of all of those reviews then beside this i'm going to add in a space and say stars and then i'm going to open up a bracket and within this i just want to display the total amount of reviews that the restaurant has received so i'll insert dynamic data i'll perform another search and once again i'll be searching for reviews i'll add a constraint where the review restaurant equals the current page restaurant and then from here what i would like to do is perform a count of all of those reviews so i'll find a total of the number of reviews that have been submitted and then finally i will just go ahead and close off that bracket and then finally below this what i would like to do is just display a description of the restaurant and i could add this in below the repeating group so what i'll do is actually just move these titles down just so they're somewhat in line with the bottom of the repeating group i'll grab a text element i'll drag this out just move it down a tad and then from here i'll insert dynamic data and i'll choose to display the current page restaurants description i can also close the empty space there within this element because once again it will expand downwards if there's more content within this field and then below our description what i'd like to do is add in a button element here and the reason i'll be adding in a button is because i'll need to create a way to allow users to submit reviews on our platform now i won't be covering the actual process of creating a review in this module i will however in another module within our tutorial today however i would just like to show you the process of how you can start to allow users to actually write reviews so if you've ever used yelp you'll notice that the reviews aren't written on the same page as a restaurant when you click this button it redirects you to a dedicated page that allows a user to fill in information about the actual restaurant and it allows them to upload photos with their review and give it a star rating so what i'll be doing is just creating a quick workflow that allows a user to actually be redirected to that dedicated page but i won't go any further than that in this particular module so i'm going to update the name of this button to be called write review and then i'm going to go ahead and create a workflow and then within this workflow i'll be choosing a navigation event because i'd like to send a user to a page i'll select the go to page option and i'll need to go ahead and create a new page and i'll be calling this page submit review i'll create that but before i go ahead and select the destination page to be our new page that we've just created i'm going to need to go ahead and update the content type of that particular page because i would like to send through some data within our workflow here so i'll head over to our page menu here select on our submit review page i'll head over to the design tab and i'll just update the type of content to be a restaurant and i'll explain why we're doing this later on but essentially it allows us to identify which particular restaurant we're writing a review for now i can go back into my restaurant page i'll go to our workflow editor and i'll finish off this workflow that i was creating so i'll select the destination page to be our submit review page and then the data i'd like to send with it is the current page restaurant that we're viewing now back in our design tab there's something else i'd like to add next to our write review button and that is a icon that allows users to bookmark this restaurant now you might like to create a feature within your application that allows users to save restaurants and then view a list of all those restaurants so what i'll do here is just go and grab a icon here i'll drag it out so it's the same size as our button and then i will choose from a bookmark icon and then i'll create a new workflow that registers when this restaurant has been saved by a user so select to create a workflow on this icon and i will go to our data tab here and make changes to a thing the thing i would like to change is the current user so the person who is viewing this restaurant and the field i'd like to change is their saved restaurants which is a list of restaurants and from here i will choose to add in the current page restaurant to that list now as it currently stands a user will be able to click this button and it will bookmark a restaurant however we will also need to create a workflow that allows them to unsave a restaurant from that list that they have and the way i'll be doing this is by heading over into our workflow tab and i'm going to go ahead and create a new workflow here and the trigger for this workflow will be the same as our previous one where the bookmark icon is clicked so i'll choose from the elements option and select an element is clicked and the element i would like to identify is our bookmark icon here and before i create this workflow i will need to add a condition to this trigger because i'll only want this to trigger when the current restaurant is already saved within a user's list of saved restaurants so choose to add a condition to this workflow and i will choose from only when the current users saved restaurants contains the current page restaurant now this workflow will run and the thing i'd like to do within this workflow is make changes to a thing again so i'll select from our data tab make changes to a thing and the thing i would like to change is the current user once again i'll be choosing from their list of saved restaurants and this time i would like to remove the current page restaurant so now when a user clicks this and this workflow runs it will remove that restaurant from their list now before i finish off this bookmark feature there's one last thing i'd like to do and that is actually just update the icon if a user has in fact bookmarked a restaurant so at the moment this bookmark is empty but what i can do is create a condition that allows it to fill in just so from a user experience perspective they can actually see when the workflow has run and they have in fact bookmarked a restaurant so i'll create a condition to this icon i'll define a new condition when the current users saved restaurants contains the current page restaurant so that's the same condition that i've just added to my previous workflow and when this condition is true i will change the icon itself and i will choose from a new icon i'll be searching for another bookmark icon and then i'll be choosing the bookmark that is filled now what i love about bubble is that when you create a condition you can actually go ahead and toggle on what it looks like when this condition is met so you'll now see that once a user bookmarks a restaurant this will update to a new icon and when they unselect that restaurant it will go blank now below these elements here i'd like to go ahead and finish building out our page so i'm going to go in and add in another title here and this title will be called amenities i'll update this to be a h2 dark style font i'll just reduce the size of the element field and then below this i'm going to just expand my page down and i can add in the check boxes for each of the amenities that i'm storing for our restaurants so i'll start by expanding one out i'll update the size of this once again to be 20 so it matches the same format of our previous checkboxes and then our first checkbox here will need to be called vegan and by default this will once again be unchecked however i will need to create a condition that actually changes the status of this checkbox if a restaurant does in fact offer vegan options so i'll create a condition and i'll define a new condition and within this condition i'll identify when the current page restaurants its vegan status is yes and when this status is true i'll need to go and change the preset status of our checkbox and update this to be checked then i can replicate this so i'm just going to reduce the size of that i'll copy across our amenity option here and the next one will be called delivery so i'll now update the heading of this so it'll be called delivery and then i also need to just go and update the condition for this checkbox so i'll update the condition to now select from when the current page restaurant's delivery status when it is yes the preset status of this will be checked once again i'll go and just copy that amenity and this one will be called dogs aloud once again i'll head over to our condition tab and update the amenity that we're choosing from here to be called dogs allowed and then finally one last time i will add in another amenity check box and this one will be called street parking and finally i'll go over to our conditions tab and update the amenity we're choosing from to be called parking now beside the amenity fields here i would like to add in some information about the restaurants website and phone number so what i can do is add in some text elements here and within this text element i'm going to update the dynamic data to display the current page restaurants website link and i'll update this to be a h2 i'll just make sure that's reduced to one line and then beside this i'm actually going to add in an icon so i'll choose from our icon elements here i'll add in a small icon i'll move this right in front of our website url and i'll update the icon itself just to be a redirect icon just so it explains that a user will be redirected to an external website so the icon i'll be after is this one here and then what i can do is create a workflow to actually redirect a user to that website once this icon is clicked so i'll quickly go and create a workflow and within this workflow what i'd like to do is choose from our navigation option but in this case what i'm going to be choosing from is to open an external website and the website i would like to open is the current page restaurants website link now go back to my design tab i will copy that icon just move it down a tad and i will search from a phone icon and then i'll copy this heading here and i'll update this to be the current page restaurants phone number and then i'll just quickly move those across so they're somewhat in line and then there's one last element i'd like to add to this page and that is a map element just so i can showcase exactly where this restaurant is so i'll add in a map and i will only want to display a single marker in this case and the marker address will be the current page restaurants address and that's all i'll need to do in order to configure this element and as you can see our pages come together quite nicely aside from displaying user generated reviews which i've added a space for here the rest of the page is exactly how i would like it let's go ahead and preview what this whole experience looks like within our bubble development environment so over in my search results page here i'd like to click on my san francisco burgers restaurant i'll click on the image and it will now redirect me through to my restaurant page now on this page it will display a repeating group of all of the featured images that i've added it will display a title here san francisco burgers and then my average star rating which is followed by the total number of stars that i have again i apologize that i haven't really taken the time to work on anything design related in this build but if you were to create your own custom styles you could create a white font with some shading just so you can see that text above your list of images here below this it has the description of the restaurant i also have my bookmark here which when i click that it will add it to my list of save restaurants when i unselect that it will remove that from my bookmarks i also then have my external url for my website if i was to click that it would redirect me through to that website and i can also see on my map here it has the location of the restaurant itself i can also see that my amenities are listed here and one thing i noticed that i haven't actually ran you through is that as a user i am able to actually select and unselect these it won't make any changes to my database but just from an end user experience i'll need to quickly just jump back into my bubble editor and disable these inputs so if i just jump back into my editor here i'll go into my check boxes and take the option that says that this input is disabled i'll then go and do that for the rest of my check boxes so i'll tick the input is disabled and now if i head back over to my page i'll refresh my restaurant page here you'll now see that as an end user i'm unable to make any changes to these check boxes and there we have it that is all you'll need to know for building out our individual restaurant pages and within this module i've also highlighted how we can create a function that allows users to bookmark restaurants and that is all i have time for in this tutorial today if you are interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble journey [Music] you

Channel: Building With Bubble

Views: 1,956

Keywords: Bubble, no-code, visual programming, Makerpad, Adalo, Webflow, No-code tools, App development, Minimum viable product, MVP, Yelp clone, software development, bubble visual programming

Id: MOm-cfe5kJ4

Length: 67min 47sec (4067 seconds)

Published: Sun Mar 28 2021