BUILD A TINDER CLONE - RUBY ON RAILS TUTORIAL

how's it going guys in this video series we will be creating a clone of tinder now I haven't used tinder in some time but I have set up an account here just to have a quick look at how it works and we can see here that we are signed in and we are loading and is searching for local matches and on the left hand side then we have a list of users that we have matched with and clicking on those and you can start a conversation with them now if I go ahead now and setup a new application so we're basically just going to be creating the desktop version of tinder and the first thing we are doing here is just setting up a new application and installing the gems that we need for the application to run and Before we jump to deep into this application I just want to remind you guys if you enjoy this kind of content to give the video a like and subscribe to the channel if you're not already subscribed and one more thing to announce is that I am planning to release a Ruby on Rails for beginners course in the next couple of weeks so drop me a message if you want to hear more about that and I will probably be creating some content for that in the coming couple of weeks to promote that a little bit more but getting back to our application right now I'm just setting up the database so we run the rails DB create command and then we will use the DB migrate command to create the schema file for our app and then finally I am running the server so that we can see this working in the browser and you can see that we're running real 6 here now going back to our routes file I'm gonna set up a route URLs for our home page and we'll use a controller called public to do that so let's set up a controller now and in here we're going to set up a method called home so this will be our home page and then we will create a folder to put the view files into so let's set up a test home view right now just to see if our URL is working so that's looking good and just to keep our code clean I'm going to commit any changes we make into the git repository so by default once we set up a new rails app get will already be set up in that directory so I am just removing the turbolinks gem as like we will not be using it in this application and then within our application template within views I will just remove the references to turbolinks and then the next step I'm going to make is using yarn to install bootstrap jQuery and pop Egeus now these are kind of the basics that we need just to use javascript to select dom elements and allow user enter to interact with different things on the front-end we'll use jQuery for that but you can use the vanilla GS or even a different front-end framework if you wish but for the purpose of this video we will just keep it really simple and we will go with jQuery and I'm gonna paste in some code here which basically just sets up jQuery for us so now let's just restart the server and commit the changes we've made to get so looking now over at the bootstrap website I'm going to use an example here from one of their templates and just copy the HTML and I'm doing this just to save us some time so we can paste in the code that they have set up already for the front-end and so it's a simple HTML code to generate layout and I will do this within a partial cold nav and I'll put this within the layouts folder of our views so over time we will change some of these links but we're just trying to get a very basic looking navigation setup to begin with so once the user is on the home page we will show them some basic links and the option to sign up or sign in and again now we're just gonna copy the HTML of the body so we've got this panel sections in the middle of the page and we will just use that on our home page and I've also set up a new partial here for the footer so let's create that now within the layouts folder so we're just gonna keep the basic links here that's already in place for the footer and then for the body content these these panels and we'll move that into the home template which is in our public public folder so let's just clean this up a little bit so now when we reload the page we can see that the basic content is all there so what we can do then is start to modify this and I will remove this third column to begin with and then we can use the left column as a way of describing the product basically summarizing what the service we're providing is and then we can use the column on the right to have a link to the signup page so we'll just put in some dummy copy for now and try to get this looking somewhat reasonable just to start with so now let's update this right column and in here we're going to just say sign up and then we will remove some of this copy in the middle and then we will use a link so the link will point to the signup page so before we get into that we need to create user accounts and we'll use device jam to do that let's get that set up now and you can follow the documentation for device but what we're trying to do here is just run the setup command and that will create a initializer for device where you can put in the different settings for the jam so it gives us some information here to begin with which is ensuring that we have the right URL option set up for the dev environment ensuring that we have the notifications being output to our template so we'll just go through this list and then we will generate the views for device so generating the views allows us to modify the signup page and the the Edit account page leader so now we will run the generate device command to create our model for our accounts so we're going to use the named accounts for our model and then add a couple of fields here into this migration so we want to record the user name and a first name and a last name so now let's run this migration and this will create a new table for our accounts so now we can go back to our homepage view and we can update this code so in this case we're just gonna have a quick message here to say click the button to get started and then it will generate a rails link here which will point to our signup page so now let's try this out in the browser let's create our first account and we'll put some dummy details in here just to get started and you can see here at the top we have this welcome message but we want to modify the navigation at the top if the user signed in so in this case we will have a sign-in link and a sign out link and then of course you will also have a sign-up link so let's try this out in the browser see how it looks and we want to space these two buttons out a little bit a little bit tight right there but it's saying I already signed in once we click on those any of these links right now so when we sign up it is automatically sending us in and now that we are signed in and we will want to have a condition a conditional statement here to say that if we are signed in then show a sign out link and otherwise then there will be a sign in and sign down links so let's just add that now and one other thing to note here is that once we are signed in we will want to have links to browse users and to go to our messages and things like that so we'll use a link here for browse I'll set this up as a dummy link right now but we will add the functionality for that shortly and I'm just gonna move some of these links further down so these will be public facing links so we'll only see these if we are not signed in and if the user is signed in and we will see the Browse link so I've added a matches link and what we will be using this for is those people that we have liked and they have liked us back and then finally about it a set settings link here so this will be where we edit our account settings I'm just basing these links out and then finally I will add a sign out button here to the end so we'll just copy the sign-in button and modify that one and if you need to find out the URL for any of these device links you can get that using the rake routes command and we can see here that for this sign out we are looking for this destroy account station path and that is for the delete method let's test this out and we are signed out and let's sign back in again so the next thing I'm going to do is finish setting up the active storage so we're going to use active storage to upload files for our users so they'll be able to upload multiple photos and then we will see them when we are browsing users to do this we need to open up the storage double yml file so there's a yamo file that contains settings for our active storage and we are going to uncomment the Amazon s3 block so in here we will add the settings for our bucket that is on s3 and we are told here that we need to use this gem as well the AWS SDK s3 gem so let's add this gem to our gem file and run bundle install looking again at the documentation for active storage it is telling us here that we need to add this line of code to our model so in our case we're going for the multiple so we want to have multiple uploads per user account so in our account model then we will use this has many attached images and in here I'm just going to modify this and we are using arrow in the local environment so I'm going to just change this to use for garage M so and use the E and V syntax and you can actually use the rails credentials command to add and modify these variables but just based on the way I've been doing it in previous videos I'm just gonna stick with that for now possibly and in upcoming up we will do it we'll do a video on adding credentials and modifying credentials in real 6 so let's go ahead and restart our server again and now we're going to create a new controller and this will be for the Browse functionality so when we are browsing user profiles we will using this controller for that let's finish having a new method here for browse and we'll also add a couple more methods here for when the user has clicked the like or dislike on a particular user and we will probably be calling that by using Ajax later so we'll use an ajax request to send this like or dislike so the user doesn't have to reload the page and now we can create a new folder here for our views or browse and we'll just set this up as a quick template just to see if the page is working but before we do that we need to add a route for this browse so we'll add a get request here for this we'll be using a get request and then you'll point to the Browse controller and use the Browse method and then we will name this URL as browse so just very simple but we can now just quickly update the link in our navigation and test this out so once we visit this Browse page we want to be loading in account and in this case we will just use all of the accounts for now but we will want to filter this later so now let's set up some dummy accounts and I will do this under the database seeds file so it will add several accounts here just to test out our browse feature so add some dummy data for these so for this data we are creating a first name last name username and email and password so the most important things here being the email and password but just having a name lets us show something on the front end too and now that we have added this we can run the rails DB seed command so this will just execute this code and we can open up the rails console now to just double check that these entries have been made and we can see now that we have six different accounts and the last one is our dummy data so now if we go back to this Browse template we can update the code here so we will lip over each of the users and we will then create a we will output a paragraphs with the first name for this test list to see if these users are being loaded correctly so we can see here that the names are being output however what we will need to do is show these in a stack order so almost like a deck of playing cards almost so you'll show one first and once you either like or dislike that top one and we will see the next one underneath the next one underneath that so on so what we could do here is actually make each of these divs unique by attaching a number to them so just to show you how that looks we've got user 0 user 1 user 2 and this user 0 you will notice it's empty and the reason for that is it is loading our account for this one and we have not added a name to our account so if we go back to our controller now we can update this and we'll say here that we want to not load the ID of this current account and now you'll see that our account has disappeared so the next thing I'm going to do here is set up a slideshow and the reason I'm doing this is that it will just save us some time on creating the front-end design for switching between users once we like or dislike a user so I will just copy and paste this code and use it it's a quick way to set this up so we'll just follow the classic year of slide and you will use the showing class to display a slide so the first slide will be showing so I have removed here the index but I think we should add a data ID attribute of this user and we will use this ID later to make the Ajax request to the backend to say which user ID that we are liking or disliking so this looks good so far underneath them we have buttons to say wheeler like or dislike this person we will probably modify these later but just adding something simple for now so I'll copy this style sheet and we will move it into a slide style sheet and Jamie will copy this JavaScript and we will add a new file under app JavaScript so we'll add a new folder here called includes and then we will add a require for this new file we are going to add so this is called a slide cas and create a new file and paste in the code so when we try this out on the browser we can see that the buttons at the bottom are there and if we have a look at the slides let's see what's inside here we do have the name inside but it looks like we haven't got the showing class we'll just update that and we can see that the first slide is now loaded it's got this background color just to make it stand out for now so this is test our JavaScript here by running an alert and the JavaScript is loading correctly too so now in our JavaScript file I'm going to run this function so this will basically only get run once jQuery has been loaded once a document the document Dom has been fully loaded so let's run a console log here just to see that these slides are being selected correctly so what we're gonna do here is select the first slide so in this case we're gonna call this active slide and you'll set a new variable for that which just loads the first child element of the slides and and we're adding a class called showing so I'm just modifying this previous next slide functions as I don't think we really need them to work like the slider works so in our case we don't want to be sliding backwards we want to be always going forwards as in the sense that a user Taylor declined or approved and will just update these IDs on these buttons just to to match our intention and what we can do here is attach a on click event to the button and that can be done using jQuery in this case so just say if this decline button is clicked then we want to run this go to slide and then we'll pass in this decline string as a variable and then within our go-to slide we will call this action instead this variable gets passed in and then we'll have some code that gets run based on the condition of this action so it's action is approved then we'll run one piece of code and then otherwise we'll run a different piece of code so once the user clicks on alert approve or decline for a potential match we will want to remove the class on the active user that is displaying so we want that user to be hidden and then we want to select the next slide or the next account on the list then we will add the class of showing to that one so kind of like a deck of cards we're just removing the top one and showing the next one removing that one and showing the next one etc so the reason we'll use this conditional statement here for the action is if the user is approved we want to be running a piece of Ajax code to say that that user has been matched potentially and then if they are declined then it will also make a different request using Ajax so just testing this here we can see when we click on it once it does indeed switch to the next user we click it a second time it is not working so I have to look into why that's happening so one thing we did forget to do here is we forgot to update the active slide so in this case once a once the top slide is hidden then we want to be setting the active slide to the new one that is being displayed so we'll update this and give this another try so to click this again Emily Melanie okay so it looks like it's working this time and again even if you click on the no it will go to the next user on the list so we can just test this out again to make sure that is being run correctly by console logging the the action so let's click yes and that's approved it's like no it's declined so that's running correctly so the next thing we can do here is make these buttons look better and I think what we can do for this is use fund awesome so we use fun awesome they would give us these icons to use in place of these buttons so we're going to use yarn to install fun awesome and we'll just use yarn ad and then the name of the package to be installed so that's being set up now and we can go to our package.json to double-check that the version of fun awesome has been installed correctly so then we can add this line of code to our application JS file and then again in the application CSS we will add the reference to that style sheet for all dot CSS and then going back to our template for this browse view we're gonna change this to not be a button in this case I will change it to a span and then we'll include this element inside so that's normally how they do it for fun awesome use this kind of markup so I'm just following suit here so I will add these two icons what does check and see if that's working and we can actually make these icons bigger so there is a class for this called FA 2x which will give you double the size and so will apply this to both icons so we can move these buttons inside a div and we'll give that an ID of slide controls so let's just clean this up and then we can add a style to our style sheet for this you and I'm just going to move up this style these styles here because it looks like it is duplicated I'll just move all into one place for the slide and then we'll modify the height of this wrapping divs or slides and it looks like our navigation has been hidden here but it's directly underneath this container we can use a Zed indexed and that's a top but ideally we want it to be underneath the photos here for each of the users let's see what's happening here and we can see here that if we disable some of these styles that the icons will appear underneath the colored area at the top so we will need to modify our stylesheet in order to make this work so the layout is starting to look better now with what icons spaced out underneath this top area I'm just trying to change this icon to be something more suitable so I'm just modifying the icon for the decline button so I want it to be a circle as I think it would look a little bit better and the next thing I'm going to do here is I want to get the photos in place for these users so in order to do that we need to finish installing activex storage so we can run this command rails active storage and stall which will create a migration for our database so we'll create two tables here and we don't really need to change anything but we will just run the migration to get this up and running so our next thing we're going to do is update these links at the top so our settings link will be the first thing we'll look at now go back to our navigation I want to change the settings link to be the Edit account link so once we go in here we will be able to add photos for our account so we'll need to modify the device the device views in order to make that work so what we can do here in our application controller we will set a whitelist of the fields that we're going to use when updating the account so in our case we want to be able to update the first name the last name the username and our images so these are custom fields that we have added to extend device and we will need to use I will need to list these within the controller to make this work I know that when we click on this browse link that sometimes the first slide will not show and in order to fix is we're going to try and move this logic into the template itself and not handle it within the JavaScript so in this case we will output this class of showing if the if this loop is on the first integer or the first run-through when it is being loaded on the page so the very first very first user profile is being loaded will be shown first and everything else will be hidden and you can see now that when I click on this browse link that is working more effectively this time so now within our device edit template so this will be what we get when we click on the settings link so in here we are adding the ability to upload images and we'll be doing that using active storage so this will give us the ability to upload multiple images at once and then we'll be outputting those to the profile the profiles that we are browsing through I have already saved out some images here from a stock photo website called unsplash so these are free images that we can use within our application so this appears to have updated images so let's go back into our device view and we'll try to output these images within the settings page so in this case we will check to see if the images available and if it is and we'll output the images I've been uploaded so far so just looking at the documentation here for active storage if we have an image we can use this attached question mark to detect if image has been saved and attached to that entry in our database and if it has been attached then we will look over the images and output each of them as an image tag now in this case I haven't really tested this code so I'm just like writing this out as I look initially but in this case we don't need this object as part of the request so we'll just directly access those images and in our case we want to set a max width for this so we just want to make them small thumbnails for now and perhaps later we can set a custom size for a thumbnail but for now this is fine just to get it up and running so the next thing I want to do here is output images instead of these blank background colors that we have right now so once we've got that browse page you want to see the image of the user and in our template here I will add the image tag so we will call user images and for now we can just use the first image of this list of images so later we will add this as a gallery that you can click through between images but for this video we'll just focus on the first image for each user so now we can see that this is indeed working so off video I did update each of these accounts with a custom image and some of the accounts I have multiple images per account I didn't want to waste time showing you me manually doing that for each account but I just want to get this part of it right to begin with so now I am going to move this image and place it as a background image on this div and let's will allow us to overlay other information such as the name of the user on top of the image so I am setting a width and height for this image and and we will stretch the background size to cover the dimensions of the div we are seeing an error here and it turns out that we can use the asset URL for active storage and I guess the reason for that is that we are not using it within our assets folder so in this case for active storage we want to use the URL for to get that static URL for the image so we can see that the image is Center aligned and fits quite nicely within this background color area right now but once we click on these buttons at the bottom there is still an issue here and it's not working we can try to debug this by adding a console.log within this on the click event for the decline and approve buttons but that will give us an idea of it if the click is actually being registered in this case it's not so there's something else it seems to be blocking it here and you can see here when I click on the area underneath the photo that a user name is showing up so that seems to be blocking our buttons and once we hide that our buttons are now working so what we're gonna do is bring that user name back in that first name back in but we will use styles to modify its position on the page so I'm adding a new class here and then I am gonna position this this first name so we'll set the position to absolute and then we'll make it 50 pixels from the bottom of this container that it is within and in this case we're gonna use a left value of 50% and then we'll set a negative margin to bring this content into the center so here we can see that there is a bit of an issue with winds now we can update the width on this to make this fit larger names it's gonna tweak around with this to see if and get it looking right and if we centreline the content then it should look pretty decent right now so this is update this very quickly and that's looking pretty good we can see the user name now for each of the users so looking back at tinder here we can see that there is a name and age and it sailor a job or an education or like the university that person's went to and then the distance they are underneath so these are some details that we can add to make this better but first of all let's remove this color background as it looks pretty ugly here right now so that was used as a placeholder just for us to begin this application but this one removes its color and let's try to get some of these extra details added in here so you'll probably notice here that the name is actually quite large on the front end so that's something I want to reduce or bring my font size down for this so let's take this out of here and we will add it specifically on the user details class bring that down to 28 pixels which is a bit better and then let's add well we'll use a dummy age for now we still got to figure out how to get the age of our users but for now we'll just use a placeholder and then underneath we want to add education and the distance that that user is from our account from our current location so let's again this had some placeholder information here and we will use the fun awesome icon to make let's look a little bit nicer you so we'll use the map marker icon for the location the distance of the user and then for the job or the studies maybe its university went to we want to use a graduation cap icon and that's what's been used on Twitter so I think it looks pretty good and sits the purpose of what we're trying to do pretty well and then finally let's try to fix the sizing and alignment of this text so it's looking pretty large right now so let's just have this larger text for the username and make the rest of the text smaller and I think we can also left align this text which will help it a little bit and I can probably remove this small tag now and then finally we want to fix the alignment of these icons so the text is looking a little bit out of position here we can get those aligned that should look pretty good so let's kind of do it for this video and hopefully you guys have enjoyed this video and if you have to give it a thumbs up and subscribe to the channel and if you're interested in the course I will be releasing in the next couple of weeks so I'm releasing a Ruby on Rails for beginners course and that's kind of an intro to the framework and how to get everything set up and use it for all the basic purposes so it should be a pretty thorough course and if you're interested in that do drop a comment below regarding that and I will also add links to the description below where you can find these courses once you're launched but other than that I hope you guys have a fantastic day and I will see you all in the next video

Channel: David Battersby

Views: 12,309

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, how to use ruby on rails, active storage, amazon aws, s3, tinder, tinder clone, tinder app, ruby

Id: P5gAaZq-sPs

Length: 38min 36sec (2316 seconds)

Published: Sun Oct 27 2019