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

welcome to part three of our tinder clone and in the last video we have got things looking pretty good so on the left side of the screen we have this matches and that shows us some users that we have matched with already and we also have the messages section but we haven't set that up yet and on the right side of the screen then we have users that we can click the heart or the X icon on to take an action on that user so what we want to do now at the beginning of this video is to first let's set up a pop up feature where when we click on the match tile in our matches section on the left side of the screen we want to have a pop-up that allows us to send a message directly to that user so that is basically the core features of tinder being able to match with users and send them messages and before we go too deep into the code I just want to remind you that if you enjoy this content to subscribe to the channel and like this video and if you're interested in learning more about Ruby on Rails I am releasing a new course in the next couple of weeks and if you're interested in learning about Ruby on Rails do check out the link in the description below so going back to our application now once our match tile has been clicked we are wanting to show a div that will overlay on the right side of the screen so for this we're gonna call it conversation so the ID will be conversation so if we go over to our browse front-end view so our browser HTML ER be in here we will add a new div that has the ID of conversation and we'll start to populate this overlay for our conversation with some dummy data so we will copy the photo layout from our profile bar I'm just gonna copy this image tag and paste it into our conversation window so in order to make this work we will temporarily use the first user and this array of users that we are sending to the view so this will just output some dynamic data of course it's not to the right data at the moment but we'll get around to fixing that soon so we just want to see this pop up working showing some real data just to begin with you so we will update the class on our div so we'll have a row and then we'll have a twelve column layout so that would be like a top bar section which will have a icon for the user profile and then there will be a name beside that and then underneath this will have a null arrow and we will input a this book this will act as a body area for our conversation window and we will populate this with a basic message saying that you have matched with this user and how long ago that is since it matched with that user so it's kind of like a welcome message just to start the conversation obviously once messages are sent we won't be showing this next time but again we'll get round to that later we just want to start with a basic message here when the user clicks to show this window and now that we have that welcome message in place we can also add a photograph of that user that we're about to speak to so this will be a bigger photograph it will it will be rounded just like the smaller picture of that user but it just gives you a preview of a user before you speak to them and then finally at the bottom of the conversation window we will have a section where we can send a message to that user so in here we're going to need to put a form so that forum will create a new conversation and populate a new message for now we can just add temporary form so this will be updated later but we're just gonna add some dummy data just to see if and get the layout right first so within our form we are going to need a a text field so we can input a message then we'll also need a button so that we can submit that message we can also include some placeholder text I'll enter your message and press send and then we'll also add a name for this text field and we'll have a control we'll have a class of form control here so that's a bootstrap class just for styling elements of the form fields and then we will also add to our style sheet so for this conversation and we will set a width and height and then we will have a position of absolute and we can set that to 20 percent from the right and then 20 percent sorry 20 pixels from the top of the screen and then we'll add a z-index so this just layers it on top of anything else that is positioned absolutely and as you can see there is no background to this conversation window so let's have a background color of white and that will hide the background content behind this conversation window and now I'm going to style this up a little bit better so I want this to fill most of the right side of the screen and but I also want it to be clear that it's an overlay so that it can be closed so in order to do this I'm gonna set up a new partial within the views and then I will render this partial into this existing view that we have right now and I will also move that up into the column directly above and then the next thing we'll do is try to improve these styles to make this fit to fill space here on the right and even when it's down a mobile size it looks pretty bad right now so we need to improve our style sheet for this so our changes to use a percentage so now that it is within the column on the right I want to fill most of that space in that column so just use percentages just to fill that so that that just means if we use a percentage and user has a multiple sizes of screen here are possible for different users based on the size of their laptop or their screen so if you use a percentage we can fill that much easier so I'm just gonna tweak around with this until it looks close to what we're looking for just wanna fill that space and just leave a little bit around the outside and I will also add some padding here just to give it a little bit of breathing room the content and already that's starting to look a little bit better and now for this welcome message we want to Center align that and we'll add again some spacing between this content but a margin here to the bottom and these again are using bootstrap so we're using bootstrap for the layout and these are classes that control the padding and margin within the layouts so using the MT and a number between one and five we can control the margin to the top using the MBE we can control the margin to the bottom so we're using this to just create some space in our design make it easier for the user on the front end so it just looks much prettier keep things much cleaner so we've also added a border so there's a line here just directly underneath the top section of our conversation window and then we're adding some padding again just to give more space to the design so there is a lot of front-end design type work in this video but I think it's important because ultimately the users want to enjoy the experience of using the app so having some design in there is important and like most of my videos my focus is on the full stack so we do have the front end work on the backend work just to tie everything together and the next thing I'm doing now is I want to include a date here so I'm just following what it is like on tinder so it says on tinder that you've matched with this user on this date so I will go ahead and continue to style up this conversation window just to add some more spacing between all the elements and one thing to mention here while I'm doing this is that like all of these apps that I create on these videos I normally sell the source code at the end for quite quite cheap considering the amount of effort I put into each of these videos so like the Craigslist clone the Instagram clone and the property app clone I have already I will be selling this on my website for anyone who wants to start a business that thinks that they could use this for whatever reason so there are many uses for an app like this it doesn't have to be dating maybe it's for buying items when you want to match with someone for a service or a trade so as many uses for this but if the code is useful to you it will be for sale on the website so do check that out and the links below in the description so looking back at our app I'm going to add a style here to the bottom section so just in the way that we did on the top so we had a top bar I'm gonna have a bottom bar and I'll just reverse all of these so be a border on the top padding on the top and the margin on the top and this just helps to separate content makes it look a little bit better and I'm just making these fields a little bit bigger so the input feels to be a large size and can also add some padding on the left and on the right of the button just to fill it out a little bit more and I think this is starting to look quite good right now so it's quite well spaced out we've got message at the top and the bottom I've got an image we got the date when we matched with that user and then we've got this form at the bottom so it looks pretty good quite happy with that so far but we do need to add a button to the top right here just to close this conversation window so let's add that now and for this we are going to use fun awesome so we can use the fa class and the fa x that would give us a little X that we can click on and then we'll float that to the right so we can here we can see it it's quite small low and it's messing up the border underneath that we'll move that down so I want to make that a little bit bigger and I think there's a class for this called FA 2x which doubles the size so that looks good and you know we can change the text color of p120 we'll have that text muted and I'm going to also add a class here called close conversation and that allows us to style this element further so we'll add a cursor of a pointer so I just makes it look like you can click the item so it's very clear for the user if you're on desktop and then when we hover that we can actually change the color of that text so it's not working here but I think we just need to add the important class so I think it's being overruled here the style but so we need to add the understand okay so it works so when you hover it darkens and so now we need to actually do something with this once it's clicked once the user clicks on it so we can use that within our JavaScript so we'll do that now so we can say that once this class has been clicked and we will run a function here in our JavaScript and we're just gonna grab the conversation window and then we will just hide that so that's what we'll do for now and we can test that out and that is working the next thing we want to do is do the opposite of that once we click on that match tile so that that user on the Left we want to open this conversation window so let's try this and that works so that's pretty good right now it's a good start at least so now that we have the layout in place for a conversation window and the styles in place let's try to actually load this up with real data so once we click on that user we want to make a request in the background to grab the data for that user and so that would be the conversation that has been had the messages have been sent between you and that user so we'll grab that information and then try to bring it back and populate this window that pops up I'm going to use an ajax request to make contact with the backend so we're gonna send a message to our controller grab the information we need we will send the URL to get profile and then we'll pass in the account ID that would be a post method so let's set this up in our routes to set post get profile and we'll pass the ID and now we'll set controller so we can just use the Browse controller for now so in this example I'm using profile as method but in our controller and then the name of the route of the conversation now you can change this around maybe I want to call it conversation instead change a method to conversation it's sometimes naming conventions are a little difficult to get right so you can play around with that too to have whatever feels best for you but for now I think I'm going to use this conversation method within our browse controller it might make more sense to have a separate controller for conversations later I move that error but for now this just let's just focus on the very basic stuff and get this up and running first so in here we are selecting the profile of this user so we're selecting that account based on the ID that's passed in and if the account is present then we will return some information back to the browser so in this case we just want to see if this is working so we could go ahead and just render something simple here or log of message so one thing to note is that we could go ahead and render a partial here but by default if we are using javascript to call this method then it will output a javascript view with the name of the method so in this case we're just gonna create the file just to match the method name so it's conversation and as dot jl c RB so in here then we can run some JavaScript that is used within the browser so in the case of what we're trying to do then we want to just load up this window this conversation window once the user clicks on one of their matches so in here on the logs we can see that the actual JavaScript file is being loaded so that seems to be working but for some reason we're not getting the output here in the console so let's see what's what's happening here change that to alert still nothing's happening but it looks like it's loading here and it looks like what is happening here is it looks like it's not being loaded as JavaScript this request in the background so otherwise the code would be executed but you know is loading the file saying conversation dodge yes but when you look at the table processing by it's not saying as JSR as JavaScript which it should be so it's not really understanding what type of request it is but before we try to figure that out let's just hide this conversation window by default on the page loads so that we can test this more so when we click it it should be showing here but it's not registering this as JavaScript so let's go back to our controller now and in here I'm gonna have a respond to block and I'm gonna set the format to Jay has and then once that is loaded we will run some code for the JavaScript formatting so let's try this I don't know if it's gonna change much here but I just want to make sure that everything is set up properly at least so now once we run this code we are getting an error and it's saying about the user so user tough first it's not working for us here anymore so let's go back to our code and refactor that so we had set up initially as a kind of dummy code to just to get some basic user data there but now that we are loading a specific user we want to be using that information so this update is to use the profile we're using this profile instance variable that we have set in the controller and we will just pull the data from that so at least we'll be getting accurate information here once you know based on the profile image that is clicked in our matches section so let's try this out so back in our browse view I want to wrap this render within hey div and the reason I want to do that is so that we can update the content of this div later based on what the user clicks so we'll be updating this with information on the fly later so we'll use a partial within this learn to load data but initially it's gonna be blank so going back now to our conversation JavaScript so in here that's just try to populate this data from the partial and we will put that into the conversation div as HTML so I'll use an escape JavaScript to do this I will just modify this to be HTML I'm a copy and paste that inside so that you load the result of this partial into the div element so after we've loaded in the HTML and we can just show that element once the content has been loaded in it'll make it visible to the user so we still have to figure out what is going on with this JavaScript we still are not rendering as JavaScript so let's have a look at that now and see if we can get this working so after a little bit of searching it turns out we need to change the data type here for this Ajax request we set it to script it should be reading the information as a JavaScript request and again we are experiencing another issue here I'm showing a unexpected character and look like our controller so it looks like we have made a mistake here we're trying to render a partial and really it should not be a partial it should be the TGS file that we're loading so let's remove that and try again and we are working this time so that's fantastic and it's given the right name the date and there's another date here for matching so one thing it's not working here though is a close button and the reason for that is that the the binding of that JavaScript has happened before that content has actually been loaded so we need to add some code here to this javascript file so we can combine these two commands just to load the content on show but if we go back to our our JavaScript file we can bind the Dom element again like close button so the once it's clicked it will close this window so while we're here I just want to move this close conversation take it out as a class and had it as I did as a ID instead to this div and the reason for that is I will only be using it once so there's no sense in using a class for it so classes are more beneficial if gonna use it multiple times IDs are specifically designed to be those once so let's just update our reference to it and again we're just binding that click event within our new JavaScript file and that is working so that's good we can open and close this window but let's have a look at the dates that it's being shown here in this window so this one's a static date right now so that's update this you so we will use the match as will set a match in our controller and we'll use a created ad timestamp and then we will use a string from time to populate that information into a readable text format so let's set our match within the controller and I'm actually gonna go back and update some of this matching code so I can definitely make it a little bit more optimized but for now let's just go with what we have okay so we're going to load a like based on the account ID which will be our own account and it will use a light account ID as the parameter that's passed in and then we will set this much instance variable and so what we basically just grab the first like if there are more than one if there are more than zero likes that has been loaded you can see that the date is now loading here but there is an issue in the formatting I think maybe I've made a typo on that date let's go back to that have a look so we can see that the like is being loaded and we can actually check on the value for this like and it should be on October so let's go back to our date and yeah we have made a type on this so this reload is and yep that's showing correctly now and there are there is another date here with the match just directly underneath so this one again will just use a match created ad and we're using time ago in words for this ones was 27 days ago so that's looking good and so that's all working the next step then will be to get this conversation working so we'll need to create a new migration for that so we'll create a table for conversations you so we will include a timestamp here for the conversation and we don't run this migration and now we will also create a migration for messages so in here we'll have a conversation ID so that will be a reference to the conversation and we'll also have a account which is also a reference I will have a body of text and then we'll have a billion of read sub say message has been read by the user then it'll be marked as true so by default it will be marked as false so going back now to our migration file so we're gonna modify this a little bit just to make it work the way we need it to so we'll run a rails DB rollback so that we can modify this migration file and I just want to change this to use a reference so that we get the correct indexing so if we use the reference we will add a I will automatically get a index on the column that we are using you can actually rename this to sender and then we will have a recipient so this will also be a reference and I'm just comparing this against what I have in the messages table I'm just checking that everything is right here and we can include a timestamp for new entries winner when a new entry is added to the database or is updated we will get a timestamp for that and we're seeing an error here when we run this migration as saying there's no is complaining about the IDS on this migration so we can take that out and try to scan and well out here reference so since we are referencing our accounts table here twice we'll need to you will need to use this references at the end of this line just to specifically tell rails that we are using the accounts model for this normally this would happen automatically but since we have multiple fields referencing the table our referencing this model that we need to declare it so now that we have this added seems to be working this time and if we go to our schema file we can see that the sender ID and recipient ID has been set so it automatically our ads on this underscore ID for us so now let's go back to our models folder and ne here we're going to add a new model for conversation and while we were here we'll also add a new model for the message so message to our be a new class in your forum message so our conversation will have many messages and once that conversation is destroyed at any point it will also destroy the messages attached to it so we can use the dependent destroy to do that I will add a validation here for the uniqueness and that's going to allow us to create a unique record based on the sender ID and the recipient ID and in the case of there being a duplicate entry this validation will be triggered and prevent that from being saved so we only want have one record for each of these combinations of sender and recipient and then we'll also add a scope here so this scope will allow us to pass in two values we can pass in the ID of both users and then we will decide we will check the database to see if there is any conversation already existing between the two users that we are checking against so the important part of this scope is that we need to be able to check two scenarios when when searching for this conversation so there is a it depends on who has actually initiated the conversation so whoever initiates conversation will have the sender ID column and whoever is the recipient and of that conversation so the person who is being receiving that first message will be the recipient ID so they'll be two scenarios here where it really depends on who begins the conversation whether that conversation is triggered or is found or not so we need to do that or clause say to catch both scenarios basically depending on who starts a conversation it's not moving into our message model in here we want to say that the message belongs to the conversation and it also belongs to an account so the message will have an account ID so it only has one ID attached to it that belongs to an account so this test is out in our vales console so when we type conversation new we're getting this error here two seconds an unknown key dependent so we go back to our code and have a look and see if we can spot what's going on we have this dependent on the top line and it looks like we made a typo here so let's try this again and this time it's working it's able to load a new conversation so this tested between scope we've created or pass in two IDs and it looks like we're getting a different error here so undefined method between so I'm just reloading the rails console and once I try this command again so I'm running the between scope again and it's telling us there's an undefined variable called recipient ID something is not right here again it's probably a typo but let's try to track it down conversation line 650 and the ID the spelling looks correct here actually we've made a mistake in the top part still the same issue sibian ID oh ok we've missed something here and so what now perhaps you meant reference called conversation stop recipient ID recipient ID okay this is frustrating but it looks like like I'd created a typo in the actual migration let me rock setting this up so we can see there is a typo here in our migration file so I'm gonna run a rails TV rollback just correct this spelling as it's gonna be very irritating later if we don't get the spelling right so that's been corrected let's run the migration again and we can try a rails console again just run the same command and you'll see this time that is working so there are no conversations for these two IDs at the moment but we are not getting any errors anymore so I'm going to create conversation directly from the reels terminal and save it so this conversation dog great and will pass in the sender ID and recipient ID so just number one and two so that's using two separate accounts first two accounts and you'll see here that I've run the conversation up between again and is selecting that conversation so now I'm gonna change it I'm gonna update the sender ID and the recipient ID and to switch those if I run this between method again this scope it should also select the same conversation even though the numbers are reversed and it does so that's working correctly the next thing we want to do is to get this message box working so once a user enters a message it needs to create a new conversation and store it and it also needs to create a message within that conversation so let's update our HTML view first and they'll want to send that we want to set a forum here that can send directly to our conversation controller and we are using the forum with tag here you could also use a form tag and the form for tag but form with just I think it's a little bit cleaner in terms of the classes and ID's that automatically get added if you use the form tag or the form for but with form with it just keeps things really simple and by default it also uses the Ajax approach to send forms unless you tell it otherwise so it's quite useful in this scenario especially so I'm just adding the placeholder and the classes that we had on our static form field so this will be a proper working rails form now we finish this or coming out the other field that we had before and we'll need to set this message instance variable within our controller but we'll also need to have a resources set up within our routes file so that will allow us to create conversations and so I'll create all the routes for conversations and then within that we have messages so a message belongs to the conversation so it makes sense that we set routing that way so back in our controller I am setting this message to equal messaged on you but it seems like there's a conflict of our routing so we have this conversation route from before so we'll have to rename this so rather than being a conversation we can call that it'll get conversation or start conversation and then also for the method within the controller so I think maybe the best option is to call it open conversation as we the conversation may already be started previously so you're opening it again potentially or opening a l'heure for the first time or you're coming back to it so let's try this and we're seeing a little bit of a problem here it's saying undefined method messages path so in order to try and solve this I think we can go back to our HTML and have a think about how we're approaching this so in this case we should really be trying to create conversation and in from that conversation then we create the messages inside it so first to set up our conversations controller you and I will just add some of the methods that we were likely to need here so creating and updating our conversation and we'll have a private section at the bottom of this controller and then we'll whitelist our conversation params within that method we can actually take out the new method here because we've got this open conversation within our browse controller and in fact we can probably just take this out and leave it as a create method so I'm going to set up a controller here for our messages so while we were doing that let's set this up so now let's I list the parameters that we can pass to our conversation so we will require the conversation and then we will use the dog permit to list the fields that we are going to accept and the important part here is this messages attributes so we are allowing our conversation to create messages on our behalf so in here we will have fields for our messages so core the body and the account ID we'll have a look at the schema here to see what's quired but it looks like just those two fields and so the conversation ID should be automatically set for us so going back to our view now we can change this to be conversation so call it conversation so i let's within our browse controller we're setting that conversation and then within our view we will also change that so now let's add our nested attributes we're going to use form dot fields for and we'll say message and we'll iterate over the message so in this case we're creating message text field that would be the body of our message and within our controller then so it's in within our brows controller we are building this message and we're building it through the conversation so we'll just automatically create a new message by default so once again having a look at our logs saying here undefined method message and that's on browse controller line 40 so we need to make that plural and what is it this time we are getting a different message now in the find message we go back to our view and again I think that should be plural - in this case and but that's not what's going on here is there something different happening here oh we forgot to add are nested attributes to the model so we'll do that in the conversation model completely missed that previously so let's try this once more and since this is a form builder we'll just append the underscore form here and I think this is where a message are where our error was coming from we named it message and it should really be body so the text of that message should be called body so that is fixed it this time we'll just have a look at the form you can see that the fields are being set up correctly there are nested nested attributes here so messages attributes body tag is set correctly so that's try sending us and see what happens I'm not expecting anything magical here but it'll help us this debug what we got so far so we can see that the message has been posted conversation has been posted and fields are all being submitted correctly but our conversation controller is not doing anything right now as you can see that we left that blank previously so the thing we can do here is set the conversation first let's start by trying to save our conversation if conversation does save and otherwise then we can just log a message for both of these conditions if it's saved or not saved so this test is out click spit another message try it out and we are getting a issue saying that there is no local variable for recipient ID so we can add that to our form as a hidden field let's do that sapient ID and that would be the profile ID I'm going to use chrome dev tools just to have a look and see if we can find this field and you can see here that it is being set correctly and within our conversations controller I can also set the sender ID so that is going to be our current account and we'll use ID to pass in as the sender ID and we're still not getting the result we want here yet we're getting this recipient ID Ordnung okay we have a typo again quite a few typos in this video unfortunately but sometimes that's just how it is so it's not able to save the connection or the conversation right now so it is rolling back that create command so let's go back and have a look at our controller code something we forgot to add up until now is the validation for the message model so let's add some validation here on some of the fields that we need and we can also do the same for our conversation model you so we can also add the conversation ID to the list of fields we're validating our message a nice way to see exactly what the error is is preventing a record being saved is to add the exclamation mark after the save after the dot save so in this case we can see at the bottom record invalid messages cannot messages account must exist messages account can be blank and the conversation can be blank so it seems like some of the values are not being set right now in order for us to add a account ID to the message we could do something like conversations of messages done first and set the account ID directed there that's gonna be our current account again so we could populate it this way and to get around the conversation ID error that we had we can just comment out this field from the validation so I think the problem here as it is trying to validate the presence of the field before the actual conversation has been saved itself so let's try this once again and this time we can see that it is working so that's really good so the conversation is saved and the message has been saved also so going back to our browse controller in here I want to change things around a little bit so before we do the conversation you I want to detect if a conversation has already been created previously so we have a method for this the scope here is between and we pass into account IDs so we're using the params ID which is set as a variable of ID and then we're using our own current account ID so then within this conversation instance variable we will say well we will add a check to see what the how many conversations have been loaded based on that previous command and if it's more than zero then we're gonna load the first conversation otherwise then we will load a new conversations as conversation dot new so this way we will be updating a conversation or creating a new one so this should just work out of the box but we will set up a new partial for this to move our code in to collect new conversation and now we will render that partial so browse a new conversation so trying out this in the browser again and we can see that the update method cannot be found for the conversation controller so let's go and add that now we just have the create method here currently so I'm gonna put this method together really quickly let's copy this down so if conversations saved then we will we can add a respond to block here for JavaScript so we will be running this method using javascript so messages it's gonna be messages from the conversation so or the respond to was a form at spawn to do format and then format ljs and move that inside so this will load a javascript file so back within our conversations controller we can render a view once this has been saved this conversation so a render this conversation messages and now let's create that view for our conversation messages so there's gonna be a JavaScript file and what we needed to do here is basically take the messages that are attached to the conversation and put them into a div that we can send back to the browser we're updating the browser with the latest messages so this output the escaped JavaScript version of our view so within this escape javascript will render a view and I've used a partial in this case we're rendering browse slash messages we can also add a console log here just to to see if this has been see if this file is being loaded correctly so let's create our messages this will be an HTML file which just outputs the messages to the screen so it'll iterate over this this would be an array of entries here so that's put this as a paragraph tag and then we will say message dog body and we can actually use a simple format helper so this will help put it as paragraph tags for us so now we just need to create as div to put these messages into so we'll add that just above our new conversation partial so this conversation div will be populated yes this should actually be up in the main body area of this conversation window and while we're here let's just wrap something around this initial message that the user sees and the reason for that is if the conversation has been started previously and you're coming back to to see this conversation again you don't want to see that welcome message again so we will be hiding that but also once we post a message you want to hide that view hide that welcome message so we can do that from our JavaScript by just calling the to hide using jQuery so we're just hiding up so this test is out now and it looks here like our account ID isn't being set in the messages so we can copy this line and move it down and see if that helps and again there's still an issue here we need to change a couple of things in our controller method actually when I was actually debugging less I did lose a little bit of the video footage so what I've changed here is a conversation dot find so we're actually finding that conversation I'm loading it first and we're running a method called conversation to update here so running the update that's pretty much boilerplate code from rails but when I was writing this code it was quite late at night and somehow I just completely missed it but anyway we have gone ahead and changed that and we were adding a hidden field here to the form so this is under the messages the nested attributes for messages we're adding our own account ID in there now there is some other ways to approach that we could do something here like a merge on the params so you're on the params the merge and input our account ID that way but for simplicity here I'm just gonna have it in the form so aside from that I'm making a quick change here to catch the case where the conversation has not been updated so we can have some logic there to handle a scenario for that so now once this conversation message is created it should hide this welcome message and then it should input messages for the conversation into the div for conversation messages now I notice a mistake here in the naming so this conversation messages should just be messages but other than that this should be working so let's try this out now and we can see all the messages that we've already created and past attempts so these will need styled up but I think that's something that we can leave until the next video so this video has gone on a bit longer than intended but hopefully you guys have found it helpful and if you're interested in learning more about Ruby on Rails do check out my course link in the description below and if you have enjoyed this content do remember to Like and subscribe to the channel and other than that I will see you guys in the next video

Channel: David Battersby

Views: 2,001

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

Id: YA1bc9MhlKQ

Length: 55min 39sec (3339 seconds)

Published: Fri Nov 29 2019