BUILD A TINDER CLONE [PART 2] RUBY ON RAILS 6 TUTORIAL

welcome to part 2 of our tinder clone using Ruby on Rails 6 and in this video we are going to improve where we got to in our last video so in our last video we have these buttons at the bottom underneath the users photograph and they can be clicked and it transitions to a new user however we haven't got anything going on in the backend up until this point so in this video we're going to be setting up the ability to like a user and that light will be stored in a database so to begin here I'm gonna set up a post URL in our routes file and we'll pass this to a method and we'll pass in the user ID of this user that we're liking and then we'll also set up a route for the decline so before we get too deep into our app just want to remind you guys if you enjoy this content to subscribe to the channel and give this video a like it is helpful to you and aside from that I am releasing a Ruby on Rails 6 course for beginners and I will be coming out very soon so do drop a comment below if you want to hear more about that and I will notify you when that is released and I will also include a link below where you can enter your email address and I will notify you when the course is live so back in our code now I'm using this data ID that we have added to the slide and a previous video so what we want to do is use that ID of the user and within our JavaScript and we want to be passing that into the Ajax method the Ajax will make the request to our controller and it will pass in that user ID that we are making a decision about so we can look at our web console here just to see that ID being output so it just tested it before we go too far with it so it's reading an ID correctly so that should be fine so within our ajax.request we are setting at URL and this is the URL that we created in our routes file so we have this slash approve and then we add on the user ID at the end and we're setting the method as post and the data type as Ajax so within our controller then we will just run the logger to output a message to our logs showing the parameter is being passed so in this case it's the ID and if we look in the network tab on our developer tools we can see that a request is being made with the ID at the end that's the user ID and if we have a look at our logs for rails we can see here that the ID is being set so saying user ID for matching is 6 so that's what we put in our controller and we just need to have some message than being returned back to the browser after this after this approved method is called and of course I'm gonna need some functionality for actually storing that like so we'll go ahead and we'll create a model for the like itself when a request is sent and we will create a new like and store that in the database so when we created our model using the rails generate model command it has also created this database migration for us so we're just gonna add some fields into this migration and we want to say that we are using the account as a reference and we'll also add a integer here for our liked ID so there's going to be the ID of the user that we are liking at this point so I will nameless liked account ID as I think it's descriptive and we can quickly understand what it's being used for this information so let's run our database migration now and that will update our schema file for us and now if you go back to our browser controller and here we're going to create this like so once this approve method is called we'll do a like new and then we can store that to a variable so we'll pass in the length account ID and we'll use the params ID for that so we can actually set this as a variable count ID and then pass in the params you'll be using this in more than one place and what Cole is you like and then we can easily add a condition here to say that if this new like is saved then we will do one set of actions and then otherwise we'll do something else so it's just an easy way to ensure that it's saved and then handle the response appropriately so we'll set the account ID of this new like to our current account that is our logged in account at this moment the idea of that kind of that account so if this new like has been saved we can also make a check to an to see if this user that we're liking likes us back already and then if they do like us back then we can alert the you know alert the user that this user likes you you may want to send up a message or something like that so I think most dating websites work in this way I know that on tinder for example if you get a match then it automatically matches you and you can message that user so in this case we are just going to usually like to wear and we'll pass in the account ID of that user and we will see if that user has a liked account ID of our ID so that would be a considered a match in this case so we'll name this existing like and then we'll say if existing like yeah so we'll use a count method to get a number from this so if existing like is more than zero then they like us equals true and in fact we can even this shortened this statement so we can just leave it as a greater than zero so a later return a true or false value for they like us and then we will add list condition here to say if they like us then we will handle some additional code here but we can leave them for now we can come back to this one later we can just pass this instance variable to true or false in fact you can actually even shorten this further again just by calling this an instance variable instead they don't need that conditional length so there are many ways to write code and that's something that's really useful to bear in mind that now you can write code in a more logical long form approach but quite often you can go back and reflect a lot to make it much shorter and more concise so where possible we like to we like to keep the code as short as possible just makes our life easier in the future and I'm gonna add some basic validation here now to our like model so in this case we want to validate the uniqueness of that new entry being saved so we want to ensure that it doesn't already exist we don't want to be liking the same user more than once so now let's go ahead and try out liking a user to see what happens so we can see that the post is being made and if we look at the logs we can see that the like is being inserted into the database and it's got the account ID and the likes account ID so that looks good what we can do now is reload the page and see if that user still appears so currently it does and if we like this user again we can see that the the it's not saving this new like so that's exactly what we wanted to happen we don't want that user to be liked twice by the by our account so reloading the page now we really want this user to be hidden from us once the page loads so in order to do that there are a few ways you can do this but a quick solution for us will just be to load the accounts that we have liked already and we will basically just map the liked account ID so we're gonna get an array of IDs that we do not want to be loading so we can use this array of IDs and pass it in to this account of where statement so we want to be ensuring that we don't select any of the accounts that we've already liked previously so I can do this by passing in our own ID into this like the count IDs told us appended at the end of the array using Li - arrow symbol and then we're saying a count up we're not so what that means is we're just loading all the accounts that are not found within this list of IDs and the next thing we're going to do is define a way to find the current matches of a users account so we'll create a method within our account model we'll say this method is called matches and in here we are going to select all the accounts that like us and we like them back and then we will return a list of those accounts so let the front-end we can display those to the browser so we'll start here by firstly gathering the IDS of users that we like so we can say that the account ID is this is gonna be our own ID in this case so firstly we can change this variable name to like the count IDs but the account ID will be our self ID so self referring to this model this instance of the model is loaded which is our existing account logged in account so and then we are finally just mapping the liked account IDs so you can see on the first line of this method so I'm creating an array of like the count IDs then on the second line we have likes me account IDs so let's go be the users that like us back so in this case we're saying the liked account ID is our ID so people are liking us and then we are mapping the account ID so that again is their ID the user who is liking us that's a list of their IDs so we have two arrays of IDs now and what we need to do then is compare these two arrays so we want to see where they match so we will create a new are a new matched IDs array here and what we are doing with this matched IDs is what you think I like the count IDs and we're going to iterate over every ID in that array and select only those from that array that are found in this likes me accounts ID all right now this is a little bit confusing to understand at first but basically we're looping over an array and picking out the ones that match from a different array so that way we're getting a list of IDs that are matches so we'll test this out in the rails console first and we're not seeing any matches currently but that is because we have not added any likes from different accounts yet so in this test is out by outputting the arrays and see what happens so reload the console try again and we're getting the IDS are being output here are the ones that we like as you can see the bottom are is not returning anything yet so what we can do the test is out is to create some likes between accounts and check if that works but once we have this match IDs then we can do the account aware and select those accounts based on that array of IDs so we want to output this information under the my matches tab at the top so in this case I'm gonna create a fake like from the console so I'll just pass in some values here just to make a match in this case we're gonna say that the account number two likes account number one which is our account and then we will try this over again you can see that there are two both arrays are returning a value currently and now we're getting the account that is a match so that appears to be working so the next step will be to get this to work on the front end so let's create a new a new link from our routes file so create a new route in here and create a new method under the Browse controller and call it matches and we can simplify this code law here we'll just say matches Eagles account so it's gonna be the current account and they will say dot matches that should return a list of users and now within our views we will create a new file in the Browse folder so we'll call it matches and then and here we want to look over this array of users so we'll wrap this in some HTML first in actual fact what we can do here is render a partial because we may want to move this list of users into a different location of the app later so I'm thinking we're gonna have a sidebar later but just as a quick measure right now we're just gonna have a single page for these matches so we'll just paste in this HTML and then we will iterate over this list of matches and output some basic information so here we can say we can first put this in a row and then put a so we're creating these into a column really as what we want to be doing and so we'll just use the bootstrap call them small for so we're two about three wide and then we can output the image so we'll take the first image that that user has uploaded and I think we're gonna you well we can set this as an image tag but we will use the image fluid which makes it scale to fit that column size so make it a little bit more responsive on different screen sizes so now let's update this link on the my matches under the navigation and we can test this out and saying Li there is no method for URL so I think we need to change and it removes that I think from the image tag I'm just checking how I did it earlier so the image uploads were handled using active storage and I don't think the really the URL method exists for active storage so it can remove that so we can use the images don't attached to check to see if there's an image available so if you've been following some of the previous videos I've made I normally use courier wave to handle file uploads to Amazon but in this case I decided to use active storage just to share a little bit about how that works for anyone who is quite new to developing rails apps so in this case we are going to get rid of the image that we have right now and we're gonna move it into a background image for this this div so we can style it up so that it just covers the background of this div so I'll use a style inline style sheet to do this and we'll say that the background image is from this URL and we'll use a URL for helper to output the URL of this active storage file so then we've created a match style sheet and then we will say that the background size is covering this div so we have a div class of match tile and also set a alignment of the background and the non repeat of the background so you can put a little bit more effort into this to style this thing up but we just want to go very minimal here right now we just want a tile that shows the background image and then we'll put a name on that tile so we can still see that our background image is not showing correctly and I think that's because of our height and width values I'm so we haven't declared those properly we set them as percentages but in this case it's not working we need to have a fixed value so let's go ahead now and we can add a rounded class just to make it look a little bit nicer to round the edges of the image that's a class a CSS class that is part of the bootstrap framework and what I'm what I'm doing here really is the next thing I'm doing here is I'm setting any cursor for the image so we can see that the icon has changed for the mouse just by changing the style sheet so it can go back to tinder calm and check how things are looking over here so I can see here that these images have this rounded border shape but they also have the name of the user as an overlay so let's try to do that now will output the name of the user in white text and we'll position that and the bottom left of this tiled div so we'll sit on top of the background image for that user so we'll set a position of absolute on this text and it will say that it is on the bottom left so we'll pass in values for that and then we can make the background tile to a position relative and so solid a basis the positioning of the parent which is this match tile in this case so we pulled it the text and it looks pretty reasonable right now so the end goal of our app is that we click on these user icons and we load up this chat window of that user so these don't have to be links but they can be handled by JavaScript so the loading of the information about the user and the chat window that can happen using javascript so going back to our matches now we're just adding a ID ID of that user and if we create this matches touch is within our JavaScript folder or JavaScript includes folder and then in in here we can attach an event handler on to this match tile so when the user clicks on the match tile will execute some code and in this case we will be using this ID that we have added this data ID and it'll do something using the IDS will load some details about that user using the ID so in this case I'm just going to output this ID to the console just to see that we're getting that information correctly and since we are using this ID in more than one location we're gonna move it into a variable and we'll just call that variable in the console.log so this test is to see if it works and looks like we haven't included our code here so we'll add this to the application is under packs and something's still not working here so we should really wrap this in a function so what's happening here is this is being called before JavaScript or before jQuery gets loaded so if you run that wrap it around that function it just says don't call this code until the document has finished loading so what we want to do here is add a sidebar like it has on tinder so you'll see the matches on the left and then on the center of the page you'll see new users that you can click and go through so in my case I've just like clicked I liked like a whole bunch of users just to gather some matches here to see how that works so in the case of tinder as a web app it basically all operates as a single page application or at least very close to it they don't really have multiple pages you just sign in you like or dislike users and then on the same page is list all of your matches you click on that then you can interact with the user so we'll try to get our app something similar to that and since we're combining both the views into one I'm actually going to move the code into the same file in this case at this point we don't have a lot of code for interacting with the user so it should be fine perhaps in the future we can refactor this if there's a lot of code required now I'm going to add a sidebar for our matches so we can create a row and two column layout so left column will be the sidebar and then the right column should be larger will be four new matches or sorry new users that we can interact with and like or dislike so we'll move the existing code up into this wider column and then we will paste in our render partial code so let's drop this in and they should both now work on the same page so when we test this out we can see that we do need to move this matches up into our browser view to get rid of that error let's try this again and we can see now that it's working so what I'm going to do next is improve the design or the layout of this page so on the Left column I want it to be noticeably separate from the main column on the right so I will update and try to set some background color to separate the two I want to basically get it to match what is on tinder or something very similar to that so that there is a distinguishing difference between the left column and the right column so while I work on that I just want to take a moment to remind you guys that I will be releasing a new Ruby on Rails course in the next couple of weeks and if you're interested in that I will put a link in the description where you can sign up to a mailing list and what I will do is once the course goes live I will send out a email to everyone on that list to let you know what the course is live and it may even be a promotional code in there for the first couple of days when the course goes live so don't take the time to sign up for that if that interests you and aside from that if you haven't seen some of my previous videos I normally do a MVP or a Minimum Viable Product so what that is is basically once I build these apps I take a little bit of time to finish them out and then I sell them on my website now that's something that some startups or entrepreneurs are interested in but if that's not for you that's totally fine but if that's something you're interested in there will be a link in the description below where you can purchase this tinder clone when it is finished I'll keep an eye out for that too and finally I just want to say that I'm really grateful for all the positive comments we've been getting on the videos over the past few weeks and you guys have been really great and I've been getting a lot more likes on the videos than I ever expected so that's been really awesome so I really want to thank you guys for that I really really appreciate it so getting back to our app now I now want to add in a navigation for switching between matches and messages so I'm gonna use this from bootstrap this template code for that I'm going to drop that in and we'll just update the names on the buttons for this or on the navigation we'll take off the last piece of navigation so let's update the values here and test this out and we can use our render partial within the the tab panel and then under messages we will just say no messages to display so later we will add those messages so that seems to be working and I'm also going to add a margin here to the left to align to basically align the tab navigation with the images underneath the profiles underneath so I the margins at top as well and then we will also update the margin on the matches panel tweak that and the layouts looking pretty good right now I'm happy with that we'll just do the same for the messages I will have a look at the markup here something's not quite right with how this is being displayed so for the matches we do have a column class on a div so let's try to replicate that and I think that's close enough I don't want to spend too much time messing around with this but just try to get it looking decent first so I want to add this top bar to the left column so ideally we will remove this top the very top navigation bar at the top of the page and then we will have this small bar like they have on tinder with a profile icon and a probably a logout button there too so let's set that up now let's create a new partial called profile bar and in here we will then output a link and we want a text on this link to be white so I'll add the class of text white and we can leave this as a blank just a dummy link for now so a lot of background color just to see how it looks first but we'll have to tweak it so it does look a bit strange right now this big red bar at the top but in a few minutes we should get this tidied up and looking a lot more like what we see on tinder so I'm just trying to get the padding and spacing right here first so we've got a h3 clasp so that will make the text larger and because this is a link that we are using the default layout of a link is in line so the default display is in line so we will change this to be a display of block so that allows us to do our padding and our margins and everything else and within this link then we also want to have a profile profile image thumbnail of the profile image so what I'm gonna do is change this link to into a block so we can do that by adding the do at the end so it's wrapping this as a block and then we'll have our icon inside our profile image so for this we'll just pull out the first profile image of that user which is our account and then beneath that we'll have the text saying my profile so everything within this block will be clickable as a link so I've made the image rounded here but because there is a different dimensions so the two dimensions are not the same height and the width so I'm just gonna try and force those to fit in this case but if it is a perfectly square image then this shouldn't be an issue there will be no skewing of the image so that's starting to look a little bit better here so I've added a new thumbnail class here and I'm gonna add a new style sheet for the profile so the anything profile related output into the style sheet so for this image I want to add a white border around it and we can see that that matches it's very similar to what we have on tinder and we can make the art image a little bit smaller just to match so the next thing I want to do here is create a different background color for this this bar so we'll add a class here called profile bar and then we will add that within our style sheet and while we were here we will also add a hover effect to our link within the top bar here so this profile my profile should have a text decoration of none once its hovered and I'm gonna take a bit of a shortcut here and I'm just gonna copy the style of the background color on tinder so you can see here they have a linear gradient to colors I'm just gonna paste this in and that should give us something similar that's pretty good we can fix the padding on the top and bottom so the space is out a little bit better I had a padding of 20 pixels to the top bottom and we can trim that down to 10 pixels and you can't take this further and style this up even more I'm just trying to get the very basic version of this together so I'm gonna take out some of these margins and padding's and develop Philo's directly within the stylesheet itself I just want to get this lined up with the elements underneath navigation and the profile images and I'll remove this heading for class and we can set the font size directly in the style sheet set that to 28 pixels it's still a little bit large looking so we can probably tweak this further and also set a line height now I want to have a look at our navigation underneath so I want to make this a little bit more like we see on tinder so they have this underline for the selected tab so let's try to do a similar style to that so I will add a class to this navigation so I've removed the default bootstrap class of nav pill and it will add our custom class so now let's add some custom styling for our navigation items so I will add a border to the bottom of the tab and I'm just adding a solid red border but we're not seeing it here at the moment so I'm trying to figure out why that is so we have a nav tinder sidebar okay and that is for the active class so we just need to make sure that it is within this oh I think I know what's going on here so this is not within the profile bar so I think the class is supposed to be within that profile bar let's have a look at that again and see if we can move that it move that code outside of the profile bar that should work and I have to switch this color to be one of the colors is used on the top bar so you can see this color and I'll switch it again to get the more pink color so let's looking pretty good right now so the next thing I want to do is move this sign-out button across until the profile bar itself so we can see on tinder they don't have this top navigation this top bar that we have at the top so I want to remove that and put the sign out link here and once they click on the more my profile that will take them to the settings so that should do away with that top section altogether so let's have a look at that now and try to fix this up so inside our application template I'm gonna add this unless signed account signed in so we will show this navigation at the very top if the user has not signed in to their account so that will allow them to go and sign up for a new account or to sign in but once they're signed in that top bar will disappear altogether and then we will add a quick redirect here if the user has already signed in they try to visit the home page they will be taken directly to this this dashboard path this browse browse profiles path so now within our profile bar again let's update this link to make it work so it will point to the settings page so I have decided to take this out of the block that we had now you could keep it in the block and just have the whole thing linked to the Edit account registration path but since we are having the sign out link here too it just makes more sense to separate these so I will add Lee sign out link and it will point to the destroy account session path and we'll float that to the right and we'll use a method as delete it's a level that should work correctly so let's reload the page and see how this looks so it's looking a little bit strange right now the alignment of things are all over the place but let's try to fix this up so I'll link for the image tag and it will also point to the Edit account registration and again the Edit account registration needs to be fixed up also but for now we just want to get the main functionality working so we sign out does work I'll sign back in again let's check ok it's good so let's get the alignment of these links fixed up so we'll add a custom style here for the sign out link and we'll set a font size in our style sheet and they'll also create the style specifically for my profile link so add classes just so these are accepting these styles we got it okay so we can remove the block tag that will fix this alignment problem we were having and they're starting to look a bit better now we can play around with the margins on these to try and get things right so I'm spending a little bit more time than I wanted to here on the styling but I think it's kind of important when you're building an application that you treat the front end and back end with the attention that it deserves so in this case we're doing full stack development so it's always good to get the design elements looking as good as possible but I think we're pretty much they are with it it's looking really good right now so I won't be spending a lot more time on this navigation bar here so it looks pretty good overall I'm quite happy with it and other than that the last thing last couple of things we can do here is to firstly move this main image on the center of the page to bring it down from the top because it's it's really tight to the top of the window right now so we'll tweak this around a little bit figure out how it can move this down so that we have this set without a margin right now so adding a margin push that down and once we get that in place we also want to take out the footer on the bottom of the page but let's get this slider cleaned up first so I just wanted a little bit of space between the top and the bottom of the slider to allow allow some space in our design so it doesn't feel so cramped so another thing you'll notice here and the design is there's this white space between the two sections on the page and it's a little bit annoying because it just doesn't look quite right or it's like the grey area and then the white area there's kind of a gap between that top bar so what we can do to fix this and maybe it's not the best way but it's a a quick way to fix this would be to put a negative margin on the right of the profile bar and I will just stretch out to fit that space so I think that's good enough for us for now it just kind of fixes that little design issue that's there so then finally I just want to hide this further unless user assigned in and so when they're not signed in they can see the links at the bottom of the homepage but when they're signed in they will just hide that footer and then because of this and we need to get the content on the page to fill out the height of the private the browser window so we'll try to do that now I'm just trying to get it stretching down to the bottom of the page so that gray background fills the page and it's not quite ideal because we need our buttons underneath the images to appear it's underneath the slider so let's try to move this up so if you inspect the page down on the page we can see that these slide controls are underneath the slides ID so this list it's actually pushing these down these controls so we can I think we can change this to make the slide controls taller and I will fill it out so that's looking pretty good right now and again there's a bit of an issue here when we go to the smaller sizing but um we can tweak this to be filled with at the smaller screen size and then if it's bigger it will go to the sidebar so that's kind of do it for this video hopefully you guys have found this helpful and if you've enjoyed this video do give it a thumbs up and subscribe to the channel for more videos and I will see you guys in the next video

Channel: David Battersby

Views: 2,968

Keywords: ruby on rails, ruby on rails tutorial, rails tutorial, rails 6, web development, mvp, website, platform, app, tutorial, startup, web app, walkthrough, coding challenge, Ruby (Programming Language), learn ruby on rails, coding, live coding, programming, build web app, how to use ruby on rails, active storage, amazon aws, s3, tinder, tinder clone, tinder app, full stack

Id: ibRVysxvOdU

Length: 42min 50sec (2570 seconds)

Published: Sat Nov 09 2019