Instagram Clone built with NextJS TailwindCss Firebase and Google Cloud Client

hello there today I will be showcasing this amazing application it's an Instagram clone this application is packed with so many features you can sign in using Google and your Google profile picture will be displayed over here you can post pictures with captions when you click plus you can post a picture let's just go ahead and select any image we can find like this one open we can put a caption my first post upload our post and once our post gets uploaded to our fire store database we'll see it on our application here as you can see my internet is a bit slow and you can like this post you can make comments on this post comments post you can make comments on this post and you can view other users post and in this way in this application you are using react moment to display the time of each comment as you can see over here 16 hours ago and this comment we just made was made a few seconds ago also we are using react model to show this pop-up that allows us to make a post that gets saved in our firestore database we are also using react recoil to hold our model state it is mobile responsive and it uses Tailwind CSS as we can see here mobile responsive is packed with stories see our user here see our story and we're going to be creating this application from scratch you can also sign out by clicking on this if you sign out you will not be able to make comments or like posts but you'll be able to view the comments and likes of posts now we're going to be creating this application from scratch please make sure you like this video it really helps the channel a lot subscribe if you want to see more application builds if you're thinking about copying this code and running it immediately it won't work because you have to set up Google authentication which we use for our signing process and you also have to set up your Firebase API to enable the application to work so I highly suggest you go through this video and the settings that's open your Google and Firebase account so you can get this project running perfectly on your end the live demo link is in description along with the GitHub link if you run into any issues please let me know in the comments and with that said let's get started encoding this application okay everyone so let's get started now we have installed ours already MPX creates next up and uh in this current folder so would you like to use typescript no eslints yes till we says yes the source directory we use it in our IMDb clone or in this video we're not going to use well you just say no use app router I'm going to say no and customize default import area say no so your your next application will be created and now we can just npn along div so before we check that little strong Cloud Channel distance here we're not going to need any of this essential module okay let's just what's all let's go uh this is what I want to get rid of this uh we're going to see if let me give it your class name we're going to say PG 3 50 and minimum pitch screen okay now I'm going to also use head and say Ctrl space import next head let's see title and start like cloud up we'll see later [Music] in description contents each egg a ninja cooler now I know you guys are seeing this Auto predicts here and that's because I'm currently using tab 9 extension it's really cool really neat I'm using it up now here so maybe you try to install that on your vs cool yourself as well I will be using it for a while now uh and it's it's pretty okay but I'm not using it for too long so I won't read it so as you can see it's already Auto suggesting things you just press tab and have that day so that's okay so let's check okay I'll call that one look at Boost okay so these are local posts inside my nap now we're going to create a header that's where the header is now we're going to go to our Main um directory here and create components and it's great so file s cheers okay so in the head of the JS now wins Imports image go along next emerge okay so shut down RC header next image we don't need this impulse we have from react not needed at all and we're going to create our first D I'm going to say class name or shadow just small shadow for the bottle I'm just going to leave that like that we're going to have two three section we're going to have to left section right meter section and the right section okay so let's style this here on whatever they want it to be sticky we want it to be placed at the top and not leave it up it should be at the top you want so zero I want the background to be white it is the index of 30. then here we want Steve class name another D wanted to flex items Center justify between Max W 6 XL and a mix or and also in our larger screen we want MX to be Auto okay so let's start with our left side in our left side should this here we want to div in this div I'm going to show an image with a source now we're going to use Instagram image and let's go to our browser we're going to use this image so come back so the source is going to be in this link you can use any link you want of any image into layouts or super fill okay class name say objects can't see okay so object equality let's check it out okay so the reason we're not saying anything of course we haven't added this to our index main folder here under the header so just add this here to hit the so this will give us an error because the hostname of this is not in our in our next config file so you see we'll stream this so we're going to go to our next config and we'll change this watch this so as you can see here in although means we have WWE jennyxclosed.com which was shown to us here or what we should add in our hostname so we've added that here so now we shouldn't have that issue anymore but because we changed something the next config file we need to reload restart this application so npm run Dev all over again so now we can refresh this without getting an error but I don't really get to anything there's a good box so I'll hit a stretch on words here okay what they see here see our Instagram logo and see some of our words here so let's go back and continue styling it so that we can have something more presentable to show Okay so we have this image and we want another image here because we want and that has gone so let me style this a bit a little closely also pointer Heights 24. it's 24. let's check them okay as soon as I saw inside over here though much much better now we're also going to create another image down here and just copy this and here into our image and the source is going to be this so I'm going to use this so if using it full like in Instagram application if you're checking the Instagram app with your browser uh if you're on full with it's going to show this at the Centurion error it's going to show this image there it is on a small small device we can show this image but we're going to do that so you're going to see what we are talking about I'll put this here I'll see a layouts fuel and then we see a class name object hunting it's just checking as you can see two images they are on top each other so we want we want it's this to show uh when it's a large screen this will show in the small screen so how we're going to always come here we're going to save me let's see if and then we're going to say in large screen it did over in this we're going to say we need save and then and then in the large screen we're going to say inline great now it was starting with hidden then when it gets to a large screen it should be shown so if you come here I can see it here it's showing but if we come smaller this one shows so bigger smaller bigger small mix much more sense so we have our high 24 width of this should be 10 is looking a bit big exactly so you can see you know this good application is clicking clean that nice foreign let's go to the middle okay now in the middle we're going to use an icon from hero icon so we're going to probably probably need to install this first [Music] um hero icon that uh okay so we're going to need let's practice hero icons okay my internet is a not that fast okay so we want to see the MP foreign Okay so enter is not that much so let me just try this okay foreign okay so it has installed successfully happy about that so let's go back to our header here and we're going to import search icon search icon Del Plus so cool icon it wants to get like no more about the icons just search Evo icons reacts you'll be able to see more about the package okay from ads hero icons reacts also like okay All Imports and input inclusion are used uh here's icons hope the spelling is correct react outline okay so good screw so now we want to work with the middle here so let's see deep website class name let's say we need sieve action talk one I'm going to come over and see the little thief outsole notes talk soon and left to because we want a bit of like yeah once it starts from the left to here and the top two so this absolutes and now we're going to use the search iPhone and we'll see text Gray 500. Elvis also use the inputs as well we won't work on this search bar text class name Richie Gray 50 PL 10 parting left um border pre 500. and the text should be small and unfocus playing clock and look for close our clock around it we'll get what's wrong with this D hero 52 days foreign let's check back on our app and refresh okay okay search icon you change the Imports on us if you want what you have installed new icon V2 and okay okay it senses from here so let's install the mission one like this let's go back here Ctrl C and PM install Dev let's refresh okay we have this here our search bar is not looking very nice so see if we can save we still can't see so I try to see what the issue is all right sorry okay well I'll go to the issue here and tell you we left a something opened well I was okay I'll send the issue well there is a lot of issue input type foreign [Music] ground PL ague ticks multiple string knock of course okay [Music] okay so we want to go to our plugins I think that's why I'm getting my issue from and seek this piece of code and put in our plugins required to win CSS forms that should make a application will work better it was the same uh cannot find module during sexuality means CSS the phone with it the problem is reset for phone cells I mean from Earth to overall utilities okay see here till Wednesday sales forms npm package we want to copy this go back to our code what you see past this and enter okay now let's run our code again and see [Music] okay um this is all right so that was just the issue we needed to install the Tailwind CSS forms so that in our header when we override the uh imputes we'll be able to get this styling that we like over here so that's done so our another component is okay now now what we want to do is on the right side we are going to open this right side but not now but we will do that so right now we want to work on our stories we want our stories to be here so the tutorial we're going to create a new folder a new file let's see story dot cheers you can see RFC okay stay now we'll greatly install something called uh minifigure hopefully it's a 58 or Force and in our story we want to first of all create another file sorry let's do these dots yes RFC okay stories then we want to install this minifigure it allows us to generate fake data so that we can use that for our stories so we're just going to copy this go back Ctrl C and install npn minifigure so that's done we'll go ahead and start our application again we will remove this reacts here we are now going to because we need a lot of data to be able to like show in our distance so we need to create fake data to start with so to do that we're going to first create a new state we're going to say constants story it users we'll say set story users because we used it array I want to use effects [Music] okay then here we're going to import let's import mini feature in some imports minifigure from mini speaker [Music] okay now that we've installed we've imported the minifigure inside our user effects many times of these components is mounted we want to generate that fake data and then set it in our sets our studio users to me to say constants story user constants 2 users [Music] okay I want to see a constant story users is equals to a mini figure dots array because it's an array we need and in the area we need to see 20 um 20 pieces of data these are already the number the length of Direction be 20. that's what I say 20. then we're going to say I closed then we're going to work on what the fake data should be we'll see we're going to need a username and the username meaning now the username we need it to be in English so we want it locally if you if you don't put this option it's just going to come it comes with a French and English let's go back down here let's go down so you can see here those username it comes in English and foreign French so we want it to just be English we don't want the French so we have to set it here and say over here we want the locally locally to be English and then we can just see this like this we need to import it so we need to import [Music] locally look at least English so now that we've imported that we'll come back here it will be standing thoughts we want it to be in lower case you see that lowercase then we also need an image and in the image there's this website called prayer Avatar let me show you [Music] Alpha so here you can get a lot of Avatar images all you need to do is use this see you know this okay random size that size unique ID okay so we can get a lot of um this dummy avatars from here using this it's it's uh it's like a link for an image so we're going to use that over here so how we're going to use that in our image here we're going to create within literal template literal and https this is their website and we want an image we want to pick a randomly want to be random so we get different random images they have wings it was assigned here you can if you put three you're going to get an image with an idea of like three a random image like that but we want to make this number random so that when it's creating the array of 20 users this uh this image is going to be random with different different images dollar sign we're going to say maths dot cell [Music] Max random multiply by 70. and I want an ID of I so this I here is this I here this is like um the index so we want edit to be the index so if this is the first array it will be the x of zero if it's the second will be one then and so forth so we'll save this then well once I've done that we want to set the story users the story users I'll get from so lock this okay so this is the stories now we need to put that in our feed because right here in our index we have the header That was supposed to have the feet so in we're going to create a components here what's G cheers RFC and feed so in this feed uh we're going to have me I'm also section and here we're going to have stories which sells stories after the students we're going to have our post foreign last section we're going to have mini Cooper how many profiles and we're also going to have suggestion okay so in index we have our fee which has to come here so go back to our Instagram app with refresh okay guess anything but we should be able to see some an array in our console here okay here we go diary you can see different usernames in Knight G3 so it is zero so it does actually start this one yeah so as you can see we have our data now we need to display our data here so let's remove this call back and in our stories to go out to our stories so now that we have our data everything is okay we want to come down here and we want to Mark through all the stories so we're going to check I'm going to say sorry use us let's map which individual user and we're going to say two we have to import it our story this story here I'm going to import it and say key equals to user dot ID is an a because username and then image equals three user image the range closest so in our story here and we're about to collect that information let's see image I'll use a name so over here we're going to display this we're going to see image Source should equals to image and the odds should be close to the use angle and now I went to see a pizza I'm sorry so you can see all our data has already come out nice nice now so now we want to show this data like here like stories on Instagram this one has three results for me to style this but first I'm going to go to our stories in this deal here I'm going to say class name we're going to reflex space y x sorry two plugin six Buffalo weights imagine top Eights border Greek 200. quarter you can see over flow X School and around it SM screw bar no no this cover is not going to work until we install the scroll bar package so let's go to Autumn left Ctrl C npm install um what's the name of that package again okay two In Scuba it allows us to edit the scroll bar let's install that all right so that's not then with Ctrl 2 and config I'm going to add another require this year the comma save then we're going to start our application and close this you can see they're all horizontal now so we're trying to get rid of this scroll bar that's why we're downloading that is that's a two-in scroll bar so that when we go on to our stories and we see scroll down scuba will actually be known as you can see scroll bar is gone so with our stories we are done style in this now we need to style our story let's go to our story okay so the first div in C Class name each height of 14. rounded food play 1.5 peace foreign skill press here position transform the duration to 200 milliseconds and boats then I'll use an Indian we need to see Cloud snake and fixed XX weeds should be 14 to the wrong kids in case designing real okay let's refresh this Okay so our it's not really looking real warm is it it's not rounding the images are not rounding and let's check what will be wrong okay it seems like this is height and all this darling is full our image not our div okay all right so there we go perfect so you can see looking nice and clean okay so now we're done with our stories where we're going to work on our posts to do that we're going to create a new file in our components uh before we do that let's try and clear out all of this so create a new file and call it post the purchase RC so we're going to create some fake data uh just so we can use for now then later on we'll use real data so we're going to create a new constant here constant post equals to have some detail with me here you can get this data from the kettle on the post page in user ID id1 username Niger coder image or user image the image and the caption nice picture new picture from my city just some little fake data to use so we're going to look through this we're going to map this out with posts not and we're going to use post so we're going to control here and create a new file s GS and this project is RFC okay then here we're going to get image user image winscape caption I'm going to get username and we're going to get 80. okay here we're just going to display username you'll see it is going back to our post foreign post Imports it our key is going to be our post dot ID our ID equals to because.id also username post dots user name uh user image poster to user image image if also post dot image collection goes to post dot caption as you can see I'm getting our predictions with tab Knight so I really advise you to get to install tab Knight it's really really nice after it starts to learn how you're coding it starts to help you with prediction makes you put faster okay so we're having a bit of error here okay I see what the problem is this this this this foreign okay so let's check our up okay when you get scene suggested pushed uh let's go back okay so this needs data to load so let me get my internet and connected on the whole content okay so I've gotten my internet back and I'm just connect to his size okay and refresh this okay now our posts are not showing down here so let's go back and see what the problem is um let's check it for and we need to restart our server let's Ctrl C I'm going to start the server map which [Music] is still not showing now let's go back let's go back we'll just take something here let's use this page okay okay silly me silly me I now know why it's not showing uh in our feed we need to import our push okay so see the username here let's go back to our post right below okay you know just try and install this a little bits so all we're going to do we're going to come here also delete this I'm going to style this a bit closely and PG White um margin y up and down but uh around it around the limit so we have the header section of our pushed we'll start let's start out so we'll see div class name I'm going to see image sources is a image oats equals to the user's username and in the classic uh we'll see a height of 12. rounded full objects cover for the padding one item rights three okay okay let's see how this looks okay so we can't see the header section here we're seeing our image here image here um you also need to username so let's add the username you know in the P tag username James okay so we also need an icon around here this dots icon so let's import all of our icons that we're going to use we're going to import dot horizontal iPhone I also we need the hats icon the charts icon and the book Mark all The Bookmark icon and also the Emoji happy icon okay so we're going to use all these icons um password right in this code so as we can see it's coming along the header sections coming along here now we want this to flex we want this to be here so what we're going to do we're going to come here I'm going to say Flex items soon so you know five so as you can see it's now here it's looking neat then we also want the icon here so after the username I'm going to say dots which ones are icon casting Heights of five if you see here then we're going to come over to here our username so there needs to be a bit board let's see fonts both are Flex swap with cereal okay so this looks much much better so icon here now we're going to shoot display the image so which Contour we need to comment special I'm going to see posts image let's see image class name just cover the Beautiful sauce image bolts the sleeve is empty or we can use the caption okay see this this looks much much better much much better now we want to create the comment section down here so we're going to come back here I'm going to see comments it's like creating a lot of space in my food lastly P5 let me see turn on kicks so that it's only stays in one line so in case the username and the captioning spec the caption is too long everything will just still be in one line because this way we're going to put the caption which they spawn the class name foreign happy icon I want to use the inputs the class name of border you know and flicks one and if it's on Focus we want to remove the outline okay let me delete this to show you why okay so here you can see this outline this green outline we want to get rid of it so to do that we all we need to see is focus ring zero so when you go back now refresh a focus ing do you take that will I'll focusing zero inputs okay it's still showing but we'll come back to that we'll come back to that let's just put our placeholder first okay type text placeholder and their opponents let's see if so let's try it again okay so we just have to put the type as text so as you can see we bring this one and after that we also have boxing costume pushed okay so this is looking really really nice uh bro there is one small issue as you can see it's not looking as well we expanded it's still taking up the whole screen it needs to shrink so we can have our suggestions at this side so what we're going to do now that we're done with our boost let's remove this I'm going to go back to our feed before we do this section we need to be able to see this section because right now we're not really seeing it this this uh post is just taking up the entire width of the screen even when we increase it to a large screen small screen large screen it is still ticking up the entire width of our browser so we'll link how to work on that so what we're looking so we're going to go to our feed and we're going to start our main here the class name grid with close what empty feet Max with 6xl MX also okay so now in this half section here we'll see class name in any screen size larger than the medium I want it to be cool spawn two and over here class name should be hidden and in the middle any size for medium and large it should not be shown in line with empty [Music] okay so as you can see now we have space for our suggestions a mini profile so if we reduce this here it takes off the entire width then when we go to a larger screen it will now shift to this side a lot of space here and when we go to a much later screen you see some space here that's because it has a maxed Max width so all right that should be fine now we can walk on our mini profile so when it's gone to our components are going to create a new file say Mini profile dot GIFs okay now many properties are just getting crfc and we're going to come to our TV and we're going to style it a bit you'll see class name next items sensor or c fight between margin top 14. 19 left 10. okay then we're going to show our image a class name height 16. around it full bottle of 2px and the source of our image which image I always use for our mini profile if we come wherever just get set Niger images see that cute face over here see this cute face so we're going to copy image address come here and fix it here okay then our oats the interview goes to user image a little diff class name let's see Flex one imagine left four I mean say H2 costly fans board with a name jab culture the side is looking okay we've not imported it to our feed yet it was a mini Puffer not supposed to be down here but let's finish without standing okay so let's go back and in our feed uh who wants to want to come over here okay div fixed with 380px okay see us here ninja cool all right we look really really nice so in our new profile you know I need to proof up and we have our ninja code here I'm going to say class name text small text screen 400. see it will work one use the iPhone yeah after this review with the button class name fonts send me boot and text blue from 100 and it takes you so it's a sign out all right so here's our mini profile is looking really really nice I like it now we're going to create our suggestion here with um minifigure so when we come back to our components go back to our feed break this we can sell our suggestions it so we're going to come here I'm going to create a new file as suggestions suggestion.js we are going to RFC and here we're going to start walking so what we're going to do first we're going to delete this we're going to Imports mini thick lot from nifika they will also mean to import the sketch remember I don't know minifigure slash look hardly so we can fix the English type to be English rather than the English and French Randall I'm going to import use Stitch and use effects on reacts okay now I'm going to work on the fake data we're going to first see constraints suggestions sets but shifts shines notification let's use States okay wow look at this it's already giving us different the defense suggestions but we don't need all the suggestion we're going to use effects well okay all right so we see constant suggestions because the mini figure dots are we in the array we just need 5 11 Theory let's say I [Music] use running to be minifigure [Music] torch user name I would want this to be in the local link [Music] you can leave of English and it should be to lowercase together job title grants mini filter that's nice well it's just job title this will create different kind of job titles for us if we check the documentation of minifigure you see a lot of different ways of using it but that's for another video so ID is equals to I that's the index this index that we get from here so ID and equals the index and now I'm going to say sets suggestions any suggestions alright so now that should be good thing so what we'll do here was just say kind of sort of log so adjust sharks then in our feed if I will bring this suggestion results save then go back we loot this position it says found Cuts new FIFA the person this is not expositional package import equals input minifigure locally okay it should be look at least as our suggestions okay so let's check our consudo foreign quality okay so that is that that is getting it for us uh we don't need to console log it anymore so now we're going to display everything with Mark so the style this the style was a bit first before starting screen see class name margin top 4 margin left 10. legs okay I'm sorry I had a code there and just quit this okay so if last name clicks justify between I'll call that person later on imagine button five six should be small then H3 class name font support text Gray 400. this will be suggestion for you okay so now those are the button here and another class name of texts Gray 600 front semi board and see or okay so now we can map to our suggestions we can see suggest just map jump okay suggestion okay so this class name flicks items sensor and just the fry between an emergency so I do need to plug in my uh plug in my laptop don't worry about that so um now I've done this we're going to say image last name height 10. around Dead full travel border paddin of two PX the source and we're going to use what we used in our last last time we use minifigure uh this pre Avatar website and how we're trying to get to random image so we did that previously some three guys on the slider already so then we're going to continue alt equals to nothing else I'm going to save this [Music] so that's for the image just check how it's looking now okay so see the images so let's generate the job title the name and everything there so let's continue so after this we're going to say if class name Flex one adding next four we can say H3 plus name fonts send me a boot text so I'll just show suggestion dot is only two okay the next one I'm going to do is h under H3 this one here should be H2 sorry about the H3 last name and this is going to be text small text should be clear 400 and to kids that if it's longer than the space that we have it we just put dot dot scores then two three zero p x okay and we're going to see here we just shown dot job site foreign okay so after that as you can see looking nice after that the job titles were not going to say H20 follow integrated button a button last name one semi board sex should people 400. takes and you should be full okay so as you can see suggestions for you okay let's come back up here so suggestions for you see all and all suggestions well if we reload this you see it will change so it will keep changing whenever we reload it this is suggesting new people first Okay so now that we're done with all of this we need to start working on our signing process now we want to use next alt this is a very powerful next um JS package so this uses for our signing and we're going to be using Google provider we're going to be using your Google email to sign you up into the application so let's get started so now to get started you just need to npm install next alt to your application which I have already done over here so just do that in your own code as well so once you do that we're going to come back to the documentation here it says to get started we need to create a file in our API alts and then create a file with square brackets dot dot dot next sports.js so let's do that so now we're going to go to our Pages API create a folder there name it alts then create another file there and dot dot dots next ports dots juice now that we've done that we want to copy all of this paste it here then we're going to come here and change this to Google I'm also going to come over here and change this to Google and also here now before we continue we're going to create a Firebase accounts What you're going to you're going to get Firebase so make sure you come to your Firebase Firebase website um switch to the email that you want I want to use this one then get started okay so you said I was already doing something here so add projects foreign clone 32 switch off Google analytics for this project because this is just a testing project but you can you can't leave it on if you you know want to launch your application and use it so that's up to you so while we're creating this we're going to go back uh make sure you've done your npm install I want to connect the Firebase application first before uh I do this so what we're going to do is let's leave this a bit creating I want you to search Google Cloud Google Cloud over here I'm going to switch to the email you used to create your Instagram clue so ours is already ready so they'll just continue here so we're going to leave this now let's come back to our Google Cloud so we want to say get started for free foreign [Music] console I'll start my future okay I can't type business we don't want a business as an individual accounts and then it's giving those issues here this is our console the console okay since I I clicked a wrong link okay I've made a mistake so now that we're here okay well correct email and just go to the console okay I don't follow those steps I'll explain just now click on this place here go to all and we want to come to we will see our what we created in our Firebase Instagram clone V2 we're going to see it here Instagram V2 I want you to select that so once you select I want to go over to apis and services and go over to credentials okay now that we're over here I want you to come over to this school or to client ID and click on this edits here okay now that we've done that um server additional information our client ID and our client secrets which we're going to use in our client ID here in our client Secrets now to use this we're going to change this also to Google ID copy and Google secret we're going to create our um V for our environmental variable to go to our main routes directory over here and create a new file and name it dot env.lookup small letters okay now that we've done that come back here Google ID to copy that I'm back to this paste it here now go back here so our client ID so it is this we're going to copy this and the next thing is our Google Secret it copied out and come down and our client secret to copy this and paste okay so that is done now let's go back to our Firebase and go to settings project settings scroll down there are no apps in your projects click on this we're going to name it Instagram clue register up okay so now we need to install power based our project so we copy this I'm back here paste in the store and we go back we're going to knit all this code so we're going to copy this I'm going to go back to our vs code and then over here now main directory we're going to create an info called fire piece .js okay firebase.js we're going to paste that code we have now our API key or to domain project ID storage bucket messaging center either and app ID we need to put that in our DOT EMV I'm going to go both here G and take this to here okay so the first thing we have is Firebase API if you can see fire piece VPI equals to take this copy then here we're going to say process dot e m v dots fire crybabies API key so we need to put all these all of this into the errometer variables here so we're going to go to another one five piece to me this name should have better so you can see Firebase but you told me Arby's Pro projects ID you can see Firebase storage pockets fire bees message sender ID and for your bees API ID so come here let's copy paste okay now that we've done that we're going to come here maybe if we just type what to do mean okay our prediction is working tab 9 is working effectively next oh my 16.80 [Music] um what's this supposed to be object all right so we've um done everything that we need to do there so everything there is okay so now we want to add initialize some certain things in our Firebase application we're going to import okay let's remove this character letters we are importing initialize app we're also going to import get up and we're also we're going to import skates apps then I'm going to import get firestore I have talked about Firebase a lot so I'm very sure you guys have posted my videos about that I'll link that in the description where I talk about how you can connect webasso application how some other websites type builds with Firebase so Firebase slash firestore okay then the next one by importing get storage for fire bees slash storage and down over here we are initializing our application foreign initializing all the applications connected with this we just want to check how many applications we have initialized and then if it's just one just initialize just one rather than um this initialize all the application that we have so what we're going to do here we're going to Second stands up equals to if get apps both links is is like equal to zero we're going to initialize applications like this else gets up so if it's just one application we have connected to this it should just gets just that up then if it's multiple you want to initialize all the applications we have in our privates account so we're going to say constant DB because we need to initialize the adapter base as well get file store work it up then we're also going to install as our storage gets storage get storage they are going to export all these things we're going to export up DB because we're going to use it in our Pages very soon and Storage okay so our Firebase um application is okay now so the next we want to work on is our sign-in page how exactly are we signing into our application so we're going to cast this and cancel this suggestions mini profile feed you don't need this anymore so now we're going to create a new part and you know how to create new part you just create a new file in Pages or you can create a folder so we're going to create a folder and in that folder we're going to say uh odds in Instagram this is signed in produce now in our API um odds let's go back to here and X alts here down here we want to link our pages so we'll say pages when C sign in odds slash signed so we're giving like the access to the pages we want to give it to so error let's repeat it again comma we have a command here okay all right so that is now go to Google inbox or signing page now so we're going to say RFC sign in and we're going to remove this react here because we don't need it so we're going to import some things we're going to import get providers and sign in from next odds slash reacts and this sign in the is capital letter sorry S capital letter then we're also going to import our header follows components header okay now that we've done that we're going to pass in in this form this is our next out we want to pass in this our provider this Google provider into this page here so we're going to use um get server side props to do that I'm going to async function gets a bar side groups context now we'll see constant provide provide us equals to our width gets providers so we're going to get all our providers from here here we just have one if we have more than one like Google GitHub uh Google remember from the top of my head but I'm sure we have many providers like in our next Arts here Stitch 2 will provide this okay so GitHub Twitter Google it is a web like different providers so we want to get all our providers here because just one we'll just get this Google since we're just going to get the series menu will get different providers so I want to get that into this sign-in page here so we can use it so we're going to take on some providers await get providers here and then we're going to return it to this page and we'll show you guys know how props work here let's say return props provide us okay so now that we're doing that we're going to it's going to pass into our signing page as a prop so we're going to pass it through here I see provide us and save this and then we're just going to come over here remove this div and pass in our header and just say signal so now if we go back to Instagram application and put signing Community status application div let's come here we load okay it's saying this page could not be found why we're exporting it um okay sorry I made a mistake it's not just signing these parts sign in all right so as you can see ignore this here is from our main CSS just leave that that's our header I've got the signing page so here now we can now use the providers okay so now that we've done our sign in page we need to style this up a bit I'm going to come back to our code I'm going to create a div shape I'm going to see class name class name Flex justify Center just if I say the space X serving and margin top should be 20. now we're going to have an image here class name should be hidden I don't know oh Jets cover and we're going to tilt it a bit okay six on your large screen you want it to show or the smaller screen wanted to be heated the width should be 48. and now the sword where to go online and look for Instagram image okay this one is nice we need to copy image address peace in our source hip okay and sauce looking for oats and start crying image so let's check this out okay so you can see the Beats tilted or you don't need it to tilt just to leave that to it I don't know why why are we having this style here let's go to our style page mobile okay so that's much better so now that we've done that we're done with our image well great to come over here let's start another div we're going to see uh we're importing our get providers so we're going to map all our providers we only have the Google provider here so as soon as it does going to show so we're going to map through you're going to say objects but for these will fade us dots map provider let's see diff the key should be the cool play the me so I'm mapping through other providers here we love Google providers we can add more providers here like GitHub Twitter Etc if you add all of them here we'll be able to map it through here so on the page you will see signing up with Google sign signing with Twitter signing with uh so right now we're only using Google so the key should be the provider's name and we'll start this a bit class name it Flex Flex call items sensor okay to need an image again I don't see image class name as name flicks no wheat 32 objects copper and with this salt solution for sauce for this let's pick this puppy images okay so we'll see Ops let's get scheme got empty okay so now that we have that okay so p class name six small Pizza imagine top and top and bottom 10 6 Center you can see this application is everyone we say it's full learning what was this okay so let's just get that in there now we're going to create a button here and on the bottom we're going to say on click on that we have our sign in here so we're going to say on click we want to sign signing and we're going to sign you with the provider you know we'll find the dots ID and we're going to see the cone back your help after this has an assigned in successfully should be the home page okay now we're going to start this a video we're going to take class name and we'll see if our ground a bit of 400 around it rounded large I mean see padding three the text should be white and on Plover but gone should be read 500. so you're going to see signed in with purple Friday don't sleep [Music] okay so as you can see here subscription effect for learning for the siding beats Google that's all right so I'm going to click this button and as you can see it says access below this app because it's invaluable we've not added this application to our our Google application here so let's hit cancel first down to come back to your console Google Cloud console uh make sure you're currently on your application we're going to go to before we come here we're going to configure this consent screen let's configurate against the external creates up need with c ereal no fish Fletcher support email here's my current email the logo of your application okay let's just pick a logo let me see if I have something I do have some wallpapers say someone there you go ducky okay let's use this astronaut so I should not exceed one MB 1.72 okay 600 kilobytes okay let's use that that and that begins so this is going to be our app logo for you and up to me just leave that um as well as I mean just leave that inner address just puts your same email address sec okay man come on okay serum continue it's really long in English added you have to go through certain processes so as of that so we're just going to see similar and continue so we will continue to our summary and back to dashboard Okay so we've configured a bit to go back to our credentials we need to console who was the two dot client ID I'm going to edit otherwise we'll notice Network issue that's what seems fine okay it's okay now add UI so we're currently using localhost 3000 so I'm going to add this then over here our redirecting URL URI we are giving that over here when we can sell whatever you are I miss match so these are the this is the videos URI that we need to use so we need to copy this foreign so I sign it uh exciting Google so you can see now it's working perfect so you click one and you can see we have been navigated to this page so it means this is currently working so now we need to access that station and show some information here so before we do that we need to wrap our entire application with the session provider and if we go to our app underscore app.js this this file here is this is our entire application anything we do here affects our entire application so what we're going to do here we're going to compare with Imports uh session Provider from next art react then we're going to wrap our entire application with it take this here then while we're doing that in our page props we're going to get some then we're going to get our session and we're going to get delta.ph Ops and then in our session provider here I'm going to pass in session okay so that's okay so now we're going to go to our header because in our header we want to configure this right side all separate this crushed nipple cheese I just want to see we run this application again what's the matter um okay we made a mistake here I'll delete this and it's so all right so everything's okay now now we need to show our session from here we need to also make us be able to sign it for there so I want to do was good and want to confuse this right side over here so before we do that we come to the top we have our plus icon we should also import it on Michael okay so after we've imported our home icon we want to come to our right side and walk on the right side a bit uh but before we do a let's import our session let's come here and say Imports news session or to import your session we also want to import sign in and one thing you import to say a lot then over here I'm going to see constant detail session equals to use session I want to console log this once come back here want to go to our odds sign in signing with Google pickle archives see what I navigated back to the main page want to inspect check our console and okay here there's an object returns and we can see the user user's name the image and the email so verification but also see when it expires on the sixth uh does some Gene and second object and this is currently eight of me okay so now that we we see we get when it's expiring we get our user details everything looks good now we'll go back to our application here and we want to see we want to come to our right side now in our right side let's delete this give us some space to operate I'm going to see div class name on Flex space X4 items sensor a hole icon class name hey there mg near Ryan flicks height of six causal points up now whenever the user profiles we wanted to scale to one to five large in transition transition transition child's form then the duration should be for 200 milliseconds needs okay so after this let's check it out and when you go right it gets bigger so now we want to see if there's a session it is a session do this and if there's no session do this so that's the way to do the decision if there's a session we want to see Plus Circle icon class name I'll copy this go here yeah okay there was one to show the user's uh image so we're going to say it's a source should be session dot user dot image then the alt should be close to user image Crossing the class name should be height of 10. around that full cross so foreign so now we need to wrap this in a empty and bases so you don't get that error then over here if we don't have anything here okay in this argument you want if it is clicked that means user wants to sign up we want to see the same user else or you can create another buttons inside of that is up to you and then what's it over here I will say and click we want to sign okay that says sorry okay let's go back so as you can see we're signed in already if we click on this we are signed out beautiful knife won't sign back in we click on it and you see it's directing us to a weird page that's inside English we will actually sign it for here click foreign but if we want to want to to redirect that slash alt slash signing page all you have to do you have to go to your next alt here and over here we made a mistake this should be calculated all right so when we're here and we refresh I will click on the sign in it will navigate us to this hour page where we can now click see all our signing providers click the one we want and cut up or sign in so you can see incredible stock incredible store okay so now that we are working with our session and everything is looking good we want to make some effects to our page here for instance this mini profile over here we want to do it in such a way where it's the users the username that is here and this sign outputs into work so how do we affect that we have to go to our our mini profile and make some changes now the top we can remove this react because we don't need this we're going to import view session around sign off from next odds next out react okay so now that we got our usage and sign out we want to get those that data we want to see constants Pizza session equals to the U session function okay so now we get our session we now want to display the username here now in this session what we are getting is the user's name and we'll get seeing his email and His Image but the main person will be so we can see this okay handled okay so over here we're using a username but the name that we're going to get back is not a username it's like the user's name first name and the user's last name okay so you can see smart Jeremy we're not getting like a username so we want to try and configure that need to make it uh seem like a user's name use username rather than it looking like uh like space me manifest like that so what we're going to we're going to go to our next alt file here now in this next spot we are able to decide the information we can get we're able to like torch the information a bit as sending extra information if that makes sense so what we can do we can come down here and see callback okay call box and this L is an async function is the async session token user Okay so the function now in this Instinct function we're going to see the session we want to add I want to add information into if you want to add a username field into that array so we'll say equal to session dot chooser .net we're going to take the person's name and we're going to split it we're going to split it from that space anyway this piece we want it to split through this smart Jeremy with the space in between once split it into smart and Jeremy so we have those two values smart and join me then when we split it from using that space we want to join them together without any space today should be no space between they want to join it together and it should be in lower case everything should be in lower case okay so then we also want to say session Dot user.uid equals to token dot sub now this is like the ID of the user we can get it from this token so now that we have appended this session we can now see return session okay so now if we go back to our application and we load and we expect okay we're signed out we'll sign back in Google okay full stop developer okay so inspect cancel not in our Ari okay it's not sorry but not signing let's reload this until okay or do we have an error with our okay seems like we have an error with our code [Music] okay let's go back okay so we're seeing call box here in sync session talking user trying to see if you have any issue with this code session talking users session that's user that's username it goes to session chooser that name split its join okay search another user put your own customers so return session okay so I'm not seeing any issue from our end okay what we're gonna do can we start this console and trans if that works okay so let's refresh this we're going to check our console and we're going to have our object here and so in this order you can see now that we're passing in the uid now we're passing in the username and you can see the username now is the wing we want it is split and it has been joined to like one one like word like this so we're going to go back to our mini profile and in our mini profile down here and get our session we're going to see you're going to say session that user dot username okay so what we're going to do we're going to come here and see if there is if session exists shows this so you can see it has come up all right then we're going to go to our source and here I'm going to say session if it exists we want the user that image okay all right so you can see this is not working then we also want to make this button here to be able to sign up so we'll say on click equals to sign out so if we click this should be signed Lots perfect so we're going to sign back in because we need to work on the story um so now that we're assigned back in if the user is signed in we want this this picture to be part of this story section so what we're going to do we're going to go back to our stories now up here we're going to import you session uh down here constants data dot session equals to use session okay so you're not data dot session this okay so now that we've gotten the session I want to come down here I want to see if session actually exists want you to display this we're going to see story image equals to session dot user dot image username you go to session those user let's username and each user because in okay let me just put this through now when when we see this here we want to make like this I know that this is still we want to have like a plus icon here so we're sending is user here so that in our story we can pick I'm going to pick if it's is the user that is currently using this story so we can know what to like give it to the to begin to decided okay so what we're going to do now we're going to come down here and we're going to see each user if it's the user that I saw element where I'm going to show you show the plus icon yes class name on H height of six absolute absolute top 4 on the top from the left 4. and it takes should be quite okay so tab see if you look at this okay it's not currently shown is user is here or is season and close icon class near absolute so it takes White classening okay we need to style this div so we're going to see class uh let's pull in the shoe inward okay so we're going to see here we're going to see class name let's see if also pointer okay so you can see the plus sign in it let me come I'll be closer so you can see the close side so these are no notes that this is his own story so we have this working we have this working so now we want to work on our model because when a user clicks on this it's supposed to see a small model which is going to allow him to post to the outside now normally to walk to work with motor here you need a global State uh so a different any other page this will still work you need a global system um state so when the user clicks this it changes to model is open true and then the model shows up so no matter what we would use is like uh it's a reacts redox we can use use context but in this aspect we're going to use a different uh different package it's not that popular but I believe it's a popular very soon so what we're going to use is react nikoi okay record your GS so we'll go to record.jse it helps us it's a state management library for react so we're going to get started I'm going to install or recoil copy this and go through here control and this so we're going to install install it and then and we're going to create a new file here and we'll call that file um upload noodle that's just you can see IFC upload model then we're going to come over to our index.js and we're going to import this model here [Music] foreign okay so we have done that now let's go back to the documentation we can see here it's saying we need to wrap our entire application with the recoil Roots now to wrap our other application is very simple we have to do in next year's just have to go to underscore app you can see here we wrapped our application with session provider so we're going to also wrap it we require it so what we're going to do will come here I'm going to copy this code here copy go back and we're going to paste it here and here you can now see recoil roots then come down say close records okay so now that that's done we're going to create a new folder in our main directory here it's going to we're going to call that folder axle and inside this atom this atom is going to be the um the starting State and for our application so we're going to say model that's all that's cheers okay so here we're going to import Auto from recoil I'm going to export a constant model States equals to atom we're going to see the key is a modal state and the default is going to be false thank you okay so this is the this is the starting State the key and the default so it's going to be full so we're going to create a function in our components that when they click on this I don't know why it has signed up but don't come back to this now when I click on this plus it will now pick and okay when they click on this plus it's not click and show us our bullet so you can see here the model that we added so uh we're going to go to our header so we can create that function that will show us the model so we're going to import we're first going to import to use recoil usually coil States find recoi and then we're also going to import model state from I am a model atom um Mr page file so once we've done that we're going to come down here um this uh mode these are used we call it works similar to new States it's very very nice because when you see constant open sets open equals to use recoil sticks and in it will say model State now this open is going to show us our values why this set open is going to allow us to set the the value of our in our model of states so what we want to do now is a plus icon our close icon yes I'll post icon I'm going to see on click or function and set open to true okay so once we set this open to true in our upload model we're going to come here and we're going to say import model States okay then down here we also need to import you use recoil [Music] this tab now it seems very fast sometimes because it's supposed to be predicting this thing or already on record okay so here we're going to see constant open and set open equals to use recoil States without sticks okay so now that we have that um these are Moodle we cannot see here if it's open show us and tell us that H1 [Music] is open okay so if we go back to application here you can see you can just see all the model but when you click the plus icon you can now see the model is open so if we refresh you can see it's false once we click it boom it comes true and the model is open okay so now that we have now that we have our model here that when we click it we see extra information we want to have a model box here so what we're going to do we're going to import model from reacts model here and then in this condition where we say open constant open we need to cancel this we're going to say model we're going to style it a bit with a class name and we'll save Max with oh geez 19 percent options [Music] sorry [Music] [Music] [Music] foreign [Music] value that we have in open I'll wait to see our requests I request Clues the Green Space function are going to see set open to the equals to the system to be forced then here to see okay so here we have our model which is already here and if we click outside it will close so that is that now we want to style the inside here so how do we go about it that we're just going to go inside our model here and we'll see diff thank you okay so we have this deep styled on style they need to know now we want uh I'll stick outside refresh this look it okay so now we want to be able to select a file so to do that we need to create a constant we need to say constants so let's save file so this one will host the selected fog if you start with the value of nope okay now uh we need a camera icon but inside here we need an image to shoot selected for but we also need to be able to pick the selected form so here we're going to say inputes type equals to file hidden and Earth equals to um nothing for now on change a change will be add image to post okay so this is going to be an a hidden inputs then we're going to have a camera icon which we're going to import it to show recommendation a mirror icon from Park zero iPhones reacts outside okay so we want to shoot our camera icon down here so we're going to cover iPhone with say car mirror icon and we're just going to say class name start this a bit once when someone takes the pointer to it to give us Coastal pointer height of 14. redirect 200. putting two on that for supporter so and the text Red 500. sorry stick [Music] which is [Music] foreign and it puts its okay so click add to push this note defined okay so let's create some of these functions before we continue now if you just select this file and it's trying to upload the post we're going to create a function here and image to post so we're going to create a new file reader you're going to say if I get those photos the first thing is selects read has data URL uh what the user this thing that when user clicks this on hidden file uploader is going to say uh if there's something in the first because it's going to be an array you know if you put multiple here if you multiply here it depends will select multiple images but as we didn't put multiple here we just get one by Secrets come as an array this is just to define the first thing in the array and we're just trying to read it as a data URL and to see if it's actually like a good like file I will say reader dot unload so here we're going to see set the selected file to be with the event.target.swigo Okay so so now that that is done let's check and click okay guys click on my icon when we click it and right click it you're supposed to be able to select uh an image okay okay okay okay we need a riff for this uh we need to create a riff for the inputs so what we're going to do we're going to see constant file chica that she goes to easier here we're going to see verification [Music] we'll see if uh foreign fresh okay our input is not working let's check it let's check it what could be the program that's all this hidden also okay okay okay we wanted hitting so that when we select this it will copy instead okay I think I'll send the issue now no no camera icon we want to see on click it should be a function so I'll pick her worth the current dots click okay so now if we select this exactly okay all right that's perfect so up here if we've selected a it was selected an image we don't want to show this camera icon and what should the image that we selected so what we're going to do we're going to just say select setting file else okay so we're going to take this see it then in this selected if I want to show the image so we're going to call as a image and this image we want if the user clicks it we want to we want the selected file to be no so that's the image will go so you know I'll show you once we we're done so we'll press do this function set selected file The Source equals selected filed or to question nothing class name I went to see Wheats through box Heights okay so here all right click this pick an image it will show the image and the camera is available once we click this image it will click and shows the camera icon again so that's exactly what I want and so after this our inputed we want to create another inputes type this camera will be text the max let okay so it's going to have a max length of 150 characters meaning one should get 150 characters you don't want any more oh it's a matter here foreign Ty earn it thank you that's okay I see the issue here okay I'm doing good what's up so now that we have our input uh let's look at that what could be the problem on pryling okay to enter your caption okay exactly uh then we also want a button wanted to be disabled we make it a neighborhood want to use it again class name I'm going to put some styling for disabled this will stop the costs are not showing [Music] I honestly don't know what's wrong with it with this is called D it's just giving me issues okay so yes refresh this is okay so let's clicky so you can see our upload posts and we can click this and we have an image and if we click the image it just appears that's exactly what we're looking for okay so now that we have our model working up and running we want to add these things to the fire because we want them to be stored in Firebase once we press uh upload post now over here we need to enable this button so we need to go to our button here and make our disabled equals to if there's no selected file or okay just no selected file I've not created our upload process so our button is working so now we need to go to our Firebase console get started all right so Instagram clone version 2. I want to go to our expand this I want to go to our Firebase data and file store that have these and I want to create database now we're going to start off in test mode but we'll change it up later on once you get production mode next let's enable okay so this is not refreshing this is good storage and also get started here starting test mode okay so our storage is complete let's go back to our firestore database all right so we have our storage and uh firestore database ready we want to create a collection here and call it post okay so next uh I'm just going to see tests okay so we're going to see a field tests and put the value of one just for something too that it started off and then save okay so now that we're done with that we're going to come to our upload model and we're going to import some settings we're going to import at the dock we're going to import collections we need to import doc server timestamp updates dock and then we're going to import the big storage from Firebase we have them here and just show you quickly we just want to import DB and Storage from here so go back then we're going to see Imports use session [Music] okay then Imports get download URL riff I'm going to use all of this of fluid string okay so now that we're done with that let's come down here we can see constants data session new session okay so we're going to create a new async function I'm just going to be upload cost all right so in this we're going to create a new state it's a constant loading okay this is going to be false now why are we doing this because we want to make sure that anytime the user clicks upload posts if it's uploading a post he can't click that button again unless the uploading is done so we want to also want to use a loading state to check when the upload is done or not so for instance when you get started uploading is false so we're going to create an IF function here it's going to say if loading is true virtual that means if if this is true that means this is still running and we want we don't want the user to um create another post while the first post he has posted is still being uploaded so when CSC set loading is true and then after the process of of us running the code we're going to say set loading is false okay if that makes sense all right so now that we're done with that we're going to see constant.rick is equal to our weeks a dock collection TV posts attraction sorry okay do we create a caption with using Create captionware all right so we need to create a caption red for the caption the part okay so in this caption we're going to link it to here I'm going to see here it's going to be ref equals to crop shot so that we can get the value of that in our upload post function so over here you can get caption these this is a caption okay to caption caption with DOT current dot value they are going to username the username will be this session dot user dots username profile image is going to be session dots to user.image okay so while using we're creating a document inside our Firebase R5 is data profile file store database so basic documents here that's what we're doing currently doing so we're creating like the fields that we will need we we're going to need the caption the username profile image I'm also going to need a timestamp to know when this uh when this document was created see save off same stump okay so save this now we need to upload the image and then edit the image into this document here over here so we're going to say constant image works is equals to correct storage course ID so we're going to incredibly creating the folder in which this Docker D cell image will be uploaded too for instance inside the storage you want to create folder post and entire post once creating folder with the document ID this these documents here the ID and then in that we're now going to save image so inside this folder post folder document ID folder and image folder that's where our image is going to be uploaded to so we're now going to see a width upload string images say look at file so once again download URL now I want to update to the top with that um URL will just go do you see database of posts foreign foreign okay so once this is done I want to set loading to false we also want to set open to close the mode up through Force then I want to set select set file also to know okay so before we try this because I already know this is not going to work and the reason is because of our environmental keys so if you click this you click this open a post [Music] if we check out storage we don't see anything and this just keeps loading but nothing happens nothing happened the reason is because of our environmental variables and I run the dot EMV here over here we're supposed to use next underscore public so we're just going to take this copy it then we're going to go to our file base here and paste it here as well [Music] as you put G Ctrl c means and this cross enter a change in our meta variables we need to restart the application so go back to our app and we'll fresh the app okay so our app is refreshed now I want to click this click this picture upload go here refresh and see if all our image was uploaded okay so the reason is because this upload post we've not attached it to that button silly me selling me so I was supposed to say here on click uphill first so we'll come back refresh and click here and select an image and we post way too well the same storage is not defined storage okay let's go back 130 import storage okay we see storages mistake mistake mistake no one is above mistake so we'll refresh that you click on the plus click on this pick one upload posts [Music] um I'm not seeing any errors it's supposed to close automatically okay it has closed so let's check check out storage okay you can see post and this and image boom sour image here beautiful in our fire store Data Business If we get that so you can see we got something here with no caption we got this one too with no caption profile image so this is our profile image okay you also have some all right so this one we're going to delete this because this is useless all right so now that we we can upload our post on our database we have to now um display our post to the to the uh feed to the feed section here also we need to make this things clickable because as you can see they don't work currently so go to our header and go to the top we're going to import use router from next yes then we're going to come here we're going to consent router it was to use router okay so then we're going to go to our image here I'm going to say and click push foreign copy this in the community all right so now we're going to go to our home icon like this our plus icon okay say no um Source class name for submission all right so this is okay now I'm going to go to our post no sorry uh post so yeah so in our post we have this default um post here so we're going to clear this because now we want to read data from our database so we're going to clear all of this as well okay no I'm just going to clear the reaction so Wednesday and quartz use effects and new sticks on snapshots ordered by a spirit okay from Firebase Firestone okay so Firebase file store we're also going to import Maybe pull and Firebase all right so over here we're going to create some constants posts set posts because we used it [Music] I want to use effects there's a constant unsubscribe equals to unstop shots ellipse query collection of in database posts let me see order by I'm going to order by because once it is descending order we want the one that is coming latest up here first so we're going to use this times and timestamp uh timestamp I'm going to see descending order okay so here I'm going to say snapshots set post a snapshot put data okay so this is good okay okay snapshots right and descending order your snapshots setting the pool starter okay okay uh here here and then okay we're going to see return unsubscribe okay I have an arrow here somewhere I'm trying to figure out what that error is start shooting [Music] [Music] okay so I have any mistake here okay that's much better all right so DB posts order by timestamp descending order so here we return the unsubscribed and here I want to see if there's any change in our DB has yeah so now that we've done that we also want to edit these things here so over here post.idpost.id here will be post dot data okay so let's check our code and see let's refresh this the element type is invalid let's put it in string somebody from finding okay so where is this error coming from and um you don't have any issue here snapshots use effects or Set Pools foreign if you write it a thousand times something can always have an issue so now posts don't see any issue here first Ctrl C and start this server again and import situation model um okay over here it says you cannot read properties of undefined Post in post we are in post this is a different kind of posts okay okay foreign and see if we get anything in that area okay let's do this I'm looking for an array from post header header header [Music] okay [Music] properties of only if I really mopped I understand what you're saying well to see if I get a foreign okay so what we're going to do we're going to go into post and see if we can create a simple we'll just say if posts the length equals less than zero three turn loading so let's see how that works scene is undefined totally foreign [Music] [Music] let's go back and so the issue that we had was that here in our snapshot we're using dot data sub.docs so please correct that in your code and you should be A-OK so now in our console once we refresh um actually image is not defined that's because we need to go to our post here and change this here to image okay so once we do that this should be okay and we should see our images and I'll see in our images yet it seems like it's still loading so what we do we're going to go to our post here so image username caption ID okay no here should still be image the reason we're changing what we're passing through it is from the process that is still image you just change the image here so and boom cool is working perfectly if you see if you post something now let's put something new like me in blue and we post you can see it's really straight from the database immediately and then it shows the image there's also supposed something with a caption okay let's use this for my previous video live scores application applicants saying yes all right let's go to that post no upload model and remove that yes let's see okay so you can see live scores application excellent now we don't want this comment section to show if a user is not signed in for example if I sign up now and refresh we're still see in the comment section so we don't want that to happen so go back to our post okay so here we want to import session later okay so now we'll come here see coincidence Pizza shop because to use session Okay so we've done that now now we want to put condition where the comment is so over here foreign we want to add some certain things to this puts buttons buttons [Music] okay so over here we want to see post buttons then we're going to see session if there's a session you want to see div class name Flex foreign bookmark icon into class name BTL alright so in our post comments here uh I'll username our caption and then down here we want to create another session thank you this will have our phone we have our emoji icon that's named entire buttons X blue all right so let's go back to our code so as you can see there's no comments the person can't comment until you sign into let's sign in I'll see okay sign in with Google pick one okay okay uh bookmark icon let's go back let's go back pt4 well Catherine select SpaceX ptn okay okay so in our public now styles go to Global C and globals.cs want to create our our BTN class so we're going to compare we're going to see at layer components so here Wednesday dot PTA and we can remove all of this it's not important okay save beats here we're going to see at apply H7 so that anywhere in our application when we use B10 this will just work over skill one two five transition transform duration 200 millisecond is outs also playing top okay let's refresh this um okay what is this thing here okay okay okay so this one syntax error the transition does not exist since I didn't spell it well transition okay okay so we can see everything looks nice and clean so when the person is signed in he'll be able to leave a comment okay so now that we've done uh stops users that are not logging from commenting we want people that are logged in to be able to send the comments to our Firebase so we're going to add the comments uh functionality to our application we just need to close all these tabs just to make it simpler for us and we're going to go to the Post tab J boat okay so we want to set a comments now first of all we're going to create a new state we're going to see constants comments sets comment is equals to use this and nothing is inside okay so now that we've created our user our use State we want to come over to our comment section okay our input here you want to see the value equals to comments they want to see one change set comments okay with the event.target.value type text Focus ring Flex order okay so enter your comments now over here in our button we want to set disabled if if there's nothing in comments also trim it to remove white spaces so this will stop the button from being clicked if there's nothing in the comment section so you also only want to add some class name to this we want to set disabled to be text a bit lighter shade of blue that's 200. okay I want to set our type to be equals to frog meets and on click to be equals to [Music] send comments which is a function we're going to work on now okay so now that we have all that set up we we want to send our comments so we're going to create a new function in an async function I'm going to async function send comments events I want to see event dot create events default so the page doesn't reload comments to send equals to comment and we're going to see set comments foreign so once the user clicks comments the thing he has filled in the comments box gets removed so let's check that out and see on change things like we made an error on unchange okay so if you use that types of comments and post gets cleared because it has to get cleared so now that we've cleared it uh we want to see how it add doc import dots collection import that as well want to paste this in our database post ID and in that post in that post with the ID because we get our post ID from here so in the database of posts in the ID we want to create comments a new collection called comments so that each post has a collection under its code comments and from there we're going to pull out all the comments for a certain post so I want to put the comments comment to send let's see you username for the person that made the comments session username okay they want to see user image session user image timestamp a timestamp okay so let's check if this is working in this uh let's reload this page yes post okay so over here I was saying DB is not defined so close to DB command space is it control space import it it will come back we refresh our comments yes post now let's check out fire base let's go application so we can see here in this documents that's what the application we have the collection in it comments and here we have yes the timestamp user image and username so that is done well our comments are getting added into the database so now that our comments are getting added into database we need to show display the comments for that we're going to come up here to call this down we're going to see constants comments set comments equals to use state it's an object and we're going to use effects you see constants unsubscribe is equals to on snapshots [Music] let's see query I'm going to create a collection gaming posts so we're going to create the um collection of this very post I want to create the code and the comments want to get all the comments I want to order by timestamp and in descending order okay so in descending order and I want to see snapshots set comments okay yes it was reset comments okay so set comments snapshots so here we get all the comments and we want to see on this user effects okay so now we'll get all the comments we query it and we set the comments now we have to display the comments for our users okay so we're going to go to input box okay just above here and we're going to see comments go into your comments dot lens if it is greater than zero and say div class name so you want the scroll bar to be not okay so a full school bad known then here we're going to see comments dot map I'm going to show the image of the person that commented okay so we get the image of the person now we'll also have to display the comments so we're going to say here p-tech so yeah would explain the comments okay so now we're going to download the package of snapshots since on screen is not defined foreign okay otherwise not defined so you can see here our comments being displayed now we need to tell the user when this was displayed to do this we're going to use a special package called reacts movements all right so we're going to go to react moment I'm going to copy the copy this Ctrl C okay so now we're going to run our server again and at the top you're going to import moment from reacts on it okay so now that we import it's we're going to come down so comments here I'm waiting to say moments from now I'm going to see comments dot data dot time stump dots to this okay so let's check that out so you can see here it says eight minutes ago this is a very nice way of showing something so we can come back and we see Niger coda boom you can see in a few seconds ago eight minutes ago so it's very very nice a very neat application so now that we can display our comments we want to work on our like functionality as you can see here this is not so this is not working so let's make this work so I need to go back and to do this we're going to create a new um new state so we're going to come back up here foreign States the first one is constant legs and the second one is set legs equals to U state then we have consent has light sets and slides because to use States and this will be false okay so we need to go back to our heart icon we want our heart icon to change whenever the user clicks the um clicks it but for now we're just going to come to our hearts icon here with some space we're going to see on click equals to like posts so we're going to create the lag functionality first so I'm going to come up here okay you have speed for ourselves and here we're going to see async function like post you're going to see our width set dock documents DB cost ID I'm going to create a new collection called likes and in that collection we'll see a session we're going to put the value the name of each collection to be session dots user dots uid and we're going to pass in username to be session touch user dot user log okay so if we go back to our Instagram map we refresh in combat we click this button he saying dog is not fine let's go back on here talk refresh click here you go to our server application here post click on this so you can see our likes is functioning and it's been stored with the ID of the user so this ID here the username is the username of the person that that made the like so now as you can see in our application I click the like nothing happened this was still like white we needed to change to red to show that yes this user has liked this before in case they log back in or immediately they click on that button so we're going to come here we're going to click this heart icon we're going to and call another height hot icon there is a base viewed you can see hearts icon as art iPhone series foreign okay so first of all we need to check if the user that is currently logged in has liked that uh push before so what we need to do we need to come here we need to first of all download the likes to see how many likes this post currently has you say use effects and we'll see constants on subscribe is equals to on snap shots collection DB costs tiny likes snapshots set legs snapshots don't talks okay so with this we get all the likes that this uh all the likes that this post currently has so here we can just see and with that we can use it to put the number of legs that the post has on the on the posts over here you can put amount of legs that the post has so now that I've got all the legs we also need to check if this user that is logged in currently has liked this post before so we need to create a nice effect instance which effects see sets has liked next door to find index whoa neck dot ID yellow light dot ID equals to session .user dots qid so here now [Music] where all this is not equal to -1 so we want to check if it exists a if it doesn't exist it will be uh -1 and then it will be set as false that means the user has not like this post but if the user uid is inside our likes then it will be set as true so now that we have this we can also come here and put dependency on like okay so now we have set if the user has left so on this our hearts icon or height icon here we want to check as user as it likes this post before if the user has liked it you want to set another candles heart icon so here volts what's the matter with this okay so here hearts icon field on click equals to like boost um class name text with 400 PT okay so heart icon here like post okay so now over here you can see we have a red symbol meaning I have liked this post over here if I click on this it will change to red meaning I have liked this post now if I click it again we're supposed to be removed from the likes of this post and yes we're supposed to switch back to well The Normal Heart icon to show that we unlocked this post so when we go back to our light post here because all our hearts icons come reflect on this light post function that we have here okay that we have here so here now we want to want to say if I'll select times user has like this post before so if the user has liked we're going to awits delete talk delete dock DB course ID likes where sessions don't use a little tight uid okay so we delete the like from the list of likes if the user re-clicks it or has liked it before so else let me take this and we take it inside here so with that now if we click this you see it will remove words from the likes of this post so you remove it if you click it again to add you back so now I want to show the number of likes that uh this post currently has to our users so we're going to go back here I'm going to scroll down so we'll show our username over here and we're going to see like stored lens if it is beta then zero we want to see p class name fenced bold mb1 and you want to shoot likes good things then like little Skippy of space they will check application now you can see here it's showing one legs if we log out and we're signing into different accounts and let's work so slow so slow man please make sure you like And subscribe so I can get faster internet faster internet is the goal so pick this one so we come back here and if we like you can see it increases to two likes me so you can see our application is working perfectly fine engine stop screaming now so application is working perfectly and smooth so make sure you like this video subscribe to see more if you have an idea of an application I should do please leave it in the comments and I'll see you guys in the next one cheers

Channel: Smart Jeremy

Views: 2,187

Keywords: #react, #nextjs

Id: 5wMz84Oz1Dg

Length: 214min 3sec (12843 seconds)

Published: Wed May 24 2023