BUILD AN INSTAGRAM CLONE [PART 2] RUBY ON RAILS TUTORIAL

welcome back to our video on how to make an Instagram clone in this video we will be looking at improving the very basic MVP that we built in the first video and I'm gonna jump right in here and one of the first things we are going to do is create thumbnails for our image uploader and we are also going to enable the whitelist of the image types so these are set by default in the uploader file that is created so let's go ahead and restart the server and test this out we'll go and edit our profile and we can see here that there is an error resize to fit is undefined method so one thing we forgot to do here was enable the mini magic so we are using mini magic to handle the resizing of the images as we upload them and we have a gem already in place for this so if we go ahead and restart the server we can try this again once more so this appears to be working correctly so now we can go back into our feed view and we can add a thumbnail of the user profile at the top above the image so that's what's in the post meta div that we have set and we can even make this conditional if we want to but if we reload now we can see that our thumbnail is in place hello it is looking rather square so maybe we will improve that a little bit so as we can see before we have this profile pic class so we want to reuse this so we can rename that to a different class name and paste that in and we'll also need to replace that on the profile page so now this is looking much better we can also go ahead and add some padding or or margin to that to space it out a little bit so overall I'm quite happy with this is starting to look a little bit better so one other thing we can do here is add a link to the username so that we can click on it and go to the users profile analyst appears to be working now however we can change the styling to make this text a little bit darker and there is a class preset in bootstrap called Tex dark we can use for that it's a quick way to style at so that's looking pretty good overall we can also just add a link to the thumbnail itself just to polish this off round it off before we move on to the next section let's copy and paste our link in and that's it completed looking pretty good so now we want to go ahead and add the post details underneath the image so that we'll have things like the description when it was posted how many days ago and even we'll have sections in there for the ability to like and comment on the post so the first thing we'll do is add in the post description so we need to create a new migration to add the description to the posts model so currently there is no column in the database for that under the post table so we will add a new one and this will act as a text area so we will set that to type of text and run the migration and we will need to add that to the view then to add the description to the post view so we want to add the field here so that users can populate that at the same time when they are uploading their photo and we should probably add a label here just so that the user knows what this field is for okay looking a little bit better and we can go ahead and do the same for the image and you'll notice here that the spacing is quite tight so I want to space out out a little bit and we can do that by adding a div around the fields using the firm grip class that it's part of bootstrap and that just adds a little bit of space around the fields and that's looking a little bit better so we can try this out again just to see if it's working now with the description I'm going to test this with multi lines just to see how it looks and it has saved the post and inserted it into the database but it is missing the field for description so we need to add that to our whitelist within the controller and hopefully this will work this time paste this in and try it once again and we can see here at the bottom our new post has been added with the text description so one thing I want to do here is stylist text underneath the image and have a background with a border to make a little bit more professional-looking so we can add some styles within the posts style sheet so let's go ahead and set a background color and a little padding around the outside to give some space and we can probably pad that a little bit more now it will add in the total post likes for each post and this hasn't been said yet but we will add this as a temporary value just to get the layout looking better you so within a post model I'm going to set a method for this to return a zero value you so one other thing I'm going to add a light gray border around this post details section and it's starting to look a little bit better so on Instagram there is this date field of how long ago the post was made so we want to do something similar to that and there's also a user name for who created the post so people add those fields now to our view you and once again there's link our username back to the profile so we can copy and paste that link you now we have added our user name and bold font and then underneath we will add the time ago that the post was created and that's add a style to this paragraph to use a lighter color of text using the text muted class and now we can see our time since supposed was created in action here so it's looking pretty good right now one thing we do want to do is move the posts that our newest up to the top of the feed that's how Instagram does it and that's kind of how we want to approach it as well so when you go to the feed you'll always see the newest posts at the top and we can achieve that by setting a default scope within the model so that's within the post model and now you can see that our top post is indeed our latest post so that's looking good if we had different types of posts on the profile then you would see that it is actually the latest one in first place here but in an example I've just uploaded multiple of the same kind of posts so maybe we'll add some new ones later to see how that works different designs so now we will try to improve the design of the summary section that is on dashboard or on the feed so the top right section of the feed will show us the logged in user that will be our username and what we want to do here is add a profile image and just improve the design a little bit so that it's looking more natural and more user friendly so this is what happens when you copy and paste code so what we're doing here is we copied it out of the post loop so we need to change that to use a current account so that's assigned in account and that should work again for setting the path for the image so the once it's clicked on so we forgot to send it here but little tweak out now really quickly so now we can see that our new profile image and username is at the top right and underneath them we have a suggestions box or other users to follow so we can try to populate this and make it look a little better at least we can put the title in for now just so that has some purpose and we can include a see all link and we will float that to the right and I will be a link but for now we can just leave it as a text we can actually set a blank link in here for now you so that's starting to look quite reasonable now and quite close to what's on Instagram can be tidied up further but it's a good start for now we can go ahead and darken the text on that and make the font bold it for the suggestions but I actually think it looks better if it's not bolded possibly it's just the typeface that we're using so we can remove that and again we can probably improve the padding a little bit here so this is something that you can play around with until you are happy with how it looks but all in all it looks fairly decent right now so we can move on with some of the other sections so the next thing I want to look at is this like button and the comment button underneath each post so to start into this we need to create a new migration for the likes so we'll create a new model for this and a new table in database and that table will then be linked to both the accounts and the posts table and we can do that using the references command and we can set that to account and then to post so that will have a foreign key for each of these models which leads database tables and then we'll have a time stamps and that is the created and updated at fields for the likes so we can then know that when a liked has been created for that post so maybe we won't show it visually on the views but it means in future that we could easily do something like notifications to show when a light comes through so now we are going to add the relationship between the models so in the case of post it has many likes as many users can like the post and now we will create a model for the like itself and that like will then belong to a post and also then the like belongs to the account also so each account it likes a post will have that relationship and the account can have many likes and many posts so now let's create our controller for likes well this copy and paste some of this code here and just replace it from our post model now you can do a find and replace all here but there's not so much code someone's gonna quickly update it I'm gonna remove most of the methods we will just keep the save save like method and this will be a new like you and the two values that we need to capture here are post ID and account ID so account ID is gonna be the logged in user which is a current account and we will just need to catch the post ID from the posted form data so we can get that from the parameter then we're gonna try and save this like and based on if we save it and we will return a message so this code will be triggered by a JavaScript using an ajax request and the reason for that is we do not want to have to redirect user to a new page so we want them to click on the icon and it sends a message in the background to store that like so that will be handled using Ajax so after this code is executed we can render a partial which will have some JavaScript code in it to handle the updating of the display within the view so if it is successful then we want to highlight the like button make it red or highlight it and make it active looking in some way and if it doesn't then we don't want to do that we don't want to do anything so you will use JavaScript rendering to do that you so now we want to add a new route that will be used for when it like is generated by our Ajax request so we'll point out to our likes controller and the save like method and then we can name a path for this so like post so we have left this as a get request but in a production environment it's much better to be changing this to a post request and the reason for that is that sometimes we have BOTS or crawlers that crawl web sites and you don't want them automatically crawling over the like posts method so this would cause some chaos in a production environment possibly but for the scope of this video it's fine so now we want to add these icons underneath our post just like they are on Instagram and we can do that using fun awesome so that is a typeface that is designed for icons so we will set that up within our application now we will create a div to hold our like and comment buttons so I'm just adding some fun awesome classes here just to get this set up initially it will change these afterwards and we'll change this to a comment post or comment post post comment even you so let's go ahead and download the fun awesome you so now we want to go ahead and drop in a new font directory within the assets folder so that's under up app assets fonts and then under our vendor we will drop in some style sheets and the minified fund awesome javascript file and then within the application dot CSS we will put in our minified version of the fund awesome style sheet and then we'll do the same again for the application jas file so fun awesome dot min and if we restart the server then we should be able to use these classes within our application so one thing we need to do quickly in here that we missed is we need to change the URL within the fun awesome dot CSS file so we want to use our asset path within this file so to do that we can change the file to a s CSS file rather than a CSS file and we can use the rails helper method for font URL a font path to drop that into our stylesheet so just checking for the icons on font awesome we can see that the comment icon will look like this and the heart icon should look like this one and we can see indeed that this does work however the icons are very small right now so maybe we can make those 2x2 make them a little bit larger and that's a little bit better so we can also move those down into the post details section to make the background fit around them and you will notice if we look at Instagram that the icons are the open type or the open variety but these are paid icons the the premium icons and for this tutorial we will just use the basic icon which is the solid icon but we can change these to a lighter color to make them a little bit softer and we can even add some spacing between the icons to make them a little bit more usable you and we can even add a custom color to make them much lighter than they currently are so just trying to make it more pleasing to the eye and then we can remove this text muted class so let's have a look at this and you know it's starting to look quite good right now we can even go ahead and add a hover effect when the user hovers the image and an active class so that once it is clicked that it has a certain color and we can go ahead and test this active class so this is what it would look like if the post has been liked by our account so just remove that again so once a user hovers over the heart icon we would like to show them the pointer arrow so that it's obvious that they can click on these icons so just makes a little bit more intuitive as to what the user has to do and then we'll add the hover class just the same as the active so now we will create a new javascript file for our posts and in here then we can put the functionality for when the user clicks on the like button so we're going to use this basic jQuery for this nothing too complicated in here we're going to make an AJAX request so once they click on the like button then we will run this function and in this function then we want to make the request to our controller using the new route that we had set up for liking the post so we'll use the dot Ajax command and then we are going to set the URL and the data that would be passed so that data we're passing will be the post ID and then we will have a function that runs afterwards once it is successful you so we are going to pass in the post ID as a variable here into the URL so let's set the post ID and we can do that using a attribute from the like button itself so we will set that on page load using our view file and we actually can remove the data method on the Ajax request since we are putting the ID into the URL and then finally in a success method then we will just run a console log to see what the result is so we've made an issue here in the GS file so let's quickly look at that so it looks like we have accidentally deleted a few characters when you remove that that data method that we're passing so let's just correct this and try it once more and we have another issue here okay we have an extra closing tag so hopefully this should fix it this time let's just get everything spaced out correctly and now it looks like it's removed the error so let's check the xhr request and see what's happening so we haven't defined the post ER post ID yet so we need to do that in the view so that's our a attribute for that let's try it again and this time it looks to be going through correctly we can check the server log also to see if there is a like created but there's nothing being returned in the console there yeah and in the server log then we can see that the like is being stored correctly however we should be rendering a template here so let's go back to our controller and do that so first we're going to create a partial for JavaScript within our posts folder and views and in here we will just drop in a condition based on whether the like has been saved or not successfully and then we will want to highlight the like icon and make it have a class of active just to let the user know that the like has been saved correctly so we will pass in the post ID from the controller and use it as a way to select our like and then we will add a class of active so in our view then we will just add in our post ID it's just a quick way for us to select the appropriate post since we are on a feed of posts so we can use the post ID from the parameter lots in the URL and then we can tidy up this success and fail of the like being saved so we'll replace it with a render so we're going to render this j/s file and then we will use the post ID that we have set above so that will automatically go into that rendered javascript file and then we'll just have this success value set that we can access from the the partial as well so once we click on the like button again you can see there's an issue with the missing template and it looks like that is due to the JSON value had said earlier in this case we're wanting to render a view so we want to return as jas instead trying this again now we can see that it appears to be working this time and yeah it's showing the richer the returned javascript that was run from this this partial I also we can actually put a clause here to make sure that this is a success before it adds this active class so you will notice here that we are mixing Ruby with JavaScript and that is because we have the extension saved as jst RB now this is something you can do in rails and it just makes it easier for passing in values from your controller into your views so finally we want to sanitize the data a little bit here so we will do a validates uniqueness of and set that to our account ID and post ID so we want to make sure that the same user can't like the same post multiple times so we don't want to be storing multiple entries for the same user and if we have a look in the rails console you can see that our multiple likes already stored for the same post so that's something we can just go and destroy right now and now that we have added this validation and the model that shouldn't happen again after a user has already liked the post we also want to have the ability to unlike it so once they do that then it will delete the like that they have saved and it will reset the class on the like button so you wanted to remove the active class so we can do that now from within the controller so what we will need to do is check to see if that I like already exists for this user and this post and using a dot any will give us a true or false value so we can use that as a clause to say that if this post exists do this then otherwise create a new post so it already exists we want to destroy the existing post otherwise we want to create the post so we will run the dot Save and then within the JavaScript partial we will run a remove class if the post has been deleted so if it returns false and we'll remove the active class and if it's been created and we will add the active class so it'll be switching on and off and then on default page load we can check to see if it's already set you so what we will do here is create a helper file for posts and in there we can add a new method to check to see if that post has been liked by the user already and we will just turn return a true or false value we want to do the same thing we were doing in the controller checking to see if the both value is match one thing to bear in mind here is that this helper method will be called each time on the loop that we were going through for the posts on the feed this can cause what is known as an n plus one query now in terms of performance for a real-world application we want to try and avoid doing this however in this case we are just putting together something lightweight as an MVP just to show our product working but this is something you know to bear in mind for production environment longer term we want to try and remove these kind of scenarios where we're loading a query within a loop so it's gonna be loading that same query over and over again for every different post but for now I just want to raise the awareness about it but that's something we'll go back and replace in time so jumping back into our likes controller now we want to catch the scenario where a like already exists for a post and that user is clicking on the light like button again so in this case we are destroying that like for that existing post and is telling us that there is a wrong number of arguments within our likes controller so if we go to the line and it's for line 13 so existing like they'll destroy now what's happening here is that we are selecting multiple likes potentially but this is an array as being returned so we need to say that it's the first item on the array that we're trying to destroy and that appears now to be working correctly so now we can go ahead and test this a little bit more just liking and unliking posts so when we like it the creation of a like is made and then once we unlike it and it's destroying that light so we now want to increment the likes count on that post view so once we liked it we wanted to go up to one like and when we unlike it then we wanted to come back down again to zero likes and so we're going to create a method in the model for this so after we create a like then we want to update the counter on the post itself so we'll do that both ways whether like is created and when it is destroyed also so the first thing to do is find that post using the post ID of the like and then we will update the counter value we can use a method called increment for this so increment the and we can grab the value then from the schema file so just to double check on that so we currently don't have a value stored for that so we may need to go ahead and make a migration there for that you so let's open up our migration file and we will add a integer value for this to track the light count on each post and while we're here we can also do the same for the comments count as we will be adding comments after this so now we can run our migration and we can go back into our like model file and then we can add this field that we have created for updating this total likes count so before we go ahead and run this code I just want to test it within the rails console first so just before we put it to the test on our browser so we'll run the code here and increment it to the likes and you can see that it is now sitting at one so then I can check that our last post has got that value and it seems we need to save it first so after incrementing you need to run a dot Save we can now update that value in our view total likes count and try this out so by default it's set to 1 now because we updated that within the console let's just add our before destroying method now to handle the unliking of a post before we delete the actual like we will update the post count so let's duplicate this and make this a decrement amount and let's see again so we'll handle both of these methods now and try this out and we're getting an error here now about the preparedstatement cash expired so cannot change result-type and i think that's because we are handling this on a before destroy method so let's try changing changing this to after destroy and now it appears to be working so really we shouldn't be interfering with the post before the destroy of like so anyway this seems to be working fine so let's now go ahead and update our view to reflect the removing of a like you so now we want to set the text within that likes field to display how many likes are to the user the first thing we need to do here is set an identifier so we will use an ID for this so that we can select it within JavaScript and update the value so we'll use the ID as the unique identifier so post ID likes and we can do the same then for our comments so let's update the selector and the hash to select the ID so now we will just pass in the updated value the post likes so before we try this out we need to set the value for our post likes instance variable so let's go ahead and do that now so we will get that value from the post itself so once user clicks a like or unlike button we want to set this value so we can get that from post op find and the new post likes count column from our database let's try this out so in our view we forgot to handle the liking of the post for setting that likes count so we'll move it outside of this conditional and the one statement should work for both and now we can see that is working correctly so currently we are just liking our own posts but it would be nice to see if other users can like our posts too so the next thing I'm gonna do is set up some additional accounts now I've just set up some dummy details here and I'm gonna paste them into the rails console but we can actually add that to our seeds file and it's nice to update our seeds file as it easily lets us tear down and rebuild our database later but that's beyond the scope of this video and what we want to do now really is jump in here and add Lee's users within this suggestions box so that we can set it up so that we can follow users and unfollow them later and before we do that I just want to remind you to take a moment and if you like this content do subscribe to the channel and like this video as it really helps me out and also leave a comment to tell me what videos you would like me to create so if you'd like me to create a video on building the next fiver for example or a Pinterest or something like that let me know in the comments and I will keep it in mind for some of the upcoming videos on the channel so getting back to the task at hand we are now building a partial for our followers suggestions so we've rendering this partial so now we just need to go and set it up within our accounts folder within views so we're creating a new file for that and this file will show the user details in a list format so we will iterate over this instance variable that we were created called followers suggestions and it will look a little bit like this as we see on Instagram now on Instagram they have this new to Instagram text underneath so we will try to do that using the created add date for the account so the first thing we need to do is set up this div and this will be wrapped around all of the users that we are showing and I'm going to copy this image tag with the link we have used previously just to save a little bit of time but we will need to modify the user details a little bit just to much our loop that we have right now so we're using the term user right now but we can change that to account to make a little bit more consistent so we have this image and username so now we will add the username and again we can copy this quickly tweak it a little bit count username and they'll also need to add a link to follow and then it will be some text underneath to say that if the user is new to Instagram or not so like we were saying before we can use the created update to compare this so we can say that if that user is less than three days old one day old for example that they are a new user so for this I'm using a ternary operator it's just a quick way of doing an F else block but within one line so just to keep the code kind of clean because this is a simple if-else statement really so if it's less if they count it less than one day old we will show this text otherwise we will show followed by and we can put in X users here or something like that temporarily so now let's populate this follower suggestions array so we go back to our controller now our accounts controller and we'll set the value for this using the account and we can use we're not selector so that we don't return our own ID for our own account so this should turn so this should return basically all the accounts that aren't our own so it's telling us here that something's missing profile path ok so we're assuming here that these accounts have a image already a profile image but we know that we have just set these accounts up by pasting it into the rails console so there are currently no image for these accounts so we will need to check for that before we make that assumption so all you the method are a helper method here to to handle this just to clean it up a little bit and we will pass in the account so let's create this profile picture helper method and in here we're gonna check and see if the actual image exists before we try to display it and otherwise then we can show a placeholder image so we can just grab a dummy image from the Internet to do that but first let's have a check to see if this image exists so let's get ourselves a placeholder image and we can use that and for those accounts that don't have an image yet so this one looks quite interesting it's a little bit different so let's go ahead and save this image to our folder and we can update the image name them within our helper file too much what we've just downloaded and to make this a little bit more flexible I'm gonna set a default width here and this can be passed in when we call this helper method to override this value so now going back to our browser we can see these images have been added for each of the users you just want to tidy it up a little bit make these more like thumbnails just to follow the layout a little bit better it's closer to Instagram so we need to make a minor correction on the conditional for the created update so change that to a greater than sign so basically the timestamp must be ahead of the two days ago mark so that's why we're changing that so now I'm going to try and improve the layout a little bit here so we want to get the image the name and the details on the left side so that we can have a follow link on the right side so I'll move this into a row with a two column layout based on bootstrap and you can play around with the column sizing here just to get the layout the way you want it so we'll change this to 2 and 10 which starting to look pretty good right now and you can optimize this further to be different sizing on larger screens and smaller screens in this case we just want to make sure that it looks reasonable on a small screen too we can resize the browser to mimic that now we were just going to add a class here to lighten the text a little bit underneath the image and remove that line break add a text muted class and it's starting to look more like what we're going for right now so something wrong here with the image when our profile so we can use this profile helper that we created previously and add that to our profile so again this user doesn't have an image for the profile picture yet so we want to use a placeholder so that's working now too so that's good and we'll also want to remove this edit profile button so we built this really quickly for the edit profile so we want to add a conditional to this to ensure that only the logged in user of that profile can click that edit button now even if in the case that we do click this edit button we shouldn't be allowed to edit the profile anyway so right now by default it's showing our own profile which is kind of the expected behavior but just that button shouldn't be displaying there so what that means is we need to have a check for that in this case we'll see that the account is signed in which is us right now has to match the ID of the profile that we're looking at so just to reiterate having that button there is not a danger we can edit that users account but it's just to make it look how we intended we obviously don't want to see that button that's not our profile so let's add this conditional to this it's at a profile link so we have to be able to do that check first and now I just want to make a quick tidy up of the layout of these three values so the full name should be underneath these values so we can use a row and some columns to spaces out accordingly so previously we're using CSS just to mimic that structure but we'll clean this up a little bit you and we just want to add some spacing to the bottom so we're going to add a margin and set a max width on this profile stats section so we'll then we will add profile stats class to the div that wraps these values and that's looking pretty good right now so that's gonna enough for us on that profile so let's go ahead and introduce a follow button on the suggested profiles section we want to use a form to make this follow submission so we're going to use a post request for that and we will base up form tag on a new route that we have yet to set up so we will call that follow account path for now and in method we will set to post and we need to set a hidden value in here which will be the ID of the user that we're going to follow on the account and then finally we will add a submit tag which will have the follow text on it and we will add some basic classes to this follow button and we will float it into the right so let's set up our new route for this forum and we will set this as a post this time again the reason we want to set this is as a post is just to ensure that you know users don't start entering the URL into the into the URL field on the browser or so that BOTS also don't accidentally crawl this route so it just makes more sense to be a post method here for this so now we will add the method to our controller to handle this follow account functionality and in here then we want to accept the parameter that we were passing so the account ID will be passed as the foreign parameter before we can take this any further we need to set up a new migration so we need to create a new migration so that we can record the relationship between users so what user or what account follows another account and if they follow them back etc so it will create a table to do that so within our migration file we want to create this references to our account table however this it's gonna be a bit of an issue because we can't do this twice using the same command so we need to say that one is the follower and one that was following so we can do this in a slightly different way we can first pass in the column name and we'll set that to follow follower in this case we'll use the references parameter just to say that this is the table that we're using for this so the reference is the account table and then on the following we can also do the same thing so this should allow both columns to be treated as a foreign key that link back to the accounts table so lastly we just want to add the timestamp to keep a track of when we followed a particular user like could be useful later for notifications or something like that so if we run our database migration now that appears to have worked correctly so now we can go back to the controller and finish off our follow account functionality so we want to create a new entry into this database fields we can do follow it or create and we set the follower to our current account so that's the logged in user right now and then following will be the account ID or follower ID parameter that we've set so before this can work we need to create a new model for the follower table so let's set up this follower to RB and we'll set this up just in the usual way so we need to add a validation here for uniqueness and we want to basically ensure that only one record gets added for each connection so I don't want to have multiple records of me following the same user so we can use the scope of the following ID to ensure that ties unique each time then we can add the relationship here to say that is follower entry belongs to the accounts table so we can try this now again in the browser and we're seeing an issue with this hidden field I think we've missed the tag at the end of the name for this infield tag so we'll try this again and it's not working now one thing we can do is make these buttons a little bit smaller and now we can inspect this forum to see if everything looks okay so one thing notes here is we're missing the value for the follow ID so it needs to be the idea of that account that we want to follow so let's add that right now and a lot has been said so let's give this a try and now we are seeing an issue with this follower create method so if we go back to our schema we can just double check the column name and it has an ID at the end so I think we're missing that in this in this code do we have for follow account so reach reload this once again check the dogs and it's some reason it's rolling back this change so it's saying there's no template found and it's running this follower exists query first so let's go back and make this into a conditional so we will add an if in front of our followers our create method and if this follower is created successfully then will redirect user back to the dashboard or the feed view so while I tidy up this message that is a success message I just want to remind you guys if you enjoy this content do subscribe to the channel as I will be creating more videos like this on how to build MVPs in Ruby on Rails and I'm also planning to do some content on react native in the future and several more JavaScript based line frameworks so subscribe to the channel and drop a message in the comments to let me know what kind of videos you would like me to create and yeah it will be great to see what you guys are looking forward to so hopefully you find this useful and let's get back to this MVP build so right now we are just returning a different message here if the follow account fails so that could be in the case where the follower already exists we're ready connected to them and in that case we just want to return the user back to the dashboard either way add an exclamation mark on to the follower create method and that forces it to give us the reason why it's not creating in this case so it's telling us that the account must exist so I think we have made maybe a typo in here but we can comment this out for now the relationship for the follower to the accounts and by doing that it seems to have worked in this case so it's created a new entry into the followers table and now I want to remove those users that we are currently following from this suggested followers list so we can do that quickly by grabbing IDs of those followers so the first thing we'll do is get the IDS so we can do fold aware and then dot IDs will return an array of ID's for those users and then we can move that following IDs into we're not query afterwards but we should also append our own ID into this followers ID array that we have now we can do that quite quickly by using this two less lamb symbols so that just pushes it the item onto the end of the array so let's try this once again followed aware and okay so I realize we've made a minor mistake here we need to actually map the account ID in this case so we are currently dot IDs method is turn currently returning the IDS of the follower entries in the database we want to be using the following ID and we have a typo again just remove the S okay so this is now working as we can see that user has been removed from the list and once we click it and they also get removed from the list so that's working quite well now but we need to update these counts within our profile and you also notice there that the photo is a bit blurry so we'll try to fix that too so if we go back to our helper file for accounts we can just change this to use the full size photograph that's a bit of a quick workaround we could duplicate this code and have one for the thumbnail and one for the full size picture but I think it's good enough for now and now we want to set the values of total of followers number that's being returned on the profile so we can see here in our schema file but we don't have a value for this right now we're not recording a count for that so what we can do is go into our total followers and we can run a select for this so follower dot where and using our own ID we can find the the accounts that we're following right now so I'll return account for that and simply by doing the same thing and changing that to following ID we can get the total followers also right now two followers that looks correct so now we just need to test it the other way to make sure that works and we can do that by signing out and signing in is one of the different users that we created so we can just get the details here from the seeds file that we created earlier and I want to try testing we can see here that we have one follower already from this user and you can see my main account that I've been testing and I've just followed it back and these numbers look correct now we can just go and like a few things just to see if that works too so that's gonna do it for this video we have now got the ability to like posts follow users and have them follow us back and we are tracking the number of likes on each post so if you've enjoyed this content today do consider giving this video a like and subscribe to the channel there will be one more installment of this Instagram series so keep an eye out for that and there's just one other thing I want to point out to you is that I will be adding this MVP and multiple other MVPs to my store now I realize that you know I've given away a lot of code here for free but that's totally fine it's part of the learning process and if you actually want to buy a more fleshed-out version of this MVP you can do so at the link in the description below now thank you again for watching this video do leave some comments below if you want to see additional MVP videos in the future and I will see you guys in the next video you

Channel: David Battersby

Views: 4,841

Keywords: instagram, mvp, clone, how to build, instagram in rails, instagram with rails, rails 5, live coding, ruby on rails, how to, how to build an mvp, rails 5 tutorial, rails tutorial, rails for beginners, live coding javascript, javascript, devise gem, live coding rails, ruby on rails tutorial, rails video tutorial, tutorial, learn rails, ruby on rails 2019, ruby on rails for beginners, coding, programming, Ruby (Programming Language), ruby, coding challenge

Id: yhg7hd3ogJ8

Length: 61min 38sec (3698 seconds)

Published: Sat Aug 03 2019