so in this video we're gonna be building a tinder clone using adalo and if you don't know what tinder is it's enough for meeting people and you're gonna see throughout the tutorial exactly how it works so here we are in adalo we're gonna create a native mobile app we're gonna hit next we're gonna do blank screen and we're gonna call it tinder test app we're gonna hit create so now we have an app created we have a quick template we have a sign up we have a login screen and we have a home screen so right away what i want to do is i want to create a bunch of screens that are going to be used throughout the app so the first screen i want to create is i'm going to go to add screen and i'm gonna add a screen with an app bar and we're gonna call this matches okay and the next screen that i wanna create actually you can even copy and paste it and this screen is gonna be called chats so i'm gonna go in here say chat i'm gonna call the screen chat this one and ma is matches and the idea here is that a person is gonna either sign up or they're gonna log in they're gonna go to the home screen the home screen is gonna have two functions it's gonna allow them to look at new people to see if they wanna match with that person or not and they're gonna see their existing matches on this screen here and then they can pick a specific match and chat with that person on this screen so let's go ahead and add a couple of components to these screens and that way i know exactly what's going on it gives me a visual representation of how the app is gonna work which allows me to easier build out this app so i'm gonna add a couple of lists here and these two screens are essentially gonna be the same thing except they're gonna be switched on back and forth with the tabs so why don't we go ahead and add a tab bar to this screen and a tab bar to this screen uh we are going to have just two tabs for the purpose of this tutorial um just to have the functionality i'm gonna disable the other three so this is gonna be home and this is gonna be our matches okay so we're gonna go in here second tab we're just gonna call it um we're gonna uh search for person we're gonna put person here just gonna call it matches okay and same thing here actually we can just delete this one copy and paste put it here and the active tab is gonna be the second one so we're going to go in here tab bar active tab second tab the next thing i want to do is i want to configure this last screen which is going to be our chat screen so i'm going to comment here i'm going to uh change the tab bar this is going to be chat and if we go to the title we're going to call this chat so this is going to be a screen where our user is going to be chatting with one of the matches so we're going to configure all of this later but right now what i want to do is i want to get an input there for the text field we're going to have an input here and we're going to have a button okay there's a button i'm going to fix this up let's uh get this button and we're gonna say send send i'm just gonna make this smaller this a little bit longer and now we're kind of done with the initial ui design we have our sign up login screen we have the home screen here where the user is going to see new people that they might want to match with and they can go to this tab bar where they see their existing matches they can click on this match here and they're gonna be chatting with this match so actually let's go in here and let's uh remove the left section all right so now the ui is pretty much done the next thing we want to do is we want to look at our database here we want to make sure it's set up correctly we have an email password username and full name so we want to add a couple of records so i want to add a relationship back to users that's going to be matches right because there's going to be some matches there and that's going to be separate so we're going to say that is matches i also want to add an avatar which is going to be an image because we want to show pictures of these people avatar next we want to add gender so this is going to be text we're going to say gender and so at this point this is what we have right now we want to create a new collection this is going to be called messages now in this collection we're going to have a name we're going to have a property called an owner which is going to link back to users and so a user can have multiple messages a message belongs to one user that is what we want and we're going to call this owner back in our users collection we want to add another property it's going to be a relationship to messages because you know a person can send multiple messages to multiple people we're going to do that so at this point we have a user's collection and we have a messages collection and right now our data structure is complete next we need users and for that i'm gonna go to the site called randomuser.me and generate a bunch of random users i'm going to be generating a sample of users 50 female 50 mail along with an avatar a name email all that stuff using their api so i'm gonna go ahead and do that right now and so i went ahead and generated a sample of users we have five male and five female we have first last name we have email we have their login username password and what's really nice is that we also have their profile picture so this is a sample image of a male and this is a sample image of a female these are all ai generated and so i'm gonna go ahead and import them into our adalo collection right now okay so i went ahead and imported all the data here so now we have 11 records we have five females five males and i also created my own personal account that i can use in order to log in as myself so here we are we have a female here we have a male here all of that using the data from that random user website and we have my account which doesn't have an image that way we can easily tell if it's me writing messages or somebody else we can tell them apart easily now the flow begins with the user going to their home screen and looking at new possible matches and unfortunately in a download there's really no built-in way in order to get like a random element from a collection or get the next data element from a collection and so i started researching and i realized there's actually a custom component that's already built called the adalo random picker so if you go back to our adalo app add component we scroll down we explore the marketplace and we search for random we have this component right here and i'm going to go ahead and install it it's already installed and this way i can mimic a behavior where we need a random element from a collection to be picked or the next element or anything like that so if we come back here and we search for random we already have this component so what i'm going to do is i'm going to drag it here now the way this component works is that it's actually a button and it's gonna display some kind of value from the element that we wanna display so if we are pulling in users we can display username or first name or email stuff like that unfortunately it is not possible uh to display an image this would need to be another component but i figure if i had a little bit more time it's gonna be fairly trivial to modify this plugin to give us an image component instead of this button component but for the purpose of this tutorial we're gonna use this as is so we're gonna have this button here and this button is gonna display the next possible match somebody that we might want to match with and then we're gonna have another button we're gonna come here we're gonna add another button and this button is gonna be kind of like a a left swipe we can't really implement swipe gestures but we can mimic them and so this button right here is gonna act like a left swipe meaning that we do not want to match with this person and in that case it's gonna refresh the whole thing and show us the next match well this button is gonna be our intent of wanting to match with this person okay so the thing about adalo is that there's really no built-in way of refreshing this screen here so we're gonna mimic that by creating another screen here we're going to create another blank screen we're going to call that refresh and what we're going to do is we're going to place it above so we're going to take the screen here we're going to place it here and so every time we click this left button we are mimicking a left swipe so we're gonna say left swipe and what's that gonna do is that's simply gonna come here and then this is gonna refresh back here and that's gonna refresh this whole thing and it's gonna display the next match so i'm going to create an action here i'm going to scroll down i'm going to say add an action link to refresh here i'm going to do this and then on this screen what we're going to do is we're going to create an action add action when the user visits that screen to go back right so this is going to be a link back to home and this way when they click on that left swipe it's going to simply come here and then it's going to come back refreshing the screen and showing us a new match now this button right here this is our custom component and so the collection we want is users and we don't want the user email we're going to display uh maybe they are username okay we can display anything and for not found we're going to say not found no more no more users or you know whatever you want you can put there now the first thing that we need to do is we need to define the behavior of this button right here and the way it's going to work is that once we see a person that we want to match we're going to click on this button now if this person already matched us previously we want to redirect to the matches screen in order to show the existing matches and that way this person can start chatting with us we can start chatting then we can initiate contact if this person did not match us what we want to do is we want to refresh the screen and show us the next match and we're going to do that by redirecting to this blank screen here and this screen is going to redirect back now before we do that there is one more thing that we need to do we need to have the right logic for showing future matches now the first thing that we want to do is we only want to display users that are of the opposite gender as the person who is using the apps so if it's a male using the app we're only going to be displaying females if it's a female we're only going to be displaying males and so we want to set a filter here so we're going to click here we're going to do all users and we're going to create a custom filter so the filter is going to be gender is not equal to logged in users gender so that way it's going to display all the users that are of the opposite gender of the person that's actually using the app the next thing that we want to do is we want to create logic as to what happens when the user presses this button so let's say they like this person they're seeing they want to match up and the logic is gonna work like this depending on if the other person also expressed interest it's either gonna redirect to the matches or it's gonna redirect here so if the user presses this button and the other person already expressed interest it's gonna redirect to the matches uh view here so that they can start chatting if the other person did not yet express interest is gonna refresh the screen so that the user can continue to keep matching others the first thing that we want to do is we want to add an action where we are going to be expressing the intent that we want to match someone and the way we're going to do that we're going to add an action we're going to update the logged in user and we're gonna add the current match so what we wanna do is we wanna add the current user to our matches array to the list of matches that we're currently interested in the next thing that we wanna do is we wanna create logic where if the other user already matched us and we're obviously matching them because we're pressing on this button we want to redirect to this matches screen and here we're going to display all the matches so we want to create a link to the matches and we're going to be passing in the current user and we only want to do that if the other user matched us already so we're going to say sometimes and we're going to say only if the current user matches contains us so meaning on the on their side they matched us already so we're going to do something like this now if they did not match us already we want to redirect to this thing which is going to redirect back and refresh the screen so we're going to add another action this is going to be a link to our refresh here and the transition is going to be none because it's like a refresh we're gonna do advanced we're gonna do sometimes this action only happens if the current user matches does not contain us meaning on their side they have not yet or will not ever match with us so we're gonna do something like this so now the actions here are complete and so now we can test the app and see what do we have so far so i'm gonna log in as myself so that we can see other matches alright so here we have the left swipe here we have a possible match and if we go into our database here organic gorilla is a female just as we were expecting so i can do a left swipe and we have another female here so let's say i want to match her i can click that and then we're gonna be seeing new matches so right now we're gonna finish the the other two screens and then i'm gonna log in as the other user and show you the behavior of the other user so on this screen here what we wanna do is we wanna show the matches who we matched that also matched us back and thankfully that's relatively trivial to do with the dollo and so we're gonna click here we're gonna say this is a list of users but not all users we only want the users who we matched but also matched us back so we're going to say logged in user matches which is let's say me as the person who's logging in and we're going to create a custom filter we're going to say uh the user the other user matches here we're gonna say matches all contains us right contains us here so meaning that we want only the people that we matched and then they matched us back so i matched one person if she matches me it's gonna be displayed there so i'm gonna log in as her and i'm gonna match myself now if you go into the database uh you can see exactly what's going on so here's our database and this is me right here and if you scroll over you will see that i have an intent to match somebody else and this person has not matched me yet and so if i run this app again and i go into the matches tab you can see that i have no matches and that is because i showed an intent but that person has not shown their intent to match me back and that is why i'm gonna log in as that person and i'm gonna match myself and that way we are gonna see something in the matches here so i'm gonna be logging in as this person here i set their password to password we're gonna log in and we see the first match as me now if it wasn't me i would just left swipe through everybody else until i see myself now i can hit james and once i do that it automatically redirects to the matches screen just like how the logic was designed to do and here i can click and i can start chatting and this is the only screen that's still left to do now if i go back log out login as myself i should see this person here along with the avatar and possibly some text here as well so right now i'm logging in as myself here there we go so if i go into matches i see this person here who also matched me back you cannot chat with this person yet because we haven't done the functionality which we're gonna do in one second so first we need to create a link from this matches screen which is really a chat screen different chats to this specific message screen okay so we're gonna comment here we're gonna do a link add action link to our chat here and it's automatically passing in the current user and here we need to have a list of messages but not just any messages we need to make sure this is actually a conversation between the person who is logged in and the person who we are having a conversation with so this is a list of messages and we want to make sure that this is logged in users messages we're going to add a custom filter we're going to say current message users because the message object is going to have both of these people there so it's going to be me and somebody else contains the current user okay so this is what we have now in this way we will be seeing a conversation that we are having with another person and so if you run this app right now we should be able to be redirected to that screen so here we are we click this now we can we are having a chat now we don't have any messages yet and that is why we need to configure this thing here so that it sets the correct message for the correct chat here and so we're going to go to the send button and we need to create a bunch of actions first we need to create a message and the message is going to be this input here if we go in here other components input and what we want to do is we want to set the owner as the logged in user because every message is going to have the owner the person who sent it locked in user next what we want to do is we want to add the users that are in the conversation to that message so what i mean by that is we're going to have another action we're going to update the new message we're going to scroll down and we're going to add the user we're going to say add the current user and we can have another action as well update the new message and we can say that the user another user is going to be us we can do that here as well it's up to you where you want to do it and now when we actually send the message is going to be part of the conversation we are having with the correct user so we're gonna preview the app we're gonna go in here we have our match here which which are essentially like chats we're gonna come here and we're gonna say hey we're gonna send a message and as you can see the message is displayed here we can go back we can come here and we're seeing the message the only thing that's left to do is maybe show the avatar of the owner of that message maybe show the message created date or an updated date if we can edit the messages and that is something we're going to do right now so we're going to come here we are going to go to the left section this is we're going to enable it we're going to say an avatar image database owner's avatar is going to be the owner and the subtitle we want to do a we don't want the subtitle we want the messages created date okay and we also want to sort these messages in a specific order so we're gonna go to a simple list here we're gonna do sorting we're gonna do all this to new ones that way newer messages are showing at the bottom and all this are at the top so we're gonna go back here we're gonna go to matches we have our match we have our message here and this is from me and that is why it's not showing the avatar because i haven't set my own avatar and we can say something else second message you can do that and now we're seeing a second message a few seconds ago a minute ago so i'm gonna log in as the user that i'm chatting with and i'm gonna enter messages from the other users account to see if they're showing up correctly so here i'm logging in i'm logging in log in all right we can match more people if you want but we're going to go into matches we're going to see me there and we're going to see my messages so i'm going to say hey there i'm going to hit send and now this message is showing up with an avatar and so if i go in and log in as myself now i will see the whole conversation here now the other thing that we can do is we can go back and we can match with another person so this green meerkat which is this person in our database right here right this is theodore i'm gonna match with this person and as this person did not match with me initially it refreshes the screen so i can match with another person this is crazy bird and crazy bird is this dustin so i'm gonna hit that and we have another user here this is white zebra and this is a this person right here this is edgar so i'm gonna match with this person as well and for now that's enough so if i go into the database i can see all the matches right so if i go in here as you can see this person has expressed an intent to match with four users and this person which is me has expressed an intent to match with one user and so if i go in here we have this person this is who i expressed and intend to match with and if we go in here this is who this person expressed an intent to match with four of these users here so if any one of these users go in and decide to match back with this user uh they're gonna have uh a match screen where they can initiate conversation and all of that and lastly i'm gonna log in back as myself and i'm gonna go back into that chat and see if the messages are showing up correctly all right so here is my match i only have one match if i click here i see the message from the person and obviously if i decide to match with others and they match with me back i'm gonna see i'm gonna be seeing more messages now another thing that we can do is we can go to this matches here and we can create a way to delete matches so that is very very easy so you want to create a right section we want to enable it and we want to just and add an icon here so instead of maybe an a plus button we can have a delete button so maybe something like this here delete forever and the way it's going to work is when they click on it we are going to remove the current user from our own matches so that that's very very easy to do we're gonna add an action we're gonna update the logged in user and we are gonna go into the matches we're gonna remove the current user so we're essentially removing this current user wherever we click the row from our own match and that way the user can always remove existing matches if they so desire so that is all i wanted to show you in this video like you see it's fairly trivial and it's fairly straightforward to go out and to build complicated apps using no code tools so i really hope you've gotten value here let me know in the comments below what you think like this video if you enjoyed it and you've gotten value and don't forget to subscribe to the channel if you want to see more of these sorts of videos thanks a lot for watching and i'll see you real real soon