Build a Blog Website - React and Firebase Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be showing to you guys how to build a blog web app using firebase and react so as you can see over here we're going to be build something that in its core is simple however demonstrates um and practices a lot of the skills required to create a full stack application with firebase so what we're going to be building is as you can see a website um we're going to have at the nav board before you log in just a home butt a home link and a login link and it will show up over here um all the articles that currently exist in your database or in your blog right and currently this one i just created three examples over here of three articles that you can post it also recognizes which user posted the article it includes a title and the article in itself and also i'll make it so that you can write large articles as you can see over here you can write kind of medium articles as you can see over here and you can even write small ones like this over here now if you want to post an article you can log in by clicking on the login link and then signing in with google um i'm going to try to sign in over here with my one of my accounts and you can see that when i sign in it's going to redirect me to the home page and now if i i was one of the people who posted the article which in this case i am i posted this article over here i know all of them have the same name but it's just my google accounts like my different google accounts um i this account posted this article so if i want to i can delete this article by clicking on the trash can and it actually deleted um it is deleted from the database right now only has two if i want to create one i can come over here um put a title i'll just say nice title um and then i'll just write this is a tutorial whatever i'm going to make this a very small one when i click submit post you can see it was posted and since i was the one who created i can delete it as well now it is i feel like this website is simple in the sense that we're not going to add a lot of crazy features however the features that we add um will be very instructional in the sense that like um it will help you guys get an idea of how to build a full stack application using react and firebase um so this is basically what we're going to be building um i apologize if this intro was kind of big but if you want you can check out the timestamps that i will put in this video before we get into the video if you are also leave a like and subscribe i would massively appreciate it will help push my videos to more people and yeah with that in mind let's get into the tutorial [Music] [Applause] [Music] okay everyone so as you can see over here i already ran create react app and generated a react application um if you're not familiar with that um i would say that this video is a bit more advanced but i would recommend um just running create react app and in my case what i did was i just deleted the unnecessary files that comes with uh with the code so i deleted the index.css the setuptest.js the logo file as well which they they had over here and i also deleted the import for index.css instead of the index.js file since i deleted it there was no reason to import it now i just have this very simple application with nothing inside of my app.js um file instead of my app component so before we do anything with our code what we need to do is we need to set up firebase to um to work um in the cloud right we need to configure firebase before we even start writing firebase code so what i'm going to do is i'm going to come to firebase.google.com and i'm going to leave a link for this in the description if you want to if you need to create a google account so that you can use firebase it is completely free and super easy to use then i'm going to click on go to console and probably you won't see some projects over here but i have some i'll just click on add project and i'm going to give a name to this project so let me call this blog project whatever i want give a good name so that you can recognize which project this is when you're creating more firebase applications i'm not going to enable google analytics because it doesn't really matter for my case but i'm going to click on create project and it's going to start generating um the project for us while it's doing that i'm going to come back over here and i'm going to install um the firebase um depend like the firebase package into my react application so the way i'm going to install it is i'm going to say yarn add firebase however if you're using npm you can just write npm install firebase um it's the same thing so i'm going to click to install and while that's happening you can see our project is ready i'm going to click it to continue and it should open the console for our new project now what are we going to use in this project we're going to be using two different services inside of firebase the first one is the authentication service so that we can authenticate our users with google and then we're also going to use the firestar database in order for us to be able to have database connections right so i'm going to be showing you guys to how to connect both both services which is a question that a lot of you guys have been asking me in my previous firebase videos so in order to get this to work i need to actually click over here and click on project settings the reason for that is because if i want to utilize this project that i just created inside of my my my react application i need to set up a connection between this project with my application and the way we do this is by clicking over here and this will open up we need to register a web app so i'm going to just click over here add a name for this web app i'm going to call it blog app or whatever and then i'm going to click on register app it's going to start registering our app and as you can see it finished registering our app it will tell you to install firebase but we already did that but then this over here is very important this over here will be the start code that we want to use to connect to our firebase application so how exactly are we going to do this well inside of our react tab i'm going to create a file over here called firebase or firebase config actually whatever you want to call it i like calling it firebase config then i'm just going to paste all the code that we just copied from firebase and what this code buzz it basically does is it initializes a connection and puts for you all of the api keys and project ids and whatever related to um the the application we created on the website so now when we do this and we say const app equals to initialize app um firebase will know that this application is connecting to the one that we created on the firebase console so this is all we need to do so what we do now is we come to our google chrome again and we need to start by allowing us to use and configuring the other services that we're going to be using so the first one is the authentication service so i'm going to click over here on authentication then i'm going to click on get started then it should open up over here and we can choose many different types of authentication honestly you can use it will work for any of them if you want to i choose google in this one because i find it to be the most simple so i'm going to click on google authentication then enable and then i'm just going to use my own email as the project support email and click on save then this should enable google authentication for our project and it's actually really simple to set up i'll show you guys exactly how to do it i also want to point out that in this tutorial i don't want to spend a lot of time focusing on css especially because css isn't my favorite thing to want to work on and i know it isn't really the point of this video so all the css will be linked below together with the code and um i'll just be pasting the css that i already wrote into the uh into the thing and i'll just go over exactly what i wrote so that wouldn't waste time actually writing the css so now that this is enabled um let's also enable the firestore database which is the one we're going to be using so we'll just click on create database and we'll use it in production mode because if you want to use this in production mode i'll just show you really quick how to how to do this but i'm going to click on next then it's going to say um we'll just choose whatever i'll just choose this one but you choose the the location which is closest to you because this will be where um your your server will be located so i'll click on enable and it will start um the provisioning cloud file so i will start generating our database while that's happening let's come to our code and let's start setting up the authentication so the authentication process i have a video on it if you want to check it out but i'll just go over it really quickly for you guys so i'll say import from firebase and firebase had an update so now if you want to to make this work you're going to import it from firebase slash off and what i'm going to import is two specific things the first one is a function called get auth and the second one is something called the google auth provider so we come down here and we create a variable called auth and set it equal to get off and we pass the app that we created then we need to create a provider so i'll create a variable called the provider and set it equal to new google auth provider and this should generate the class for us or the instance of the class for us now we will be accessing both of this outside of this file so i need to export both of them so let's say export const and export fonts like this um i feel like that that's set up as you can see over here so before we actually create any tables let's just come over here at the top and say import from firebase slash firestore which is where we're going to get all everything related to firestore and we're going to import something called get firestar this function over here will similar to get auth initialize the database inside of our project and similar to auth we're going to export a variable called db meaning database and set it equal to get firestar and pass the app inside of the function so we created all of the connections that we needed related to firebase now we need to start using those connections and actually integrating it into our project so i'm going to come over here to app.js and i also will be using another library inside of this project called react router dom in order to create different pages in my website different routes we need to have it installed so i'm going to say yarn add react router dom and similar to um firebase i also have a whole tutorial on rector dom and its update if you want to check out more about it i'll just leave a link about it of it in the description so you can see it was installed and we need to start setting up our routes so i'll come over here at the top and i'll say import from react router dom and from react router dom what we want to import is the following things first i want to import browser router and i'm going to call it router then i'm going to import the routes component which used to be called switch if you're familiar with react router dom version 5 and below then i'm going to import the routes component and finally we're going to be using a link uh since i kind of have the nav bar so i'm going to create this link component as well so now what i want to do is i want to define um the structure of our routes so in order to do that i'm going to delete this div over here and i'm going to create the router as the the uppermost like component then we're gonna put our routes over here and inside of our routes is where we're going to define each route that we want to have for example if i want to have the the route for the main page which will be kind of like the home page with all the the blog posts and everything i'll just create a route over here give it a path which if you're creating like a main page usually the path is just an empty slash to define that it's the like the url of the website no other path um is added then um we're going to give it an element and the element is basically just the component which will render when we uh go to this path so the component for that is a page that we're going to create so i'm going to create a folder over here called pages and instead of here we're going to add all the different pages we're going to have in our website which primarily is just going to be the home page the create posts page and probably the login page so what we're going to do is let's create over here the home page i'm just going to call it home.js and use my snippet to create this component for now let's just say home so that we kind of be able to differentiate all the different pages that we'll have then i'm going to create another page called the login page so i'm going to create it login.js and again i'm going to create a component and then just write login over here then let's create the um the create post page so let's just call it createpost.js and basically this will be a page which as you saw in the beginning it'll just allow you to create a and add a post if you are logged in as a user and again i'm just going to call this post or something like that so we created our three pages i'm just going to close the components and then the pages that we're not going to be using but what we need to do is we need to set the route to render those specific components uh depending on which page we are so for the home page we want to render as a home component and um i need to import this so we can come over here and say import home from the path towards the home component so pages slash home and this should work you should see that when we go over here and we are in the home component it should render the word home i'm gonna zoom in for now just so you guys can see it better but if i go to another page like i don't know login the the home that disappears because we're not in the home component so let's add the other routes i want to add the create post and the login route for the create post let's just say that the route is create post or something like that and let's just render the create post component and i'm gonna import that as well over here at the top like this create pose and then finally create posts over here so i'm just gonna copy this and actually it's already over here let's just at the end right over here um do the same thing for the login component i'm just going to paste it over here and import the login component from the pages folder as well so import login from pages slash login so what we need to do now is we just need to add a route for this and i'm just going to say that the path is um login and it should be fine if we come over here and we go to the create post um url you see it says post if we go to the login it should say login and if we don't go to anything it should say home so now we have routes in our project which is amazing but we don't have any ways to to actually go to the routes so we need to create a simple navbar and the way i'm going to do this is in retweet or dom when you create um routes it basically replaces whatever part of the of this component you want to replace so we need to replace the whole page we can basically have a navbar over here which exists above the routes component and um this navbar will continue on every single page the only thing that will change is the page below the navbar so the way we want to structure this navbar is as following we want to first add a link which um as i mentioned before this link is a component from react order dom that we imported at the top and the link is basically uh just a link as as the a tag in normal html is but we're going to be using this property called two which basically you pass a a string over here with the path to where you want to go and um it allows you to go when you click on it it will bring you to that page now we can uh we will not self close it because we need to put the text for it and i'll just write the home text as the first link then for now you want to have the login and the create post um routes or links uh we're gonna definitely make it so that when you only be able to see the the create post link if you're logged in and if you're logged in you won't be able to see the login link as well because that doesn't make sense you're already logged in but we're going to do that later and i'll show you guys exactly how to do that for now let's just have the three links so that we're able to click on them and you should see that at the top we have the three links and i can easily navigate towards the website um by just oh i actually put the wrong route i put create instead of create post so this should be fine now that we have this done um i'm gonna add the first batch of css really quickly by just pasting um and um i'll be back in a second the reason why i'm going to do this now is because i want to see the navbar so it kind of gives us an id and like an idea of how the website is going to look but we're going to add all the css to our app.css file over here which for now is is basically empty just has this and i'll be back in a second when we finish pasting this just to show you guys the code again if you want to check out the code will all be in the description together with the css okay everyone so i just pasted it as you can see um it's not much css very simple just decorating everything giving some padding some margin um creating the navbar and giving some color and decoration for the link in itself and you can see that now we have a beautiful navbar i'm not beautiful it's just a simple nav bar but the links are over here and you can click on them and you should see that this page below um creates like the like shows that all the different pages right i forgot to save this so now it actually works clicking on the create post link so now that we have this kind of done um let's start implementing the the pages itself and also the authentication for our project so as i mentioned we're gonna initially do the login page first because we there's no point in creating the the other pages without having the login first because kind of the flow of the project you would imagine that you start in the home page then go to the create post page and then finally to the login however that would make a lot of sense because only logged in users can create posts and you can only see the post if someone created the post right so what we're going to do is we're going to start with the login page then go to the create post page and finally display the the posts that we created and the home page so initially let's just open up the login page over here and let's start adding all the functionalities so the first thing i want to do is i want to give this a class name to this div which will be called something like login page which i'm going to use later in the css so that's why we're adding the class names then i'm going to add some very simple text like i'm going to add a paragraph tag over here which will just say something like sign in with google which again if you want to use another um service for authentic authentication you can use it but i'm using google over here will be where you would kind of use something different right then we're going to create our button which we're going to click to sign in with google now all the css for the button i'm going to say it's not mine the other css was completely mine but all of this as i've mentioned in a previous video it's all copied from a code pen which may basically create a button that looks like a google button and this is the class name that we're going to be using so add this so that you can have the button look like the one that i had in the beginning of the video then i'm gonna click over here and put sign in with google as the text in the in the button and this should be fine now the login page isn't uh very crowded with that we basically don't do anything more over here in the return statement what we need to do is we need to create the function that when we click on the button it is called and allows us to like opens up the pop-up and allows us to actually log in with our google account the way we do that is by coming over here at the top and finally using the two on things that we exported in our firebase config file we actually exported three things but the ones we're going to be using is the auth and the provider so how we do this is by importing from um dot slash firebase config and we're going to import the off variable and the provider variable so now that we have both of them we're going to come down here at the bottom and we're going to create this function called sign in with google and the function will be pretty simple its purpose is to sign in with google as the name um says but we're going to be using a function already existed in the firebase authentication package called sign in with pop-up so i'm going to say import from firebase slash off and here is there's many ways you can actually sign in it doesn't have to be a pop-up a firebase allows you to sign in in many different methods it allows you to sign in with google for example by opening a new tab by just like redirecting the page however i like the pop-up because um it's very common so i'm going to use that function sign in with pop-up is the one we're going to be using so i'm going to import it over here and then inside of this function i'm going to call this sign in with pop-up function i'm going to pass two things inside of here the first one is our auth variable that we created in the beginning and the second one is our provider so just to specify that we're using google that's the purpose of the provider then this returns a promise so we need to specify what we do when we log in with google um well we grab over here in this function something called the results and this will contain all the information about the user that is logged in or the user that just logged in so initially all we want to do is we want to kind of be able to recognize if we are logged in or not so the way we do this is we're gonna we need to create some sort of variable uh that will determine or some sort of state that will determine if we are authenticated already or not and we're gonna create that state in our app um dot js file and the reason for that is because we could do this in many ways we could um add some state management use the context api do a bunch of complicated stuff however um what i'm going to do to simplify everything is just create a state over here called is auth and this state will be used to determine if the user is authenticated or not and it will be a boolean so start false and i'm going to call it is off and put a function to alter it called set is auth and basically as the name mentions it will just determine if you're logged in or not and we need to pass this since this one this project is very simple all we need to do with it is pass it as props to our login component so that's why it doesn't really matter because um because we can just pass it as props to one component and it won't be very we won't be basically prop drilling we won't be causing a lot of issues so in our login component we just need to grab this as props so i'll destructure this and grab the is off state and the set is off um function actually we won't be using the is off state over here so it doesn't really matter um and we're just gonna grab the set iso function so i'm gonna pass set is off is equal to set is up so we're just passing the state as a prop to the logging component and you can easily do it like this then um over here since we're grabbing this function as props what we can do is when you log in you basically just set is off to true meaning that you are now logged in so we're going to be able to determine if we are logged in or not this way and we can also use our local storage which is something we're going to be doing um in case i want to log in close my tab close my my my chrome or whatever come back and still be logged in so i'm just gonna say um local storage dot set item is and i'm gonna create an item in our local storage called is off and we're just gonna set it equal to true um like this and now in our local storage we'll also have some sort of identifier to determine if we are logged in or not now what i want to do is i want to call this function when i click on this button so i'll just give this an on click and call the function immediately when this happens now let's test this out let's go to our login page you see obviously it's not decorated yet but you can see the button appears if i click on this a pop-up should appear and i should click on my account and let's see if it works it seems to be working right let's open our inspect element and see in our applications tab to see if um in our local storage there's now an object yes you can see it says it has a uh information with a key of is auth and a value of true meaning that we actually logged in and it worked perfectly so we're now able to log into our project which is honestly amazing however um we need to be able to i want like we haven't been redirected and that's something that i want to do when i log in to with google i want to be redirected to our home page right i don't want to stay in the on the login page so the way we do this is i'm going to be using something from react router dom called the use navigate hook this used to be called the use history hook so if you're used to the older versions uh the name changed so i'm just going to import this from react router dom and it's very it's very similar to how it used to be you just create a variable called navigate set it equal to use navigate and basically if you want to navigate from you want to redirect from a page to another all you do is you call this function and pass the route or the path to where you want to go so when i log in i want to be redirected to the home page so that means that now if i'm in the login page and i log in you can see that when it finishes logging in i'm redirected to the home page which is really cool now one thing you notice is the login link is still over here and that was one of the reasons why we created the is off variable because now what we can do is we can basically add some conditional statements over here to determine if we want to be able to see this link or not right now all we want to do is the following if we are authenticated so actually let's say if we're not is off if we're not authenticated then show this thing over here and if we are it will obviously stop showing it so you can see we are authenticated because we're just logged in so we are um so it's showing that we are it doesn't show the login link however obviously we might want to sign out so i'm going to very quickly create a little make this instead of being just a one-way statement i want to make this an if else statement by saying if we're not authenticated show the link but if we are authenticated show a button which um will basically just uh say logouts and you're when you click on it you'll be able to log out and it's not that hard to create a sign out functionality all we have to do is when i come over here at the top create a function called um something like sign user out and this function will be using um the sign out function from uh firebase so i'm gonna import from firebase slash off so the auth package from firebase we're going to import this function called sign outs and over here at the bottom i'll just say something like um sign out pass the auth variable and if you are curious to know what variables or what arguments each function requires you can just hover over this and you can see that it requires the auth variable most of them will require will require this because it needs to know who is logged in to know who they want to sign out but basically that's just a tip i can give you guys so then after you sign out we don't want to do much but we do want to first of all clear our local storage because we don't want to have a to say that we are authenticated in our local storage while we are while we just signed out um then we want to set is off to false because we're not logged in anymore and finally one thing i want to do is when you log out i do want to redirect us to the login page so i'm going to do the same thing i did over here i'm going to copy the use navigate import we're going to create another variable called let's navigate equal to use navigate and we're going to redirect ourselves to the login routes why because i feel like it it's kind of a good flow for the website right so we'll just pass this as a um on click to the logout button and you guys will know exactly what i mean by that so the way this is working right now is the follow uh is this following so um it says auth is not defined this is interesting um oh yeah we need to import auth so i'll just import from firebase import um from dot slash firebase config which is the file we created and i want to import the auth variable so now it should be working if i refresh my page um it does not work oh yeah this is actually an issue which i didn't anticipate um we want to use the navigate function and we are currently outside of a component instead of the router that's a common mistake and i should have noticed that so we can't use the navigate function inside of here but there's multiples multiple ways of actually navigating in a in a website redirecting yourself in a website and one way of doing this is just using the window object from javascript and saying something like window.location.path name is equal to some sort of path so you're just altering the path name of your current uh tab in your browser so we're gonna alter it to the login routes so that it kind of redirect ourselves as well so the issue here mainly was because we were using the use navigate hook outside of the router component which is illegal you can't use anything from the react router dom library outside of this component so now you can see that if i log in um the flow will work as follow if i log in um i'll obviously be redirected to our home page now the log out button appears and if i log out i'm redirected to the login page and the login link appears as again right so everything is working really nicely but we haven't actually started creating the posts and all of the logic related to the database um well what do i do with that well to start using the database and start um being able to create posts to our project we need to come over here to the create post component and we're going to start building this out so this component is going to be a bit harder to create because we're going to be adding a lot of stuff to it the first thing i want to do is i want to add a class name to this for styling and let's just call it the create post page i'll be adding some css so that the progress starts looking better in a bit however for now let's just give the class names so that later on the css will work then i'm going to create a div inside of here called the let's give a class name of um something like cp container so cp for create post i don't want to keep writing create posts a lot of times so this will be a container for the actual div which contains all the inputs and stuff so inside of here let's just add an h1 tag a header tag and say something like create a post so it's going to be kind of like a box if you recall a box right in the middle over here with the inputs and all the buttons then we're going to come down here and let's create a div which is going to be called um i don't know let's give a name of um input group and we're going to create a couple of them so i'm going to say input group or input gp and we're going to create two of them so it's just going to be a div representing um the two different pieces of information that we need the first one is the title and the other one is the actual post description or the post text right so we're gonna put over here a label for the title and say something like title and we're going to put the inputs where the user can put the title for the post so input and let's actually just add the the placeholder for it uh let's just add a simple placeholder something like title and three dots and then over here on this one we'll also create a label um but obviously we're gonna call it post and we are not going to use an input we're going to use something else called the text era because the the we know that the post can actually be something very big so an input isn't suitable for that but a text area is a place where you can actually um write a lot so we're going to add this text area and the placeholder for it will be um just a simple um like post like this placeholder and actually it's a it's a text so i'll just say post so we have this a text area now and um it should be fine let's look at how it's looking we just have a simple title um then we can have an input for the title and then we have the text area for the post finally what we want to do is we want to add the button which will be used to when we click on it actually create the post so below this input group div let's just add the button and call it submit post and this should be the skeleton of our create post page now let me just add the css right now for both the login page and for the create post page so that we it doesn't look ugly so i'll be back in a second with the css pasted and you guys can just check it out to see how it looks okay everyone so i'm back and you can see we added quite a lot of css um you can go over it on your own if you're interested but basically we added all the css for the create post page and all of the css for the login page again all of that was me so you can just copy and paste it i guess you can also copy and paste the google button css which is all of this over here because it wasn't a public website but i'm going to credit the author in the description as well so you want to check out you can check out their button but basically how this looks is like this it's just a simple box in the middle of the screen where you can write um the title of the post you can write the whole post in itself and you can click on the button and then for the login it's just a simple page with the sign in with google button over here so it's starting to look kind of nice however it's not functional yet right whatever we write in this title input or whatever we write over here we don't do anything with it we don't even keep track of what is currently being written so we need to change that and the way we change that is by first of all creating some states so i'm going to close this over here come to our create post page and let's create the state that will keep track of the title that the user is currently writing on the input so to do that we'll just create a state called title and a function called set title set it equal to a use state which initially will be a string then we're just going to copy this like this and we'll create another state which will also be a string and just call it post text and set post text right both of them will keep track of each input so the way we we make it so that when you when the user is writing on the input it alters the value of the state as i've taught in so many of my videos it's pretty simple and react all we do is we give an unchange functionality to this input then this on change is a function which will be called every time the user writes like something in the input even just a letter so we can keep track of what is currently in the input by grabbing the event variable and just setting the title state to be equal to the event.target.value so we'll just grab whatever the value of the input is whenever there's a change and this means it will update the state accordingly to what is currently in the input so we'll do the same thing for the post but instead of set title we alter this to set post text and now we should be keeping track of the input values now we're going to do one of the most important parts of this which is creating the function that when we click on it it will actually submit the data to firestore and store it in the database so this function will be called create post and this must be an asynchronous function because this is how we're going to be this is required for the different functions we're going to be using from firebase and obviously we need this um to be asynchronous in order for us to keep track of the data that is returned from it as well so what we're going to do is we're going to use this function from firebase so i'm going to import a function from firebase slash firestore and this function is add dock so as i mentioned previously and we can come over here to our firebase project this is the database right um so the database we need to start a collection and a collection is basically just almost like um the the name of our database right or the name of our table so the collection we can give it an id i'm gonna just call it um i don't know i'm gonna call it posts and then just click next and it will ask us for a document id we can just click on auto and just save and basically you can see we created our table over here and it all automatically adds a document and a document is kind of like just an entry to your um to your table it automatically adds one but we'll be adding them later on so it doesn't really matter um so the important part is that now we have a table in our database that we can add information to it so a document is just an entry that means that this function add doc is just a function that allows you to add a document to your table so we're going to come over here and we're going to say await add doc and this add doc function takes in two different arguments the first one is a reference to which collection or which table you're talking about so we can have multiple collections in our project in our same database multiple tables one for posts one for users one for i don't know other informations that we might want to have right um but for now we just have one but we still need to reference which collection we want to add the document the document to so the way we create this reference is by creating a variable over here called posts collection on ref we can call it whatever we want but i'm just going to call it that and set it equal to collection which is a function from firestar so it automatically imports and we need to pass the db variable that we we created in our firebase config file and we exported it so if it doesn't auto import for you you can just write this and then we just need to pass a string which contains the name of the collection that we created so we called it posts so i'll just call it posts as well now we made a reference to that collection and we say that when we add a document we want to add it to this specific collection now the second argument to this function is the data that we want to add and this is a nosql database as you can see so it doesn't really matter we can actually add data with different structures to the same table or to the same collection which is not something we really want to do but i'm just pointing it out that you can do that um so the structure we're gonna follow is each collection is gonna have a title a post text and an author so the author is going to be um just the the name of the user and the user id so how we're going to get that well that will come together with the login that the auth variable that we created in the firebase config file and you guys will see exactly what i mean so that you can use that in your project as you want it's actually something really interesting that you can use in many different situations so let's start by adding the title so we pass an object which will contain a title and the title will be equal to the title that the user is currently writing in the input um since the name of the field is the same as the name of the um variable that or the value we don't need to do it like this we don't need to say title is equal to title we can actually just call it title that's a little trick that you can use in javascript then we're going to do the same thing with post text we're we're not even we're going to call it the field post text as well so it's fine and then finally let's add a field called author and the author will have two things um it will have the name of the author and we also have the id of the author so the way i'm i could separate them instead of just having a author property with a name and an id i could just have a field called author name and author id however this way is more organized we have a field called author with an object containing its information now how do we get the name of the user who just logged in with google well google gives that information when you log in the variable auth that you created over here will be populated with information about the user and the user like google account and one of the things we can we can get is the display name or the name of the user um you can play around with with the values with the information however i know the na how to grab that directly we just need to access the auth variable so i'm going to import here at the top and over here we just have to say something like off dot current user to access the information of the current user logged in then we're going to say dot display name and this should should actually set the name of the user as the correct name as determined by google then we want to grab the id and to grab the id we're going to say auth the current user dot u id and it will actually generate um and give you the id corresponding to the user that has logged in um into our account so this is basically what we need to do and when we call this function now it will actually be adding the document to our database now i also want to be redirected to the home page when we do this because it makes sense right you you created a post you want to see it in the homepage being displayed so what we can do is we can do the whole navigate thing over here so again i'm just going to import the use navigate hook from um react right dom then i'm just gonna let navigate equal to use navigate and and over here we'll just say that after you add a document after you create a post we want to navigate back to the home page so this should be fine so now let's just pass the create post function as an on click to the submit post button and it should be working now i'll just open up my chrome you should see we currently don't have anything in our um database we just have one field which one collection which was created automatically but now if i come over here and i just i don't know add a title something like first post and the text will just be um i'll just copy and paste some code from here it will actually look super ugly but let's just do it um and click submit post you should see that it broke um why did it break oh i know why i broke we're not logged in and that was an issue yeah that's that's just dumb so you can see it doesn't work when you're not logged in because your the the author information isn't um available so we're gonna get a gatekeep the create post page um and secure it so that people who are not logged in can't actually access it so for now let's just log in real quick so we can test out the create post function so log into my account go over here put a title like first post then let me try just actually just write something like hey this is my first post i'm so excited then i'm gonna submit post i should be redirected um i wasn't let's see if there was an error in the console it seems that we don't have permission and i know why we don't have permission um we need to come over here and in our first our database we need to add some rules to it so basically right now it's just saying that it doesn't allow anyone using the website to actually alter the database so you can see um it says allow read and write if false and this if statement will always be false because false is always false right so for now since we're testing let's just add if true um then allow everyone to add and and like delete um stuff from the database so since we made this changes let's try again click on submit post and it should not work you see we're redirected and it seems to work but we can only check to see if it worked if we go to our data and check to see if the data is over here which actually is we now have a new document in our collection with information that we created and you can see that the google login information is actually right it says my my name and my id so i'm going to delete this over here which is the initial collection that was created um the way we delete it is just by clicking on delete document we don't want to delete the collection we'll delete the document and this one is the only one that should be in our collection which is the one that we just created now that we're done with our create post page i do need to gatekeep the the create post link as i mentioned before because if i log out i can still access it so the way we're going to do that is super simple very similar to how we we did the um with the login link basically if we are we only want to actually see the create post link if we are authenticated so i'll put it over here above the button and since this are two different things we do need to add a fragment over here so that it doesn't give this us this little error it's nothing too big it's just that we need to do this or else react will complain now we will only see the create post link if we are authenticated which you should see we can't actually see it um unless we go to the create post page which um if you want to know how to actually prohibit them um from answering this page i do have a video on um on creating protected routes for now what we can do just to try to make it a little bit secure is come to the create posts page say use effect like this create a use effect which is a hook and react which um will be called um immediately when you open the web page or enter into this link or render this component we do need to import use effect over here at the top so use effect from react and what i want to do with this use effect is basically when we render this component i just want to check if the person is authenticated because if the person is not authenticated which by the way is a variable that we currently don't have access in this component so we'll have to grab it from the props like this if is off um if it's not authenticated then i want to redirect myself to the login page so i'll immediately redirect myself to the login page like this and this is a great way to actually do this we'll just check to see if we're authenticated if we're not then redirect to the login page so that we can't access this page now all we have to do is actually pass this is off as props to our um create post page so i'll just pass that is off prop and pass the out state over here and you should see that if i'm not logged in which i'm not um and i try to go to the create post page it'll just redirect me to the login page which is a quick fix to this um but there's more secure ways to do that if you want to check out i have a video on that as i mentioned before but now at least we have prohibited users who are not logged in from trying to create a post and if we log in is the only way we can actually create a post as you can see over here now now that we have both everything almost is done we just have to create the main page which is the home page this is where we're going to be able to display all of the posts that has previously been created and exist in our firebase or our firestore collection so the way we do this is by coming to our home page component over here the home component just start building it up so the first thing i want to do is i want to give it a class name as we've been doing and the class name will be called home page like this then i actually need to access the list of um posts right so we need to access the list of all the posts that exist in this database so how do we do that well we need to write some logic for it come over here at the top and we'll create a state called um posts lists which will be just a list or an array containing um the list of posts that exist in the database and i'm going to set the sequel to use state and it's going to initialize itself as an empty array like this now the way we're going to populate the state with the information inside of our database is really simple we're going to use a use effect which as i mentioned will be called immediately when we go when this component is rendered and this use effect will make a call to firebase to retrieve information that exists in the database so how we need to do this is we need to create a function inside of the use effect because we need to do this asynchronously so i'll create this function called get posts and this function needs to be async so that's why we need to create an actual function because we have to make this asynchronously and this function inside of here we'll basically just we'll just create a variable called data and set it equal to a weight and we can use this function from firebase so we need to import this from firebase um so import from firebase firestore and this function similar to the add dock there's a function called get docs like this and this function will just return all the documents inside of a collection which is exactly what we want so i'll just say const data equals to get docs and similar to the add doc function we do need to reference which collection we're talking about over here so i'm going to come to our create posts page and just copy this collection reference that we created and just come over here um crap create this variable and pass it inside of our get docs function just to reference which collection we want to grab all of the documents from then we have this data which should um contain the information um about the like the list of of documents but if we console log this data variable you'll see what actually appears i'll console log this so you guys can see and we do need to call the get posts function inside of the use effect or get posts and if i come over here and go to my um oh it says collection is not defined and dp is not defined yeah i forgot um we need to import the collection um just like how we did over here we need to import collection from um the firestore library and we need to import db as a variable from dot slash no two dots slash firebase config we need to import the tb variable that we created and now this shouldn't give any errors now if i refresh this you should see that if we are in the home page it must be console logging right now this object and this object contains a lot of information related to the documents that we just queried from firestore i'm going to zoom in a bit so you can see but basically what we need from here is the documents that is this field over here called docs and it actually returns an array containing all the documents that we want including um as you can see the document data and document id the document id is this over here which we're going to be using but the document data this over here and data this is what what we want the values right the information of the fields it's kind of a huge object that you kind of need to to take a look at it to understand how to grab the information but i already did that so um don't worry to access the the actual information all we do is we need to say data.docs then i'm going to map through each document that we receive and i'm going to create a new array that will just contain an object containing the data that we of the of the collection and the id of the collection so the structure of that and you shouldn't worry that much if you get confused by this because it's kind of confusing however we're just going to say doc for each document we want to create an object which will contain all of the data so we can say dot data and this will give us the data of the document plus we'll also create a field called id and grab the id of the document so if we console like this now the console log when you grab the information from firestore is a lot simpler instead of being all this complicated stuff over here we made it into an array containing just a simple author id post text and title um information so that's a very easy way of doing this and we just made our data look a lot simpler so now that we have this information what i actually want to do instead of console logging it i just want to set post list to be equal to this so set post list is equal to um this new array that we just and created by using the map function and then what we can do is we can actually come over here to our div and we can um grab the post list which now is populated with all the documents in the collection and map through each one of them and just grab the post information and this will allow us to do the following i'll just close this like this and then close this page and for each post i want to return a div which um let's just give it a class name of um i don't know post so each of this will be a post so i'll just give it a class name of post and for now what we can do is i can actually just render the post dot title just so you guys can get an idea of what's happening if i come over here you can see it's it went through the list and for each element in the list it just rendered the title which is exactly the title of the first post that we actually created as you can see so so for us to get an idea of what's of the actual effect of this let's log in again and let's create more posts i'm actually going to um set up some some posts already pre-made so that i can just use them so we don't need to keep coming up with new post ideas but basically i'm going to leave them in the description as well if you want to check them out so there's this website over here with a bunch of lorem ipsum um text literally what i'm going to do is i'm just going to copy this like a huge piece of text and just use it as our post so that we can kind of get an idea of how this will work with different um post sizes then the title will be this looks like a big post something like that submit the post and you should see that now the title for it appears over here because this has been added to our collection as you can see um i'm going to add one more just so that we can um get an idea and have three of them but i'm going to copy yeah i don't know let me just copy this whole thing over here and let me just post it then say wow this post is huge and then submit it you can see now we have another one in our list so right now we're just displaying the titles we obviously want to display the whole post and make it look kind of nice so that's what we're gonna do right now so instead of just displaying the title let's actually create the structure of this i'm going to create a div which will be the div for the type for the header so i'm going to give this a class name of post header then inside of here we're going to have the title so i want to create a div just for the title and you'll see it later it's just a css thing but i'm going to call it title and inside of here we'll have an h1 tag that will say will actually render the title so i'm going to say post the title just like we did before and you should see that now it looks a little bit bigger um then what i want to do is i want to delete this things that appear because of prettier which is an extension i'm using um but basically below the post header um div which is this over here i think it's this one over here we want to actually add another div called the the post text container so let's just call it post text container and over here is where we're going to actually display the text from the post so i'm going to say something like post dot post text which is the field um in the object right then finally we we just want to display the author of the post so i'm actually going to use a simple h3 tag and add a like an add sign uh just like instagram has then just come over here and say post dot author dot name um so we can access the name of the author and you can see that it's now displaying all the posts beautifully in our screen it has the title the the text and the author it obviously looks horrible so i'm gonna be adding the css right now for this and i'll come back in a second so again i just pasted here the css um it's kind of it's simple like it's just a bunch of styling that took me forever to do however um basically this is how it looks we have a little um box for each post and if it's bigger than the size that should be you can see we add a little scroll um so they can scroll through the text and now all the posts are now ordered which is really nice right you can refresh the page and it will query the information from our database now let's try adding another one i'll just come over here login um directly and over here let's just create a post let's add another title this is a medium post and let's just copy a very like small piece of text i'll just copy this then paste it over here submit post and you can see the media post appears over here beautifully right so everything seems to be working we do have to add some stuff for example um we want to be able to delete the post whenever we want right if you watched in the beginning of the video we have that we had like a little trash can over here which allows you to delete the post so how exactly are we going to do that well the way we do that is inside of our um home component over here right below the the title we're actually going to add another div called the delete post div so i'm just going to say class name is equal to delete post and inside of here we want to add a little button which will allow us to when we click on it delete the post that we want now um over here to actually put the trash can icon you can use many things you can use external libraries to use the icon you can just put like an x meaning that you're deleting the thing but i like to use um unicode and i do have a a unicode link which is over here so this link will just represent a trash can as you can see over here but basically if you want to use that use that you can also just use external libraries if you want to but basically we have our trash can and now that we have this over here we want to be able to delete this post right but how do we do that well the way to do that is um we want to create a function over here at the top called delete post so i'm going to say const delete is equal to a function which will include the functionality to delete a post now this function is going to be pretty simple we need to make it asynchronous it will be just two lines the first one is we need to actually um say await and then call a function from firestore called delete um doc right that's you might imagine since we have add dock we have get docs we also have delete dock however there is a there's a problem right um the delete doc function requires um you to specify which document you want to delete and to specify which document you want to delete you need to call a function called doc so we'll come over here and say const um user doc so we want to specify which or not user doc let's actually call it postdoc um to determine which which though which post um document we want to delete and then set it equal to doc which is the function we just imported and this takes in three arguments first is the db argument the db variable which we already have in this component then the name of the collection in which we want to delete this document and finally we need to know the id of the document now that's an issue because we currently don't have access to it right however we actually do because if you recall we added the id of the document over here right for each document we have this field called id which we grabbed the id of the document so when we say postslist.map this post variable will have the id for each document that exists in the list so when we call the delete post function like this when we call delete posts we can actually pass over here as an argument the post.id and each post will have a different idea as the argument to this function and we can just say that this function requires an id and we can just pass the id over here this id value will change depending on which post or which button we click um because like the id for the function and this one is different from the id in this one now um that this is done you should see that it should actually work i should just pass this postdoc over here and it should be deleting the document when we click on it let's test it out i'll delete the small one over here and um you can see it worked right there the document is not there anymore um it was a small one it's not here which means it's working which is amazing we only have three documents now when we had four um there is a caveat though uh imagine i actually come over here and try to log in with um another email right i posted all of those with my first email now i'm logging in with another email i don't want to be able to delete um this thing since i wasn't the one who posted i shouldn't even see the the trash can i can right because it doesn't make sense only the person who made the post should be able to delete the post so how do we make that distinction well that's the whole point of why we actually kept track of the author's id of the user who created the post because now if we come to the home page what we can do is the following we can come to our button over here our delete post button and only render the button only show the button if um first of all if we are authenticated because we don't we don't want to show the button for people who are not authenticated and if the post dot author dot id is equal to the auth the current user if you recall the auth variable allows us to see information about the current user logged in dot uuid so this is basically what we're showing we're just saying okay if the user is authenticated and the user is um wait let me just close this out so it doesn't give us any errors so we're saying if the user is authenticated and the id of the u of this author's post and the id of the user of the author of the user is currently logged in is equal to each other it should actually be uid um then show the button um if it's not then just don't show the button and you can see that it's saying is off is not a function the reason is because we do need to pass is off as a prop to this thing over here and then come to our app and pass the is off um to our home page as props just like we did with the other components is off like this and now if we come over here we can't see the button right we can't see the button because we're logged in with a different account there's a thing that i want to show you guys which is basically you can you can see the login button over here which is kind of weird right how can i see the login button if i'm already logged in i'm going to try to log in with the with one of my accounts with the account that actually created the post and you can see that we can delete it but if i refresh my page now it assumes i'm not logged in anymore which is kind of weird because i am logged in this is where the local storage comes in because um the local storage right now says we are logged in as you can see if we go to application um it should say that is off is equal to true so what the problem is that um initially whenever you refresh the page is always set to false instead of that we need to say that the initial value of is stage of is off is equal to local storage the get item and we'll get the value of is off over here um if it is true if we actually have this in our local storage it will set to true if not it will set to false so if you see if i refresh my page now it never logs out it's always saying that i'm logged in right and again i'll log out and try to log in with the different accounts um with this account over here um you can see the button disappears and i'll try to create a post so you guys can see how it looks if if there's posts that you can delete and post that you can delete um i'll just call this final post and let me just put um some weird text uh as the text for it then submit it you can see that i can only delete the one that i just added right as you can see i can delete the other ones i can delete this one but not the other ones which is exactly what we wanted and it's the final addition to our project now this is how it looks um i actually feel like this is a really nice project um i didn't want to make this video super long although it's it's it's above one hour probably um however i wanted to give you guys the opportunity to get this project from where it is right now and make the additions that you want to make to it make it look a lot cooler maybe change the css if you want to because i'm not good with css make it look however you want and add some features to it which you can definitely do and this can definitely be some good good project that you put in your resume so with that in mind i really appreciate you guys watching this video i know i didn't post this week it was my finals week i just finished on my finals and i'm so happy because of it i really wanted to post but i also got sick so i couldn't record um however um you guys were there to watch my videos so i'm just excited to be able to post again and yeah that's that's basically it um if you enjoyed the video leave a like down below and comment what you want to see next check out the code in the description because it will contain all the code that i just wrote and yeah that's that's basically it i really hope you guys enjoyed it and i see you guys [Music] [Applause] [Music] [Applause]

Channel: PedroTech

Views: 118,284

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, firebase, firebase crud, firebase react, react firebase, firebase tutorial, blog firebase, firestore, firebase authentication, react blog, react project

Id: zL0dKETbCNE

Length: 72min 20sec (4340 seconds)

Published: Wed Dec 22 2021