Facebook Clone Using Angular 9 + Firebase

hey guys welcome back to the live streams so in this session i'll be creating the clone of facebook as you can see on the screen so this is the clone that i created and it's running live on firebase hosting okay so now uh here uh if you don't have an account you can sign up using this quick signup form where you can enter your first name last name email and image for your profile and your desired password and as soon as you hit the sign up button a new account will be created for you and you will be taken to the home page but i since i already have an account for testing so i will use that and this authentication is also being handled by the uh what you call firebase okay so i need to mask this so give me a quick second to do that i think i forgot that so i need to go to my login component just a minute so for the password the type is password okay so let me save that and i can go to my local host here so i have not pushed the changes yet so i will use the localhost to show you the demo so test test.com one two three four five six okay so i sign in with my account so this is the home page it resembles your on facebook home page these days as you can see we have a top header here with a search bar on the left some icons or quick tabs in the middle and your notification icons and your drop down menu on the right hand side here okay you could uh you will see the posts here and you can post something new welcome to the live streaming session and as soon as you hit enter the post will be added here in the uh section in the list section here and the latest post will always be on the top as you can see so you'll be creating everything right from the beginning and you can also log out from here using this log out drop down menu and guys those who have just joined please do not forget to smash the like button if you feel this is good good stuff okay so let me log out from here and as always i've created a blank project blank angular project using the angular cli as you can see i'm using phpstrom as my code editor you can use anything you want and let's start okay so first thing first i'll go to the terminal here and install my dependencies so i have a list of dependencies here that i will be using uh in my entire tutorial first is uh angular fire package to query the angular file database so let me copy the first command here go to the command prompt paste hit enter give it a few seconds to fetch the details and install it meanwhile what we can do we can go to firebase console here and create a new project for us so let's name it fb clone and [Music] continue i don't need analytics create project okay so this will give you a brand new firebase project and let's see here okay it's done the next one is my firebase let's copy it install it and you don't need to use the save flag here because i believe from node version 7 or 8 the npm version 4 above it it is automatically uh there so whenever you install a package it automatically saves it in your package.json file okay great uh next so my firebase project is created i'll enter there and create a new cloud firestore database while the package is installing here create database in test mode next choose the default location click next okay it's provisioning the database let's install the third and final dependency if i could remember properly okay so both are working and let's uh create the folder structure here so inside the apps i'll have a directory name with the name of components then i'll have another one with the name of let's say guards and a shared folder okay i think i typed something incorrectly and she had what did i do let's do it again and what next i was creating folders right okay so indigo pink yes yes yes ah this should be ng my bad and this should also be ng if you're using your angular cli to add the dependencies okay like that okay so when that is installed i'll create a new uh module here using the angular schematics so that will be for my routing okay app routing module there we go so i will put it here okay let's give it some time to complete the installation so here as you can see our database has been created and in the authentication section i'll go and enable the email and password method okay so enable i don't want password password let's sign in i'll keep this unchecked or disable state and then save the changes all right go back to your application okay so i'll use my fb clone here perfect so once that is done i can go and put it here and remove the app routing folder i don't need it so inside the shared i will also create another fold another module that will be my material module and i'll use the flat key here flat switch here so that it will not create any additional folders inside it all right cool that's done let's create the required components that we will be using throughout the codes so we will only need three of them one will be my home component that is this page here the page that i get to see after i sign in this is the home component and this is my login component and this will be my register registration component okay only three of them so let's quickly do that using angular cli i'll use the command and on it is nggc to generate a component inside the components folder with the name of home all right come on next one will be my login component and the last one is my register component okay so to date in order to save some time uh i will do a bit of copy paste in terms of html markup and uh css styling okay but i will keep on explaining what i'm doing so that you guys can follow along with it along with me so i'm going to start the server here ng serve on a different port number let's say 4300 this is my development server uh i can minimize it if i want to all right let's quickly create at the routes while this is happening let's create the routes so the first one i'll create a variable here to store my routes and this will be of type routes we need to import it from angular router and assign it to an array so for the default route okay i'll use something known as lazy loading i'll show you how to do that and for the login route i'll simply point it to the component of login component like that and make sure you write this import statement on top in case your id doesn't do that automatically okay so in order to do a reloading uh route here let's say lazy load route what did you do you need to create an additional module inside the uh required component so i'll go here in my home folder and i'll create a new uh module here i'll name it home module and use the flat flat switch okay that's done and in my home module.ts file under declarations i'll declare my home component here and remove it from my app module by default everything will be listed in the app module so let's remove it from there okay and here i'm gonna import app routing module that is this module and in the imports array i'll import the router module for root method and put the routes variable here and i need to export this voucher module as well so that my my app component knows about it okay with that said i can go here for the default path i can use a method called low children okay and the way you do that is you write a statement here an anonymous function basically so if you go to your angular docs okay lazy loaded module angular so this is the way you do it okay so here you need to point to the path that is components then your directory and use a 10 keyword here or then block here to point to your uh should be home module m.home module like that okay so this will only download the bundle from this module whenever you browse to this path otherwise in case if you do not authenticate yourself any stuff that is inside this home module will not be downloaded and your you will save some http requests all right i see some comments in the in the chat yes uh i'll try to implement some main stack projects uh but that that will take some time because you know me means tag is a huge stuff you have to do the back end the front and everything so and and if i do a live stream it can go over four hours to be honest okay i'll see if i can make a series of tutorials in the future all right so let's continue and i'll also create a guard to [Music] safeguard this route i don't want any unauthorized access to this home route so i'll create uh then i'll give it a name facebook card you can name it anything you want doesn't matter and i'll use a can activate card here perfect so once that is done you can simply put a can activate block here and point it to the facebook that's it so right now if you check the card it will return true okay so it's not blocking anything as of now which is fine we are in the development mode right now okay we have not gone to the authentication section okay i'll also need a folder i remember for the services there we go next let's work on the login form first of all that's our initial page okay so i can go here localhost 4300 slash login this is my page here and it's coming from my app component okay because you remember uh this is your default component your root component so if you want to display your routes you need to use the router outlet um what you call tag here okay so you save the changes and now it should give me uh it's compiling should say homeworks or something like that same maximum calls that succeeded refresh okay something is wrong here maybe let me recompile okay it happened sometimes so it should show you login works okay and what else in the meantime let's quickly go ahead and work on the markup then while it's compiling so i'll start with the div and name it login container i'll try to use the bem naming convention that's block element modifier where you use underscores and dashes like that you can read more about it online let's see it's combined successfully what do we have here let me put it here so this one is still running isn't it yeah so something is wrong with my development so i don't know what what exactly okay come on don't die on me okay let's continue here i'll fix that later so uh if you see this login page i have divided this into a header section and a footer section or a bottom section you can see so everything is here you see is is my is in my header so this is left left header and this is my right header all right i can't even close it great localhost 4300 well this is not expected let me try a different browser then the server is running on port 4300 and i can try 4300 so you see router outlet i don't know what's happening here today npm start so i've stopped this demo page and always go to the fireface link that i have here this is running on 4200 now okay let me close this and reopen something is not right hang on with me sorry for the inconvenience uh close this go here well yeah the routing module is already imported uh using that uh app routing module okay so it's already i already exported it whew come on so please bear with me for a few few more minutes hope this time will run if not i don't know what to do maybe [Music] i'll try some other ite well that should not happen actually fingers crossed let's see okay it's listening now go back to the browser so i have the router outlet here i have it imported uh here right for root yes everything looks good come on test and it works so something is wrong let me just remove this lazy loaded thing from here router outlet okay it loaded something and i don't have a component here that's why component home component save go back there we go phew finally so let me open this in in chrome man okay perfect so we are back in business cool so i will i want to go to the login route here and i don't have anything do i after login okay it's empty so i see the container here which is good let's jump there and finish the code so the header i'll i use a header tag here and i'll give it a class of uh login underscore underscore header inside this i'll have two dips one with uh left and other one let's say login underscore the score header i'm just gonna let's go left and one will be right okay so in the left section you see we have this image and this text okay so i've already copied this image file here in my assets directory okay i've copied all the images that i will be using throughout the course so i think this is the logo yeah that's the logo so the left section i'll use image tag with the source set to assets slash fb logo one alt will be logo and h2 i'm gonna copy this text from here paste it there okay now that's it in the right header i'll have a matte card it's a material card as you can see here so this looks ugly as if not because we have no styling implemented that's okay so let's quickly create a card here and today i will copy paste the styling from my notes because it's pretty simple i'll be using flexbox to align the items okay it's pretty basic thing and right card so in the card i'll create the card content card content and this should be imported perfect and by default it will import the module in the app module here as you can see i don't want it there i want it to be imported in my shared module okay so i'll create a const here that says modules type any array put the module name here all the names here in the imports i'll use the spread operator and in the exports i'll also use the spread operator like this so it will save some with some time to write and i mean copy paste the same thing here and here so this is a neat trick you can use okay now go back to the app module and you import the material module like this okay save the changes and should be good now it's compiling let's continue here so in the math cart content i'll have a form this is your regular html form without any action tags and i'll assign a template reference here because i will be using the template driven approach of angular forms and i'll also go to class of login form to style elements in my sss file and in the form i'll have two inputs one is of name email in small letters i'll use the ng model directive and angular forms not the reactive one the regular the tablet one okay and i have a placeholder text so i'll say email address or phone number although phone numbers are not allowed in this application because firebase doesn't support that but this is what facebook has on their page next is my password so name is password so these name attributes are very important because these are used to fetch the data and send it to your submit method okay type its password and the placeholder should be password also i'll have a submit button here type should be submit but uh okay yeah so i'll give it a class as well uh login button and i'll set the disabled property to only to be disabled if the form is invalid or the form is in pending state right and that's it for the button i guess so i'll okay it says i have errors what do we have here i need to recompile i guess while that's happening let it let it do its job and we'll continue with the form so well i'll use the ng submit method here and i'll create a login method that will take this form as a parameter okay so i can use my ids functionality to create the method in my typescript file and i'll also import the ng form from angular forms on top okay and set this to white to remove this quickly once that is done let's continue after the form i need an attack that is it will go nowhere hash here i will say for cotton account the question mark and a button for create new account so let's give it a class let's say create account button and we'll listen to the click method here click event i will create a new function open register you can name it anything you want right put white here so we will work on these functions later on right now it's more important for us to work on the markup cool so i see people have joined thanks for joining the session and please do not forget to hit the like button all right and go back to the mad card so it's done just below the matte card we want this this text copy it i'm using a p tag here you can use maybe a span tag if you want that's a paragraph tag and i'll give it a class of tagline okay so my header is pretty much finished if i save the changes go back to my actual page this is how it looks at the moment okay and i'll style it later on once i finish the uh bottom section that's the photo section and the for the footer what i did i simply captured an image of the actual facebook page and i'm using the image here it's it's not handwritten it's an image so we'll use the same trick here okay so for the footer image source i have kept it in my assets folder photo save it go back there you have it now let's quickly jump to the style sheet here i don't want any compilation okay let's close the app module so uh let me quickly go to the global style sheet that is styles.css here okay and i'll define some variables here that i can use in my code these are all sas files i can use the import statement here so it'll import everything from this style sheet okay all the variables from here cool so once you do that okay styles and what do you put one setting here the box sizing set to border box how can i forget that so once that is done go back to your login component.css or css whatever you have you first target the login container set the background color to the value of f0 f2 f5 height of 100 view height you height and width of 100 view width position should be relative and it will have a display of flex so i will have the header and footer lined together right now if i go back see their uh position next to each other but i mean change the direction oops to column so they will stack on onto each other like this let me see if i can put it here side by side although it's not responsive i'm not talking on a responsive model as of now but should be enough okay you can definitely create custom media queries uh login header next is our login header so i'll set the height to 70 view height that is 70 percent width will be 100 display is flex of course save it this is how it looks now next i'll use a cap of 20 pixels it's a new property that you can use to give a bit of spacing between the flex items so save the changes and if i go here you'll see there's a bit of spacing between the two elements okay next i'll align the items to center and justify the content to center as well so this image is pretty huge right now so now i want to go inside my header and that's the left header i'm using this ampersand ampersand symbol that actually targets your parent name so it's basically i'm writing something like this so login header then login header underscore left like this okay now inside my left element i'll set a width of 580 pixels padding right should be around 32 pixels again i'll use fill i'll make this a flex container so that i can do some alignment and use the justify properties okay and again the direction will be column so that they stack uh from top to bottom i'll align atoms property set to flex start save the changes now you see this is how it looks okay next i'll talk let me just minimize this i'll target the image okay let's check the chat okay cool we have quite a few viewers joined today thank you guys really appreciate it and please do not forget to hit the like button smash it as many times as you want and please share this video with your friends ask them to join this live stream if they if they can alright let's continue so the image i'll give it a height of 56 pixels uh marching right i'll give 32 pixels margin bottom 20 pixels save it there we go now it looks much better isn't it all right for the heading up sorry h2 element we'll set a font one size of only eight pixels font weight normal line height let's put 32 pixels and a width of 500 pixels so this is how it looks this is the final product okay so this is where my left ends left ends here cool and next i have my right section so inside the right i have a card if you remember right i have a card here that has this class assigned to it so i'll target the card or the class or rather underscore underscore card so i'll give it a height of 380 pixels and a width of 400 pixels save it this is how it looks i can expand it even more if you want all right set a padding of 10 pixels all around about give it a border radius of 10 pixels to have some rounded corners and a margin bottom of 30 pixels so we have some spacing here and we have these rounded corners with a nice drop shadow automatically this is automatically uh there when you use a matte card okay next is that this card we have a content let's see we have if we have a class no we haven't so let's give it a class so login header right card content yep go back for the content i want a padding of 5 pixels all around display of flex and flex direction of column to stack everything vertically okay next we have the login form i'm nesting everything uh as per the structure here okay but if you don't like nesting things you can definitely uh call them out of these uh nested blocks it'll still work okay this is simply just how i like doing it but you may not like it some some people don't like the nesting uh functionality of sas but that's all right it's their personal preference so if i type dxdf so it's display flex shorthand select election column i'll give it a gap i'll give a gap of around 10 pixels okay they're spaced properly next i'll target the inputs all all the inputs okay all of them so for the padding i'll say 20 pixels outline should be none border should be one pixel solid light ray and a border radius of five pixels save it let's see there we go let's check the chat window okay nothing much now i'm going to target the placeholder this is this password text okay and the way you do it is using the sudo selector placeholder font size 16 pixels and a font weight of normal this is how it looks uh let me remove the password from here delete delete okay cool next after the inputs here i'll target the login button that is this big fat button and i think i forgot to put the text here should be sign in cool so the background color i want to set it to the primary button color variable that i defined in my global style sheet this is this blue color so let's see if i save the changes this is how it'll look oops next i'm going to give it a padding of 15 pixels with the outline set to none border set to none and a border radius set to 7 pixels the color of white for the text and a font size of 18 pixels 18 pixels font weight bold margin bottom of 20 pixels and a cursor set to pointer that looks nice isn't it next you go outside the login form okay and so this is where login form ends and i'm targeting that anchor tag so text decoration is set to none color color set to that primary text or button color rather this is the same color text align text align center border bottom i'll give one pixel solid light gray to save the changes do you see any border we don't because we haven't given any paddings or margins so match in bottom should be 20 pixels padding bottom should be 30 pixels and cursor pointer save it do you have a nice border here there's a cursor only thing left is your sign up button and this text okay so this button has a class of create account remember i'll use background background color success dollar success button color display i'll make it inline block so i can give it some width and parents all those things align self since this is also part of the flex container and this is a flex item basically as my entire card is a flex uh flexbox container so i can use the align self property to center it as you can see i'll use outline none ball none border border none come on border radius seven pixels pairing 50 pixels and 30 pixels color should be white font size i want it to be in pixels font weight pole and cursor again set to pointer save the changes there you have a nice button which is the same as this final product okay spit up i guess that's all right so here in the final version it says login so let's rename it to login here okay next we need to style this tag line so i'll go outside the card my content is my card card ends here outside the card i'll go to my tagline and text align it center with a letter spacing of 0.7 pixels okay so i forgot to put the create a page and unders under strong tags so it will appear bold okay so create a strong tag here and wrap this in the within the strong text and have this bold uh we got bold display here okay for the footer it's an image as we know so we go outside the header here so we target login footer login footer i didn't give it a class so let's give a class of login underscore footer footer and a height of 30 view height a line itself should be flex end width of 100 pg color should be white cool and display flex align items i'll use center and justify content i'll use center again and for the image that is inside the footer i don't think i don't need to into anything okay i don't have any specific settings for the image tag so that takes care of the photo section this is how my final page looks like if you want you can give some top march in here so let's give let's say uh there's my login button oh sorry create account button i can use margin top 10 pixels there we go almost similar doesn't make any difference as such next major component is my home but before i do that let's quickly finish the registration uh component and i'll open i'll open it here using the keyboard shortcut okay register component okay and for the time being i can go to my app module here so i can see something happening there i'll use the register component here okay so i can style it here and create it okay for the markup i'll use a section here glass off register and this will have a header and a body okay pretty much it's a pretty simple markup so the dev of class header not matte header just header here i'll have h3 that says sign up and below that i'll have a p tag and say it's quick and easy and i'll have a body here not mad come on and again i can borrow some code from my login component a form here let's let's write it it won't take much time so inside the form i'll div let's say user name this will have two inputs placeholder will be first name the name attribute i'll use fname and ng model directive second one is last name short form is l name i'll use here last name as the placeholder both are text fields perfect next is div for the email and password text placeholder email name will be email ngmodel next is my image url name is avatar i named it avatar and the last one is my password so the type should be password here and the placeholder should say password and i'll have a disclaimer here that says uh by clicking sign up you agree to our terms and conditions word wrap uh how do you for trap here i don't know let's leave it as it is and i also have a button that's my sign up button button sign up this will have a type of you guessed it right submit class submit button and i'll uh use a special directive here from the angular material that says matte dialog close so i can get the form value from here uh to the model that i will be using okay so i need to import this basically i need to go to my material module and do some imports so i'm gonna import all the stuff that i will be using shift alt shift enter okay so this dialog module will take care of this this thing here okay cool so while it's compiling uh if you go here this is how it looks i'll quickly uh paste the style code here in its component register so these are the stylings so you will find this in my github repo i'll share the link in the description of this video okay so if i say the changes still compiling is it give it some time x4 class it has some errors okay now it's gone come on i have to restart it all right so while it's compiling it'll take a few seconds to finish the compilation in the meantime i can go to my home component here error occurs in the template of component illustration form dot value yeah so the formula value is not present because i need to use the template variable here now if you save that error should go away and refresh here okay actually i need to make some changes in any of the typescript files or maybe here so it's looking for some change basically let's do something here cool now we are back refresh there is our sign up component and this is fine because this will be displayed in a model all right we will do that later on first we need to work on the home component so for the home component uh i'll divide the entire page in two sections one is the header section and the other one is the body okay and inside the header and body i'll have multiple sub sections okay so i'll start with the div of class home container and then inside this i'll have another div that will be home underscore header next below the header i'll have home underscore body so these are the two elements so i can go to my default route and i see two depths here okay perfect inside my header i'll have another div to hold my home header left section one middle and one right so this is my middle and it's my right let's code the left section first here i'll use image with the source of assets and so this is the logo i captured using uh using the snipping tool i captured the logo and saved it in my assets directory and i'll give it a special matte card avatar directive okay so in order to use it use this directive outside a matte card what you need to do you need to go to the root component and use a matte card here with a style of display none okay so basically i'm not displaying any cards here but that will be there in the dom but it will not be displayed simple it's a fancy trick fancy hack basically to use the avatar directive outsider mad card next below the card i need this input that will be my search search bar and i'll use my icon also name will be search outline this is this sorry [Music] magnifying glass icon okay so if i go here oops material design triangular where was it yeah there it is so search outline it's not so search it should be search not search outline and it still doesn't work i wonder if i added the icon module there okay it's added says that icon is not a known element so it's compilation error oops not served should be so so while it's compiling i'll create a form element here although i'll not do anything i'll just put it there let's sit there to nothing i'm not doing any searches using this search box okay so refresh refresh oh so you see we have a module here for home itself right we have to do import module all right that's imported strange so if i instead of doing this let's say right i can module save the changes does it work come on it's behaving really strange today somehow let me put the other modules as well matt batch watch module and forms module menu module and match button marching well i guess i will not be using this uh home module for the lazy loading okay there we go search bar is there now if i go here and say i want to use matte icon come on and name is search save it's not giving me any icons that is really really really strange man all right let's do it simple way go here put everything here so basically i'm not going to use the home module for anything and remove all of this stuff save the changes refresh dick and module is there this should be [Music] don't get any errors okay so it works now all right let's get rid of this home module i'm not going to use this remove it go man so this is done left section minimize go to the middle one and for the middle we have a few divs one will have active class active okay so i'll remove the class as if now i'll create the structure first so i'll use that icon home i'll copy this one two three four five six maybe five last one i'll use the flag here i'll use the group i can here i'll use the store i can and for the second one it'll be on demand underscore video so i save the changes these are the icons okay and you can find the exact icon from this list all right that's my middle section done and the first icon i'll give it a class off active now let's concentrate on the right section the right i'll have a div inside this i'll have an image source as unknown as of now all it is unknown uh this will be my actual avatar basically i'll use the avatar here get a nice rounded icon here and i'll also use a span the class of name this will be so let's play my name here my name there we go below this tiff i'll have material icons the way i had have it in the middle section similar similar way matte icon first one is add for the second div i'll use another mad icon the name of forum but here i'll give it some additional attributes like matt patch you can set some attributes patch color set primary matte patch overlap so you can find about uh these attributes from the official documentation right that patch position above after save the changes see see anything see nothing this is what let's say this is not recognized attribute my that matpat is not out here save let's see so the compiler is not able to compile these things in real time the webpack is not able to do that well yeah you can definitely use mysql instead of firebase but the reason i'm using firebase is because first of all it will save time okay we don't have to work on the back end uh structure there it's already there for us and it's it's real time so whatever you do in the back end it updates uh real time in the front end okay so if you post a chat message that will be appearing instantly without any refreshes all right cool so i hope that answers your question let's move on so everything is compiled now because i was missing this batch module here so nice compile and if you go here you see this nice patch icon okay let's work on the next div here that will be my another matte icon with the name of um notifications it will be the bell icon and i'll set the same attributes my patch set to let's say three my patch and see now i get the interest as well so i was missing that module all right so overlap set to false and what else my patch position is go after save it there we go perfect next you go down here and i will use matte icon that will trigger a menu okay so i'll name it menu here and this is expand more all right now again i'm missing and missing the module i guess the menu module do i have it here no so map menu module import it save go back so it might fail again i'll restart the compiler and while i before i do that let me finish the code map menu so inside the menu i'll have a button and we'll have my icon name exit to app and let's say log out button will have an attribute matte menu item okay let me quickly save the changes but still fail so terminate it go back to npm start and that should fix it okay and this map menu should have a template variable and filter back menu perfect so this is the icon okay this is this uh expand more icon okay now if you go and click it you'll see this drop down menu appearing okay so that concludes your header section header ends here now we need to work on the body so the body we have three sections the sidebar left the right the middle one and the right section so the right i used again an image to save some time so let's quickly do that i'll copy the code here i'm going to copy some code this time it's pretty much the same thing as you can see it's a dip with the sidebar left class in it inside that i am using the avatar here so i can simply ignore these stuff as if now because this is this will come when we authenticate and show the data from the from the back end okay so this is all coming from mat icons okay save the changes and this is how it looks right now so this is avatar just not it doesn't have any image as of now and this is my right sidebar may show that here test test.com one two three four five six so this is the right side side but you see here it is actually a text uh sorry an image okay and if you notice that my right sidebar and left sidebar are fixed only my middle content scrolls up up and down okay this is exactly how facebook behaves so implement that as well and for that reason i have kept all of this inside a parent diff element here okay similarly i'll put the content for the middle section it's pretty simple okay again i'm not gonna loop through the variable here as of now remove it save the changes this is the middle section okay you have a input field you have your image here and all these mat icons okay now we need to style these to get the final result to appear as this okay and also i'll ha i have these cards here okay if you go that's there in the middle section so [Music] uh it's here so continuity top this is the card section that you see here and since i am not using any loops as if now so you don't see any card here in my final uh output here this is coming from the images right so basically in my home ts file i'll create a create an array to store some dummy images like uh let me image urls okay these are the urls and based on these values it will loop through here so i'll put the ng for directory here again let i of images now if i save you'll see six uh cards here okay these are the cards so it's pretty ugly right now i understand because of the css uh not in place and we'll work on the css next let's start with it go to my let me what happened uh let me of course 168. yeah so i don't have it here right now it goes like import import ng form directive next uh save everything looks good it's happy now still not happy oh 168 ways 168 okay man delete i'm simply gonna comment this out all right i should be happy cool because this is the data that is coming from your back end we don't have it yet next uh i need to jump to the css file first i'll import the styles from my global style sheet and i'll target the home container here display flex plus in column so it's for the entire thing so header is on top then we have the body stacked on top of it position relative and background color should be my body color this is this gray color okay this is light light blue or gray whatever you want to call it that's the color see here all right next header section i'm targeting the home header class so first of all i'll put a set index because we want to create a fixed header and i'll give it a large value of thousand and give any value you want just make sure it's large enough so display flex not inline flex flex align items center justify content space between it'll automatically position everything from left to right background color i'll use the variable header color padding of 5 pixels all across position i'll use fixed okay this is the main uh attribute here of css property here center width hundred percent and set the top value to zero so will start from the very top here this top left corner and this is the flex and i have set okay now inside this left header so target the left block and display flex margin from left should be around 10 pixels align align items and make and remember we are still inside the header okay we have we are working inside the header parent container only so i'll give a gap of 10 pixels between the logo and the search input and this will itself have a flex property of 0.5 because this itself it is a flex item if you remember we have set the container as flag so this is this will be here as a flex item also i have made it as a flex container okay so you can nest the flex box containers and items as per your need okay so now inside the left i have a div class of input see do we have that so header left a class of input here perfect so i'll position it relative a width of fit content and input that i have i'll set the outline to none border to one pixel solid light gray background color to f0f2 f5 padding 10 pixels top and bottom 40 pixels left right and what radius 20 pixels save the changes let's go back here this is how it looks okay so i'll target the place holder and the padding left property i'll set it to 20 pixels font size of 15 pixels next let's target the search i can i didn't give any class to die where is it here it is class search icon position will be absolute from top 6 pixels font size i'll use extra large and from the left i want it to be placed at 10 pixels and color of 8288.90 gray color so it play it positions itself nicely so this is my left section left ends here now let's start at the middle one so let's save some time let me copy paste some code just a sec if i save the changes go back this is how it looks okay so you see i've given it a padding a height a display flex property and then we have tips inside the middle container which are holding these icons so i've made the active one blue with it with this uh bottom border and for the bottom border i used a pseudo element known as the before there are two pseudo elements known as before and after you can use them to your need okay and set up position of absolute give it a border of four pixels right so it'll position itself from the from the bottom and with that done so this is middle and next we have the right section okay little ends here next yeah right to the right i'll use flex of 0.5 again save it so now it's centered as you can see and let's put a height of 100 percent display flex line items center vertically justify content should be flex end they will jump to the end as you can see here will give a padding of 15 pixels gap of 10 pixels they're placed evenly next i'll use a wildcard selector here to copy everything and a margin margin right off 10 pixels cursor set to point now if you hover it will give you a cursor a pointer thing next we have span in class of name with a font size of 16 pixels then the divs i want to display them as flex set them as flex containers align their internal internal items as center then the span tag if there is any will have a margin left property set to 5 pixel there we go next i'll use the not pseudo operator and i'll target the first of type okay so this basically this says select any div which is not first of type so any element which is not a type of depth okay if i may say that uh no so basically this says select all the divs which is not the first of its kind so if you have four divs it'll leave the first one and select the rest three dips all right so much confusion here so background color should be e4 e6 eb save there we go so this is my header section and we are done with the header as you can see everything lines up properly and if you get this nice hover effect this is my border bottom okay this is my menu okay next we need to work on the body body section home body so first of all i'll give margin top of 100 pixels because my header is fixed so i need to give some margin from top so that i can see the content okay background color i want to be body color let me check the chat window quickly hey then thanks for joining it's my pleasure so please hit the like button and share this video with your friends all right and i appreciate your time and thanks for joining so let's set the width of 100 height of 100 view height again display set to flex justify content space between to evenly space out the things from left right and padding top i want to give 10 pixels and align items will be flex start if i do this let's see how it looks nothing much somebody sidebar so the sidebar i'm gonna target sidebar left position is relative and i have a div in the name of inside okay i'll set this position to fixed as soon as i do that something's changed here you can see let's say padding 15 pixels margin top 5 pixels and width of 350 pixels i'll make this as a the inside div itself as a flex container flex direction set to column and a gap of 20 pixels so where is it everything is stacked from top to bottom as you can see this is my right bar okay next we have this user avatar so we i'm gonna collapse the header section so we have this div class user avatar okay and that's inside the inside container user avatar i could not come up with a better name so you can give any name you want for the class align items center above 15 pixels and this has a span of name [Music] with a font size of 16 pixels pixels come on next i'll target all the divs gap of 20 pixels one size of 16 pixels line items center mat icons color should be 1 8 yeah this blue one font size extra large with fit content and height fit content then i have this uh see more and the loss of type settings so you should see the changes once i manage the middle section it's taking a lot of space okay so let's let's do that right now so go to outside sidebar left so this is middle body and for the middle body i'm gonna copy paste some settings here because i'm targeting the middle container here making making it as a flex box container setting the direction to column as soon as i do that you see the content which was missing it appeared here and for this nice uh cards i can show you something under the top section i have top and center so on the top i have these image cards so they each have has a width of 120 pixel and a height of 200 pixels with the water radius of 20 pixels okay and when you hover this scale to 1.06 okay so these are the properties of the span tags uh this is that uh this what you call this name that you see here my name here this is the span tag if i could go back to the markup quickly to show you so this is this fan tag that says card name so all those spam tags here will have the same same settings basically next we have image that has a class of background so this is the image that has tasks of pg background so these are the properties max width and one one setting so if i remove the object fit so this will be like this stretched and not uh filling the container properly so this is the css property that you should use object fit cover for the images specifically okay this will give you this nice effect here okay next it's set to the images set to absolute to fill the entire container max word is at 200 percent okay and i've set the transition property to all because whenever you hover on the image um so it'll uh basically give you this effect right here because i'm transforming the image as you can see here so i have to set the transition property on the image okay next we have this avatar so this avatar is position on top left here using this position absolute value and a set index of 99 i've given a higher red index so it will pop up from the other content okay next we have this card this card is in the center section so it has a glass of post message here okay again so it's a matte card component as we all know and we have seen it many times now i've given it a border radius of 10 pixels made it a flex box container okay so it has a header section here and a footer or body you can say so that's a body okay it's pretty simple markup here or and styling here okay these are all mad icons which i got from this list and so that's all about the markup thing okay so we have to pretty much done with the markup so now we need to hook up with our back end and fetch some data okay and before we do that this is my right feed i i want to show you the right feed section quickly that's just an image and this is the image that i captured using the snipping slipping tool because it really really doesn't make sense to write all this stuff here but you can do that if you want to practice the html and css it's good even if you want to do that it's good uh but i'll save some time here by using a image and for the pro i'll uncomment this when i have this post already defined okay so let's work on the home component here so now you see i have a form here somewhere this form okay this submits the data okay so now if i just show you console.log form dot value save it okay go back to my browser go to the developers console and type welcome here so i get a message property okay this is my invert input field input fields name okay message now i need to create a service uh if i don't have one i don't have one i need to create a service that will communicate with the back end with the fire base backend and before i could do that i need to get something from here to some settings okay so let me create a register the app will give me some config information i'll simply copy everything from here till here and go to my code in my environment es file i'll paste the entire config here and remove the equals with the colon and i have to replace this with single quotes and do not forget to copy same code and paste in the prod file as well because this is the file that gets compiled and filled in the uh production builds okay so if you when you run ng build prod this is the file that has been considered okay save the changes and close up close them next i need a post service and authentication service okay so let's create two of them go to the schematics create a post service and also i'll create another one that's the art service okay let's work on the post service supposed service well i'll inject a few things and before i do that let me go to my app module app module i need to import the angular fire module yeah i'll use the initialize app method and i'll point it to the firebase config okay also i'll use the i'll import angularfire store module so i know i will be using it and angular auth module save it go to the console compiling if it gives it gives an error stop the compiler rerun it okay that's how it works once that is done i see us quickly here so start the compiler we compile again okay with that being said i will go to my post service i can inject now angular 5 score using the angular dependency injection angular store service angular fire hot service angular fire off not the module the or service and nothing else okay i'll define a local variable here that is current user of type firebase user that will import import the user interface from firebase okay and in my constructor i will do i'll go to the af auth and i'll have off state observable i'll subscribe to it this will give me a user value it could be null or of type user so i'll assign this to my current user so this current user will either be null or an actual user okay now i'll define a couple of methods first one is guest get all posts from the back end this will be of type of survival of any and i'll return this dot fs i'll query my angular file store and i'll look for the collection of natural posts and i want to actually order the post okay so i'll use an anonymous function arrow function i'll use order by method here and i know my fields will have a time stamp i'll order by the timestamp value here in descending so the latest post will be always on top okay and i'll use the snapshot changes method here so there are two methods one is value change value changes and the other one is snapshot changes the difference is that if you want to get the id of individual documents you need to use the snapshot changes otherwise if you only want the data value changes is more than enough but here i want the id to return as well so i'll type it with the map operator this is the rxjs operator sorry you need to import it from rxjs operators package and this gives me an act array of actions i'll loop through each item here and i'll return a new object that will have id which i will fetch from the item.payload.id property okay and rest i want whatever data i have just send it as it is using the spread operator right so it's giving us quickly here it says okay collection let me put here any now it goes away cool so this will return me an observable of any next i have a post message method see if you type white and it will take some parameters the first one is the actual message in form of string second is the owner name normal string and any other items that you want to pass okay let me minimize this and for this method i'll simply reach out to my firestore collection of posts and add call the add method here to add a new uh message so in the title i'll display the owner name and the user id i want this dot current user id dot uid and this is a property of firebase user and since this is also a type of firebase user it will have this property with in it i said my post will have a time attribute so this will be set using the firebase time server property so i need to import firebase so yeah import star as firebase from firebase cool so firebase.firestore dot field value and a server timestamp method that will automatically put the current service time timestamp in the value and for if there are any other items so you see it's grayed out right now that means it's unused so i want to use the spread operator and add any other items that have been sent in the parameter list okay so now i'll use a 10 block here so this response clock the response in the console and if there are any errors you can also lock that in the console okay that's done so post service is done let's quickly go here in our home component.ts file i'll define an array of posts of type any array i'll use i'll define a variable a few type of user data and this is a special type that i will define in my auth service okay so let me put it here that's my user data i'll import it from the odd service we'll have a first name last name avatar email and an optional id field okay with that done and also store the subscriptions here so i'll use a variable of type subscription that's the type you need to import from rxjx package okay and i also want to implement the on destroy interface and in my own destroy let's do that first i'll loop through all my subs okay and call the unsubscribe method that's it our type should be white of course in my ngo in it i'll store this subscription here so for that i'll go to my post service i did not inject it here so i need to inject that uh private post service post service check the check window quickly cool so people are still there with me and i really appreciate that for staying this long i know it's been over an hour and a half i guess so really appreciate that so here i'll fetch all the posts subscribe then i'll get all posts and i'll store the posts here so now if i go back to my template that i commented out so i'll remove it from here okay and if i save and go back to the browser this application so you don't see any errors here which is good and we don't see any posts here as well that's fine now uh we also need to store the user right so this not sub push i'm gonna push another value here that will be my top service i did not inject that did i private top service service up service so i'll have a method let me just first go to the odd service and finish it here i'll inject my angular file store angular file store also my angular 5 path triangular file path okay put some gap there i'll create few variables so private user data of type observable of user data [Music] firebase dot user okay i'll have current user of type user data and i'll have a observable as well which i can subscribe in my components for a real time update update uh from the service yeah initial value is null and the type of this behavior subject is used user data okay so in my constructor when the service is initialized i want to check user data is f dot hot state okay it's the firebase user there's a written media firebase user observable you can see observable this is also same so i can assign it next i'll subscribe to it so give me a user if the user is there and it's not null so i'll go to my collection of users okay this will be of type user data so whenever you register yourself it also creates an entry in this user's collection because you cannot directly fetch the details uh or store the details of your user like email first name last name in the default authentication section so you so if you want to fetch those details you need to create a collection and store those details there so and i'll refer to the individual talk or document inside collections you have documents okay so to get the exact arguments i need some id right this is also type user data for the id i'll use user dot uid okay that will have the user id and since i don't want any id from the database i'll use the value changes method to get only the data and subscribe to it current user okay so this dot current user goes to current user and this dot current user observable will emit a new value that is this and i will say if current user is not equals to undefined right this else oops so this will be set to null so we are done with the constructor method here let's go out create our own method current user this will return me an observable of user data and i'll use this dot current user observable dot server so i can use the as observable method to return the information okay next we have the sign up method that's the big one and it take it'll take an email of type string password type string first name of type string last name type string and let me put these in separate lines and avatar url which will have a default value i have a link here for a default image so the default image will look something like like this okay so i'll use this as a default value here in case you do not provide that avatar url in the parameter list return type is white in the body here i'll go to my auth service and create user with email and password email and password i'll supply this gives me a promise in return so if response is there i'll go to my angular file store collection and i'll look for the users collection and i'll create a new document there and for the new document id i don't want to generate a random id which it uh does by default i want to supply the id that i want and that that should match with the newly created user id so that will be stored under rest.user.uit you see my ide helps with me helps me with the intellisense right so i'll set the properties which i pass in here i'll set the first name last name email avatar cool and this will also give me a promise so once this is done i'll go to my collection again use the data and collection name is users to fetch the data i'm going to face the newly created account right to the document i mean and i'll put that in the variable i'll emit that to my subscribers okay if user is there just that current user observable offer let's set the current user and current user observable will emit the next only to current user all right so this is my then block it's a long error and i want to change this everywhere when i'm using a 10 statement here i put the one there and i'll also put one okay so i have two then blocks and two catch blocks perfect so this is done so basically what i'm doing i'm creating a new user account with email and password and this account is created i'm storing that information additional information in a new collection document and once that is done i'm setting that current object current user with the newly created user okay simple next i can use trader method to return the user data observable of firebase.user so return just not user data so user data is an observable of firebase user okay i can return that as well if some component needs that so i have the last method that's the sign in method not loss i guess couple more email string and password string symbol so i'll reach out to the af auth and there's better sign in with email and password this is all these methods are coming from my angularfire package okay it helps a lot uh with communicating communicating with the firebase backend right so this dot user data will be desktop af dot auto state again and basically i want to do the same thing here that i did once this is done i'll add it here so go to the user store okay if it's authenticated go to the user's collection look for the user that was authenticated stored the information in the current user variable and emitted next this is still here okay copy and paste save next method is the logout method again it will return void nothing so this dot fr thought sign out and this returns a promise so once you've signed out what i want i want current user set to null and this current user will be emitted and do i have router angular router injected no so i need my angular router package here or service to send the user to the login page that's it the last method is uh search user database so it will take a parameter that's a user id that you want to search and observable of user data okay so return just.afs the collection users type is userdata and it will look for the user id that you provided and return the value changes that's it so my odd service is done pretty much and next that we want to do is go here and try to post some message okay so i think i have the pro service injected here i can go so first of all let me restructure the message from here using the es6 method so this name should match the name that you have here in the form basically so you have the form middle top yes sorry uh center top this is a form and this is a name so the variable name should be same here otherwise the destructuring will not work simple so once that is done go to the post service and post message simple so with the message i'll use message owner name the owner name i'll use template strings and this dot current or this the user what so to store the user i guess i'm not storing it am i okay so i need to go here first in the enchant on edit method so i'll go to my op service go to my current user subscribe to it this dot user user cool this dot user dot first name space just.user.class note okay so that's my owner done next what i have what do i have i have other items right put a comma other items so the other items i can say i want to send avatar this dot user.avatar i want to say last name this dot user last name and first name all these things i want to send to the back end and once that is done i want to reset the form okay let's test this out first save the changes go back to your browser and close this okay so test post something went wrong cannot find property first name of null that is because you have not authenticated i don't have any user cool so let's implement the card now so the guard we have a facebook card here which is returning true right now so for that check my router i'll uncheck my rectangular firewall and also insert my service my own auth service come on as you can see this expects a return type of observable of boolean a promise or a boolean so in the return we will use the odd service and the user data do we have user data yeah we have here capital in capitals right user data this is an observable as you can see and i can use the pipe operator here and i'll use the map operator from rxjx to check whether the user is null or not okay so give me a value a boolean value basically and import tab as well because i cannot return uh observable of firebase user it's it is not what this can activate method expects it wants the uh return return type should be in in boolean right so we need to do some conversion here to make the output as boolean okay and if i get a false value what i want i want to send the user back to where he came from that's the login page and otherwise if that's not the case return the value and he also written value that's about it so once that is done if you go back here you'll go to the login url as you can see but remember we changed that component so let's go back to app module app routing module and change it from register to login component save the changes and we need to go to the login component or service we need to inject that because we have some methods defined here the login method and all so let's use those methods for the login i'll extract the email and password form dot value okay and i'll store the subscriptions in an array so apart from auth service i need angular firearms my router router and additionally to communicate with the model i what i need is a matte dialog i need to inject the mat dialogue service here okay so and my energy on in it and push a subscription that will be my hot service user data user data dot subscribe if user so if user is there i don't want to do anything i want to send the user to the home page go there you already signed in come on and since i am storing the subscription in the component i want to unsubscribe it from when it's destroyed so this starts ups dot map s dot unsubscribe okay and the return type is of course wide now in the login form i'll check first if the form is well if valid or not if it's not valid do don't do anything return from this function call otherwise go to the service and sign in and what do we need we need the email and password and form dot reset simple and for the registration what i will do i'll create a dialog reference and this will be from my mat dialog func uh service so this requires a component and some configuration okay so for the component i'll point it to the registration component and for the configuration it takes an object and i'll give it a role of dialog and my ide helps me with intellisense so i'll get a height of 480 pixels a width of 40 pixels as well and i want to look for the lesson for the after closed subs observable so when you close the dialog whether you submit it or not close it and you get a response back okay result back so i want to extract uh some i mean i want to restructure this result variable it will have a first name last name email password avatar okay if result is not equal to undefined then i want to go to my op service and sign up with email and password and i'll pass in first name last name because remember it takes all these parameters okay first name last name of author let's return here now in my register component.ts file what i need to do i simply to inject one uh service that's a dialog uh material dialog dialog ref service and this is the of type register component that's it so let's let's see uh whether we get any data or not so i'm not gonna i'm gonna comment this out as of now and i'm gonna console log so log result okay so let's save this and go back to the browser okay it has refresh i guess now now this is your model and if i open the console clear this out if i simply close it this is this becomes uh hang on i need to comment this as well save it go back close it this is undefined okay my result is undefined but if i fill anything here and hit enter so i i get a response back this is with the help of this dialog ref okay that is pointing to my register component and it's passing that information to my dialog graph here okay it's pretty handy now i can use this data so i know it's coming up it's coming there so i can uncomment this so if this is undefined right i want to return else return save it now go back here uh this is my this is my database right i don't have any users so for the user i don't have any database any any collections as of now so if we go here i don't have any users as well let's register our first user now create account this is john doe test at or maybe john test dot com for the avatar uh let me check choose one oh let's keep it blank let's see what happens right password one two three four five six and if i hit sign up there we go it's blank and if i go to my database if i refresh the authentication section first i see my user has been registered successfully if i go to my firestore store i should see a new collection here the name of users and avatar is black all right so i think instead of putting it there in my registration function so hot service sign up i have a sign up method here and cut it from here and create a variable here maybe default avatar okay and go go here avatar or this party for the water i'll do a check first that kavathar equals to empty string [Music] um [Music] so we can check here let's do it here if avatar is not supposed to undefined or avatar is not equal to empty string or if it's undefined rather let's do it this way if it's undefined or it's an empty string then we want to set this to default avatar okay otherwise you're not bothered about it right save this changes and i'm quickly gonna delete the collection here so that i can register again and see if this works and i'm going to delete the user okay now if now if i refresh i should be thrown back to the sign in page go back john doe test.com i'm leaving it empty so one two three four five six sign up something has happened let's see perfect so it's injected here although it's not appearing here i guess we have not defined it in the template so in the home template i need to go to the header and [Music] header middle not middle we need the right one avatar here so this should be which of my notes should be i'll bind it to user dot avatar save the changes perfect you see this nice face here similarly i'll change this to user dot first name or unknown no no let's say default user save so it should be replaced by john doe or john perfect and what else now we have to go to the sidebar we have a user here user dot first name and source okay and i'm gonna find it user dot avatar name here the name should be user dot first name space user dot last name john doe john and here we're missing the image that's the middle content so middle content we have here go down yep user dot first name and for the source we have user dot avatar save cool now i can post messages let's say hello from john there we go perfect we also see the timestamp here that's done by angular here so this is this conversion is done by angular so i can use medium date instead of short so i can get the uh what you call timestamp in a better manner or let's say what all the attributes we have here so i can go to medium or i can check the properties of this pipe here so what it takes a medium medium date long date i want something like this and let's set this one right so i'll simply use medium save go back there you go perfect now i can show you that uh as this updates in real time i can go open in a new browser okay go to my localhost 4200 since i'm not signed in i'll say this page go to my signup form i'll say susan smith email is susan gmail.com for the image let's search for an image url file click and i don't want to violate any licenses which one which one uh uh i don't find any attractive pick here profile pic um let's say use this one let's see a copy link appealing queries copy link image location nope it's too big profile pic image come on man okay let me copy this link and paste it here password one two three four five six hit sign up okay my pick is there a bit off that's all right and susan can post something here hey john welcome to the to this clone and it appears here as well this is the beauty of firebase it updates information in real time and please don't mind with this picture uh this is just for educational purposes if anybody anyone has any issues i can remove it although i will remove the database so it will not be there anymore after this video is over so i hope you guys liked it so this so we have come to the end of this tutorial series and you can do much more here you can create additional forms here when you click this because in facebook when you click this input box another dialog box pops up where you enter your post you can upload images all those things you can do that and here as you can see i have these notifications i can sign out as well okay so i know i'm not hooked up i guess with the sign now thing so more okay this is this log out right so i want to listen to the logo oh if we click that it should that should lock me out so go here hit log out it happens okay so it should lock me out let's see yeah it works perfect well with that with this uh i would conclude the session here and the live stream has come to an end i hope you guys liked it and thanks for staying with me so long i really appreciate it and i've seen all those comments and the likes and so many participants it's really encouraging so guys uh please uh share this video with your friends i'll upload this video once it is uh saved and i'll also update the github link in the description of this video so feel free to uh copy the files and fork the repo if you want to until then enjoy have a wonderful day i'll see you next time bye bye guys take care

Channel: Programming's Fun

Views: 37,405

Keywords: facebook clone, facebook clone using Angular, facebook clone using Angular 9 and Firebase, fb clone using angular and firebase, angular + firebase

Id: XQA1bbHQJp0

Length: 161min 13sec (9673 seconds)

Published: Sat Sep 05 2020