How to Build Instagram Clone in React Js

hello everyone in this video I'm going to design this Instagram home screen in reactjs let's start here I already created a react project and also I'm running this project yeah here I'm going to split this entire screen into three parts here we have left menu and this is post section and this is follow I mean suggestion okay and also your profile so yeah I'm going to split this to three screen I mean three divs this is class name is side menu and this is post and this is here I'm going to give suggestion yeah first we are going to work in this style okay here I'm going to give main classes this is M okay and save this and here I already created a home screen I mean home CSS home. CSS and I'm going to close this and also I imported that home. CSS here okay first I'm going to give a equal I mean give with for this three divs so copy this Main and here with this 100 percentage and height is 100 VH and yeah after that going to copy this side menu sorry here I'm going to give heest same 100 VH and first I'm going to give some some background to this because that's why we will see how much space it's occupied okay so here I'm going to give background this is gray and save this and and also I'm going to give a width this 20 percentage and save this and I'm going to run this project yeah this is perfect and after that I'm going to give a post section with here I'm going to copy this to duplicate this for one more time this is post section right is same here we don't have any scroll here this is I give 60 percentage and here I'm going to change this background color this to Pink and and save this and go toow browser here we have post section after this side menu so we need everything in one row we don't want any scroll here first I get everything in one row so here display Flex yeah this is fine after that here I'm going to copy this suggestion and I'm going to duplicate this for one more time and this is suggestion and here I give this is 40% 40 or 20 save this and here I need to change this color this to yeah here I give default color it's white and yeah this is fine here we splitted the Instagram into three section and here if I scroll this two content is I mean this post and suggestion content is scrolling simultaneously so I'm going to put this two in one Dev okay yeah here we can't able to see the post and suggestion section so because we didn't give a height and width to this D okay parent D so here I'm going to give a class name this is container and copy this and Save this and after that I'm going to give a I mean I'm going to create a style to that container here I'm going to copy this and width and here side menu is 20 percentage other than that we have I mean suggestion and post section combined with this 80 percentage so here I'm going to give 80% and yeah this is fine here we have scroll but here I'm going to give overflows hidden save this yeah here the withth is not perfect so I need to change it here I'm going to give it to 30% and this is 70 yeah now this is perfect I think so here post section having 70 per and this suggestion section having 30% totally 100% okay here container having 80% withd because this child can occupy the container 100% okay that's why I give this height yeah now we splitted this screen into three parts now I'm going to design the side menu so here I'm going to use this icons okay this assets yeah I gave this assets and code Link in this video description you can see and clone that code okay if you want yeah let's start design this side menu so first we need to place this Instagram icon so here I'm going to use this and Stu yeah inside the side menu here I'm going to add a IMG tag or I can give a div inside this div I'm going to give IMG and here I'm going to give SRC before that I'm going to import the image this assets SL insta.png before that I'm going to give a name to this this is logo from this okay copy this and paste it here and save this and go here yeah I need to give a to this height is 50 PX and save this just I give 50 yeah I need to reduce the height to 40 this is perfect and I need to get this into Center left aligned okay not Center so going to create a class this say logo save this and yeah copy this and inside this create a class we need to give some LIF Aline I mean padding top and bottom it's 15px and yeah inside this logo I'm going to give a padding let top us I give 20 pixel and rightest zero and bottom is also zero or I give here 10 pixel and left is 15 pixel okay save this go here think this is fine here yeah just increase this to 20 and this is 25 yeah this is fine and after that I'm going to create this enter side menu okay after that I'm going to create a d inside I'm to create a home menu here want to place the IMG and SRC before that you need to import the home and this is home save that and here home height is 20 pixel and save this go here yeah I need to increase the height to 25 yeah this is fine and this is home right so here after that I need to use this H3 tag this is po yeah think into what H4 yeah this is good after that I need to get this into one row so here class Pro okay save this and after that display Flex yeah here I'm going to use align item as Center and save this yeah this is fine after that I'm going to add a padding between this okay also here we need to have add a space here so here to copy the same pack adding and I'm going to reduce the top to 0 pixel yeah this is fine after that I'm going to get a space in between this Pro H4 inside H4 I'm going to give a padding left this pixel and save this yeah this is not perfect here I'm going to give 15 pixel yeah this is good I think yeah this is fine after that I'm going to design this other screen I think this is fine after that I'm going to Loop this till this for a multiple times here this is search screen before that I need to import that search this is search explore and profile after that side menu okay more and here I'm going to copy this we imported the images and here I'm going to change this home to search this is search after that explore res and message notification and create and I'm going to duplicate this for two more time this is create and here I need to design a profile after that we have more yeah save this and go to browser yeah this is fine here I'm going to reduce this space in between this menus so here left is perfect here I'm going to add add a margin top and bottom is 10 pixel and yeah I'm going to save this and go to browser yeah here this is not matching to this menu here I'm going to increase this space here here I'm going to inspect this and go here here I'm going to increase this margin top and bottom spacing yeah I think this is okay here I need to change this to 14 or a 15 14 is perfect yeah side menus okay here I'm going to close this inspect and yeah I think this is fine here I need to increase this icon size this icon and this more icon is small so here here I need to change this notification to this profile okay before that I I'm going to increase this size of this create and more here I'm going to increase this to to 40 and I'm going to change this create icon change this to 45 yeah if I change the height this not aligned perfectly here I'm going to change the size I mean I'm going to change the padding so here I'm going to change this to this is create create underscore row here copy this and here to create a class to this and here I'm going to copy this entire class and here I'm going to change this to 10 to I mean 20 to 10 now this is perfect I think also here I'm going to change this size also this is 45 and here I'm going to change this to create row or here I'm going to change this class to C us c row and save this and here I'm going to change this to this and here it's this this is not good because here we have some spacing in between this extra spaces so because this H4 style is not applied inside this cust row okay so here I'm going to add a H4 style commonly so I'm going to remove that row yeah now I think this is perfect think so yeah now I'm going to remove this background color yeah I think this is fine I think so after that sorry I need to add a right border okay so here border right is one pixel it's solid and save this yeah this is fine but need to change the color to gray yeah I'm going to remove this St now we can see the background color still it's in light color here I'm going to change this yeah I think this is fine yeah this is good after that I'm going to work on this post and this suggestion section yeah before that you need to create this profile section so here I'm going to remove this after that here I'm going to add a d here this is sorry class profile and copy this and save this after this here you need some round do so here height is 50 pixel and same with this also 50 pixel and we need some border one pixel solid and going to use the same this color okay this right border color okay here rest that and save this here we have box here I'm going to add a border radius yes 5 pixel and here I'm going to reduce this height and width this to 30 and here to save this and I need to increase the Border radius to 10 20 yeah this is good here I need to change this to profile and here just give a here I need to align this a into Center display Flex justy content Center and align item is also Center I think this is not align Center why here I'm going to change this text to A to B I think this is okay our side menu is ready here active section only having dark I mean bold other than that everything all the text is light right so I'm to change that here I need to change here I'm add a font weight this 400 think this is fine I need to change this active color so I'm going to add a class to active this is here I'm to copy this and here I give 700 and copy this here this is active right so class and paste that yeah this is fine now everything is fine I'm going to work on this section this post section after that yeah here I'm going to create a d inside D we need to design this circle after that one text having ellipses right so here I'm going to create a one more Dev and this is for a name Kure Kure or you can give anything here here want to design this status copy that after that here height is 50 pixel with is also 50 pixel and Border radius yes s 20 pixel after that here I'm going to add a border yes same here we need to add increase this yeah this is fine but we need to give some spacing here I need to reduce this text size also first to give a spacing to this okay this is here I'm going to give this classes status and here I'm going to change this to sub status okay copy this and save this here I'm going to change this to this and here I'm going to give a style to that status here we are going to give a padding here top should be 30 pixel right is zero left bottom is 5 pixel left is also five save this think this is okay here I'm going to give a text ellipses so here classes ellipses here ellipses text overflow this ellipses after that overflow hidden white spacing is no wrap after that here I'm going to give a width s 30 pixel go here I'm going to reduce this to 20 sorry I need to save this file yeah here I'm going to give this is 50 pixel here I'm going to increase this now this is perfect if this letter increased more than this here we have Ellipsis okay here here I'm going to change the font size also font size is 12 pixel and here I'm going to change the first I'm going to cut this sorry copy this before that I'm going to create a root variable for a common class so here root this is light okay light colorcore or a light color give this color after that and save the this and copy this and here we have same color right I'm going to cut this here I'm going to add a variable hyph light color copy that and change this color also and here too here I'm going to use the same color here okay yeah save this yeah this is fine here I'm going to add a ellipses with this is 50 pixel and here I'm going to remove this here text align is here I'm going to change this alignment text align Center yeah now this is perfect after that yeah I'm going to add a person image inside this so here background image is URL and Dot slash here inside assets me after that background position is Center here background size is cover and save this go to browser yeah here yeah this is fine after that I'm going to duplicate this for uh multiple times in row sorry it's in column I need to copy this sorry this post before that I need to put this everything in one Dev and here class this this is status row okay copy this _ row or row like this copy this and save this after that here display flag save this and go to browser yeah this is fine yeah here space is not matching to this so here I'm going to change this right to 15 pixel and save this I think this is okay after that need to increase the height and width right so here this is 60 and I need to increase this to 30 here this is fine but text is not align Center so I think I need to change this du to span and here I'm going to cut this put inside on dev and here class this is name copy this name and here text align Center yeah now here this text is align Center to use this same to ENT do right here I'm going to remove this everything and I'm going to duplicate this for multiple times yeah think this is fine yeah this is good here we have eight profiles so here we have only six so I'm going to duplicate this for two more time yeah this is fine after that I'm going to work on this post section so here after this status row we are going to add this post okay here I'm going to create one more Dev for this post inside I'm going to create one more Dev this for this section okay here inside this section I mean inside this St we have one image tag s or C or uh I can use D okay and this is this is post post profile and copy this and here want to create a style to that okay here height is 3 pixel withd is also 50 pixel and want to copy this okay here I'm going to reduce this to 20 and go here yeah circle is not come B this yeah browser here here size is small here we have big so here I'm going to reduce this to 40 yeah this is fine yeah this is good to change this where where is the Post row yeah this sorry the status row because we already have the status row okay instead of status row we are going to change this common row okay yeah inside this T I'm going to add this text I mean this low MedEx and this one dot okay copy that and paste it here need to get this in one row here I'm going to cut this one day after that here I'm going to add one more span that one day after that I need to cut this put in one more D here after that we have this right so here I'm got a span sorry I need to copy this and paste it here here we have like this here I'm going to change this style first we need to get this in one row so here want to add a class this is I'm going to copy this and paste it here yeah this is good here I'm going to change this sty now okay we have dot here do on space and here class name this is post name and here font size the same okay I'm going to change this font white is to 600 need to save here sorry yeah this is perfect after that this text should be gray color here this is post D and copy that and here color variable I find this light color and save this to and here I need to change this size post Des okay save this and here font size I mean font sizes 12 pixel I give it a try yeah this is fine I need to give some spacing in between this yeah this is okay and I need to add this image I mean triple dot okay so here going to cut this and paste inside this D after that I want to create a IMG tag SRC here I'm going to import more icon here that this is dot icon this is also Dot and copy this and here paste that height is 20 pixel save this go here we get dot here we need to get this in one row so here class this is post row here paste that display Flex after that justy content space around oh sorry space between yeah this is fine here now we need to add this post so after this D here I'm going to add a one more D inside this D I'm to add IMG tag s c here I'm to add I mean import one image here this is me this image here I'm going to UT this this is s i person okay copy this and go to here to change this go here here we use the same image here and before that here we are going to add space like this okay so to add this post post container copy this and here padding top and bottom is 10 pixel then and right is 50 pixel and here want to add a background because I don't know where this screen is end I mean this post screen is end here I'm UNC commmand this yeah I think this background I mean this aligned perfectly I think so oh I need to increase this padding here I'm to inspect here I'm want to change this in percentage okay 10 percentage 12 yeah I need to reduce yeah this is fine so here I'm going to copy this and yeah here I'm to change this 10 percentage to close this yeah I think this is fine and I'm going to remove the background yeah this is fine but I need to space I mean I need to add a space at the top so here this is 30 pixel need to increase this to 50 yeah think this is fine and here yeah here scroll is not working so I need to add overflow y Auto here yeah I think now scroll will work yeah now give a image height height as 200 pixel I'm going to give height as 500 pixel and yeah I think this is fine after that we need to add this I mean this like and comment and this save Buton after this I'm to add one more D inside this div going to add a IMG tag and close this SRC here going to import four more this is this H so sorry two more here we already have this notification icon and we need to import comment and this send here I'm going to use the same message oh we already inputed that message also so here I'm going to add this save post okay yes I'm going to copy this white showing ER oh here to add a notification Titus 20 pixel save this go here we have like at the size here I'm going to change this to 30 yeah this is I think this is fine here I'm going to add one more image I mean two more image this is one is this command another one is notification icon and save this and go here you have everything in one row here I'm going to change this to 35 yeah this is good oh this is message I think so yeah this is good here need to reduce this to 25 yeah this is okay I think so but image size is not proper yeah I'm using different type of images that's why it's showing like that if you use same image it will be be in one row I mean same size here I need to increase this 2 6037 go here think this is fine and here we have one save button here so I need to add that two and before that I need to put this in One D I'm going to close this after that to add a IMG close this SRC here I'm going to add a save and height is 35 pixel save this and go here we have save image like that I need to use this to 30 yeah this is fine I need to put this in right side so here I'm going to use class and to use this post row yeah I think this is fine I need to add space yeah I need to add space between this so here activity I'm going to copy this and here here I'm going to give image here I'm going to give spacing to this image okay here padding wrers 5 pixel and I'm going to save this class think yeah this is fine after that here we have this like icon yeah want to add this like and this command section okay after this D I'm going to create one more D here we have this images and like going to copy the same image what we have inside this post profile okay copy that and paste it here save this here save this have image like this I need to change the size of this okay so here I need to find this there it is yeah I'm going to copy this and paste it here and this is like post like profile okay and here I'm to check change this size to 10 and this two here I'm going to copy this and paste it here save this here this size is not matching this 215 yeah this is fine after that I'm going to create one more yeah I need to get this in one row here class this is likeed okay copy this and yeah after this here position is relative this position is absolute and here we have two like post profile here showing one because it's overlapped so I'm going to change the image and also change the class name too okay here I'm going to duplicate this for one more time and this is post profile one and save this and here this this is profile one and here I'm to change this okay here profile image is changed also here I'm going to add a leftest p pixel is that indexes one and I'm going to use a different image okay here I want to use I mean I mean yeah I'm going to use this image yeah I think this is fine I'm to change this 2 5 2 6 or 7 yeah this is okay and I'm going to add this F like sorry span here going to change this like count padding leftt I mean left as 20 pixel or 20 to 30 pixel yeah this is okay I think but this image and text is not aligned properly so here I'm going to add a class this is here I'm want to add row yeah this is this one and here to change the font size of this text F size is 10 pixel I need to increase little bit 14 yeah this is fine I need to increase the font weight yes here we don't see any difference this is 17 oh this is six yeah this is good I think here I'm going to add this one okay this name and yeah here now I'm going to add this style I mean this text okay after that want to create one more Dev here another div is to paste this name L MedEx I'm going to copy this both and and paste it here here we got low MedEx oh sorry I need to save this here we got low MedEx and you need to change this text to this okay yeah yeah [Music] think I need to get some space between this okay so yeah I'm to add a space here yeah this is fine here I'm going to add this add comment after this one span tag add command add a comment and it should be in light color here color variable yeah this color I think this is good after that I'm going to add this border all yeah after that add a div this is command border save this here border bottom this 1 pixel solid variable color yeah here we got border after this but we need to add some spacing here padding Toppers 2 pixel to increase this to five need to increase to 9 yeah I think this is fine before that we need to add this Emoji okay here after this to create a span and paste that and I'm going to put this in one Dev here class and I need to use this common row here oh sorry I need to use this space between this row this also save this and go to browser yeah this sty like this I got only this Emoji sorry for that here I'm going to add this I mean I'm going to increase the size of this so here class Emoji size okay and yeah copy this and save this here font size is 15 pixel yeah I need to reduce less and yeah I think this is fine yeah this is good now our post section is completed I'm going to work on this okay this suggestions here to duplicate this for one more time and yeah here we got post like this okay this is fine after that now I'm going to work on the this section okay here you need to to use the same profile this here do paste that and why it's not showing it's showing here why I need to check this main de whether we are added a row here or not yeah you need to add a row here [Music] common row and save this yeah now it's showing here yeah this is okay we will change this style later yeah I need to create this to this coding Comics so I want to use this where it is this label and I'm going to copy this entire thing and scroll down paste it here yeah save this and go to browser showing like this and yeah before that I'm to add some spacing to this here padding yeah padding topers 50 pixel left is perfect top and yeah this is fine but I need to reduce this just to 40 30 yeah this is fine I need to get this in one row so want to add a class here this is common row yeah this is fine and I need to add this coding comics here I'm going to add a brake tag and this is also coding Comics paste it here save this and go here yeah showing like this yeah this is fine I need to get some spacing in between this so class and this is suggestion file and copy this here adding left is High pixel save this go here this is not good I need to increase this two 9 there it is yeah think this is okay and also I need to add this switch Yeah I'm going to put this in one row after this do I'm going to add a one more do this is switch yeah save this and go to browser here showing like this but here this is not in one row because you need to add class here I'm going to cut this and paste it here and I'm going to use this post row here yeah I think this is fine and here we have some spacing in right side so copy this and find where it is and need add top right WR is 10 pixel yeah need to increase this 25 yeah this is fine after that I need to add this suggestion and this after this post I'm going to create one more D inside D I'm going to create one more D this is for sorry I need to cut this see all after this past that class I'm going to use this common row here we have only display Flex inside this common row oh sorry I need to use this post row save this and go here we got text like this I need to space between this so here suggestions suggest okay and here padding top and bottom is 20 pixel and left and right is zero yeah I think this is fine right and I need to increase this font size of this here Class C all copy this and paste it here here I'm going to change this C all to I mean font size okay font weight to just give 500 yeah this is okay I need to reduce the font size to to reduce this to 13 yeah this is fine yeah this is okay after that I'm want to change this I mean I'm going to add this okay to copy this post row and paste after this St save this how it's look like yeah this is fine here we have followed by okay I need to add that too here followed by save this go here here it's showing followed by and I need to reduce the font size here to copy this where it's showing here it's showing just a color right here I'm to change this font size okay and or otherwise I'm going to copy this want to remove this existing style here it's followed okay by and paste that color here and font size is 12 pixel oh I need to save here followed by oh followed by yeah I think yeah this is fine to duplicate this for a two more time go here I need to add a space between this row here this is followed by followed space or padding here padding bottom I think okay here I'm going to give padding bottom is 5 pixel I need to save here need to increase this to 15 yeah I think this is okay to add this padding here save this yeah this is okay or I need to yeah this is fine I think so I'm not going to add this yeah I think this is fine and this is what we developed right oh I need to change this color right switch color so here class switch color color is sky blue yeah I need to increase the darkness yeah this is fine I need to change this switch to follow okay to copy this go here don't want this switch instead of switch I'm going to use replace that follow now this change to follow need to change the font size also okay switch font size 12 pixel yeah I think this is fine yeah I need to increase the yeah I'm going to give this I think everything is fine here this is what we developed here I'm not change this images yeah this is the Instagram clone okay this is what we developed yeah here this is suggestion accounts I think this is what I try to tell in this video I think this video will help you bye-bye

Channel: Coding Comics

Views: 1,834

Keywords: instagram clone in react, instagram clone ui in react js github, social media clone using react js, instagram clone in react js, how to design instagram in react, how to design instagram ui in react, how to create an instagram clone using react, react instagram clone tutorial, instagram clone react tutorial, building instagram clone with react, create instagram clone using react, react project tutorial, instagram clone frontend, instagram clone with react and firebase, react ui

Id: vyNHt_G5Qyc

Length: 66min 16sec (3976 seconds)

Published: Sun Nov 05 2023