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

now back on my home page you can see that my list of potential matches also includes males and if i was to grab and swipe this card you can see that when i swipe left it indicates that i don't want to match with that user and when i swipe right it indicates that i do want to match with this user [Music] hello my name is lachlan kirkwood and today i'll be teaching you how to build a tinder clone entirely out of no code using bubble bubble's by far one of my favorite no-code tools as it's an end-to-end suite that allows you to build an entire product without writing a single line of code you have full control over the workflows or logic that you create you can completely customize your front-end design and you can easily integrate with third-party plug-ins or api extensions 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 the series essentially took a list of the top products out there on the market like airbnb uber and trello and explain the step-by-step process to rebuilding them with bubbles tool as helpful as this written series was i had plenty of requests to recreate each blog post as a video tutorial as people would find it more engaging and easy to follow along with so that's exactly what i've gone out and done and in this video i'll be explaining how you can rebuild your own tinder clone without writing a single line of code this will include features like registering user accounts allowing users to update their profile information for things like their sexual preferences or their age preferences then filter out a list of potential matches that will display them on our home page in which they can then swipe left or right on depending if they would like to match with those users from here we'll then be building out a page that allows us to display a list of all of a user's matches and then finally create a feature that allows these users to exchange messages between each other across our platform so grab your bubble editor and let's get started the first core feature we'll be building out in our tinder clone today isn't actually a user facing feature that our users will be able to engage with instead i'm going to take the time to explain how you can set up and configure your database within bubble now if you're new to bubble this can sometimes seem a little confusing or even overwhelming at times although i will be taking the time to run you through everything and explain in detail why we're adding every single data type and data field if you do still find yourself getting a little confused i'd recommend pausing the tutorial and re-watching any previous steps of mine to help you gain a better understanding of the whole process now for our build today i've just created a notion dock of my own that allows me to track all of the different data types and fields as well as all the different features that i would like to add throughout our tutorial what i love about notion is that i can create these as a checklist and just check off each particular item once i've finished adding it into our product if you also have a notion account i'd recommend creating your own checklist as well just so it allows you to follow along much more intuitively so let's dive right into it and head over into our bubble editor here and then i will jump over into our data tab and if you're new to bubble the first thing you'll notice is that there is already an existing data type created for a user property and within this user property bubble has already added a predetermined email field here and it will also have a pre-built password field however it does not display that to you within your database but i will just note that you won't need to create a password field now before i start to build out the user data fields here i will note that i will need to instead take the time to first add in all of my different data types and the reason i'm doing that is because there will be data fields that also link to different data types and i will need to create those data types before i can go ahead and link those so if i jump back into my notion dock here i can see that i have a few different data types there's our user data type which is already pre-built into bubble there's our user images data type now the reason i'm separating my user images from my user data type is to help streamline the actual speed of my application so let's say you're on a page on tinder viewing a list of all the matches you have on the platform if you were to load a list of all of those users bubble will load all of the data fields that are associated with that data type now if you were to also include a list of all of those images within this user it would quickly slow down the application as bubble would have to load not only all of these data fields but also the larger data fields like images or videos that are also linked to them a great workaround for this is creating a separate data field which i'll explain in more detail when i do it but a data field called profile images that links to another data type called user images and within these user images i will store a list of the images so now whenever i would like to display images i can simply just call upon that separate data type and bubble will send through the necessary data and information as i mentioned i will be explaining this in more detail as i build it out but the other data types we'll need to add are things like our matches so whenever a match is created on our platform we will need to register that in our database and then there is a chat which is a group of messages between two users who have matched and then finally there are the individual messages themselves which sit within a chat so i'll jump into my editor and start to add in those data types so there was the user images i'll create that there was our match i'll create that then there was our chat and finally there was our message now after adding in all of my data types i can jump over to my user data type here and begin to expand out all of the different data fields that will lie within this property i'll start by adding in the top level data fields and walk you through them as i create them so we'll begin by adding in a data field which will register the name of the user now this will just be a standard text element which is nice and simple to add and then following the name will be an option to add in a bio for the user which once again will just be a basic text element then i will need to register the age of a user which will be a number and after the age itself there will be the age preference of the user so this will allow a user to refine the potential matches that they're displayed on our home page based on the age range that they sit within now this field type won't just be a single number it will be a numeric range because a user could select for instance that they're only interested in potential matches that are aged between 20 or 30 so therefore that will be a range then i will add in a field for the gender of the user which of course will be a text field and then following that will be the job title which of course will be another text element now if i head back into my notion doc i can tick off that i've added in those data fields and the next two i'd like to add is a list of all of the users that the current user has liked and all of those that the current user hasn't liked so if they swipe left on a user they will be added to a list of people that haven't been liked and if they've been swiped right on they'll be added to a list of users that have been liked so i'll add in both of those fields i'll create a new field and i'll start with the liked users option now this field type will be a user because i'll be adding in other users to this field and because a user can swipe right on multiple users across our platform this will be a field with multiple entries so i will tick that box i will create that and then i'll add another field which is called not liked users which again will be the same field type so it'll be a user and i'll take the box that says this is a list with multiple entries below these data fields i will then grab the location of a user which is the geographic address so i will type in location and because this is an address based on someone's city or suburb i would select that this will be a geographic address i will create that then below this is a user sexual interest so i'll add a new field call it sexual interests and this will just be a standard text field and from here what we will do is now link out our profile images to the separate user images data type i'll show you how to do that within our database so i'll create a new field and i'll call this profile images and now what i can do is link this out i'll scroll on down and select that this should be linked to our user images data type and as i mentioned before our user images data type will be storing a list of images now after i've ticked off my profile images here i would like to just register a single image from that list that allows us to display an immediate photo of a user whenever we need to call upon their profile across the platform so i will jump into my database here i'll create a new field i'll call this featured image and this field type will just be an image and it'll be a single image so i won't need to select this field has multiple entries and then finally the last data field i'd like to add is just a profile status for this user which determines if their profile is active or not and the reason i'll be adding this is because when a user registers for an account on our platform we won't want to actually display them on our potential matches home page until they've updated the full details of their profile so what we'd need to do is by default store their active profile status as no and then once they have updated the details of their profile update that status to be yes so in my database here i can create another field and i'll call this active profile and i will select that this field type is a yes or no field i will create that and then what i can do is update the default status of this to be no now that i've finished adding in all of my user data fields i can add in my user images data field which is just a simple list of multiple images so i will select the user images data type i will add in images i will select to display an image and of course this will be a list with multiple entries because we're storing a list of multiple images that was a nice and quick data type to create the next one will be our matches so when a match is created on a platform we'll of course need to identify who the two users are within that match and we can do this by adding in a list of users and then storing in both the person who created the match and the person who has also liked the user and the match so i will create a data type in our match here and this would be called match users and because there'll be two users this will be a user field type and this will be a list with multiple entries so i'll create that now one thing i will note within each data type is whenever it's created by default you'll see the bubble actually stores who the creator being a user is that's created a new instance within our database so every time a match is created bubble automatically registered that field but because i'd also like to register who the opposing person is within the match so maybe someone who's already liked this profile in the past i'll need to register a field in my database as the person who was the matched user at the time so as an example let's say i'm the current user using my tinder profile and someone out there has already liked my profile and i complete that match by swiping right on that user i would technically be the creator of that match which means that the other person who has already liked my profile would be the matched user at the time so i'll add in a field that allows us to identify who is who within our match so i'll create a field and i'll call this matched user at time and this will just be a single user data field so i won't be selecting that this is a field with multiple entries i'll then jump into my notion dock and tick off the match data type and i can move on to my chat data type here so within my chat i would essentially like to store in a list of users so this will be the same as our match every time a match is created we're storing two users within it i'd like to essentially do the same within my chat so i will add in a list i'll head to my chat data type and i will call this users and i will select this to be a user data field with multiple entries and then the last data type i would like to add in is a list of all of the messages within this chat and of course our messages is a separate data type and there will be multiple messages within a chat so when i create this field i will call it messages and i will select that this is a message field with multiple entries and then after adding in my chat data fields i will then go ahead and add in my message data fields so essentially within this data type of a message i would like to link all of my messages that have been created to a specific chat which is why the first data field i'll create in my message data type here will be called a chat and then i will link this through to our data type which is called a chat i'll create that jump back over to my notion doc and take that off and now within our messages there's a couple of things i'd like to do and the first is identify who is the sender and who is the receiver of the message because within a chat where our messages sits within we'll have a list of two users the people who have originally matched on our platform so each time a message is sent i'd just like to identify who it's being sent from and who it's being sent to so i will jump into our database here and i will add in the message sender and this will be a user field i'll create that now one thing i will note is that the message sender being a user technically could be the creator field here that bubble has pre-built in but just for the sake of our tutorial and to make things easier when i actually build out the workflow it's much more effective for me to just manually add in message sender and message receiver so you can follow along more intuitively so i'll then go and add in the message receiver data field which of course will be another single user and now finally the last field i'd like to add in is the content of the message itself so the text being sent through the message so this will be called message content and this will just be a simple text field and there we have it i can tick off those final data fields there within my message data type and you can see firsthand how easy it is to create your own custom database using bubbles no code tool as i mentioned if you were confused at any time i would recommend either pausing this video and then re-watching some of the different data types and fields that i've added just to make sure you have a complete understanding of this whole process once our database has been built out we can finally move ahead to one of the i guess first core features within our tinder app experience and that is building out a home page where we can display a list of potential matches to a user and allow them to swipe left and right on those users and then make changes based on if that user is matched or not now this process can be a little tedious at times so if you find yourself getting lost i'd recommend pausing the tutorial and rewinding it just to get a better glimpse of the processes i'm taking throughout this module but let's go right ahead and get started by jumping over into our bubble editor and then from here we'll need to create a new page within our application and this page will just be called home i'll create that page and from here the first thing i will do once again is just reduce the size of my screen so it looks roughly like a mobile device i will then update the background color to that light shade of gray that i've been using and then from here the first thing i'll need to do is actually add in a swipeable element that allows a user to swipe left or right on a potential match within our application and the way we can do this is by adding in a plugin element so once again we're going to jump over to our plugins tab here we'll select to add a new plugin and then within our plugin menu we'll search for the term tinder and you'll see that there's two options here for tinder pile plugins which allows you to essentially display a list of images from users within your database and then perform swipe gestures on this list of items in our tutorial today i'm going to be using the tinder like pile plugin which is a free one from bubble however you can also use the tinder swipe plug-in here as well which is a paid plug-in the main difference is and you'll see in a moment is that the design of the tin dot power plug-in is pretty standard it doesn't look too enticing whereas the actual tinder swipe pay plugin gives you a lot more control over the design that you want to display on your application if you do decide to go with the pay plugin the process of creating the workflows will be the exact same regardless so you can install that and then continue to follow along with my tutorial so in my instance i'm going to select to install the free plugin i'll then select that that's done i'll jump back over to my design tab here and you'll see my visual elements that i have an option for a tinder pile what i'll do is i will then drag this out across my page and you'll see here that it is now displaying a pile of cards almost like a pile of photos and this is what i was referring to when it comes to the design of this free plugin it doesn't give you an option to actually remove the background of this card although what you can do is change the color of that so you could match it potentially with the same color code as your background and then it would help hide that element if you were to also remove the shadow from it too what i will do in this instance is just make that a white background because i can always update the background here to be white later on i will then also unselect that i want to display a card title i want that to be blank and i'm going to drag in that card just so it creates a roughly and even sized border around that whole image now this part will be used to display a list of all the users on our platform that could be potential matches for a current user you can almost think of this element to be like a repeating group in that it needs to search for a list of users to display only it will show one at a time once a user swipes through it and i'll be showing you this in a demo later but you can see here that it comes pre-filled with some images that you can display when a user swipes right it'll display that they're liked and when they swipe left it will display that they are not liked but in order to identify which users we'd like to display i'll need to update the type of content here to be a user property because i'm going to be displaying users in this instance and then for the data source i'll need to perform a search and constrain the users who are shown in this pile card because at the moment it would currently be searching for all of the users on our platform whereas i only want to display the users who match either the gender that the current user is interested in and also things like the location and age brackets so if i select a data source i can start to perform a search for users in my platform so i'll select do a search for and the type of search i'll be performing is for users now as i mentioned at this current point it's searching for every single user on our platform however we can now go and add some additional constraints to define which specific users will be displayed so i select to add a constraint and the first constraint i'll be adding is the gender so i'd like the filtered users here to be the gender that equals the same value as the current users sexual interests now if you remember on our registration and settings page when we were storing the user's sexual interests we were removing any plurals off that so it was saved as a single item so it was saved as male or female not males or females which means that it would then match the same value as a gender of a user because when they registered they obviously registered as either a male or female but what if a user identified if their sexual interests were both in females and males what we will do is create a another condition later on in a moment that allows us to filter by both of our sexual preferences across our platform not just one but first we will take the time to finish off this search before we go and add that condition the next constraint i'd like to add is just a parameter that registers to only display those profiles that are active on our platform remembering that by default a user's profile is not active until they've updated all the information on their settings page so i'll select from the active profile option and i'd only like to display these users whose active profile status equals yes from here i'll add another constraint which is the location so the location of the displayed user will be within and i can just manually type in any distance here so i could say 50 i'm in metrics i'll choose from kilometers of and then i will choose the current user's location now if you would like it would also be possible on your settings page to create a similar feature to the slider range that we added for our user's age constraints to replicate this to a location constraints you could say that the user needs to be within x kilometers from the current user's location for the sake of our mvp today i'm just going to go with this manual option but i'd like to just let you know that you have the option of doing both then below this i will need to add another constraint that will refine it the user's potential matches by their target age bracket and i will select that the age of the user needs to be equal to or greater than the current users age preference the minimum age so let's say if a user has set their minimum age to be 20 the user being displayed would need to be 20 or over in order to be shown on our pile element here and then we'll need to add another constraint which filters out anyone who is equal to or older than the user's maximum age preference so add in another constraint and select that the age of the user being displayed needs to be equal to or less than the current user's age preference the maximum within that range now it will filter out users whose age only fits within these two parameters what i'd also like to do is update the sorting of this element so at the moment it would just be sorting these based off the creation date of the profiles what i would like to do though is evenly rotate all the users around so everyone gets a even amount of distribution for their matches so i can select the sort by option here i can scroll on down and choose random sorting and that will evenly distribute our users throughout the platform now after i've identified a list of potential users that fit within this current user's preferences there are some additional constraints and filters that i'll need to add and this will cover circumstances where for one we don't want the user to be displayed to themselves on tinder although i'm sure we love ourselves we don't want to actually be matched with ourselves and then i'd like to also filter out any users that the current user has listed that they don't like or don't want to match with on our platform and then of course those users who have been liked on our platform because we won't want to display the same user twice so the way we can do this is by after adding in our constraint on our search for users heading over to the more options here and then scrolling right on down to the option where we can filter this by more so i'll select to filter this now what this filtered means is that once we've identified all of those potential users we're going to refine our search even more and the reason i'm adding this as an additional filter not additional constraints is because a filter allows us to add in particular constraints that we can't access in our initial search so what i will do is add in a new constraint on our filter and then the first thing i'd like to exclude is the current user from being displayed to the current user so i will need to search for the option unique id so whenever a user has been created on our platform they are given a unique id that we can identify them as and then i will need to search that their unique id is not so both of the brackets up against each other and then i will search for the current users and then i'll type in unique id so now it will only display the users where the unique id of that user is not the same as the current user's unique id and then below this will be adding in another constraint and in this case we'll be searching for the unique id again in this instance though i'll be selecting the isn't in function and the reason i'm doing this is because i want to filter out any users who currently sit within the list of users that the current person has liked and if they are in that list of users i don't want to show them so when the unique id isn't in that list of users they will be shown so i will select that the unique id isn't in the current users list of liked users here and i'll be performing a search against all of those users unique ids and then below this i'll be adding in one last constraint which is the unique id when it isn't in the current users list of users that they didn't like so the not liked users and of course i'll be searching for their unique ids now it will just filter out any edge cases where these particular users would be displayed when in fact they shouldn't be displayed within our users filter pile here once we've filtered out our initial data source we can then go ahead and update the image field that we'll be displaying so like a repeating group we'll need to display a image of all of the users who have been displayed within this tinder pile and in this case i would like to just display the user who is being displayed their featured photo which is a single image within our database now remember before how i mentioned that there will be an edge case when we're searching for users where a user's sexual preferences are listed as both so both males and females as it stands this current filter is only displaying those who have indicated that they're interested in one gender type however we'll need to create another condition that allows us to filter out matches based on both genders across our platform so the way we'll do this is by heading over into our conditions tab we'll define a new condition and we'll need to identify any instances where the current user's sexual preference was listed as both so i will add a constraint when the current users scroll on down to sexual interests is and then i will manually type in both which is the same option as the initial drop down on both our registration page and also our settings page now again i would just like to note that this is case sensitive so if you've used a capital on the both option for sexual preferences in your original drop down you will also need to add a capital within this constraint here and when this condition is met we'll be adding pretty much the exact same search for users as we did before only this time we'll be removing the condition to search by a particular gender type so i will select that i want to change the property of the data source for this tinder pile and within this i'll be performing a search for users so i'll select do a search for users and then i will start by searching for users again who have a active profile that is equal to yes then i will refine by a user's location again so it will be when the location of the user is within 50 i'll type kilometers of the current users location so that will be the exact same constraint as the previous constraint we've just added in our original data source and then finally i'll just need to add in the constraints for the user's age range so i'll select you add a constraint the age of the displayed user will need to be equal to or greater than the current users age preference the minimum value and then finally i will add another constraint for the age needs to be equal to or less than the current user's age preference its maximum value and as i mentioned i won't be adding in a constraint for a user's gender preference because of course if their sexual interest is in both they can be displayed any user across our platform then similar to our previous data source i'll need to add in an additional filter here so i'll search for filtered and i'll filter all these users and refine out anyone whose unique id is not the current users then i'll search for unique id so now it will exclude this user from seeing themselves and then of course i'll need to exclude out those users who the current person has already liked and those who they have indicated that they don't like so i'll add a new constraint search for unique id once again i'll be searching from isn't in and then i will choose from the current users list of liked users and i'll be performing a search for all of their unique ids and then finally i'll add one last filter which will search for the unique ids that isn't in the current users list of liked users their unique ids and there we have it that is how you can figure out your initial tinder pile to display a list of potential matches across your platform once again i will just need to update the sorting type of our search for users here so i'll go back to our original search and i will sort these by scroll right down to the bottom random sorting so once i've finished creating out a matching algorithm on our page what i would like to do is go and build out the rest of the user's profile that will be displayed so at the moment it's currently only displaying the featured image of a user but not their name their job title or their bio in order to display this what i'd like to do is scroll on down to my containers option here and select to grab a group element i'll then drag that out below and i'll just update the style of the group to have a background color so i'll select to edit the style the background style will be a flat color which is white and then what i'd like to do within this group is display the information of the current user who is within our featured pile here and this is quite an easy function to create what i'll need to do is just update the type of content of our group here to store a user property and then the data source of this group so the user stored within this group will just be the same value of the user who is currently being displayed in our tinder pile here so i'll select that the data source is the tinder piles user the current slide so the current match that is being shown now this will make it easy to go and add in any dynamic content we'd like to add about this user so what i'll do is i'll start by grabbing in a text element i'll drag this out and i'd like this text element to display the name of this current user so i'll select to display the parent groups user so the group that this text element sits within their name and i'll update this to be a h2 style font i'll just make that a little larger and then below this i can copy this heading i'll drag that down and within this text element i'd like to display the parent groups users and i will choose from their job title i will also update this to just be a h3 heading just so it's a little bit smaller than our main heading which is their name and then finally i'd like to just display the bio of the user so i'll copy this once again i'll drag that down and i'll just update the dynamic content i'm displaying here to be the parent groups users bio i can also just move this group up just so it covers up the blank space i have between the swipe pile and the actual background of my page itself and now what we can do is build out the actual swipe functionality of this tinder pile now by default this will come pre-built into this element so if you head over into your workflow tab you can see that under your elements option here you have an option to create a workflow when the tinder piles card is swiped right or swiped left so i'll select the option when the tinder pile card is swiped left and this workflow is quite simple we'll head to our actions select our data tab and choose to make changes to a thing the thing we'll need to change is the current user so the person who just swiped left on another person and then what we'll need to change is the field of users that they don't like or the users that they don't want to match with so i will choose to so i'll select to make changes to the list of not liked users and i will add the tinder piles user its current slide so the user who's currently being featured after this we'll then create another workflow when the tinder pile is swiped right so user indicates that they do want to match with another user on our platform so i will select from the element options and the trigger for this workflow will be when the tinder piles card is swiped right within this workflow what i'll be doing is adding the option to make changes to a thing the thing i want to change is again the current user and you probably guessed it by now but i'll be updating the current users list of liked users and i'll be adding to it the current user on the tinder pile its current slide so now we have an option to swipe left and swipe right on both of our users and if you remember before in our design tab i had shown you that you can add a custom image that will display over the top of this image when each of those actions is taken so when the image is light it'll display the liked option and when they're not liked it will display the nope option but what we will need to do is head over to our workflow tab and build out the rest of a workflow when a user has swiped right on someone and what we'll need to add to this workflow is a function that matches this user to the receiving user if they have also liked this person so when both users like each other we'll need to create a match and the way we'll do this is by adding in another action after a user has been added to a list of liked users and within this we'll be selecting from our data tab and we'll need to create a new thing because this match doesn't yet exist across our application and before i go and add a data type and data fields to the thing that we're creating i'll need to create a condition that only allows this match to be created when both users have liked each other so i'll add a condition here that only allows this workflow to run when the current tinder pile so the tinder pile user its current slide so the user that's being displayed when their list of liked users contains the current user this workflow will now run so when that user likes the current user so you using the platform and then when you like that user back it will now allow this step in our workflow to run and when this workflow does run what i'll need to do is create a new match and then within this match the first thing i'll be doing is adding both users to it so i'll select to add a field and i'll be selecting that all matched users i will need to add and i'll choose to add the current user and then i will add another option i'll select all match users and i will also add the user who's been displayed on the tinder pile so the tinder piles current slide but what i will need to do is build out a way to identify who created this match and who is the person who has received this match so a workaround for this is using the initial data field i created called the matched user at time now by default when this match is created it will be created by the user who actually just performed the final like so let's say someone has liked your profile on tinder and you are then swiping through your home page and then you see that user who has liked you and you also like them back that match would then be created and you would be the creator of that match which means that the matched user at time would be the other user who had previously liked you but didn't create the final match so the matched user at time will be the user who is displayed on the tinder pile so i will select match user equals the tinder pile users current slide and i will note that i won't need to add a field that identifies who the creator is of this match as bubble does that for you by default but once the match has been created within our application i'll need to build out a way to actually display to a user that they've successfully found a new match and the way i can do that is by heading over to my design tab here and i'd like to display a pop-up element over this page when a match has been created so if i scroll on down to my containers i can choose from a pop-up item here and i'll drag that out over the middle of my page and it'll automatically be centered and the first thing you'll notice about a pop-up is that it changes the opacity of the screen so this is a layer over the top of our home page and what this allows you to do is display information on it without redirecting a user away from the current page so what i'd like to do on this pop-up is display to a user that they've received a new match and display both a photo of the image of the current user and then also an image of the user that they've just matched with and then below this i'll add an option for a user to view all of the matches that they have across our application so in order to do this what i'll need to do is actually send some data to this pop-up because i'll need to send both the data of the current user and the user that they've matched with and the way i can do this is by using what's called a state within this pop-up so let's say a match has been created and i want to display the information of a new match on this pop-up what i can do is actually add a custom state to our pop-up that identifies that match and then i can update the data source of the content that's displayed to display both the users within that match so the way to create a state is by heading over to the information icon here within our pop-up and you'll see to our left it gives us an option to create a new custom state now states are once again just another powerful way to store information without having to send a user through a page and also send data through a workflow so what i'd like to do is select to add a new custom state and i'll be calling this state a new match and the type of content for this state will be a match i'll choose to create that and then what i can do is configure a type of content within my pop-up itself so i'll close the state option there i'll choose from the type of content that i'd like my pop-up to display to be a match so that will also be the same value as my state that i've just set and then what i'll need to do is display a specific match within my application which of course will be the match that's just been created in the previous workflow i just built so i'll select that the data source will need to be the custom state that i've just created and then what i'll do is create a workflow that sets the state of this element to be the same value of the two users who have just created this match now i know this can seem a little confusing to anyone who's relatively new with bubble but i assure you that once you experiment with this it becomes much easier and you'll soon see how powerful custom states can be so the data source of my state will be the pop-up match the custom state that i just created which is the new match so every time a new match is created what i'd like to do is set the state of this element and then display the information of that new match now in order to do that what i can do is head back over to my workflow i'll then go into my actions here and add another step into my workflow and i will search for the option to set a state of an element the element that i'd like to set the state for is of course our pop-up match and the custom state that i'd like to set is of course the new match state that i just created and from here i'll need to add a value to this state which of course will be the same value of that new match i just created in the previous step of my workflow here so i'll select that the value will need to be the result of step two within our workflow now one thing i will also note is that we will again need to add the same constraint to this workflow that only allows it to run when both users have liked each other because at the moment if a user likes another user it would be setting the state of our pop-up regardless so similar to our previous workflow where we had created the constraint that only allowed it to run when both users had liked each other we'll need to add a similar function to this workflow so i'll select that this workflow should only run when the tinder pile user its current slide so the person who's just been liked when their list of liked users contains the current user this state will be set now as it stands we currently set the state of this pop-up but we'll need to add another step to our workflow that actually displays the pop-up so i'll select to add another step in our workflow i'll scroll on down to element actions and choose the show option and the element i would like to show is our pop-up match and once again i will need to add the same constraint to only display this when both users have liked each other if you forget to add this you'll find that the pop-up will just trigger when one user likes the other but the other hasn't liked that user back which we don't want to happen in our case so once again i'll be adding the constraint only when the tinder piles user current slide their list of liked users contains the current user and in order to finish off our pop-up experience what we can do is head over back to our design tab and we can actually build out the rest of our pop-up so the first thing i'd like to do on this pop-up is just add a text heading at the top and i'll update the text here i'll put it all in caps i'll say it's a match and just to make this look a little bit more enticing i will create a custom style here so i will select to scroll down to the bottom i'll create a new style for this heading i'll call this style match i'll create that i'll then go and edit the style i will update the color of this to be a green i'll update the font to be 28 and i'll just center that i'll make it bold as well and then i can go back to my design tab and you'll see that that's been updated i can right click and center that horizontally on my pop-up and now what i'll do is display an image of the user who's been matched alongside an image of the current user so i will go and grab in an image element i'll drag this out to be a small square and then i'll need to add a dynamic data source for this image now what i'd like to do here is display the user who has just been matched not the current user i'll be adding the current user to the right so i'll insert dynamic data and i'll choose to display the parent groups match so the new match that we've created and that we've set the state and sent through to our pop-up i would like to display the matched user at time remembering that the creator of this match is the current user the person who just completed the match and the matched user at time is the user who first liked the user within this match so i'll be selecting that i would like to display the matched user at time and because this is a user it allows us to filter through all of the data fields of a user and of course i'd like to display their featured photo then next to our image what i'll do is i will actually display an icon i will drag that out and in this case i'd like to once again search for the fire icon i'll add that in and then finally next to this on the right i'd like to display the image of the current user so i'll just copy this image here move that across also just move those across in total and then i'll update the dynamic data source of this image to be the parent groups match and it won't be the matched user at time it will be the creator who is the current user and then it will be displaying their featured photo and now below this the last thing i'll add to this pop-up is a button and this will just allow a user to view all of their matches across the platform so i'll just update this text to say view matches i'll then center that horizontally and then i can even close off that pop-up just so there's not any unnecessary space towards the bottom from here i can then select to create a workflow when this runs and send a user to a page that displays a list of all their matches you can also just see i've got a typo here just remove that so it'll save you matches now i'll jump over into my workflow editor i will then go to the navigation option i'll choose the go to page option and i will select to create a new page and this page will be called matches i will create that now i can select the destination page to be our matches page and i won't need to send any data through to this page as i also won't need to store a data type on this page and just like that that completes the process of building out our match function as well as the option to display the match and send that through to a total match page as well as the ability to display both the users in that match and then redirect a user through to a page with all of their matches before i go and show you a demo of how this functions i would just like to give you another option on our editor here today to create two buttons below our swipe card here that allows a user to click whether they want to swipe left or right if you're familiar with tinder's user interface you'll note that they also include two buttons below the user's profile information that allows you to simply just click that you want to match or not match with this user now the way i can do this is quite simple i'm just going to add in two buttons i will expand the button over our group element here so it overlaps and then what i will do is just update the style of this button i'll create a new style i will call this match button i'll create that and then i can edit this style and i'll be updating the color of this button to be white and i would also just like to add a border to it that is a solid line i'll have the line color be a darkish color a light gray and then i'll update the roundness of this button to be a hundred because i'd like it to be a circle now what i can do is go back into my design tab here and you'll see that my button is a circle i'll just make that more symmetrical on every side and now what i can do is actually backspace all the text within this button and i can select to add in an emoji and the emoji i'd like to add in is the crossmark emoji and then i will copy this button i'll move that across and i will change this emoji to be a tick i'll then just move both buttons across so they're roughly centered and then what i can do is create two separate workflows that allows us to build a function that swipes the user left when the x button is selected and then also another workflow that swipes the user right when the tick button is selected so what i'll do is start by creating the workflow when the x button is selected so when a user doesn't want to match with this user i'll choose to start edit a workflow and instead of rebuilding out the whole workflow what i'll do is i'll just jump over to the workflow when the tinder pile card is swiped left here and i will just copy the workflow that's within this and then i can go and paste that in and now it will perform the same action that would normally occur if a user was to swipe left and of course i can then also create a workflow i'll select when an element is clicked and the element of course will be our button tick option here and what i'll need to do is just copy across every action within our swipe right workflow here so i'll start by copying across that it makes changes to the user i'll go back to my swipe right workflow and copy across that it creates a new match i'll paste that in i'll go back to my original workflow and copy that it sets the state of a pop-up i'll paste that in and then finally i will copy across that it needs to display a pop-up i will then paste that in what i will need to do though is head back to my state that i'm setting here and you can see that the value is missing i will need to set the value of the state i'm adding to be once again the step two of our workflow here so i'll select that this is the result of step two which of course is the new match that we've created and just like that we now have a functional home page that not only searches for a list of relevant users across our platform but also allows us to swipe left and right on users and also view more information about their profiles let's jump on over to our bubble development environment and test out how this whole experience functions now over on my home page you can see that i've gone in and i've added in some additional users to our platform as it stands i'm currently using my profile which is listed that i'm a male looking for females however if i go through to my settings page and update that i'm interested in both genders you'll soon see that it will display both options for me over on my settings page i can scroll on down and list that i'm interested in both i can update that now back on my home page you can see that my list of potential matches also includes males and if i was to grab and swipe this card you can see that when i swipe left it indicates that i don't want to match with that user and when i swipe right it indicates that i do want to match with this user i also have the option of doing this with both of my buttons down here so let's say i don't want to match with noah here i can select the x button but if i do want to match with hana here i can select the yes button and now you'll see that once that match has been created it's set the state of our popup it has then displayed the image of the user who i've just matched with as well as my current profile photo and if i would like i could then go through and view a list of all my matches and would redirect me through to my matches page which we will then build out in a later module in this tutorial now finally we can head over into our notion dock and tick off that we've finally finished building out our home page which was again quite an extensive module within our build today considering that we had to create our own algorithm to filter out a user's sexual preferences their location their age as well as create different filters for if a user had different sexual preferences so if they were bisexual and wanted to match with both males and females and then from there we created a function that allowed us to swipe left and right on users which of course triggered a workflow where we were making changes in our database and then when a match was created we displayed the pop-up to a user and allowed them to navigate through to a page with all of their matches now that we've finished building out our home page the next feature i'd like to move on to is a function in our app that allows us to display the full information of a user's profile so as it currently stands on our home page as you're swiping through matches you'll just see some basic information about a user like their name their job title and their bio but of course there might be more information you would like to display about this user for instance as you might remember i've allowed a user to upload an entire catalog of images that they can display across their profile so a user might want to click through to a person's profile to view more of those images and the way we'll be doing this is quite simple so let's jump on over into our bubble editor and get started over on my home page the first thing i'm going to do is create a workflow when this group element with the user profile information is clicked and when this group is clicked i would like to redirect a user through to a separate page which will host the full information of this user's profile if you'd like you could even display this profile information on a pop-up or even an additional group below this element here and you can hide that until this group is clicked but for the sake of our tutorial i'm going to show you how to recreate a user profile on a separate page so we'll start by creating a workflow when our group here is clicked so select the start edit workflow button and then within our workflow tab here i'll need to create an action i'll be selecting from our navigation action and i'll choose the go to page option the destination page does not yet exist so i'll need to create a new page here and i'll be calling this page profile now before i can send someone through to this page i will also need to update the content type of this profile so i'll select from my page drop down menu here i will select the profile page that we've just created i'll head over to the design tab and now i would like to update the type of content to be a user because we'll be displaying the information of an individual user on this page now to finish this workflow off we can jump back over into our home page we'll head over into our workflow tab select the go to page workflow and we'll choose the destination page to be our profile page and the data we'll need to send through is this group's user because if you remember our group element is also tied to our tinder pal card so it'll display the current user who is being displayed on our home page once we've finished that workflow we can then head over to our profile page and build out the design now in this tutorial today i'm going to keep my profile page pretty straightforward i'm going to just reduce the size of this obviously to look roughly like a mobile device i'll update the background color as i always do to that light shade of gray and now the first thing i'd like to do is display a scrollable list of all of the images stored within this user's profile so in order to do this i'll be adding in a repeating group element so i'll scroll on down to my container option here i'll select a repeating group and i'll drag this out across the entire page at the top i might even drag that down a little bit further and i'll just make sure it fits within our page constraints and now what i'll need to do is configure the data source of this group so i'll first need to select the type of content that i would like this repeating group to display and once again because we're displaying the images from our multi-file uploader i'll need to select from the file option and now the data source will of course be the images stored within the user's profile that we're viewing so i'll select the data source to be the current page user now one thing i would like to note right now is the difference between the current user and the current page user so let's say you're using tinder and you're viewing someone else's profile you yourself would be the current user because you're the person who's logged in and the person you're viewing is the current page user because they're the person who's being displayed on the current page so in this case we want to display the information of the current page user so i'll select that option and then from here i'll need to select the data field that integrates with our users profile photos so i'll select the profile images and of course that has a list of images stored within that data type so that's called images and then finally i can update the layout style of this repeating group i would like this to be horizontal scrolling which will allow us to just scroll sideways through a list of images that we've uploaded now within this repeating group i can add in an image itself so i'll select from an image element here and i'll drag this out within our repeating group i could also just update the background style of my repeating group while i do this just so i can see where its total constraints are so i'll just edit the style of this i'll give it a flat color background for now which will be white and now when i drag out this image i can see where it sits within and of course what i'll need to do next is update the data source of this dynamic image and i would like to display the current cells file so the image itself of the user's total list of images now i can also just remove the background color from this repeating group so i will change the background style to none again now below this i will add in some details of the user that i have stored within my database so i'll grab a text element here i'll drag that out across the page and first of all i would like to display the name of the current profile that we're looking at so i'll insert dynamic data and i'll select the current page user's name i'll also update this to be a h2star font and now below this i could copy and paste this heading and i can update the dynamic text i'm displaying to be the current page users job title and i will update this style of heading to be a h3 just so it puts more emphasis on their name and then finally i will copy and paste this one more time and here i will display the current page users bio and that's all i'm going to include on this page at the moment if you were storing other data fields within your user data type i would recommend adding those in on this page at this time however as i mentioned for the sake of our mvp i'm going to be keeping this pretty simple now let's go and check out what this whole experience looks like when we click through from our home page to a user's profile so over on my home page here i can see that there's someone who might be interested in here if i would like to learn more information about this user i could click through our group element here and that will redirect us through to their profile page once we're on their page you can see that it displays their name their job title and their bio and if i'd like to view more information about this user i can scroll horizontally across and view all the images that they have uploaded on their profile and just like that that is how we can build out a user profile page that allows us to display all the information of a user across our platform as i mentioned i kept things pretty simple throughout this module but if you'd like to add more information i definitely recommend you taking the time to do that now and that is all i have time for in this tutorial today if you're interested in checking out the rest of the course i'd recommend clicking the link in the description to purchase the full course within the complete course i'll be walking you through the step-by-step instructions to complete the rest of our build you can also get access to a suite of bubble tutorials where you'll learn how to build other popular products if you'd like to get started building some other popular products for free i'll be sure to include some suggested links at the end of this video thanks again for taking the time to watch and be sure to hit that subscribe button if you'd like to see any other useful tutorials to help you on your bubble journey

Channel: Building With Bubble

Views: 3,517

Rating: 4.7714286 out of 5

Keywords: Bubble, no-code, visual programming, Makerpad, Adalo, Webflow, no-code tools, app development, minimum viable product, MVP, Tinder clone, software development, Bubble visual programming, Bubble no-code

Id: GbSTdVEKnkY

Length: 67min 27sec (4047 seconds)

Published: Fri Apr 16 2021