How To Build A Product Hunt Clone With No-Code Using Bubble

on my homepage here i'm currently logged into my account and i would like to upvote bubble i can select this icon you'll now see that it has ran that workflow and added me to the list of all of the users who have uploaded this product [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a product hunt clone entirely out of no code using bubble bubbles by far one of my favorite no code tools as it is a complete end-to-end solution that gives you the ability to design your own front-end application create a series of workflows and logic to stitch it all together as well as the functionality to integrate with third-party services and plugins for those of you who don't know me i've spent the past year working with the bubble team to write their how to build blog series this series took a list of the top products out there on the market like airbnb uber and spotify and explain the step-by-step process to rebuilding them with no code using bubbles tool so now this is exactly what i'm doing with my own tutorials within this particular course i'll be walking you through the step-by-step process of recreating your own product hunt clone this will include features like registering user accounts allowing users to launch a product across the platform displaying a list of all of the products by the date that they were published on a home page viewing the full information of a product on a dynamic product page upvoting those products and allowing users to comment on each of those products as well so grab your bubble editor and let's get right to it the first feature i wanted to tackle in our build today isn't actually a core feature that our users will interact with instead i wanted to take the time to explain how we can set up and configure our own custom database within bubble now for our tutorial today i've created a notion doc that entails all of the different data types and fields i'll be adding as well as a list of all the features i would like to add throughout the build i'd recommend also creating one as i go along as it allows you to tick off every single item as you complete it another thing i'd like to mention is that if any point throughout my tutorial or in any module you find yourself getting a little bit confused i strongly recommend that you pause the tutorial and rewind it to just watch that section over again i will of course be explaining things in as much detail as possible however i completely understand that if you're new to bubble it can sometimes be a little bit overwhelming so i'm going to jump ahead now into my bubble editor over here and i'll start building out my database once i'm in my new editor here i'm going to head over to my data tab and now i can start to build out what exact data types and fields i would like to add and by default you'll notice that bubble already has a user data type pre-built and that will include an email address field it will also store a user's passwords however it just doesn't display this in plain text even though you are the admin of this editor but before i go and build out all of the data fields that will sit under our user data type what i'll need to do is actually create all my different data types because i will also need to within our data fields link those through to different data types so i'll be creating a truly relational database and if i jump back into my notion doc here i can see that i have a couple of different data types so i'd like to add in a user a product a product content a comment and then a data type for the publish date and i'll be explaining all of these in a lot of detail as i run you through how you can add them into your own database but let's start by adding in all of these key data types into our bubble editor so i'll start by adding a data type here and i'll call this product now i will create a separate data type called product content and at this point in time i'd also just like to highlight why i've created two different data types for the product and the product content when you're working in bubble and you add in a list of data fields every time you'd like to for instance call a product to be displayed the bubble editor will load all of the data fields that are associated with that data type now if you're building an app like product hunt you'll recognize that on the home page it displays an entire list of products and if you were to replicate this in bubble every time you load an individual product it would start to become overwhelmed at how much data it needs to load from your database meaning that it would slow down over time so a workaround that i personally prefer is splitting your data types when possible and in this case today i'll be splitting our product content from our product so to keep things streamlined on our product data type i'd like to just store the essential information that i need to display on our home page for this product so this can be things like the title of the product the featured photo of the product like the little thumbnail photo as well as the headline or tagline for this product whereas i would then in my product content like to store all of the larger files which will normally just include things like a description because that text can become quite lengthy and also just a list of all of the main images that we'd like to display for this product then throughout my application whenever i need to display the images of a product i can simply just call upon it by referring to the products product content and when we actually set up the data fields this will make a lot more sense when i explain how you can link these two data types together but before i do that there's two other data types i would like to add one is for comments across our application so every time someone creates a comment and the other will be called the publish date now the reason i'm recording a published date as a different data type is because on our product hunt home page feed you'll notice that products are obviously categorized together however you'd also note that each product is categorized by the date it was published so in our database what i'd like to do throughout our build is just create a new date every single day and then attach a list of products to that date and that is all the data types i would like to add in our build today now we can move along and start to add in all of the data fields within these so i'll head back into my notion dock here and i'll start by working around my user data fields and i can see here that i will start by adding a user's name their headline their website link and also their profile photo so over on my user data type i would create a new field and i'll start by just simply adding in the user's name and this field type will just be a plain text field i'll choose to create that then i'll need to create the headline of a user and this is normally just a brief description that product hunt allows you to include on your profile and this again will be another text data field and the next data field will be the website link so this allows someone to feature a link to their website on their profile and that would just be another text field type and then i will create another field and this will be the user's profile photo and this will just be an image field type i'll jump back into my notion doc and i can see that the two remaining fields are the followers and the users that someone is following so i'll head back into my database and i'll create a list of followers and the way i'll be registering followers throughout our application is a list of users so every time someone follows another person on our platform i will add that person into a list of that person's followers so i'll select that our followers will need to be a user field type and then i will select that this will be a field with multiple entries i'll create that and then i'll create another field for the following which is again a list of users that someone is following so this will be a user field type and i'll take that this is a list with multiple entries now i can jump into my notion doc and i can tick off that i've added in all my data fields for my user data type if i have to scroll on down i can now start to build out the data fields for my product so i'll start by adding in the title of the product so i'll select our product here i'll create a field and this will be a title and this of course would just be a standard text data field then there will be the headline for the product so much the same as when we created it for our user data type this again will just be another text field and then there was also another website link for this product so i'll select this to be a text field again now within our product i'd also just like to register a single thumbnail image so this will just be an image that's displayed on our home page before someone can click through and view the full list of images for this product so i'll create a field i'll call this thumbnail image and this will be an image data field and then i will just create that and now below this i would like to create a data field for the list of people who have made this product so those who have contributed to it and this will be a list of users because users of course have built this product so i'll select that this is the user data field type and then i will tick that this is a list with multiple entries because multiple makers could contribute to one single project so i'll create that and then i would also like to create a list of those who have upvoted this product so i'll call this field upvotes and this field type will be a list of users similar to our followers data field under our user data type our upvotes will just be a list of users so every time someone upvotes a product i will add them to that list of total users who has upvoted that product and of course i can perform a count on how many people are in that list and display that as the total number of upvotes for that product so i'll register this field type as a user property and then i will select that this is a list with multiple entries and now what i'll need to do is link out our product to the additional data type called product content so that way if at any point i'd like to display the product description or the images i can call upon that additional product content data type and display the information stored within its data fields so i'll create a data field here and i will call this additional content go to typo there and then i will link this field through to our product content data type and i won't need to select that this is a list with multiple entries because i'll only be linking one product content to one product so i'll create this data field and then finally the last field i'd like to create is just the launch date of a product now by default bubble will register the created date here as you can see so every time a product is created it will in fact register that within our database but what i'd like to do is just format this as a plain text entry because when it is just a text value i can manipulate it or format it in whichever way i would like which i will need to do later on in my build so i'll create a new field and i'll call this product launch date and then i will indicate in brackets that this is the text version of our launch date so as you can imagine this field type will just be a text entry so i will select to create that and that is all the data fields i'll need to add to our product data type so i can jump back into notion i will highlight all these fields and tick off that they have been added then i will need to add the product content data fields and this one's pretty straightforward i'll just need to add in a description and also a list of images so i'll jump back into bubble i'll head to our product content data type and i'll start by adding a new field and i'll call this description and this will just be a standard text field now i would like to also store a list of images within this product content so when a user uploads let's say some screenshots of their product or some mock-up assets they can store these within our additional product content data type so i'll create a new field here and i'll call this images and this will of course be an image field type and i will be selecting that this is a list with multiple entries because a maker can upload more than one image to a product so i'll choose to create that and this data type is nice and simple to build out there's only two data fields i'll then jump back into our notion doc i'll tick those off and i can see that our comment data type is next which is another easy one to create so jump back into bubble i'll head to our comment data type and i'll choose to create a new field and the first field i'll be creating is the comment content so this will be the actual content that is written within a comment and this will just be a text field type so i'll create that and then what i'll need to do is actually link this comment to a product that it's published to so i'll create a new field and i'll call this comment product and this field type will need to link back to an original product so i'll select that this is a product and because i'm only linking one comment to one product at a time i won't be selecting that this is a field with multiple entries so i can now create that and again that is all i'll need to create for our comment data type it's another simple one the last data type i will need to create is just the manual published date so i would also like to store this date as a text input because later on in another module i'll be overlapping when the products date which is formatted as text also matches our publish date that's formatted as text and then within this published date i would like to store a list of all of the products that have been published on it so i'll jump over into our editor and i will head to our publish date and then i will create a field called date text and this will just be a standard text input and then i'll create another field and this field would be called products on date and this will be a product data type and i will be selecting that this is a list with multiple entries because of course multiple products can launch on a single date so i'll create that and that is the last of the data fields i'll need to create in our custom database today i did also just want to take this time to explain the use of privacy rules within your application here so you'll notice that when we're adding our data types by default bubble has added some privacy rules to each individual entry and if you were to click into it you could see the default values that bubble has created so you can see here that under our product data type the product itself is only visible to the person who has created it which is not the experience we'd like to create within our product hunt clone what we'd like of course is for a user to be able to publish their product on our platform and for every other user in our community to be able to view it so what we'll need to do is actually delete these privacy rules by default or else you'll find that when you ship your application or view it as a demo you won't actually be able to see any of the content if you're not logged in as the person who has created that data entry so i'm simply just going to head over to the trash can icon here and i will click that and now you can see that our product its privacy setting has been switched to publicly visible i'll then need to do that for the rest of our data types so i'll jump into our comment here i would delete its privacy rules i'll head to our product content i will also delete its privacy rules and then finally i'll head to our publish date and delete its privacy rules and you'll now see that all of these data types are publicly visible across our application then back in my notion dock i can tick off the last of the data fields that i've added to our publish date data type and from here you can see how easy it is to build out your own custom database within bubble i completely understand that if you're new to bubble this can be a little bit confusing from the first instance of creating a database however like everything of course the more practice you have the better you'll get at it as i mentioned earlier on in this module if you found yourself confused at any given point throughout this tutorial be sure to jump back to that stage and re-watch any of the instructions that i gave you now that we've taken care of most of the housekeeping we can dive on into one of the actual first core features i guess that users will get to engage with across our platform and that is a function to create and list a product on the actual product hunt platform itself now this is quite a big module so if at any given time you find yourself confused or you just don't have the time to finish it i'd recommend pausing it and rewinding it to get some additional insights however i will be explaining everything in as much detail as i possibly can as i walk you through it let's jump on over into our bubble editor and i will get you started now the first thing we'll need to do in our bubble editor is create a new page within our application so i will add a new page and i will call this new i will create that now on this page once again the first thing i'll be doing is updating the background color but i'd also just like to highlight that i'll be splitting our process of creating a new product into two separate pages and the reason i'll be doing this is because it replicates the same workflow that product hunt has when you submit a product on their website so if i was to head over to product hunt at the moment and choose to post a product the first page it will send me to is if you look in the url string here it says new and it will ask me to add in a product url here and at this point it will only allow me to add in a unique url of a product that hasn't been posted so i'm just going to add in a dummy url here that says new product to test dot x y z i'll select next and now you'll see it sent me through to a separate page here called submission and we'll be able to replicate this experience within our bubble editor so if we head back into our editor the first page i'd like to create is that initial page where we are storing a unique url of a product that's yet to be posted on our platform so on this page i will grab a text element i will add this into the center i'll update this text to display submit a product i'll update that to be a h2 style font as i always do i'll just reduce the size of the total element and then center that horizontally then i will duplicate that heading i'll move that down i'll update the format of this to be a h3 just so it's a little bit smaller and then i'll update the text to actually display link just reduce the size of that and now i will add in an input field so i'll drag this out across our page and i'll update the name of this input field to be called website link now below this i will add in a button element and this button will just display next just drag that out so it's a little bit bigger and then i will also center that horizontally now what i'd like to do is create a workflow when this next button is clicked that stores the information of this link and sends it through to the next page in our process which is our submission page so i'll choose to start edit a workflow and then from our action step i will choose a navigation event and i will select a go to page option and at this point our submission page doesn't yet exist so i can select to create a new page from our menu here i will call this page submission i'll select to create that i will then choose the destination page to be a submission and i won't be sending any data through that's stored within our database what i would like to do though is actually send through the link of the product just to simplify the user experience on the next page now of course i could store this link within my database however there will be plenty of occasions where someone will add a link but they won't actually finish posting their product so what you'll find is that you'll quickly have lots of instances within your database where you're storing all of these links for no reason at all which of course can slow down your application if you're just storing unnecessary data so a great alternative to this is sending through what's called a page parameter and essentially what this does is it allows you to attach a value within your url string that's sent through to a page which you can then extract on your next page and use that value anywhere you would like so the way i'll be doing this is jumping into my workflow editor and on our redirect action here where i'm sending someone to the submission page i will tick there's a box to send more parameters to a page and then i can add a custom parameter and i will call this parameter product link and then i can add in a custom value for this custom parameter so i will select that the value of this should be the input website links value so the value of that input field now before i move on to building out our submission page itself there's one last feature i'd like to create on this page and that is creating a way to block a user from adding a product that already has been submitted to our platform so essentially if this link here isn't unique so if it's already been published across an existing product i won't allow the user to advance through to the next page and the way i can do this is by jumping back into our workflow editor and i can create a new workflow i will choose from the elements option when an element is clicked the element will of course be our next button and then what i'll need to do is add in a condition to this workflow to only allow it to run when a certain behavior is met and the condition i would like to add is just something that allows us to search through all of the products in our database and then identify if an existing product has the same link as the link that the user is adding onto our current page here so i can select that this should only run when i will start by performing a search for something i will search through all the products in our database and i would like to only search for all of the products when the website link equals the same value as the website link input field on our page so now this search will identify if a product already does exist with the same link that the user is trying to post and then from here i will need to identify when all of the products that could potentially have the same link that the user is trying to post if the number of those is greater than and then i will just manually type in the number zero so if there's more than zero products that have already been listed in our database with the same link that the user is trying to currently post so essentially if one product already does exist with the same link this workflow will run and what i would like to do within this workflow is just display an alert message to prompt the user that a product with this link has already been posted to our application so the way i can do this is of course by heading to our design tab again i will grab an alert message i will just drag this out below our button here and then i will update the text of this alert to say this product has already been hunted and i can update the default style to just be a warning alert so it's red i will also center that horizontally and just reduce the height of that and of course this being an alert it won't actually display until we call it to within our workflow so i'll jump back into our workflow editor head back into the workflow we've just created with the condition on it and when that condition is true i will select from the element actions i'd like to show a message and it will automatically pull through our warning alert there that doesn't allow a user to advance through now because this condition identifies the instances where a user is posting a product that has already been published to our application i'll need to add a similar condition to our existing workflow here that allows us to identify when a link hasn't yet been posted in which case we would allow the user to advance to the next stage of our submission process so i'll click through to our first workload that we've created the one that sends a user through to our submission page with the parameter that we've just added in and then back on the actual trigger of the workflow itself i will create a condition here and once again i will only allow this to run when i perform a search through my database for all of the products where the website link equals the same value of the input website link on my page and then i will need to identify when there is no instances of an existing product with the same link so i will select when the count is and then just type in the number zero this workflow will now run and a handy feature you can add to differentiate between the two workflows is just by updating the color of this workflow to be green because it is a path that allows a user to proceed and then i can update the color of the other workflow to be red because this will trigger our warning message to a user and that is all i would like to add to our first page here throughout our submission process what i would like to do then is head over to our submission page and start to build out the rest of this experience so once again the first thing i'll be doing is of course updating the background color here and then i would also just like to reference back to the product hunt experience itself so the way product hunt has actually structured their ux is that it allows you to step by step add in additional information for your product so it starts by asking you for the name the tagline and a thumbnail image for the product then once you have added that you can select through to the next option and it will allow you to add in the featured images and then there'll be another option that allows you to identify who the makers are of this product and this is all positioned on the exact same submission page what they do however is just update the custom state of this page to display different form fields at different times and once again this is an experience we can easily replicate within bubble and i'll show you exactly how to do this so if we jump back into our bubble editor we can start by selecting to add in a group element here and i'll explain in a moment why i'm doing this but i'd like to expand this group out over the page and i will just update the group here to have a colored background just so i can see where it lies on my page of course in the future i can then remove the color if i would like but i will edit the style of this group i will select that the background star should be a flat color and by default it will just switch to a white color code then i can center this group horizontally in my page and i can add in a title into this group and then within this title i can remove the existing text i will add in my own text i'll start by adding in an emoji and this will just say tell us more about this product of course i'll update this to be a h2 i'll then reduce the size of that and now similar to our user registration page i can go and add in some text and input fields below this so i'll add in a title here to say name of product i'll update this heading to be a h3 and then i can grab a input field just a single line input i will drag that out and then i will update the name of this input to be called product name then from here i will copy both the input field and the title i'll drag these down and then i will update the title to say tagline and i will also update the name of this input to display tagline and these will both just be standard text elements and then i'll duplicate this once again and this title will be called website link and of course i will update the name of the input field to also be called website link and then finally there's one last field i'd like to add and that is a thumbnail image so copy this title i'll move that down i'll make it roughly in line with those again i apologize i'm not too concerned about my design right now i will also just extend this group out i will then add in a picture uploader element so scroll on down select the picture uploader drag that out and then i'll update the name of this to be called thumbnail image and of course i'll also update the title here to be called thumbnail image i will just also reduce the width of that just so it's a square picture uploader and now below this i can just add in a button element and i'll update the text of this to display next semicolon and then images because that will be the next stage of our submission process now it's at this point that i would like to explain why i've added all of this into a group so group essentially works as a container in bubble so if i was to move this group across our page you can see that all of that content has been stored within this group and what i can do with the group is update the way and time that it is displayed within our application and this is quite useful because when we're replicating product hunt's experience where there's three different stages of the submission process we can hide and display these groups whenever we would like throughout the process so what i'd like to do is start by unselecting the option here that displays that the element is visible on page load now what that will do is hide this group by default i will then also select the option to collapse this group's height when it's hidden so that way it completely removes it from our page formatting when it's not being displayed and then finally i will update the actual name of this group to be called submission one so by default now a user will be sent through from our first step of our submission process they'll be redirected to our submission page here and when they land on this page there'll currently be nothing displaying as this group isn't visible on our page load so what we can then do is create what's called a custom state that allows our page to register that this group needs to be displayed at a certain period of time and for our tutorial today i'll be adding a custom state onto our page so i'll be selecting the gray page element here and the way you can add a custom state is by heading over to the information icon here clicking that and then you'll see an option to add a new custom state to the element that you've selected so once again i just want to reiterate that i'm adding the custom state to our page itself not the new group i've added the gray element i will select to add a custom state and i will call this state name step one and i would like this state to be what's called a yes or no state so essentially i would like to register if we're in step one of our submission process and that will be a binary so yes we are in the step one stage of our process or no we're not in the step one stage of our process and i will choose to create this custom state now for this custom state i would like the default value of this to be yes because when a user lands on our submission page here i would like this group to display by default meaning that they are currently in the step one stage of our submission process now i'm just going to click out of our custom state option here but one thing i will note is that our group element here is still currently not visible so what we'll need to do is create a way for it to recognize when the pages state is in the step 1 condition and when this is true we'll actually create a condition that allows this group to be displayed so if we move over to our conditional tab here once we've selected into our group we can define a new condition and conditions are another way to allow elements to react to certain behaviors or functions within your application so in this case i would like this group element to identify when the pages state is set into the step one process which it is by default because we've got that yes field set as a default option and when this behavior is true i would like this group to actually be displayed on our page so i'll select that when the i'll scroll on down and i'll choose the submission option and that's because our page is called submission you'll see here it highlights a gray box because our page is also colored gray so that's our page here that i'm selecting from so when the submission page it's step one so it's custom state that i've just added when it is selected to yes which of course it is by default i would then like to create a behavior that happens and the behavior i'll be selecting is the first option here which says that this element is visible and then i will select that box meaning that it will be true so now if i was to go and just show you a quick preview of this page you'll see that this group itself actually displays on our page load even though by default the value of it has been told not to display on our page so here i am on our submission page and as i mentioned before you can see that our group is already displaying now of course from here what i would like to do is create an option to update the state of this page to then display the second step within our submission workflow so i'll move back over into our bubble editor here and then what i would like to do is scroll up to our elements tree option here i will select the drop down and where our group here sits i would like to click the i icon which just hides that from being displayed then what i would like to do is add in another group on our page which allows us to display the step two of our submission process so i'll update the group here to be called submission two and then once again i will unselect this element is visible on page load and then i will also select this element should collapse its height when it is hidden now this step in our submission process is used to allow a maker to upload all of the images they'd like to display on their featured product so once again i'll be grabbing a text element first and i'll add in a title to this group i will then just remove the text that already sits within that input field i will add in a star emoji that production uses within this step i'll add a space and then i'll type in let's make this product look nice i of course will update that to be a h2 style font i will move our element up and then i will add in a another text element below that title and this will just display gallery i'll then also update this to be a h3 dark font which doesn't really make much of a difference now what i would like to do is create a way for a user to upload multiple images to this product now one thing i will note is that if i scroll in down to our input forms and select our default picture uploader that comes with bubble i won't be using this in our case today because this only allows you to upload one single image at a time whereas i would like a user to be able to drag in multiple images at once so a way to work around this is by just deleting our picture uploader there and bubble has a free plug-in called a multi-file uploader that allows you to upload multiple files at once so i'll move on over to our plugins tab here then within this i will choose the add plugins option and then i will search for the term multi i will then scroll on down to the multi file uploader drop zone plugin here which is a free one built by bubble and i will choose to install this then once our plugin has been installed we can jump back over to our design tab we can scroll in down to our input forms here and you'll see that you have an option now to add in a multi-file uploader i will then select to stretch that out and i'd also just like to add a background to this i'll just make it a flat color again except i'll make this a gray color so i can see it against my white group here i can also probably just reduce the total size of that as well now the thing i will note about the multi-file uploader is that it just displays a list of all the file names that a user uploads to it what we will need to do is create a feature that actually displays a preview of all of those images and the way we can do this is by adding in what's called a repeating group element and repeating groups are quite a powerful element in bubble what they essentially allow you to do is display a list of items that you can pull from a unique data source so a good example is that if you'd like to display a list of all the users within your database you could just add in a repeating group and it will pull out all of that information for you now before i add in a repeating group i would like to add in another group so a group within our group and the reason i would like to do that is because i don't want our repeating group to actually display until there are files within our drop down zone here and of course as you saw before groups are a powerful element that allow you to hide and display them based on current behaviors happening across different elements on our page so i will scroll on up to our group here i will add in another group i'll stretch this out to be pretty much the full width of our initial group here now to help us determine where this group lies on our actual main group itself i'm going to update the style of this group to be called group border i will then edit the style and i will just update the color of the border for this group to be black and the width can be two i'll then move back to our design tab and you'll now see where that group lies on our page as always you can go and update the style of that once we finish actually building this out but now within this group i'm just going to expand that down a little but i will add in our repeating group element from our containers option here i will expand this out to be pretty much the whole size of that group and as you can see the repeating group will display a grid or a list based on certain items either within your database or a different data source now what i would like to do is first configure the type of content that i would like to display within this repeating group so essentially i'd like this repeating group to display a preview of all of the image files that have been uploaded to our multi-file drop-down zone here so i will update the type of content to be a file because users will be uploading files into this picture uploader zone here and then i will want the data source here to be the value of the file stored within our multifile uploader so i can scroll on down to our multi-file uploader here i will select that and i want it to be the value of those files currently uploaded now what i can also do with my group is update the layout style so i will want this to be displayed horizontally so across and then i'll update the number of columns to be 3 and now you can see that it will display these horizontally and a user can in fact scroll horizontally if there's more than three images as well then within our repeating group what i would like to do is display images based on the files that have been uploaded to our drop down zone so i can scroll up here to our visual elements i would select to add in an image into our repeating group here and essentially what this repeating group will now do once this image has been added to it is that it will want me to identify what i would like to display within our first cell and it will replicate that across every other cell so you essentially add it in once and it duplicates it across every other cell of the repeating group so in this case i would like the image itself to display every single file image that's been added into our drop down zone here so just a preview of all those images and in order to do this i will select the image itself i will add in a dynamic image i will insert dynamic data and display the current cells file and you can now see that it has replicated that image across every cell of our repeating group and there's one last thing i'd like to do with our repeating group and that is to create a condition that only allows it to be displayed when there are files that have been uploaded to our drop down zone here because if there aren't any files in this drop down zone i won't want this element to display and the way i can do this is of course by heading to my group element so not the repeating group or the image but the group that they both sit within so just make sure you're selecting the group with the black border around it it'll tell you here i'm selecting group c i could update the name of this to be called group repeating group container if i really wanted you don't need to do that but that's just what i'd like to do for point of reference and then of course i would like to unselect that this element is visible on page load and then also choose to collapse this element's height when it's hidden so when it's not displayed anything sitting under this group will move upwards and then i will need to create a condition on this group that only allows it to be displayed when there is a file within our drop down zone here so i will define a new condition and i will identify when the i'll scroll on down to our multi file uploader so when our multi file upload here it's value the count of how many files are in it is greater than i'll just type in zero manually so now whenever there is more than no files within that uploader there i will select that this element is visible and tick that that should be true and now that will allow this group to be displayed once a user uploads a file or more into this drop-down zone then finally on this particular group so the step two within our submission page i would like to just add in one last field and that is a description for our product so i'll copy this title over here that says gallery i will update this to say description and then i will add in a multi-line input field not a normal input field now the difference between a multi-line input field and a regular input field is that with a normal input field if someone was to add in more than that single line of text it would simply continue to scroll horizontally whereas in a multi-line input field if someone adds in more than the width of the actual input field it will just expand downwards based on how much content is stored within this i will then just update the name of this input field to be called description and i'll also update the name of my multi-file uploader here to be called product images now i will just expand this group downwards one last time and i will add in a button element below all of our input fields here and i will update the text of this to say next semicolon makers i'll just reduce the width of that as well and now what i would like to do is once again create our conditions that only allows this group here to display when it's needed so when we're in step two of our submission process and of course the way i can do this is by once again selecting on our page so the gray element which is called submission heading over to the information icon and i can add in another custom state so as it stands of course we've got our step one state which has a default of yes in this case i would like to add another state i will be calling this one step two and this will once again be a yes no option i will then select to create this and in this instance i don't want there to be a default on this page the only reason i added a default to our step 1 stage is because i wanted that to automatically display it once our page was loaded whereas in this case i only want this step 2 group here to be displayed once a user has selected that they're ready to advance to this stage in the submission process then what i'll need to do after adding in this state is heading back into our group here so the submission 2 group i will then add in a condition that allows this group to be displayed only when the step 2 stage is yes so i'll define a new condition and i will scroll on down to the submission option once again the submission is our whole page itself so when the submission page is step two in our workflow is yes i will select that this element is visible and that should be true so i will take that box then of course i will need to create a workflow that actually switches the state of our page from step one to step two which will then automatically hide the first submission group and display this one instead and the way i can do this is by scrolling up to our elements tree here i can hide the group we've just added so the submission to group i'll take the eye icon and that will hide that i will then select the i icon for the submission one group and i'll create a workflow when the next images button is selected i will select to start edit a workflow and then within this workflow i will search for an action called state and it will set the state of an element the element i would like to set the state for is our submission page and i will be selecting from the state one option which of course is the default value that's set to yes once our page is automatically loaded and what i would like to do is switch this state to no once that button has been clicked and then i would like to add another step into our workflow that switches the state of step 2 to yes meaning that our next group will display and our first group will be hidden so i'll add another step to our workflow here once again i'll type in state and set the state of an element the element i will be setting the state for is our submission page the custom state in this case will be the step two state and the value of this will need to be updated to yes and now if i preview my page you'll see that when i select the next button it will hide our first group and display our next group so i'll quickly just jump over into our development environment and show you a preview of what this looks like so far over in my editor here i'm not going to worry about adding in any text fields yet but i will select the next option and you can see that it has changed the state of our page hidden that first group and then displayed our second stage of our submission process and you can also see that our repeating group has been hidden and i'll be able to show you how that functions properly once i give you a full preview of this whole experience but for the meantime we'll jump back into our bubble editor and from here we'll head into our design tab because there's one last stage we're yet to add within our submission process to complete it and that is the stage that allows us to add in all of the makers who have contributed to this new product that we're submitting across our platform so in order to build this i will unselect that i want this group to be displayed so i'll currently display nothing across my page i will also grab a group element again i'll drag this out of my full page and then i'll update the name of this group to be called submission three of course i will unselect that this group is visible on page load and select to collapse this group's height when it's hidden i will then add in a heading to this group i will then backspace the text i'll add in an emoji because that's what product hunt uses and then i will have this title display who made this product question mark of course i'll update this to just be a h2 style font make it nice and easy and throughout this stage of our submission process i would like a user to be able to add in all of the additional makers who contributed to this project so in order to do this i will be creating my own custom search function within bubble now as it stands bubble does have a search element that you can use here called a search box under your input forms i won't be using this today but i do just want to quickly explain what it does it will allow you to search either through a list of static choices you add or a list of dynamic choices so you could define something in your database that you would like to search for in our tutorial today though i'm going to be showing you how to build out a custom search experience because when you search for a user on product hunt you type in their name or the handle and it will display a preview of all of the users who match that search query and it will actually display both a profile photo and the name of that maker whereas the default search option here within bubble will only allow you to display one field so it might be something like a maker's name whereas i actually want to display the photo and the name of a maker across our platform so i will be deleting this element and i will start by adding in a title onto our page just below our heading there and i will update this to save makers i will also update the style of this once again to be a h3 i will then just move that down a tad and from here i'll be adding in my own custom search experience so i will select to add in just a regular input field drag that out and i will update this input field to be called user search and this will just be a standard text field but in order to display a list of all of the users across our database who meet the same value of this search i will once again need to leverage a repeating group element so i'll add in a repeating group below this search element i'll just expand that out so it's the same width as our actual input and the first thing i'll need to do is of course update the type of content that our repeating group will be displaying in this case it will be a user because i'll be searching for all of the users within our database and then the data source itself will need to perform a search for all of the users and i would like to display a list of all of the users whose name matches the same value that's been added into our maker search bar here so i'll add a new constraint and identify when all of the users name and then i will choose contains not equals because if i was to select equal the value of the search box here would need to be identical to the value of a user's name whether it be capitalized or have spaces in it whereas if you choose the contains option if someone's searching for let's say all the lachlans in our database they could just type in the letter l and then it would start to give a suggested list of all of the makers who also have a name that begins with the letter l so i'll be selecting the contains option and then i will want the name to contain the value of our input search user experience here so i'll select the input user search its value and then i would like to update the layout style of this repeating group to be extended vertical scrolling and what that essentially means is that i can choose a default number of rows i'll select this to be two and if there is less than two rows that actually meet the search query here it will only display the one row whereas if there's more than two entries the repeating group will then display all of the rows in our database that meet the same search query and now within our repeating group i would like to add in an image element so i'll select to add in just a square image there and i would like this to display the profile photo of the maker being searched so i'll select to insert dynamic data and i would like to display the current cells users profile photo i will then also just move this profile photo up into the corner of our repeating group and just enlarging it a little bit and then beside this i will need to add in the text so the name of the user who's being displayed so i'll insert dynamic data and display the current source user's name i'll just drag that out and i'm happy to just keep things quite simple with this experience the last thing i will need to do is then add in a icon next to this which is just a simple plus symbol that allows a user to select to add that user to the list of makers so i'll choose from an icon i will then drag that icon in and i will search for a plus icon i'll just choose this option here i could also just update the color of this icon so i'll select edit and just paste in the prototype color code that i had before just so it's an orange and from here what i'll need to do is create an experience where the current user so the person who's submitting this product can search for a list of makers and then add anyone to the list of total makers who have contributed to this product and then once they have been added i would like to display all of those makers who have been selected in a repeating group so what i can do is actually just copy across this repeating group i've already added because i like the formatting of this and i don't want to have to recreate it then i can remove the plus icon and what i'll need to do is create a state within this repeating group that temporarily stores a list of all of the makers which we can then add to our database under the total list of makers once this product has been submitted so once again in order to create a custom state i will select the element that i would like to create the state for i will then scroll up to the information icon and i would select to add a new state and i'll be calling the state makers because i would like to store a list of all the makers who have been added and because i'm selecting to add in a list of bankers i will need to choose from the option that is users so i'll essentially be storing a user within this group and of course because there can be multiple makers of a single product i will take that this is a field with multiple entries so i can save a list of multiple users to our repeating group here so i'll choose to create this and then i will close that option and i will also need to update the data source of this repeating group and the data source i will need to add i will backspace the existing data source option and before i search for a new data source i would just update the name of this repeating group to be called repeating group dash makers because this is where i'll be storing the verified makers of this product then i will head to my data source here and i will select from our repeating group makers so the current repeating group that we're working within and i would like to display the makers so the state of this repeating group and now that will display any makers who have been added to a custom state which of course means that when this plus icon is selected we will need to set the state of our repeating group and add to it that user who has been selected so the way i'll be doing this is by selecting the start edit workflow when our plus icon has been selected and then i will choose to add an action i will search for state and i will select to set the state of an element and the element will of course be our repeating group makers so i will select repeating group makers here and the custom state i'll be changing is the makers so the list of makers and i'll be adding to it the current sales user but because this is a list of users i will need to add to the existing list a another person so the way i'll be doing this is by searching for the current state's value so the repeating group makers its existing makers and even if there's no one in there it's still a list of users so it technically has an open value that can be added to then i will select to add in the current user that the person is selecting so i will just type in plus and i will choose to plus an item into this list and i would like to add the current sales user so the person who is being selected now it will add that person to the total list of makers within this current state which of course we will then store within our database when the user finally decides to launch this product now back in my design tab i can finish designing our group here and create a another workflow and condition that allows this group to be displayed i'll also just copy our maker's heading here and i will move that above our list of finalized makers here and i could just have this say something like verified makers so these are the people who have been selected that have contributed to this product and of course if the current user would like to add themselves as a contributor they can also just search for their own name within this search bar here and add themselves to this list now below our repeating groups i would just like to add in one last button element i'll drag that out and this button will say launch and before i create the workflow to actually launch our product of course i'm going to need to build out another workflow to change the state of our page to be able to display our submission stage number three here so like before i'm going to select our page element so the gray page background here i will just make sure this says submission because this is our submission page i will then head on over to the information icon and i will choose to add in one last custom state and this will be called step three and once again this will be a yes no state i will select to create that and i will not be adding in a default similar to our stage in step two what i would like to do then is create a condition on our group here so our group submission three i will create a condition that only allows this group to display when the current state of the page is within step three of our submission process so i will define a new condition and i will identify i'll scroll on down to the submission page when the submission page its step three state is yes this element is visible and of course i will be ticking that that is true and in order to make this functional i will of course need to create a workflow on the step 2 group so i will tick the i icon here to hide our step 3 submission group i will then take the i icon for our submission two group here and then on our button here i will select to create any workflow and within this workflow i'll be wanting to update the custom state of our page so once again i will be searching for the state option i'll select to set the state of an element i will select the element to be our submission page and first i will need to turn off the custom state for step two within our submission process so i will update the value of this to be no and then i'll add in an additional step to our workflow once again i'll be searching for setting the state of an element the element of course will be our submission page and i will want the step three state to be yes and now that will remove the group number two and display the group number three and one thing i would like to mention is that even though we are hiding these groups they will still store the same values that have been uploaded to them so if a user is uploading files and then adding a description and we hide this group those values will still remain intact throughout those input elements so that way when we launch our product we can simply just match the data fields in our database with those input fields in our group and after setting all of those custom states which i know can be a little confusing if you're new to bubble so once again i just want to reiterate that if you found any of this complex i would recommend pausing this tutorial and re-watching it just so you can get a good grasp of what's possible in bubble i think that this will create a much more intuitive user experience that matches the real world experience from product hunt but once i have created all those custom states i can hide the submission group number two display the submission group number three and finally create a workflow that allows us to launch this product so i'll be selecting to start edit a workflow when the launch button is clicked now within this workflow the first thing we'll need to do is create a new product now this workflow will be a little bit more extensive than anything we've created up to this point in time in our tutorial but again i'll be walking you through the individual steps and be explaining everything in as much detail as i possibly can so the first thing we'll need to build within our workflow is an action to create a new product within our database now if you remember we are currently storing our products as a separate data type that is also linked to our product content and i split these fields in my database because i wanted to reduce the amount of content that the bubble editor would need to load so what we'll be doing within our workflow here is creating the product content and then linking that to a new product when it's created and i'll show you how this can be done we'll start by selecting to add in an action we'll then scroll on down to our data actions here and choose to create a new thing the thing i would like to create is the product content not the product yet so i'll select the product content and now i can match the on-page input fields with the data field stored in my database so i'll select to add a field and then i'll begin by adding in the description of our product content and this will be the value if i scroll on down to the multiline input description field and then finally the only additional fields i'll need to add to our new product content here is just the list of images that we've added to our multifile uploader so i'll be selecting to add a field i will choose to add in images which of course is stored as a list of images within our product content data type and what i'll be doing is selecting to add an image and from here i'll be adding in each individual file that's been uploaded into our drop zone element so i'll select to add to this list of images i'll scroll on down to our multi file uploader i will select its value now in the past when i use the multi-file uploader i found that if you add all of the images at once i'll sometimes experience a bug where it actually doesn't send that data through so i personally prefer to add all of these images individually and i'll show you how this can be done so after i've selected to add in the value of the pictures and files that have been uploaded into our multi-file uploader i'll select the more option here and then i will select the item number and i'll just type in the number one so now i'm adding to our total list of images just the first file that's been uploaded to our multi-file uploader which means i'll then need to add in the item number two three four five how many i'd like to store so i'll select to add another field i'll choose from our images i will add to it the multi-file uploader its value and then i'll select the more option again and the item number two then once again i'll be adding in the images i will add to that list the multi-file uploaders value and its item number three now just for the sake of our tutorial today i'm just going to be keeping it at three files but if you'd like to support up to five or ten images you'll need to manually add each of those options in you could also on your page just add in a text element above the multi-file uploader that could just prompt a user to let them know that they're restricted to uploading only a certain amount of images now once i've finished creating my products content i can add an additional step to my workflow where i'll be creating the actual product itself so i will select the data tab once again i'll create a new thing only this time the thing i'll be creating is the product and once again i'll be taking the time to match all of the on-page input fields with the data field stored in our database so i'll start by adding in the products title and this will of course be the value of our input product name and then below this i'll add in another field which would be the headline of our product and this will be the value of our tagline input field then there will be the thumbnail image and this was just the value of our single picture uploader so the picture uploader thumbnail image then there was the website link of the product it's the value of our input website link and now i would like to store the additional content so the description of the product and also the images of the product so i'll select that the additional content will need to equal the result of step one in our workflow which means that we're now linking to this additional content entry that we just created in our database and now finally there's one last field i'll need to add and that is the makers so the people who have actually built this product and what i'll be doing is adding a list because i'll be adding a list of users to the list of makers here and the list that i would like to add is the repeating group makers the state that we've created that is the makers so if you remember we were adding in that custom state where we were temporarily storing a list of users we can now add all of those users stored within our repeating group to our list in our database now after we've finished creating the product and the product content within our workflow there's a few additional steps we'll need to create if you're familiar with one thing you'll note and i'll jump over to the website now is that the products are categorized by the date that they were published so i can see here there is all of the products that were published today if i scroll on down i can see that there will be other products posted yesterday and then on different dates and this is again an experience we'll need to replicate within our own bubble editor so i'll jump back into our editor here and what we'll need to do is actually after creating a product we'll need to actually create a date that it was launched on and then once we've created that date we can add that product to it so essentially on our home page i would like to have a repeating group that displays a list of dates and then within that repeating group i would like to display a list of all the products that were launched on that day so what i'll be doing is creating another action here i'll head to my data tab and i'll select to create a new thing the thing i would like to create is the publish date now for this publish date when it's created it will automatically store a value of the timestamp of when this in fact was added to our database however i'd also like to create my own custom timestamp that formats this as a text input in my database so i will select to add a field and i will choose the date text option and then the date text that i would store is the result of step two so the time that our new product has been created i would like to store its creation date and then i would like to format this as text not just a string of numbers so the way i'll be formatting this is by scrolling on down here to the option that displays the month the current date and then also the year that's published within and by doing this it will allow me to reference a written version of the date that i can then compare to other products that are published on the same written date and now that i've created a new date within our database that i can use to display on our home page i will then add the actual product to this date meaning that on here the 22nd of april this product that we're creating was published so i will add in another field i will choose the products on date which was a list of products in our database and i would select to add to it once again the result of step two so the product that we've just created now there's one edge case i'd like to just highlight and explain here so as it stands we're currently creating a new date every time a product is published but what about when this current date that's formatted as a text input already exists in that case i won't want to create a new date instead all i want to do is actually just add a product onto that existing date so that would mean that on the 22nd of april let's say there were 10 products that are launched i would like my home page to only display the 22nd of april once and then within that display a list of all of the 10 products that were published on that exact date which means that i'll need to create a condition to this workflow to avoid a new publish date being created every time someone wants to launch a product so i'll select to add a condition here and essentially i'll be searching through my database and identifying if the current date formatted as text does in fact already exist and when that does exist i won't want this step within my workflow to run so i'll start by performing a search here and i'll be searching through our list of entries for the publish dates and what i'd like to do is essentially just create a constraint that identifies if the date that's saved as text in our database is the same as the current date and if there are no matches between an existing date that's been published i will allow this workflow to run and if there aren't any instances it won't run so i'll be adding a new constraint i'll be selecting from the date text data field and i want to identify when the date formatted as text equals the same value if i scroll on down to the current date time and once again i'll need to format this as the same option that i chose before so that way the text of this current date is the same as the text that i've stored within my database and what i'll need to do now is identify if there are any instances where the date text of a publish date equals the same value as the current date and if there aren't any existing dates which means that this product would be the first product being published on this date i will want to create that date so i'll scroll on down to the rest of my condition here and after i perform that search for all of our dates i can identify when the count is and i will type in the number zero so when there are no instances of a publish date already existing for the current date and time this workflow will create a new publish date and it will then add that product to that publish date now after creating a date we'll need to add another step in our workflow that registers the date formatted as text to our product so essentially because i'm storing the date formatted as text for our published date data type what i can do is also store the date formatted as text for our product data type and then on our home page because they would technically have the same value i can choose to overlap those as a constraint in a repeating group and i know this can sound a little bit confusing now but when we get to the stage of building out our homepage i'll explain all of this in more detail but for the time being we will create another step in our workflow here and we'll head to our data tab and we'll choose to make changes to a thing and the thing we would like to change is the product that we've just created and what we'll need to do is actually store the date formatted as text within it so i will select to make changes to a thing and then the thing i will change is the result of step two in our workflow which is the new product that we've created and the field that i'll be changing is the product launch date formatted as text and from here this will need to equal or scroll on down to the current date time and of course i'll be formatting this i'll choose my format type to be the exact same entry as we've used before so the full date written out the date itself and the year within this and then there's one last step i'd like to add to this workflow after a product has been created and that is just adding in a redirect that sends a user through to a page where they can view the details of their newly listed product so this will just be a simple navigation event so i'll choose to add another action i'll head on down to the navigation option and choose the go to page option and at this point the destination page doesn't exist so i can choose to create a new page and i will call this the product page so this would just be a page that displays the full information of every product across our application so opt to create that page now before i finish building out the step in our workflow i will just need to update the type of content of that product page so i'll head on over to our page drop down menu i'll click on our product page i'll head to the design tab and the only thing i'll be doing right now is updating the type of content to display a product because of course i'll be displaying the information of an individual product on this page then i will head back over to my page drop down jump over to my submission tab open up my workflow editor open the workflow i was just creating when the launch button is clicked head to the step 5 within our workflow and update the destination page to be our product page and the data i would like to send through it is the result of step 2 in our workflow so the product that we have created and that is all i will need to include within this workflow i know this one was a little bit complex so as i always say if you found yourself confused at any time i would recommend pausing the tutorial and rewinding it to get a better understanding of all of these steps within our workflow here i know that the stages with the dates formatted as text can be a little confusing but when we build out our home page this will make a lot more sense as it'll easily allow you to replicate the same experience as the product on home page let's jump into our bubble preview now and experience what this whole process looks like and in order to do this i will head over to our new page to begin with where we were storing the url initially for a new product and now i'll show you what the experience looks like from this page through to actually launching a product over on my new submission page here i'm going to add in a website link i'll just add in the link to building with bubble i will then select the next option and this will send us through to our submission page here i will then give the product a name building with bubble i'll add a tagline no code courses and one thing i've noticed here is that the website link hasn't sent through from our initial page and that is because i have just forgotten to add in the initial content so let's jump back over into our bubble editor and i'll show you how we can do this so if i head into my submission page here i will open up the submission one group which prompts users to give some general information about their products and what i'll need to do is select the website link input field here and i will need to add some initial content to this now if you remember from the first page in our submission process where a user was adding in the link we were also sending through the custom page parameter of that website link so what i'll need to do is retrieve that link from our url and then display that in this input field here so i'll select to insert dynamic data i will then scroll on down to the bottom and choose the get data from page url option and then i'll need to extract the information from the parameter we created which was called product link and now that will display that link once it's been sent through to our page so let's head over and retry what that whole experience looks like and i'll show you how that data can be sent so once again i'm on my first page for the submission process i will add in my website link i will then select next that will send us through to the first page in our submission process and you can now see that that link has been stored within our input field i will just once again give a name to my product i'll add the tagline and then i will upload a thumbnail image from here i'll select the next button and that will change the state of our page which means it will hide our first group and then display the second one here i can then upload a list of images i've got some stored within this file here i'll just drag those in and you'll see once they've uploaded they will display a preview in our repeating group element here if there were more than three i could scroll across and i'll just add in a short description no code courses with bubble and then once i'm happy with the images that i've added and the description i can select through to the next page which will once again change the state of the page and hide our current group that we were using and now display our third group which allows us to search through the list of makers in this case i would like to add myself as a maker lachlan kirkwood and then i've also added a friend to the platform here jack jones i'd like to add him as a maker and now i can choose to launch this product that workflow will run it will create a new date because a date doesn't exist and then it will send us through to our product page as you can see in our url string here and it's sending through the unique id of the product that we've just created now finally we can jump back into our notion dock here and i can tick off that i have finally built a workflow or process to be able to publish products across our platform this was by far one of the bigger modules within our tutorial today and i know it can seem a little bit overwhelming however if you were following along you would have been able to replicate the exact same workflows and processes that i have created throughout this experience so i will take that off that i have finally built that feature 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 [Music] journey

Channel: Building With Bubble

Views: 1,536

Keywords: Bubble, no-code, visual programming, Buildcamp, Makerpad, Adalo, Webflow, no-code tools, app development, minimum viable product, mvp, product hunt clone, software development, bubble visual programming, bubble no-code

Id: o9huTbZpGiQ

Length: 91min 13sec (5473 seconds)

Published: Fri Apr 30 2021