Building A Fiverr Marketplace Clone With No-Code Using Bubble

so if i search for services i'll go ahead and type in social media it will register the value that's been sent through and you can see now that it has identified the parameter of the query that we've sent through as social media [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a freelance marketplace like fiverr 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 your own custom database and front-end design of your application for those of you who don't know me i've spent the past year working with the bubble team to create the how to blog series this series took a list of the most popular products out there on the market such as airbnb uber and instagram and explain the step-by-step process to rebuilding them with no code using bubbles tool throughout this tutorial i'll be walking you through the exact process to rebuild your own application like fiverr without touching a single line of code this will include features like creating user accounts being able to list your own services on the platform creating a home page and a search bar where users can search for these services displaying a profile for each creator across the platform designing a product page to display the full information of a service a feature to process payments once a user decides to purchase the service and finally an option to leave a review after users actually experience that service so grab your bubble editor and let's dive right into it now the first feature we'll be building in this tutorial isn't actually a core feature itself instead we'll be taking the time to go ahead and configure our bubble database and the reason we'll be doing that is because we first need to set up the right infrastructure in order to then go ahead and build out the rest of these features that rely on that so in my notion doc i've added in a list of the different data types and fields within them and i'll explain these as i go through and add them into my database so if we head over into our bubble editor we'll head into the data tab and you can see that the user data type already exists within an editor as that comes pre-built through bubble itself what we'll need to do then is go ahead and add in the different data types first before we then expand out the data fields that lie within those so as you saw in my notion doc before there was a data type for product and also a data type for reviews now within these we can go ahead and start adding in the data fields within those and the first one we'll be adding is the user data type so again back in my notion doc i'll start adding in these data fields such as the name the bio the skills of a user and also their profile photo so we'll head over into the bubble editor again and start adding in the name which will be a simple text field a user's bio which is another text field a user's profile photo which will be an image field a user skills which will be a text field although this text field will be a field with multiple entries because users can have multiple skills that they service for and then i'll also want to register a user's profile type now i'll be adding this field in so we can differentiate between who is a seller on the platform and who is a buyer and i'll be doing this just through a text type field here and this won't be a field with multiple entries i'll create that and from here i'll then be adding in a list of the products purchased because once a user purchases a product i'll be wanting to add that to their personal profile so then go ahead and select this field type to be a product and this will be able to link to the product data type that we've added and all the fields within each product and this will in fact be a field with multiple entries and then finally we'll be adding in a data field for reviews and once again we'll be linking this to our reviews data type and of course this will be a field with multiple entries because a user can receive multiple reviews from different people who have used their services now if we look in our notion doc we'll be going ahead and adding in the data fields for the product data type so this will include the category description a featured image for the product the price and also the title of the product as well back in our bubble editor we'll start by adding in the title of the product which is a text field next will be the category of the product which will also be a text field then there'll be a description of this product which again will be another text field and we'll add in a featured image which as you guessed will be an image data field and then finally a price field which will be a numerical value then once we've added in our product data fields the last one we'll be doing is our reviews and if we look in my notion dock here we'll be adding the content of a review a rating for the review and also a seller or user in this case that that is linked to so first up we'll add in our content of the review which will be a text field and a rating of the review which will be a number field and then also the seller who the review has been written against and this will be a user field and this won't have multiple entries because one review will be written against one particular user or seller on our platform so there we have it you can see how easy it is to build out your own custom database using bubbles no code tool and what i love about it as i mentioned before is the ability to integrate different data types across each other so as i mentioned before how we'll be linking all of the existing products that a single user has purchased you'll see how that can come into play later on in this tutorial when we start to build out a user's profile once we've added in all of the data fields and types i'm just going to go ahead and tick those off in my notion dock here and then we can start to build out the core features of the product itself now that we've finished configuring our database the next feature we'll be adding is a little bit more housekeeping and that is by creating a page that can register new user accounts to our platform so we'll head over into our bubble editor and what we'll do is create a new page entirely here and we'll call this page register once this page is created i'm just going to update the background color to a light gray color just in case i want to add any white elements to the page i want to be able to see where the constraints of the page are and then we can start to build out the page now in bubble there are two ways to be able to register accounts there's this way i'll be showing you and i'll give you a good explanation on how to do that in a moment but there's also the method of using bubbles reusable login sign up element now if you head to the drop down menu in the top left you can actually click on the sign up login pop-up element and this can be used later on throughout our product whenever we need to call upon a pop-up to register users so essentially this has all of the input fields to register users email and password and by all means you can update these elements on this page by adding an additional inputs or changing the text but what i love about this reusable element is that it comes with all of your workflows needed built into it already so for instance there's a workflow here that shows when a user's forgotten their password there's one that allows users to log in if they have an existing account and finally there's the option to sign a user up if they don't have an existing account now this pop-up is quite useful when you want to display it on top of an existing page whereas in this case i'm going to be creating a dedicated page to register user account because i might want to use it to land on this as soon as they hit the platform so what we'll do is start by adding in a text element onto our page and we'll call this just register account and i'm not going to be focusing too much on the actual design of my product here my goal here today is to help you build just a functional product but i would recommend later on after this tutorial if you wanted to go ahead and start creating your own custom styles to make the interface a bit more enticing you can go ahead and do that in this case i'm just going to select from bubbles pre-built style so i'll just choose a h2 heading here i'm just going to roughly center this and then below that i will add in a text element that just says name again i'm going to choose a h2 style font and then below this i'm going to add in our first input field now this input field will be used to register a user's name so i'm going to update the name this input to name and from here i'm going to go ahead and just duplicate this because we'll be using more input fields throughout this page the next input field will want to register a user's email i'll update the name of this input to email i'll then duplicate this again and the next input field will want to register a user's password so update this text to password and also update the name of the input field to be password and one thing i'll note at this point is that we'll need to update the content format of for each of these input fields here so in order for this to register as a password within our database we will need to go and update the content format and we'll update this to be a password and then for our email we'll need to do the same update the content format to register as an email and our name input field can remain as a text element and finally i'm going to add in a drop down menu to be able to differentiate between the type of user account that a user is registering so i'll update this to be drop down account type and the reason i'm going to want to differentiate between the account types is because i'm going to want to know if one of users are registers if they're interested in becoming a seller or someone who's just looking to purchase services on the platform so i can add in two static choices here which is the default setting for the style of this element and the first option i'm going to add is i'm interested in selling products then by adding in a separate line it automatically adds in a different drop down field that they can select from so i'll be adding in another field that says i'm looking to purchase products and then i'll just copy this text element and just have this say account type i'll make this a little larger and then finally i'm going to go ahead and add a button under this which will just say register and from here now that we have all our on-page input fields we can go ahead and actually create a workflow to register a user's account when this register button is selected so i'm going to go ahead and click start edit workflow within this workflow i'm going to choose from our account action and i'm going to select to sign the user up now from here it'll prompt you to match the email and password data fields with the on-page elements that we've already added to our registration page so we'll match the input email that we've created with the email form and we'll select the emails value and then we'll go ahead and do the same for our password input field and we'll select the password input fields value to store that data within our database and then from here you can also add in additional field types if you would like so remember how we added in the user's name field as an input we'll select to add in that through the user's name data field that we added in our previous module so we'll select the input fields name its value and that will be matched with the name value in our database and finally there was the profile type that i mentioned with that drop down menu so we'll select the profile type equals the value of our drop down element that we've added from there now you can see that we haven't actually added in the user's bio or their profile photo and the reason i haven't done this is because later on in this tutorial we'll be creating a dedicated settings page that allows the user to do this on our platform but after this what we'll want to do a user has registered their account everything is good and well we'll want to then redirect them to a home page just so they don't stay stagnant on the same page they've just used so we'll go ahead into our pages here and create a new page we'll just call this home and at this point we're not going to add anything onto this page at all i've simply just created a blank page so that i can reference it within a workflow so if we head back to our registration page we'll click on that workflow that we've just created so after a user has signed up an account what we'll want to do is redirect them to our home page so we'll select from a navigation event select go to page add the destination page as our home page and we don't need to send any data through this workflow yet i'll explain that later on in use cases when that's needed but there is one last thing we'll want to do and that is create a workflow that registers if a user already has an account because we don't want them to land on this page that encourages them to register another account if they're already logged into an existing account so what we'll do is head over to our workflow the one last time and we're going to create a separate workflow here and we're going to prompt this workflow to trigger every time the page is loaded and from here we're going to add a condition to this workflow that only allows it to run when the current user is already logged in so if a current user is logged in and somehow they click on the registration page we won't want them to be there so we're going to create a navigation event and again redirect them over to our home page and we won't be sending any data with that as i mentioned before so now a user heads over they're already logged in they head over to this registration page it'll automatically quickly redirect them back to the home page just to create a bit more of a seamless user experience and if a user doesn't have an account what we'll allow them to do is add in all of their necessary data when registering your account they'll select that it will create a new account for them and then it will redirect them to our home page where they can start to use our product and we'll take a quick look at what this user experience looks like so we'll go ahead and preview our application in its development environment and i'll go ahead and start to add in my input field so my name lachlan kirkwood my email i'll just say test at gmail.com it'll register when that's a proper email address my password i'll just add a generic password there and i'll choose from my account type which says that i'm interested in selling products i'll register my account and you can see that that workflow is running it's saving those data fields and now you can see it's redirected me to my home page that i've created i obviously don't have any content on this page so this page will be blank and then back in my notion doc i'm going to take off that i have in fact created the feature to register user account to identify the difference between a seller on our platform and someone looking for services and then also added in that last redirects to our home page once a user has registered an account once our users have registered accounts what we'll be doing next is building out a settings page which allows our users to add in any additional information to their profiles and also update this information if anything changes so let's jump on over into our bubble editor and create another new page and we'll call this page settings now on this page again i'm just going to update the color of the background and i'm going to add in a text element that just says settings i'll update this to be a h2 and just roughly center this in the middle horizontally and from here it's going to be much the same process as creating our user registration page in fact i can also go back to our registration page and copy across some of the elements such as the name the account type and i'll paste those back on our settings page because we can be reusing these elements throughout this page as well so what we'll need to do is add in the rest of the data fields within our users page which i have back in our notion doc here so we'll be adding an option for them to update their name their bio their skills their profile photo and also their profile type so let's jump back into our editor and start to add in those fields so i'm to duplicate this title and this will be called a bio and instead of using a single line input element i'm going to use a multi-line input field for this input because a user's bio can sometimes be longer than just a single line they might want to include more information so i'll update the name of this multi-line input to be called bio and with multi-line inputs what i love about them is that if a user fills up this information it will automatically expand downwards so you can make it just the same size as a single line input and it will provide the space for users to add in as much text as they would like next i'll add in support for a user to include a profile photo on their page so i'll call this photo and then i'll add in a image uploader element i'll also just move these down and i'll just call this picture uploader a profile photo and then below that before our account type i'm gonna need to add in an option that allows a user to create a list of the skills that they have for their profile and instead of just using a drop down menu for this which allows a user to select only one given option i'm going to need to use a special element which is called a multi-selective field and to enable this you're going to need to head into our bubble plug-ins tab here select to add a new plugin and you can search for the phrase multi and then scroll down to our multi select drop down and this is a free plugin so we'll go ahead and install that then back in our design tab you'll see that this is now sitting under our input forms so we will go and add in a multi-select input field and from here you can add in multiple static choices much the same as our drop down option only users will be able to select multiple options at a time so in this case i'll add fields like social media marketing seo content marketing and i'm just going to copy this title here move this account type option down and update this title to just say skills i'll then move the account type back up and then finally we'll just add in another button element which will allow a user to actually update their settings so we'll call that update now that we have all of our necessary input fields to fill out the rest of a user's profile we'll go ahead and update the actual data fields within our database so let's select to create a new workflow when our update button is selected and instead of actually creating a new user account we're going to head over to our data action and make changes to a thing and the thing we'll want to be changing is of course the current user who is updating their settings so much the same as registering a user account we'll go ahead and just match all of the data fields on our page with the data fields in our database so we'll start with the user's name we'll select from our input name field choose its value we'll then add the user's bio match that with our multi-line input value our profile photo match that with our picture uploaders value the profile type we will match that with the drop-down value for the account type and then for our profile skills because this is a list of texts we'll be in fact adding to this list and we'll be adding in the multi-selectors values that have been selected now once a user's profile has been updated what we'll need to do is just create a bit of a user experience that prompts that it has been successful and all that new information has been stored so we'll go in and choose a text element here and i'm just going to call this updated and i'll change the style of this to be a h2 again i'll add this under our update button and i'm going to want this text to momentarily display once a user has updated their settings so to begin with what we're going to do is unselect this element is visible on page load because again it will only be displayed once this button has been clicked and a user's account settings have been successfully updated the next thing we'll do is head back into our workflow editor and after a user has made changes to their account we're going to add in another step and this will be an element action and in this case we're going to want to animate a element the element will be the text that says updated and then we can choose an animation to show i'm just going to choose transition fade in and then i'll just define a custom duration of 500 milliseconds and now whenever a user updates their account which i'll show you in a moment that text will display allowing them to just see that any changes have been successful one of the last things we'll need to do to our settings page is add in any initial content to our input fields so let's say a user has taken the time to go through and add in all of their profile information and they've selected update what we'll want to do is actually store that information within these input fields so they can see what the current values are set as which will allow them to determine what they'd like to go ahead and potentially change so under the initial content field we can insert dynamic data from our database to actually store those values in those fields anytime this page is loaded so the content we'll want to display is the current user's name for the name input field we'll go ahead into our bio and add in the current user's bio then our profile photo will insert a dynamic image which will of course be the current user's profile photo and the skills under default value will include the current users skills and the account type for the default value will again include the current user's profile type then finally the last thing we're going to want to do to this page is just create another redirect like we did in our last module just in case a user isn't logged in and they somehow get a url to go to our settings page because in that circumstance this page would just be completely blank so we're going to want to create a bit of a nice user experience there so head over to our workflow menu create a new workflow under a general tab we'll just select when the page is loaded and the condition to this workflow will register when the current user isn't logged in and if a user isn't logged in we're going to create a navigation event we'll select that they need to go to a page and that page will be our home page and again we will not be sending any data with this so that is the final workflow we'll be adding to our settings page and we can go ahead and preview this now and you'll see on my page from the account that i've created before it is now displaying the initial content of the name that i registered also the profile type that i registered before and i can go ahead and update any of these changes here so i can call my name lachlan kirkwood too we'll add in a bio that just says i love building bubble i'll add in a profile photo and then i can select from my skills so let's say social media marketing content marketing but not seo and my profile type i'll keep the same as i am interested in selling products and then when i select the update button it will go ahead and display that i have in fact updated that information now if i go ahead and refresh this page you can see that it is still storing all of this information within my profile which is exactly the experience that i wanted before so now back in my notion doc i'm going to tick off that i have created my settings page i've displayed a success message once the input fields were updated i've displayed the initial content that pulls out the existing data fields of a user's profile information and i've created a redirect if a user is not logged in now that we've taken care of most of the housekeeping of our build we can go ahead and actually start to build our first really core feature to our fiber marketplace and that is actually the ability to create a new product that's something i wanted to cover before we even touch our home page because i'd like to show the process of how to actually add something to a platform pretty much from any admins dashboard and in this case this dashboard will be users who are listed as sellers on our marketplace so let's head into our bubble editor and select to create a new page this page i'm going to call create and i will create that page and as always i'm just going to update the color of the background there and i will add in a title to this page that just says add new product i'll update this to a h2 i will roughly center that and similar to our settings page and registration page that we've just added before i'm going to go ahead and add in a bunch of different input fields just so we can register the data within a new product whenever it's created so the first thing i'm going to want to add is a product title let's say h2 so the text is a bit clearer i'll add in a single line input field and i'll update this to be called product title below this i'm going to duplicate that text i'm going to call this product description then below this i'm going to add in a multi-line input because a description could be as long as a user wants update this to be description and then from here i'll add in a drop down menu which allows a user to select a category now i'm going to be adding categories as static choices here and categories across fiber could be things like web development social media marketing voice overs you can add as many as you want in that drop down menu there and i'm just going to go and then add the text above that that just says category down a bit i'll then go ahead and add in text for a featured image and select a picture uploaded element i'll make that a little larger because the featured image is i guess the main appeal of the product when you see it on the home page i'll update the name of this to be featured image and then finally the last field i will add is just an option to list a price of the product so i'll say price i'll just copy my single input field here make that a bit smaller and update the name of this to be listed as a price and we'll be updating the price field to be a currency in this case then similar to the rest of our workflows we've created i'm going to add in a button below these fields and this will just say list product and i'll go ahead and create a new workflow now within this workflow we will once again be selecting from our data actions only this time we're not going to be making changes to a thing we're going to be creating a new thing and the thing we're going to be creating is a product and then once again we're going to go ahead and just match all of the data fields with our input fields that we've added to our page so i'll start with the title is the product titles value the description is the descriptions value from the multi-line input field the featured image is the picture uploaders value the category is the drop downs value and then the price field will be the value of our input price now once a product has actually been created within our database you have two options as to what you could do similar to our settings page you could just display a success message that prompts a user that the product has been listed or you could add an option in your workflow to redirect a user to a page and that page could either be the home page or their profile page in this case i wouldn't mind sending a user to their user profile page so i'm going to go ahead and just add in a new page here and i'm going to call it profile i'll create that while i'm here i'm just going to go and update the color of the background and the other thing i'm going to want to do is update the type of content of this page to be a user because we're going to be displaying users on this page specifically then we'll head back into our create page jump on over to our workflow editor and we'll update the destination page to be the profile page and the data we'll be sending with it is the current user themselves so that way a user will be able to see their own profile which will of course display the product that they have just created on that profile as well finally the last thing i'm going to want to do on this page is once again just create a redirect that sends a user who isn't listed as a seller on our marketplace back to our home page because they shouldn't have access to be able to add new products if their profile type doesn't allow it so we'll go into our workflow editor and once again create an action when the page is loaded and on here we'll be adding in a condition that registers when the current user's profile type is and then we'll be manually adding in the text itself and what i just want to point out is that this text is case sensitive so we need to go to our initial drop down menu that a user has selected from with their account type and we're going to need to copy this text over so it matches the exact profile type that a user selected so in this case we're going to copy when a user has selected that they're looking to purchase products not sell products and then on our create page jump back into the workflow editor and head back into our condition so when a user's profile type is and then we'll paste in that value this workflow will run and we're going to then send a user to the home page and we won't need to send any data with it so let's go ahead and preview what this whole experience looks like within our application so on our create page i'm going to go in and add a product title which we call bubble no code building i'll add a description which just says i'll teach you how to build a bubble app i'll choose from a category which i'll just go with web development here i'll upload a featured image and then i'll add a price which is 99 for this product and it'll display a preview of my featured image i'll select to list this product and you'll see that it's creating the product and then it's redirecting me to my profile here and this has my unique profile url string to it but let's say i've gone ahead and then i've updated my profile account type or when i've registered i listed my account type that i'm looking to purchase products so if i update this type it's mentioned that it's updated i'll then go back into our bubble editor to our create product page i'll select preview here it'll start to load the create page and then you'll notice that it's redirected me to my home page because once again my profile hasn't been set up with permission to be able to create products only to purchase products in this instance and there we have it back in my notion dock i'm going to tick off that i have built out a function to create new products and i've also just added in a redirect that recognizes when i'm not listed as a seller on the platform once we've added the feature to create new products across our marketplace we can finally go ahead and build out our home page to display a list of all the products across our platform so let's jump over into our bubble editor and we'll head over to our home page which we have already created i'm just gonna update the background color of this to a light gray as always and then from here we can start to build out what our home page will look like now the first thing we're going to want to do on our home page is add in a list of products across our platform that users can choose to purchase and we'll be doing this by utilizing bubbles repeating group element repeating groups are by far one of my favorite bubble elements and what they allow you to do is display a list of items dynamically from your database and what i mean by that is as you can see it is a grid with multiple groups inside of it and what you can do is configure this to display a particular type of thing within your product so in this case we'll want to display a list of products that our sellers have created and then we can add in a data source which allows us to pull specific products to display and in this case what we can do is update this to search for all of the products within our marketplace so right now it's going to display a list of every single product that has been uploaded to our platform now we'll update that in a moment so i will come back to that but what we can also do is update the style of this repeating group so for instance i can update this to display one row and i might want it to display three columns or maybe four in this instance just so we can then expand this as a horizontal option of choices i will then update the size of that i'll center this horizontally and then i can go ahead and start to add in particular elements that i want to display within each repeating group now as i mentioned each one of these grids will be a individual product so i'm going to want to display some information about each of these products the first thing i'm going to want to display is the image of each product and what you'll see here within a repeating group when i insert the dynamic data is that once i add an option into the first column it will automatically go ahead and populate the rest of the columns and also pull in the dynamic data that they are required to show so i'll add in some dynamic data here and i'm going to select to display the current cells product so the product of each grid i'm going to want to display its featured image i'm just going to go and move that over to the side so i can make this image a little bit bigger and you can now see that it has populated the rest of our repeating group below this i will then want to display the title of the actual product that we're showing so it could be the current cells title and i'll just update this to be a section heading so the text is a little bit larger and then below this i'll go ahead and add in the information of the person who's actually created this product so when a user creates a product in our platform it will automatically tie that information to the product itself so you don't need to do any additional workflows or any database changes to store that and from our previous workflows we've created this will automatically be set up for you so once again i'm going to select to add another image element i'm going to make a small image here i'm going to insert dynamic data that displays the current products creators so that's the seller who has listed this product i'm going to display their profile photo and then beside that i'm going to add in some text which displays their actual name so once again i'll insert dynamic data from the current cells products the creator of this product their name and finally i'm going to want to add in the price of the product itself so i'll add in another text element i will need to remove any content within this in order to add in a dollar sign and then i will insert dynamic data from the current sales products price i'll also go ahead and update this to a h2 just so it's a bit more recognizable and once we've added that in you can start to see that our homepage is very slowly coming together as we can finally start to display products that have been listed on our platform now if you've got more than three products listed on your platform you can scroll horizontally across within this repeating group or what we can do is also add in another row and what this will do is once i expand it you'll be able to see that it adds in an option to create two different rows of repeating groups so that's a list of three products this is a list of three products just so you can expand out how many products you can display on one page for the sake of this tutorial though i'm just going to revert these changes because what i'm actually going to want to do is break these lists of products into different categories across our home page so i'll add in a text element here and first i'm going to display this as the web development category i'll update this to be a h2 so the font is a bit more recognizable and then what i'm going to want to do is only actually display the products that match the same category of web development so if i go into our repeating group here i can update the data source of it and i can add any constraint that not only just searches for every product on our platform now but also searches for only the products where the category equals and then i'll type in web development and again you just need to be cautious that because we're storing the static option in our drop down menu this will also need to be case sensitive now if you'd like to add in additional categories to your home page you can simply copy and paste this repeating group here add that below i'll just expand that text out and then i will add in voiceovers that was another category that we were storing and then again go into the data source of our repeating group where we're searching for products and we'll update the category here to be voice overs now once we've started to display our featured categories on our home page there's one last feature we're going to need to add and that is a search bar function so although we've added in these list of feature categories a user might want to search for a particular category type or even a product title that isn't featured on our home page so what we'll need to do is add in a function that allows a user to type in a query for a product and then be redirected to a page that displays a list of products that match that specific query or service that they're after so at the top of our home page i'm going to add in an input field here not a search box and i'll explain why in a moment but i'll add in my input field up at the top i'll add in a placeholder that says find services and then what we'll need to do is go ahead and create a workflow for this input field that actually redirects us to a separate page which in this case will be our search results page and it will need to send through the value of the text within this input field so we'll go ahead and create a new page we'll call this search results create that and i won't be doing anything on this page except for just updating the background color and then back on our home page i'm going to need to create a workflow that registers when the value of this search bar has been changed so we'll head over to our workflow editor so within this workflow what we'll do is create a trigger when an element's value is changed and the value has already defaulted to the input search bar that we've added and then within this workflow what we'll want to do is go ahead and select a navigation event and we'll be sending a user to a page that page will of course be our search results page and we won't be sending any specific data within that page although what we will want to do is send a parameter within this workflow so if we tick that we want to send a page parameter we can add in a new parameter and we'll call this parameter query because that'll be someone performing a query within our search input field and then what we'll do is add in a value for this query to be the same value as the input field so now let's say a user is searching for social media it will then send through social media as the query within that url so let's go ahead and preview what this home page now looks like in our bubble development environment as you can see on our homepage it has the existing product that we created before for my no code building service it displays the products featured image the title my profile photo my profile name and also the price of this service or product itself and under the voice overs category you can see that there's currently no content in that so it isn't pulling any data at the moment to display from here as well we can go into our search bar and type in a particular service that we're looking for so let's say i want to search for social media services i'll enter that it's changed the value of that input field which then triggers our workflow so as you can see it sent us through to our search results page here and it's also added the query value that we've added and that includes the query that the users just search for which in this case is social media and when we build out our actual search results page i'll explain exactly how that works and how we can pull this data from our query to display dynamic content on this page and just like that we've finished creating a basic structure of our home page in order to display products by their categories and also include a search bar that allows users to perform custom queries and that is all i have time for in this tutorial today if you wanted to check out the rest of the course i'd recommend clicking the link in the description below and purchasing the full course throughout this 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 rebuild other popular products if you'd like to also get started learning how to build some other popular products i'll include some suggested videos in a moment that you can also check out thanks again for tuning in and be sure to hit that subscribe button if you'd like to see any more helpful tutorials like this to help you on your bubble journey

Channel: Building With Bubble

Views: 6,121

Keywords: bubble, visual programming, nocode, no-code, bubble.io, bubble.is, webflow, airtable, fiverr, freelance marketplace, no-code tools

Id: _7j3Pzaj9ps

Length: 47min 50sec (2870 seconds)

Published: Tue Feb 02 2021