Firebase React Course For Beginners - Learn Firebase V9+ in 2 Hours

hey guys how's it going I'm back here with another video and today I decided to bring this full-on Firebase in react course where I'm going to be going over all the different important topics that you might want to learn from the beginning till the end if you're trying to learn Firebase now we're going to be going over a lot of stuff so I divided this whole video into chapters you can just go to whatever topic you are interested in learning or watch the whole thing through because I'm gonna go through everything in a order that makes sense if you've never learned Firebase in react before so some of the topics we're going to talk about in this video is uh like authentication how to create a authentication system in Firebase also how to create a very simple like credit application using firestore so we're going to be dealing with databases also we're going to be talking about how to upload images and files into the storage service that Firebase contains we're also going to be talking about some really cool stuff like how to do queries and to finalize it we're going to be learning how to host an application for free using Firebase so it's going to be a complete video I've made a lot of videos in Firebase in the past but I've never made a complete one like this so buckle up because I'm really excited for this video if you want to check out the code most of the code will be in the description I'm going to leave a link for it just check it out and yeah that's that's basically it before we get into the video if you could leave a like And subscribe I would massively appreciate it it will help push my videos to more people and I'll be really grateful if you guys could do so so with that in mind let's get into the video [Music] [Applause] [Music] [Applause] brilliant is an amazing platform where students can learn a variety of topics in stem by following carefully crafted interactive courses if you're a person who's looking to learn or improve your skills in areas like math science and computer science brilliant is the perfect place for you in my videos I explain a lot of high level Concepts in programming however this kind of Technologies wouldn't be possible if an a deeper understanding of low-level programming didn't exist before so learning from a course such as their computer science fundamentals course is really valuable for anyone working in Tech also I know for a fact a lot of you guys are learning and practicing skills to pass your coding interviews so if you're interested in practicing those you can actually go over and check their algorithm's fundamentals course which will teach you all of the fundamental skills you need to Ace your coding interview the best part is that even if you are already familiar with all the topics I already mentioned brilliant has thousands of lessons already in their platform and new ones are being added every month so it's almost like a place where you will never rent out a valuable content if you're interested in checking them out you can just visit brilliant.org Pedro Tech or click in the link that is in the description below the first 200 people who visit the link below will get 20 off brilliant's annual premium membership again thank you brilliant for sponsoring this video I've used brilliant in the past I've actually made videos with brilliant in the past so I can vouch for them it's a really nice platform and I'm really thankful that they sponsored this video so with that in mind let's get into the tutorial okay everyone so we're gonna start this course by uh just opening up a couple stuff so first of all we have to create a project right in vs code I already created my project it is a simple react application that I just used to create react tab to create you can use whatever method you want to use to create your application but all I have in my app is just an app component just like this with the text saying Firebase course and as you can see over here this is all it's rendering that's it's running already so it's just this I didn't add anything else yet but we're going to be adding as we go through the video also I open over here uh the Firebase console uh you just go to this link over here it's console.firebase.google.com you do have to be logged in into a Google account this is my Google account that I'm going to be using and maybe if you've never used Firebase in the past uh this will be empty but you should see this button over here saying add project and that's actually what we want to do initially right this is the first thing we want to do so we're going to start off by clicking on ADD project then over here we're going to add a project name I'm going to call this Firebase course just because this is what I want but uh you can email whatever you want if you're using this for a project that I already have that you already have in mind or if you're just using this course to learn you can just name it whatever you want then it's going to ask for if we want Google analytics to be in your project I'm just going to leave it it's recommended I'm just going to leave it for this because there's no drawbacks from removing it from having it as well so I'm just going to leave it just like this and click on continue then it's going to choose which account we want to configure our Google analytics just choose the default account for Firebase and it should be fine then we're going to click on create project and it will start creating our project now I'll be back in a second when this is done but it shouldn't take long at all okay so as you can see it says that our new project is ready I'm going to click on continue and we're going to open up over here our actual console so the Firebase console has a lot of really interesting things um it has as you can see over here on our side a sidebar which includes a couple stuff so I'm going to go over a little bit of it the first one is build this is where you can see all the different services that Firebase can offer for you so Firebase can help you you with authentication can help you with app check with firestore which is the database we're going to be using and they also have another type of database called the real-time database storage hosting serverless functions machine learning they have so much stuff that you can Implement into your project and all of them exist on this sidebar over here then we have release and monitor all this is more for if you already have deployed a project and you want to check out the analytics check out the performance all that kind of stuff you can see it all over here analytics as well they have a whole tab just for this and you can imagine all the stuff you can learn from this and then engage um is whenever you want to do uh actually I haven't touched much on this part of Firebase but uh as you can see there's a lot of stuff you can do uh but Firebase in itself starts out by just clicking on this thing over here because in this it's basically telling us to get started with our app right and we have a couple options we can actually use Firebase for mobile development as well that's why it gives an option for uh Apple iOS or Android it also allows you to do it with flutter that's why we have this option over here and if you're using games so if you're creating games with unity you can also click on this option over here but we're going to be using the web version so we're going to click on this and it's going to ask us to register our app I'm going to call this app Firebase course again but you can just call it whatever you want and we want to set up hosting because at the end of the video I'm going to show you guys how to set up hosting inside of this project so we're going to choose this thing over here for our deployment and I'm going to click on red Register App then it's gonna just register our app it shouldn't take long as you can see and now it's asking us to add our Firebase SDK so we're going to be using a react right this whole course is in react and we're going to be using npm or yarn to install the Firebase package so if you're using normal JavaScript not react you can actually use this script to add into your project but we're not using this so we're using npm this version so the first thing we have to do is actually install Firebase into our code I'm going to open up our project over here I'm going to open a terminal and then just say yarn add Firebase just like this if you're using npm just do the same thing but with npm install Firebase so while that's installing we're gonna see that they give us an actual piece of code right this whole thing over here this is extremely important and really cool because it kind of sets up the whole Pro the whole configuration and setup for you this is what's going to connect your code your Firebase your actual project so the code that you're writing with the console related to this Firebase project so we do have to have this inside of our project and the way we do this is I like to create another file called um Firebase config I'm actually gonna this is a Javascript file so I'm going to put dot JS and I'm going to actually create a folder called config over here for our project that's what I like to do I'm going to put this Firebase config file inside of there and since we this is inside of the config folder I'm actually just going to call it Firebase right so we have this config folder with this file called Firebase I'm just doing this for organization purposes because I think it looks better this way but here is where we're going to put all of that code that we just copied so we're just going to paste it over here and you don't have to actually change any of these pieces of information right this information is automatically put as the information for your specific project right so make sure you don't use the same API key domain app ID as the one that I'm using because this is not the one that you're going to have trust me when I say every time I make a video like this and I forget to delete the project right after there's a bunch of people using my my API keys and and stuff which honestly um it doesn't matter because I just deleted it like really quickly but um you should be using your own one maybe your project is not working because you didn't use your own one just make sure you grab the one that is on your console so let me just check real quick uh you can see our actual Firebase package was installed so if we go over here to um the package.json we can see Firebase is now uh installed inside of a project and this is the version that we're using so I'm going to close this and I'm going to delete a bunch of this comments just to make it look a little bit more clean um because they're just explaining stuff but basically let me go over a little bit of what this is so initialize app is the function that is used every time you want to start a new application in Firebase right and you create a variable called app and you set it equal to this you pass in the config for that specific project that you want to set up and now this app variable over here contains a lot of information and it is the variable that will connect your project with all the different Firebase Services also they provide us with analytics over here I allowed analytics to be used in our project however um I don't think it should like we're not going to be talking about it in this video because it is not that important um unless you actually have deployed like a full-on application with a bunch of users using it right so I'm going to delete that right now now this is what we have I'm gonna go back over here then click on next and it's going to tell us to install the Firebase CLI this is for whenever we have we want to start hosting our project right so we do need to install install this since we're going to be using Firebase CLI the Firebase CLI to to actually deploy a project and have our project being hosted but the thing is since we're installing a fire CLI Tool uh this is not part of our project it's part of like what we have globally inside of our computer so I'm actually going to run yarn Global add Firebase tools the global will just make it exist everywhere inside of our computer and if you're using npm just copy this command they already made it for you so that should be fine I'm gonna press enter and we'll start installing Firebase tools for us so then I'm going to click on next and it's going to say deploy to Firebase hosting I'm actually not going to do this now because uh we haven't created our project yet so I don't know why they even put that as a first part in your project I kind of get if you want to see your project being being made and deployed as it goes you can do that but that's not what we're going to be doing because the first thing we're going to be working on is authentication in our project so I'm going to click can build over here and go to authentication and let's take a look at some stuff that you can do with authentication in Firebase so it's going to ask you to get started and you can just click on that and it's going to ask you what kind of sign in method you want to implement inside of your project so the two main ones that I like to use in projects is either email and password because that's the most common and standard one but also I really love using Google because everyone has a Google account in my opinion like or most people do and it's super quick and easy to just you're already logged into your account you just click on the account you're logged in and now you you're logged in into your project it simplifies a lot because people don't like creating passwords and putting their emails on websites so just having a really quick authentication system like that without having to worry about storing passwords inside of your project is also really cool but since this is a full-on tutorial course I'm going to show you guys both first the email and password capability that you can you can do you can also do it passwordless by having an email link but I'm not going to show that and then I'm going to show the Google version so I'm going to click on enable for email and password and click on Save and you can see now we have that available in side of our project so how do we actually do it with email and password so the way we're going to do this is we're actually going to come over here to our Visual Studio code and we're going to import something at the top from the Firebase library but we're going to specify what kind of service we want to import from we're going to import from the authentication Service so the auth service over here and what we want to import is a function called get off and this function is really important because it's what sets up authentication inside of your project so what you do is you create a variable you can call it auth set it equal to get auth and you just pass in the app so every service you're going to implement you're going to use in your project this is kind of how it looks you create a variable you set it to get the name of the service so if you're using database firestore we can it's probably going to be get firestore and then you pass in the app that you initialized over here so we're going to use this variable everywhere inside of our project so we actually want to to export this so that whenever you want to use it where you can just import it from this file then what we want to do is we want to go to our app over here and this is where we actually start creating our application we try now just looks like this so it's not it's not really good so I'm going to start by creating an actual extra component for authentication I want to keep this organized so I'm going to create a folder called components and I'm going to create a component called um auth.js and over here we're just going to create this component by saying export auth const and set it equal to this and this is the component that we have right it's going to have a div and probably an input which is going to contain the username and an input that is going to contain the password right so I'm going to put a placeholder so that we know which one is which so I'm going to put it's not username it's email uh and then we're going to put an email a placeholder for um the password as well so password just like this and we obviously want to see this on our app so we're going to import this over here we're just going to say auth just like this press enter and it's going to automatically import the component and you can see that now both things are being displayed in our screen accidentally put an extra um thing over there and I'm also gonna put a button over here uh and this button is gonna actually I'm gonna put it inside of the auth this button is going to be used for um signing in to our project so sign in just like this so we have kind of the UI set up for authentication now what I want to do is I want to uh go over here at the top and I want to import the get or the auth variable that we created uh in our Firebase config file so we're going to go back twice so that now we can go into the config folder and then go into the Firebase file and we're just going to import the auth variable then what we have to import is another thing from uh Firebase slash auth and this thing is actually a method so depending on which uh method of authentication you chose so if you chose Google if you chose sign in with your Microsoft account uh sign in with passwords with phone numbers whatever you chose there's different functions and methods that you can use to implement that so the one we're going to use is create a user with with email and password right because that's I love the name because it's really intuitive so this is the function that we're going to be using now how do we use the function well first of all we have to create a function that will be called whenever you click on the button so we're going to call this sign in just like this and this function is going to be called whenever you click on this sign in button then over here we have to uh first of all have access to what the user is typing on both inputs over here so how exactly would we do that well we can do that in many ways one very easy and quick way is creating a state uh in react which is going to hold the value of this input so the first thing over here is an email and set email and then we're gonna have one for password so password and set password and then uh for email we're gonna say on change and we're gonna pass in we're gonna grab the event and then just say set email to event.target.value uh if you're watching this tutorial by the way I assume you know the basics of react like the the basics Basics because I don't see the point of learning Firebase immediately when you learn react because that's just too much uh so this kind of stuff over here like setting a state to be equal to the value of an input is something that I kind of I hope you guys already have at least a little bit of understanding on what I'm doing right so we're going to do the exact same thing for the password but the only difference is we're going to change this to the set password function right so now we have both inputs and we have access to their values by uh using the states so in the sign in function over here we can just press enter and then we are going to make this an asynchronous function there is reason for that is because when you are working with Firebase you a lot of the stuff returned promises so you do need to use async await or doc then.catch whatever notation you prefer but async await is the latest version the latest uh notation and it's the best one in my opinion so that's what we're going to be using so most functions will be asynchronous and whenever we want to get something or for example do something related to Firebase we can just say a weight and then call the function that we're going to be using so I'm going to call the create user with email and password function now what does this function do right well first of all uh you have to pass in a couple things so the first thing you need to pass in is you're off because it kind of relates your project with this method then you have to pass in the two things first level you need to pass in the email and the second one is the password so you just put in both of them just like this and it will indeed create that thing so let's test to see if this actually works we're gonna uh just come over here into our project and you can actually check to see which users have created accounts into your project by going to users over here it exists inside of the authentication part and there's no user so far but if we come to our react app and I put a user I'm going to create a fake email over here called fake email at gmail.com I'm going to put a password let's call it fake actually let me make this fill the password field because then uh then it kind of resembles more of what a website would be I'm going to put password and what I'm going to write here is fake password I'm going to click on sign in and you'll see that now if I refresh the page I refresh this thing now we have this user called fake email at gmail.com it shows when they were created um they're signed in uh date and also their uid so they got a specific ID it also shows the provider because you can actually have multiple types of signing in uh methods inside of your project which is really cool so you can do all this kind of stuff you can actually like reset the person's password you can delete their account you can disable their account there's so many things you can do but you can see our authentication system kind of worked also this will continue being signed in right so this is handling already the user signed in or not so how exactly do we know that well this auth variable over here it doesn't only serve for putting it inside of functions like this one it actually also serves for uh getting the user that is currently signed in and a good way to do this is for example just as an example over here I'm going to just console log the auth dot current user right dot uh email just to say so when you say current off the current user you can get the information of the current user logged in and then when you say email you're obviously going to get the current email and let's see if this works right I'm going to inspect element obviously since we just logged in it should work it's saying the correct email but let me close this tab come over here and log in again you'll see that it will give us an error right because for a second it hasn't logged in yet it hasn't checked if the user is logged in or not however the way we fix that is by using this uh question marks over here so that we're not trying to access objects that doesn't exist and you can see that when we do that it actually works it says undefined but it's because for a split second it hasn't checked to see which user was signed in or not but if we were to do something like change the state or re-render the component you'll see that every time renders it does actually show which user is signed in so it is handling all of that for you which is really cool so we're going to delete this because we actually don't need this but um one thing I want to do is whenever you're dealing with uh anything that is async await you should always be handling your errors so I will be try catching this uh like this just by saying error over here and then if we get any error we can just know which error we got by console logging or consoling error if you've never tried to put the error method just displace the error message in a more normal way but then I'm going to put error over here and in case something happens we will know because it will be console logged so we'll refresh this and we kind of have our sign in functionality kind of set up now what exactly do we want to do well I want to show you guys another sign-in method that you can create inside of your project so uh there's a couple ones that would be kind of cool um I'm probably going to use Google because I always use Google as an example and I think it's the most applicable one uh so we're just going to click on Google and click on enable then it's going to ask for a project support email just the email that you want to use to support this Google account so I'm just going to choose a random email and click on Save and then it's going to finish setting up our Google integration so now that we have that over here you'll see that since we already set up a lot of the initial um ground setup for this project it's not going to be that hard to implement something like uh entering and logging in and authenticating with Google the first thing we have to do is we just have to import something from Firebase auth called Google auth provider so if you're using an external service like Google you have to have a provider and the way it works is you actually just come over here you say const provider our Google provider provider just like this is equal to new Google auth provider just like this and we do have to have access to it elsewhere so we're going to put export just like this and now in our auth over here let's actually add the ability to sign in with Google so I'm actually I'm gonna it's not gonna look the most organized UI ever because that's not the point of the video uh so if you want to make this look a little bit cooler just do it but I'm gonna put actually over here a button which is going to be sign in with Google it's going to be right next to all the other ones but we're going to put an on click over here and we're going to create a function called sign in with Google then we're going to create a function very similar to this one over here it's basically going to be called sign in with Google but the difference is instead of using the create user with email and password we can actually there's a couple different methods you can use to sign in with Google right there's one which is uh having a pop-up show up which in my opinion is the best one there's other ones like I don't know open your new tab and signing in from there or just redirecting your current page to Google but I like the pop-up version because it doesn't take the user away from the website so that's the one I'm going to be using it's called sign in with uh pop-up but you can see there's the redirect one that exists as well but we're going to be using the pop-up one and this is what we're going to put over here we need to pass in the auth and then the other thing we need to just pass in is the provider so we're going to call it Google provider and we're just going to pass it over here and delete the email thing over here so how does this work well it's very simple when you come over here um I'm gonna actually log out of this um of this thing uh and but actually I'm just gonna show real quick how to actually log out which is something that is really cool uh to logout is actually really simple as well uh I'm just going to create another button called logout and I'm going to create another function called log out or sign out or whatever you want and this is pretty simple so uh so I don't I don't think it it's a problem for me to just show you really quick before we show that signing in with Google uh Works we're just gonna put log out over here and then we just have to import from Firebase auth there's this method called sign out and it's pretty simple you just come over here to the logout thing you put sign out and then you just pass in the auth you don't even have to pass anything out and then perfect that's done you're signed up so over here uh if we still had the the whole console log of the current user I'm going to show you guys console log auth.currentuser.email so if we have this right and we put the question marks in case uh for a second there's no uh current user logged in right you'll see that if we inspect element and go to a console it says undefined but when we click on the emails it's still logged in as the fake email user right but then if I click on logout there's no like visual representation obviously you can add that and you should add that to your project you could you should like redirect the user to a different page or something like that but on the background it did actually log the user out because when I try to type this it should not say undefined because whenever a user is um because now we actually delete it we're not logged in so it's rendering the page taking in the new information which is that the user is not logged in but if we click on sign in with Google you'll see that it opened this thing up it asks us which email we want to log in with I'm going to choose this one over here and it's then going to log Us in you haven't gotten any visual presentation but obviously in your project you can do that but if I try to refresh the page and try to re-render the component you'll see I'm not logged in with this email which is a different email not only that but it does appear that we have a new user inside of our list of users and it shows that it is a Google signed in user depending on what kind of user you're logged in or what kind of Provider you the user used to log in you can get different pieces of information for example if I wanted to I could grab the photo as a photo URL yeah I think it's photo URL for a user and what exactly is a photo URL for a user well if you're logged in with Google you do have a Google profile page right so if you click on this this is my profile image for the user logged in as with a Google account but that doesn't exist with the user who signed in with just email and password so that's important factors that you need to take into account whenever you create a user or which provider they use so this is is basically it for authentication there's a lot more you can do and whenever you're integrated this into your project you'll see that there's other stuff that you'll be figuring out as you go but I wanted to lay out the basics which is signing in with different providers and logging out from an account and showing you guys how authentication actually works so now that we have we're done with this we're actually going to start working with another service in Firebase and what we're going to be working with is the um firestore database service so if you've never worked with Firebase before you might have not known that you can actually create a whole full stack application using Firebase that's what we technically did with the authentication right we haven't created any back-end we're just using react and this is one of the most powerful uh aspects of Firebase and firestore is one of the two different databases that you can use inside of Firebase it is recommended nowadays that you use firestore for almost all kinds of situation that's why I don't have any tutorials using real-time database I I do use firestore for anything even for real-time data right I've made a video recently where I show you guys how to build a chat app application like a real-time chat app application where we use firestore we don't even use real-time database so I would recommend learning firestore instead of real-time database Now to create a firestore and integrate it into your project you just click on create database then this is what's going to appear I'm gonna go a little bit over uh what this rules are in a bit so I'm gonna actually choose production mode I think production mode is important but you can also start in test mode there's no different uh there's no difference in in the actual copyright the only difference is that there's certain rules that you can Implement of who can write and like edit and make changes to your database and they can be set up on production mode but on test mode you don't have to do that it already does it for you but since I'm going to teach you guys all the rules in this video I'm going to click on production mode then we're going to click on next it's going to ask for the location of our database this is extremely important because you do want to put it in a place where it makes sense for the user base of your project because you can actually you can't change it later right so this is what you should choose in my opinion I am right over here so I'm going to choose the United States one but you can choose whatever makes sense for you then we're going to click on enable and it's going to start setting up firestore for us now you can see that there's a bunch of stuff already directly inside of our face right the first thing is that there's this thing over here which is the panel view so here it includes this thing called a starter collection right this button now a collection would be like a table if you're using a I don't know a SQL database uh or just a collection if you're using like mongodb or something like that right it's where if you have different pieces of data inside of your project this is where you would include them so it's like an entity in a database right so if we have have a project where we have a bunch of users and we want to store them and we are using the Firebase authentication system for example we could create a collection called users if you're storing comments from I don't know if you have YouTube and you're starting you're storing the comments that people write you can create a collection called comments so it's a place where you can store data so in this case over here we're going to be creating a collection called movies now why exactly did I choose movies well because I just want to choose anything as an example for this part of the tutorial you can make a project that will allow you to I don't know you can do a to-do list you can do whatever you want I'm just going to create a little project where we're going to be able to create movies read a list of movies that people created and be able to delete and edit them from that list so you put the name over here of what makes sense for yours in our case we're going to be working with movies as an example so I'm going to put movies then it's going to ask for uh a document so what is a document a document is just an entry inside of your collection so in MySQL for example or any SQL database and a document would just be a row in a table so it's just an example of what kind of data will exist inside of your project I'm going to Auto generate an ID because it asks for an ID and it asks for some fields that we can indeed add right so for example a movie let's think about it what would a movie have inside of it so it would probably have the title of the movie right and then we can create an example over here just as the first one that we put into our database I'm going to put Interstellar as an example uh then it's going to ask for what else what else do we want we want date release date so I'm going to put release date and then it's a number not a string and I have no idea so I'm making this this numbers up I'm going to say it's like 2002 2001 I don't know 2003. uh then what else let's put let's not over complicate this let's uh we could put the the director but I I already have a string so let's actually make this a little bit cool let's say uh it's a Boolean which says if the movie got an Oscar or something like that most of the information I'm gonna put here is probably inaccurate uh but um let's just use it as an example so received an Oscar uh and it's going to be a Boolean let's pre I I didn't Interstellar win an Oscar I don't remember I'm gonna put uh as true but then I'm gonna click save and this is how our uh firestore collection will look like so we're gonna have a collection called movies then we're gonna have a bunch of documents inside of it right which are entries and an example of a document we can have is this one over here where it's going to have a title uh release date and a value for if they received an Oscar or not it's also gonna have an ID but the ID exists as the name of the document over here so what I want to do now is I want to add the functionality for us to display um the stuff that is inside of our firestore database inside of our project so I basically want to read the data over here and display it over here in inside of our code so what how we do this is we have to come to our Firebase part over here right and we have to tell Firebase that um it's it's gonna have access to the firestore service so when we say import now we're going to import from Firebase slash firestore so similar to the authentication Service we now need to import from the firestore service and similar to get off the way we tell Firebase that we're going to be using firestore is we use a function called get firestore just like this then we copy this we come down here at the bottom we again export a constant because we're going to be having access to this constant elsewhere then the constant let's call it DB for a database and set it equal to get firestore and finally we just pass in the app because we have to do this like I said in the beginning of the video so now we have DB as a variable now what do we do with this well with this we can basically do whatever we want because if I come over here to our app right I'm going to um I think I'm going to do a bunch of the functionality inside of this app component just to keep it simple so over here if I want to display the list of movies that exist in this the database what we do is we come over here at the top we're going to import some stuff so we're going to import from and then we dot back to config then to Firebase and we want to import the DB constant that we just created then what I want to do is I want to have a state that is going to keep track of the list of movies so we're going to create over here a state we're going to say use State it's going to import use data at the top then we're going to import and it's going to be list and then over here we call it something like movie list something like this and then set movie list just like this then we save this and we come over here and I want to create a function that is going to be used to get the list of movies so guest get movie list and this is the function we're going to be using to query or receive or read our database then with this function it actually we wanted to run immediately when you get into the website right because um when you get into the website you I want to just display everything I don't want to have to click on a button to display the movies I want everything to be happening instantly so in order to do something like that we can just use a use effect uh because the use effect will run um when the component is rendered and we can just put it right over here just like this and then we have to make this function get movie list and also I'm going to put this an empty dependency array so it doesn't run every time there's a change in state I also need to make this function async because like I said most of our Firebase operations will be asynchronous now inside of here we have to read the data from our database and then set the movie list state to be equal to that data so how exactly do we get that data well the way we do it is there is this function from uh Firebase that we can just import by coming import from Firebase slash firestore and this function is called get docs so what is get docs well like I said um we have a doc we have a collection called movies and we have a bunch of documents right right now we only have one but we can have a bunch of documents which is going to represent each of the movies in our collection so if we want to get a bunch of docs we can use this function called get docs if we want to only get one document so one movie there's also a function called get duck but in our case we want all of them so we're going to use the get docs function and the way we do this is we come over here we create a variable called data we set it equal to a weight because it will return a promise and we just put the get docs function now we have to specify which collection we want to get all the documents from uh and the way we specify this is by actually using a function from Firestar called collection and over here we can just make a reference to our movie collection so movies collection and call it ref because it's a reference and set it equal to the collection function now how do we specify which collection we want to set this variable equal to well we first pass in our DB variable over here by just putting it inside of this and then we specify using a key and this key has to be equal to this name over here so the name of your collection so in our case it's movies so we're just going to put movies over here and now we have a reference to our collection so we just put it inside of the get docs and now the get docs will get all the documents inside of this collection so since we have the data we might want to error handle so I'm going to put a try catch over here um just like we did with the authentication and in case there's any error we're just gonna console.error the error just like this then uh we just read the data so we need to set the movie list to be equal to that data right because as of right now you can actually test this out let's just test this out to see we're going to console log the data so you guys can have an idea of what we're doing and also uh one of the reasons why we use the function inside of this use effect instead of just writing this code directly inside of the use effect is because you can't make a use effect be async right and we had to to use an async function to make this work so we had to create this function and right below the definition of the function all we do is we just call the function just like this it's kind of a workaround for you to make have asynchronous notation inside of your use effect right so now that we called it let's test this out right if I refresh the page it should already be console logged we're going to go to our console and we're going to see that it says actually that we have missing or insufficient permissions and this is something that uh is extremely important for you to know because the reason why it's giving us this error is because we have haven't set the rules for our firestore database so if you remember in the beginning I mentioned that we chose the production mode instead of the test mode because in this video I wanted to show you guys a little bit about rules in firestore so this rules thing over here is basically um it's a little bit of code right as you can see that we can add it and it basically determines who can create changes in inside of your database and it's really cool because it helps you determine uh and really build the protection over your database so in our case as of right now it basically says that it's going to allow people to read and write on this database if false this is by default which means that basically no one no one can read or write into the database because false is is never true and it's only allowing this database to be read and written it follows so it will always be false so if I want anyone to be able to write and read inside of our database I can actually make this true click on publish and you'll see that now if I refresh this page we will get something right because now anyone can read and write uh later on in the video I'm going to ex I'm going to make it so that only authenticated users are actually being able to read and write which is going to be a little bit cooler and you guys will see but for now let's just set it to true so that we can just work around with it so you can see we are also logging something and we can kind of analyze how this looks so if we click over here we'll see a bunch of stuff uh most importantly we can see a firestore over here you can click on firestore we can analyze all of this information that we get back from our query however there's one thing that is important to know it's kind of confusing you can clearly see it is confusing uh you might not understand any of this because we're not the ones writing the back end and the response so um I'm gonna try to simplify it as possible for you guys if you guys want to grab this list of data that we get back and you want to just um get the specific documents and their data individually one way you can do this is by basically creating this object we're going to create an object over here uh I'm actually going to create it as a constant so constant um filtered data and when I when I say filtered I mean like we're going to grab directly the data that we want from this response so we're gonna ignore all the rest that is returned to us we're just going to get exactly what we want and it's going to be basically the way we do this is we create an array and this array is going to be actually we're just going to say docs our data from here then we're going to access the docs so all the documents from this data then we're going to map through all of them because for each document right we want to actually create an object that is only going to contain some pieces of information the information that we want is we want to have their ID their received Oscar value their release date value and their title value so how do we make it so that only those things exist in the object is we're going to return an object that contains the doc dot data so there's this function data in each document which you can just use to get this information over here but the thing is that dark data doesn't actually return the ID so if we want to get the ID as well we can do this by separately creating this ID property in each object and setting it equal to the doc.id so this is how you would actually filter that data I know it seems a little bit confusing however don't worry as you work with it you'll get used to it and understanding exactly what you have to do to manipulate to get the data you want but you'll see that now if I console log the filter data it won't look ugly like it was before it will look like exactly how we want it would look like an array with one object so far and the properties inside of it is ID received in Oscar release date and title which is matching exactly what we have in our database and if we want to to display this in our screen all we have to do is just set our movie list to be equal to the filter data and then come down here at the bottom below or off I'm going to make a div with uh the data and then I'm just gonna Loop through the movie list and for each movie We're literally just going to return a div um like this a div which is going to include uh probably an H1 tag for the title so I'm going to say movie dot title uh probably uh A P tag for was it the release date yeah I'm gonna put like date uh and then movie dot release date just like this and then for the actual um see it's already working right it's already displaying but actually what I wanted to do for the um received an Oscar because it's a true or false statement a cool thing that I want to that maybe I I can do is uh maybe like change the it's stupid I'll just change the titles color uh I'll put some CSS here something cool I'll just change the color of this title to um green if it received an Oscar and red if it didn't uh I know it looks dumb but it's just something cool that we can do I can just say something like movie dot uh received an Oscar uh if it's true then we set this to Green if it's false we set this to to Red you'll see that the first one is green because it is a received an Oscar but if we were to create another one that wasn't didn't receive an Oscar this would actually be red so we have a list of users right or movies right which are being displayed in our screen which is really cool because this is the first part of a crud application so the next Port is actually being able to create new movies inside of our app and the way we're going to do this is it's all going to be a little bit meshed up inside of one page because uh I'm just showing each feature you can work on individually so I don't worry that much about that but what we're going to do is above um being able to see the list of movies we're going to create another div which is going to contain uh the UI for creating a new movie so what UI do we want well we want an input which uh is going to be for the movie name so movie title then we probably want um one for the release date so release date and since like oh it's probably just the year right so I'm gonna put over here it has to be of type number right and then uh we have this two things over here so I can put like 2003 2004 and we can write the title here but we also need to determine if it's true or false for receiving an Oscar so I think I'm going to put a check box so we do that by just saying input uh type checkbox and then we have this checkbox over here and we can put a label which I think is is important because um when we put a label we have to Define what the checkbox means so we're going to put received an Oscar you'll see that this is how it looks so we have this two inputs and this checkbox over here so now we also need a button to submit this movie so I'm going to put a button down here and it's going to say submit movie now we have the UI done but what do we do now well we need to get the data that you're typing in on all three of these things so on the input for the movie title the one for the release date and also for the checkbox so the way we do that is we're going to create some states right I'm going to separate this like this uh I'm gonna write a comment and say new movie States just for you guys to kind of have it organized and understand which part is which but over here we're gonna create a state for the new movie title and set new movie title and it's going to be a use State that's going to be a string and we're going to do the same thing for uh both um the new movie new release date I'll say new release date and set new release date just like this and finally the last one is uh new movie I shall say is new movie Oscar I hate this name but uh this is what we're gonna probably have to to live with but just as an example so it's fine also it's important to notice that since this one this one is a string but this is a number because the date is a number and this is a Boolean so we'll set it up as false initially so what do we do now well for the for this one over here we just put an on change right an on change like we did before grab the event and set the new movie title to be equal to the event.target.value now what we do with this one is we do the exact same thing but the difference is that we need to set the new release date and also this has to be converted to a number I believe I think this comes out as a string but we need to set this to a number because this is a number and not a string so for the checkbox what we do is there are two properties that are important to acknowledge here so there's the checked property which basically determines if the thing is checked or not uh and there is the on change property that obviously will run whenever there's a change so on the unchanged what we can do is we can basically do this similar to what we've been doing so far and say set is new movie Oscar equal to but instead of saying e.target.value we're going to say e.target.checked so check boxes have this property code checked which we can access and if I remove this check properly right now you'll see that I can click on this and it will change and it will actually change the value of our state but it's also cool if uh even if we were able to change this in a different way change the state the value would match whatever the state has so I can just put a check over here and say that it will be checked whenever is new movie Oscar is checked as well you'll see that there's no like Visible Changes here the only difference is that if for example I set this to be equal to True initially and I refresh the page it will be checked because it is taking into account the value of the state to determine if the actual thing is checked or not where else if I didn't have that and the initial value is true you'll see that it wouldn't actually match so it isn't something that important it's just something that I wanted to point out uh in case you didn't know that you could do this so now we have actual access to the data that we want so what do we do well what we do is we create this function that is going to be clicked on when you click on the submit movie thing we're going to call it on submit movie and we're going to create it uh probably down here right below the use effect I'm going to call it on submit movie it is an async function because like I said all the functions are dealing with Firebase have to be async then what we do is we actually import some stuff at the top from firestore similar to how we have the get docs function we can import the add doc function which obviously by the name it adds a document right and what we do is we come down here into this function we say await add Doc and what we put here is very simple we just have to put two things first of all is a reference to our movie collection which we already have because we had to make one uh for getting the data so we just put it over here and then what we put is just the data that we want to add it has to be in the format of the data that we're creating so the way we're going to do this is we're going to put over here uh a title right for the movie title and it's going to be equal to new movie title then we have to put a release date so release date and it's going to be equal to a new movie release date I think yeah new movie release date isn't it our new new release date actually uh we're gonna put it over here and then finally we just have to put um how does it look like let me check uh received an Oscar right so we'll just say received an Oscar equal to is new movie Oscar um so we're deciding the values equal to this we don't have to put an ID because the idea will be automatically generated when you add the document and when we're finished with that we um actually just come over here let's put a try catch again so we can handle if there's any errors and catch any errors and then just console dot error any error and now if we save this this should be working but we're not going to actually get any visual like confirmation that it worked other than if we try to add a movie I'm going to try to add for example what's a movie that people like I don't know I'm gonna put Harry Potter uh I'll put Harry Potter one and then I think it was 2001 or 1999 probably 2001. uh did I receive an Oscar I'm I don't think it did the first one I'm gonna click on submit movie oh I clicked the wrong thing I'm gonna click on submit movie and if it worked you can see it did uh we should see a new entry of a new document in our collection which contains the information that we just submitted now you see it's not being displayed automatically over here which isn't cool because uh this means that um we're not automatically rendering everything and we can optimistically render this by just uh manually changing our array of movie lists whenever we add a new document but I don't want to do that there's a couple ways to do this you can actually subscribe to what is known as a snapshot in Firebase but I want to keep this simple um so what I'm gonna do is I'm actually going to make this get movie list uh function outside of the use effect and what happens is every time there's a necessary uh call of this function to get the lists again I'm just going to uh use it so if there's a success in adding a new document we'll just call to get movie list again and it will get the updated versions now you might think okay but aren't we querying like twice like every time we add a new document we need to query again I don't think that that would be a problem um this is a very secure way to do this we could obviously manually change the value of our state which is known as optimistic rendering like I said uh but I feel like this way is the best way to do you are getting double reads however that's not that much of an issue especially when you're using something like Firebase so I'm going to try to add another movie I'm gonna try to put Harry Potter 2. um Harry Potter 2. I think that one was a year later and I know we didn't receive an oscar but let's just put that it received click on submit movie and if I click on it I hope it appears in our screen which it does now uh we just need two more parts of our crud to actually finish up this part of the tutorial so what do we need well we need to be able to delete an entry and to update an entry so how exactly are we going to do that well first of all let's go with delete because that's actually pretty simple the way we do this is um we come over here you're gonna obviously create a function called um delete movie so const delete movie and it's going to be async and it's gonna be a simple function uh we're going to import over here at the top another function which is going to be called delete Doc and you guys can already start getting the patterns right uh it gets really um fast paced after you get used to it because a lot of this functionality a lot of the notation in Firebase is pretty similar so it gets really easy so then what I do is um first of all actually I have to grab the the movie or the specific document I want to delete because the function delete doc actually takes in a document and how do we get a document well we get by actually using a function called Doc in firestore and we use it like this we grab we create a movie Doc set it equal to Doc and then what we do is we specify first of all okay I want to grab a document from this database and we put the name to which collection we want to grab the document from so it's from the movies collection and then all we put over here here is the ID of the collection of the document we want to delete so of the movie we want to delete but how do we have access to this ID well the way I'm going to do this is um I'm going to call this function inside of this map over here right so We're looping through our movie list so inside of here I'm going to probably put like a a button over here called delete movie so that every movie now has a delete movie button and inside of this map we have access to the movie which means we do have access to the ID so what I do is I'm going to put an on click to this thing call the the delete movie function and pass in the ID of the specific movie as an argument to this function and then on the delete movie function I'm going to grab the ID as an argument and then just pass it over here just like this and you'll see that if I put the movie Doc inside of the delete dock now what's going to happen is for each movie We're going to have this button which is going to grab the specific ID pass in as argument and delete the movie now one thing you might be questioning I don't know if you're how familiar you are with react but since we're passing in an argument to this function we we can't just put delete movie without this like this we do have to create a new function that does this it's just a weird notation in react so let's try this out we're going to refresh our page right these are the movies we have let me delete Harry Potter 2. I'm going to click on this button and as you can see it deleted indeed right it's not even over here we only have Harry Potter one and Interstellar so it is working which is pretty good so now what we want to do is we want to finalize this part of the tutorial which is the correct part of the tutorial by adding the ability to update a user and I like to put this at the end because um it's a little bit more complicated not that much though I think even getting the user was a little bit more complicated than this uh because at this point you might already start getting the the patterns for everything but what we want to do is I want to actually add over here the the functionality right um the the inputs so that you change maybe the hmm what should we do should we make it so that uh yeah I think what I'm going to do is I'm going to allow you to change the title for some reason I know usually you don't you're not able to change titles of movies but it's just an example I just want to show you guys that you can change a part of your data so I'm going to put an input for every movie being displayed in our thing and you'll see that now every movie has this input uh and this input will have a placeholder called new title and we also want to put a button to update um the the actual movie so update Title just like this and this is how it's going to look so if you want to change this title from Harry Potter 1 to Harry Potter 2 for some reason imagine you made a mistake you can just put a new title click on this button and this will change here and in the database so how are we going to do this well to do this we're going to do something very similar to what we did with our delete we're going to create another function over here and this function we'll take in will be called update movie title and it's going to take in two things the first one is the ID because we do have to specify which document we want to update so it's going to require an ID but also the new movie title right so do we put this inside of as an argument no because actually we're going to have to keep track of that through another state uh that we're going to create over here at the top so I'm gonna create a state and put over here update Title state then say const uh I'm going to call it updated title set updated title like this set it equal to use state then what we do is we for whenever you there's a change in this input so on change we're going to grab the event and then set the updated title to be equal to e.target.value now one thing I want to point out to you guys is that I'm doing everything inside of one component but I would actually not recommend to do this I'm just doing this because the whole point of the video is to show you guys how to do every single specific part of Firebase uh so I'm not focusing that much on like organization and that kind of stuff but I would recommend dividing this into different components specially making a component for uh all of for each movie right so making a movie component or something like this and then just returning that component over here so then now that we have our our data I'm also going to call the on uh click over here and call the update Title function or update movie title I think and we're going to pass in the ID which is something we've done uh with a delete one as well so movie.id and over here inside of our update movie title what we do is we now have access to both the new title that we want to update to and also the ID of the movie so what we do is we grab the document of the movie when I update just like we're doing right now then we come over here instead of saying delete doc we have to actually use another function called update doc just like this and inside of here instead of calling delete dog we're going to put update Dock and we're going to put the movie document that we want to update and the new field that we want to change it to so the new field is we want to change the uh title field to be equal to the updated title just like this so when we do this now you'll see that if I come over here refresh the page try to change this to Harry Potter 2 and click update Title this will change to Harry Potter 2. if I try to change this to enter Stellar just like this it will oh actually I should put Interstellar 2. it will change this to Interstellar 2 and the changes do remain but there is a little bit of a bug here but it's not of a bug because there's an issue with Firebase or anything like this is again letting you guys know that because we're making everything instead of one component for this video um some unrequested behaviors can happen for example if I type on this thing over here since we're only using one state if I type here uh Harry Potter 3 but I click on this button this will change to Harry Potter 3. as you can see which is dumb right but the reason is because again we're just using one state if you made all this into their specific separate components it would work perfectly so now we're done with our crud right we can change this back to Interstellar but we're done with our crit we're able to delete create read and update uh information inside of our firestart database so what exactly do we want to learn now so now I'm going to talk to you guys a little bit about the different rules that you can Implement inside of your um firestore database because right now I'm logged in but if I log out right and I try to create a movie actually I'm not even logged in yeah I haven't logged in yet and you guys could see that I was able to create movies even not being logged in what I what I want to implement here is the ability to read and see all the movies in the database fine even if you're not logged in but if you want to create a movie you'll have to log in to do so so to do something like this what we have to do is we actually have to first of all find a way to keep track of the user ID for the user who created each movie so like in each movie We're Not only going to keep track of if there is something else character if the release date or the title we also need to keep track of who created that movie right um the reason for that is because we only want to allow people that has um a user ID being sent inside of their request and also not only that but we want to make it so that the user ID that is sent is also the same as the one that is logged in currently to an account so what does that mean well when we create a new movie we're gonna have a few we're gonna have a piece of code that is going to automatically Um send a uid a user ID to as a field to this object and then we're gonna put a rule inside of our firestore database that's going to check okay if the ID that is over here in this field is the same as the idea of the user who is making this request and trying to create uh this this movie then we're gonna allow it to happen if not then we're not going to allow it to happen so how are we going to do that well first of all I'm going to delete both of these movies because they don't have the field that we want to implement then we're going to come to our code over here and when we click on the create on submit movie right we need to add a new uh thing over here this thing is going to be called user ID or we can call it whatever we want but it's just the idea of the user who's creating this specific movie and we're going to set it equal to uh and then we have to grab the auth because um we don't have access to the auth here so we need to grab it by putting auth over here and then with auth we can actually set this equal to auth dot uid I believe actually I think I can maybe put current user.uid yeah this would work so I'm even going to put a question mark over here remember the question marks are only in case a user is not logged in we don't want to try to access current user from off because it probably doesn't exist or uid from current user because current user doesn't exist it's just a way to prevent errors in JavaScript right so now we're sending this information let's check to see if this would work I'm going to try to create I'm actually going to try to sign in uh actually I don't think I signed in I think it got an error because I try to sign in with no information I'm gonna try to sign in with Google actually uh uh choose an account over here and uh I hope we're signed in the only way we can check this is by trying to create a movie so I'm gonna say what movie can we try to create I'm gonna put Fight Club release date bro I have no idea I'm gonna put like 19.96. I don't know if that's the truth the release date but received an Oscar I also don't know but I'm gonna pretend like you did and we're gonna click submit movie you see Fight Club appears over here all this information seems to be correct but let's check if there is a user ID and there is this is the user ID for the user who's logged into my Gmail account now I'm going to cancel this uh and just keep it the way it is and now that we have this user ID what we can do is we can actually come to firestore over here uh and go to this rules tab over here and what you can do with rules is really cool right now anyone is able to both read and write into our database there's also delete and update right which are the other functionalities that you can do to a database uh so we need to take into account then so the first thing is who do we want to allow to read the information over here well if we set this to false right actually I'm gonna you can actually have uh multiple lines right so for example I can come over here and say allow read and have a different rule for read and write into our database so if I want to allow people to read but we put allow read if false you'll see that for some reason we we can't read the movies and it's now showing over here but we do we can create if I created Interstellar um over here you would see that it wouldn't appear here but it would appear over here right so we can create and we can re but we can't read this is the opposite of what we want we want to be able to read anyone I think anyone should be able to read what the information is being shown inside of our project but to create one it's how and to update and delete uh should be a little bit different so let's put over here right update uh update and delete so these are the three things that we want to only happen if you're logged in so what we're going to put over here is we want to say okay if first of all the request so request is actually something we can get that is of an object that um is sent whenever you make a Firebase request and from that you can actually get the information of who is authenticated uh when making that request which is exactly what we need and the first thing we need to check is first of all is that null because if it is no then don't even keep checking anything uh let's just not allow them right so it can't be no and the second thing is we're going to put a double am percent which means end uh in this if statement we're going to say end we only want to allow them to write update and delete if the request dot auth dot uid so if the uid of that person making the request is equal to the user ID that comes from the request so whenever you make a request it should come back with uh some data including um the user ID right just like this now you'll see that what this does is now we can obviously we I made it so that you can always be able to read so it will show but if I try to create a new movie for example new movie real estate uh 1500 I don't know it's a bit of a movie it's gonna work it appears or did it appear let's check over here it's not here anymore this is actually not what I want it to happen it should have been created which is kind of weird uh if I come back over here it's not over here let me check the rules uh okay yeah I see what I did wrong uh a decision should actually be request the resource dot data not what I was doing before so let's check again I'm going to refresh this uh put new movie 1500 semi movie now a new movie is over here and it is indeed uh it has indeed been created but if I try to log out right let's try to log out I'm gonna log out refresh this page I am logged out I know we don't have any visual confirmation that I'm logged out or not uh but let me try to create a new movie new movie two was released a hundred years later and it did receive an Oscar you'll see that this doesn't work I can click how many times I want but it won't work because we're not logged in and we don't have the proper authentication credentials to create a new movie now let me sign in with Google again and let's test something that is kind of cool so I'm gonna sign you with the same account and I want to try to update or delete something so if I try to delete uh let me come to rules so if I try to delete um this one over here what is going to happen it won't allow me to delete right because for obvious reasons um we're saying that you can only delete the ones that you created right and we didn't create this account I don't think it created The Fight Club one I think this account only created the new movie one right but if I try to delete this one as well it won't work and the reason why it won't work is because now whenever we send a request and you can see immediately we have um some stuff like some piece of code over here already written for us so this is how it should look uh in the beginning something similar to this um and this rules are what determine uh whether or not people can actually act upon um the database so I've mentioned this already in this video uh we changed a little bit so that if reading and writing would be true forever but in our case right now we don't want this to be the case what I'm thinking is to keep this simple and just introduce you guys to the topic what we can do is we can make it so that people should only be allowed to read to like read in a crude application means seeing the data being displayed like making a get request or making a query they should only be able to see um actually let's make it so that they should be able to see no matter what so if true right and so whenever anyone who enters this website will be able to read the data that is being displayed but more the most important thing for us is being able to actually create and the data or edit the data so what I think I'm gonna do is I think let's I'm going to show you guys a couple different uh examples of what you can do with this thing so this right over here it encompasses the three things the create the update and the delete So when you say write it's basically a shorthand notation for all three of these but I actually want to make a difference so that I can show you guys a little bit more functionality that you can do with this so for example for the create I only want to make it so that you can create a new think a new movie if you're logged in and you're the user trying to create that specific thing so you're the user who is actually logged in I don't know if that makes sense to you right now but what I mean by this is uh we just uh put the user ID right um as part of the the auth and when we did this uh we're not going to send that data to our request and when we get it back um it's gonna check to see if it is the same as the the user ID for the user authenticated and if so it's going to allow you to create so this would be the case with a create but actually for the um update and the lead I'll just keep it a little bit different I just wanted so that you just have to be I don't know authenticated just to keep it simple um just to show you guys a little difference on what you can do with all of this so update and delete what do we do well if you only want to check to see if the user is authenticated what you can do with this piece of code is you can say we're only going to allow it to update and delete if the request and request is something you can get from from this from your actual database so if the request dot authentication is not equal to no so this is all you have to write to check if the user is authenticated or not so in this case um let's check over here I'm going to refresh are we authenticated I'm not sure I'm going to log out just to be sure then now we're not authenticated let's try deleting a movie you'll see it doesn't work it doesn't work because we don't have the correct credentials but if I try to sign in I'll sign in with my account and I'll delete one of the ones that I have for example that this account created I think this account created this one now you can see for example this one over here uh and I refresh the page you'll see that it did delete that specific thing and it is deleted from our database right it's not over here anymore now this is only if you're authenticated but for creating the request as of right now it doesn't check to see the user ID like we said that we were going to pass so to do something like that what we would do is first we would check to see if the request.auth is not equal to null right then we also need to check to see if the request uh request Dot auth dot uid so this is the uuid of the authenticated user is equal to the request and then you can access the resource which is the data that you give through the request and you access the data from that and then you put user ID which is the field that we put over here so we're just checking to see if both of them match and this is fully authenticating the user because it will only allow you to create if that's the case so now if we were to create a new movie we are logged in we are authenticated I wanted to put over here uh I don't know what's a movie let's say Star Wars I have no idea when Star Wars were released I'm gonna put the old ones 1980s 90s I have no idea uh received an Oscar yeah you see Star Wars appears over here and um it was correctly created so this is a little bit the introduction to how to work with Firestar rules uh I didn't want to get too deep into it because it is a completely different topic but it is kind of interesting and this is all the basics right you can do a lot of stuff with this you can create functions in this you can check for specific users check for cross-check between different Collections and a lot of cool stuff so I would recommend um trying to understand this and trying to learn this as much as you can because it is a really interesting thing to learn so now that we're done with this I want to teach you guys the next topic before we actually deploy this uh which is the last topic I want to explain which is um the the storage service in Firebase so Firebase you can actually store files over here it's not only just databases you can store files and images and it's a really cool thing that I think a lot of people have trouble dealing with so for that reason I wanted to integrate it into this course so the storage system is really simple it's very similar to what we've done so far to set up into your project you click on the storage thing over here and then on get started it will again ask you if you want to do it in production or test mode just like the Firestar database we're going to put in production then um we have to use the same location as before and it's going to create what is known as a bucket a bucket will just be a place where we're going to store all of our files in the cloud and while it is creating we can come over here to our code and open up the Firebase config file right because we're going to be integrating some code to connect this code with the our storage system so also before that we need to go to rules and fix up because right now it's not allowing us to either write or read similar to what happened to five to the firestart database so we'll just change this for now to true and publish so that we are able to send images and files into our storage system so what we have to do is we have to come over here to our code and we have to import at the top from Firebase slash storage and what we have to import is the get storage function just like this then we're going to do it just like we've been doing so far we're going to export a constant and we're going to call it storage and set it equal to get storage and pass in the app so very similar like I said before then our work is pretty much done on this file you can come to our app.js and I'm going to mix everything up again I'm gonna actually add the functionality to send images over here at the bottom so we're gonna come down over here at the bottom below this div over here and we're going to put another div which is going to contain all the stuff related to sending the image or the file so what we need is we need an input which is going to be off type file and then uh we just come over here at the bottom we're also going to put a button that when you click on it it's going to submit the file so upload file and then we can just come over here at the top we can import from our Firebase thing the storage variable just like this and we have to create a state that is going to represent the file that we are selecting so how do we do that well we're going to come over here at the top uh I'm gonna add a new set of states call it file upload state just to keep it organized for you guys when you guys are reading the code then set it to you state we're going to set it to null initially because it's a file so it's not a specific type and we're going to call it file upload and set file upload just like this then what we want to do is we're going to come over here to our inputs where we're going to be selecting the file and we're going to give it an on change that we're going to grab the event and whenever there's any changes in the input which means whenever you select a file we want to set the file upload to be event dot Target dot files so when you have an input of type file you can access this property called files on the Target and its files are not file because it could you could actually select multiple files right when you have this input you can there's some inputs that allow you to select multiple files and some that you should only select one in our case let's just keep it simple and upload one so uh I'm just going to grab this is going to be an array so I'm just going to grab the first file that you select right to keep it simple then I'm going to save this and technically we have uh the state working but what we have to do now oh I just realized I call this eat another event so I'm going to put e over here so what we have to do now is create a function that is going to be called upload file something like that and it's going to be called whenever you click on the upload file button I'm going to create it uh probably down here now this component is getting a little bit confusing but I'm going to add some comments uh after the end of the video so if you guys download the code it should be a little bit more organized so over here I'm going to call the upload file function and this function will be pretty simple what we're going to do is we're going to first check to see if the upload file state no actually you know it's file upload state so if the file upload state is no so if there's no file to upload then we just return and end this function because we don't want to continue trying to send an empty file to our storage system but if it is not no then we have to make a reference to our storage system so how exactly are we going to make a reference the thing is on our storage system over here we can actually do cool stuff like create a folder right so if I want to create a folder called project files right I could just create this folder and I can specify that I want to add those files to this folder and to do that all I had to do is I just I just create a variable called files folder ref set it equal to um a reference variable which is something that exists in Firebase and we just import it as you can see over here as you can see then we set a reference and we pass in the storage uh that we have the variable that we imported at the top then we just set in over here the path to where we want to store this file so it would be on the file folder is a file folder project files uh it has to be the same name project files slash and then here is where we want to upload the file now we can specify what the name of the file is going to be what I like is to usually either just keep it the same name and to give it the same name all we would have to do is just add the file upload dot name this over here would get the name of the file because file upload is a file and then we could add something else if you wanted to but I'll just keep it like this I'll just keep it the same name as what you're uploading then we come over here and we need to actually use a couple functions from Firebase and to use those functions we have to make this this uh function asynchronous right so the function that we want to use is called and it needs to be from the storage it's called upload bytes this over here so what we do with this is pretty simple we come over here we say await then upload bytes and we just specify the reference we want to upload to so the files folder ref and our file that we want to upload so in our case the file upload so now this is just going to send it to this specific path the one we defined over here and it's going to send this file over here we can always obviously try catch right because we want to handle the errors so I'm going to say try and then catch and say console.error any possible errors that we have so just like this and now we can come over here you know obviously if I open this file you'll see there's nothing inside of here but if I come over here refresh my page and I come to the choose file thing over here right I'm going to zoom in so you guys can see a little bit better this over here so when I click on this it's going to ask for a file I'm going to upload a thumbnail that I made right over here click open it's going to choose the file and then I'm going to click on upload file but I'm going to inspect element to see if any errors are going to occur when we do this so I'm going to click on the button and no errors seem to have been consoled meaning that our try statement must have passed but the only way to check is coming over here and um maybe refreshing let's see yeah you can see our file was successfully uploaded into our storage system now in this case how would we receive that file back well if you're it's a little bit more complicated and I don't want to make this video too long so I actually have a specified video on just this where I teach you guys how to upload the file and how to get everything in displayed into your project especially if it's an image right because sometimes it's hard to display a PDF if that's the file your file type that you're trying to upload but with images I have a video in this I'm linking on the description if you want to check it out but I'm not going to show you guys how to um get those files just to not make the video too long because now we're done with this part of the tutorial this is a really interesting service that I think Firebase provides and I honestly uh think it's really worth it to describe it's just for this if you're interested but the last thing that makes Firebase amazing is how easy it is to host your projects in here so how would we do this well there's another service called hosting which we kind of told Firebase that we already want to use so you click on hosting then go to get started and it's going to ask you to install the Firebase CLI which we have already done in the beginning of the video but if you have not just installed it like this just run the command we're going to click on next then it's going to ask us to sign in to our Firebase account inside of our terminal and to do that we're just gonna open up a terminal over here I'm going to come to our code open up a terminal I'm going to clear it I'm gonna put Firebase login so the Firebase command only exists if you have the Firebase CLI already installed so make sure you have that installed and also make sure that after you run this command over here you re-initialize your terminal or else it won't recognize the command so you can see I obviously already logged in to Firebase with this so um it I already have done this so it doesn't matter you guys should just do it on your own then we have to copy the Firebase init command paste it over here and as you can see it's going to ask us a bunch of questions so now you can see it gives us a lot of options actually over here of what we exactly we want to deploy so um I don't want to get too deep into each of them uh you can actually just deploy specific portions of your projects you can deploy like you can just deploy a database for example you don't even have to deploy a front-end or a backend in our case what we want to deploy is we're going to choose the option that says hosting and then configure files for Firebase hosting and option optionally set up GitHub action deploys so it's this one over here and to select it you don't press return or enter you actually press space and you'll see that it will select by because it will become green and then you press return if you don't press space it will give you an error so now it's asking us to choose between using an existing project to deploy or creating a new project or uh there's two other options that doesn't really matter in our case over here in our case we already have a project which is the one we just finished creating so I'm just going to choose this one over here I'll also in this case you just press enter you don't have to press space for some reason that's how they they made it look like so now it's going to ask which Firebase project do we want to deploy so I have a bunch a bunch of of stuff right obviously I have a bunch of projects that I can deploy but I do want to choose the one that we have set up over here so what is the name of this specific project well if we come over here we'll see it's called Firebase course I'm going to click on this again just to get back to where it was it's called Firebase course so I have to choose the one that is called Firebase course which is this one over here you choose the one that is specific for your project then I'm going to press enter so now it's asking us uh what we want to use as our public directory as you might know uh we have public over here as a folder in a base create react tab project and it is where all of our code and assets are exist right so we want to keep that name and by default if we just press enter that's what it's going to default to um then it's going to ask if you want to come figure our project as a single page app where we rewrite all of our URLs to index.html we don't want that and by default no is already the answer so press enter again then it's going to ask if you want to set up automatic builds and deploys with GitHub this is really useful so I'm going to be showing you guys how to do this basically what it means is when you make any changes to your code and you push it to GitHub it will automatically re-trigger a deploy meaning that the changes that are that you've just made are going to become live so we're going to press yes and when we do this it's actually going to uh ask us first of all if we want to rewrite um overwrite our file we're going to put no we don't want that and it's going to open up something for GitHub so we can set it up and I already have set up I already logged in to to GitHub with my Firebase CLI so I can't do it again but all you guys have to do is just put your information for GitHub and it will log you in but now that we have logged in and linked our CLI with GitHub we could just come to our visual source code and it's going to be asking us okay for which uh GitHub repository would you like to set up your GitHub workflow so what it's asking is it's asking us to go to GitHub choose the repository where we specifically deployed our project so in this case it's assuming that you've pushed code to GitHub right so that's what I'm assuming here they've pushed this code into GitHub because this is how you would set up with GitHub right you created a record repository and pushed your code so in our case we actually haven't done that yet so I'm gonna do that right now I'm going to create a new repository over here let's call it react Firebase course so we Act Firebase course I'm creating this and this is what it's going to be in the description of this video I'm going to create the repository I'm going to copy all of this stuff just come over here I'm going to actually open a new terminal uh say git init git add Dot and then just push all of this it's going to push all the code and now they all exist inside of our repository so now we want to link our this terminal over here we're going to link our GitHub repository to our GitHub workflow so the way we do this is we copy um basically this part of the URL of our repository from our username to the end of the name of the repository so we just copy paste it over here press enter and as you can see it is setting up everything uh related to that specific repository now it's going to ask us if we want to set up the workflow to run a build script before ever deployed for this we just want to press enter uh then it's going to ask if we want to set up automatic deployment or sites live Channel One appear as merge again press enter Then what is the name of the branch associated with your site's live channel so this is in the case where you have multiple branches right and you want to only deploy one branch or specify that that specific Branch would be the one that should be deployed in our case you only have one right in this because I just created this I didn't create multiple branches we just have the main and it is the default one so I'm going to press enter But if you had another other branch that you wanted to deploy you would just write its name over here so I'm going to press enter and it says Firebase initialization complete so now we go back over here to our thing over here press next and it's going to tell us to run the command Firebase deploy so let's do this right now press enter and let's see what happens now that it's done let's click on the hosting URL for the project it's what appears over here I'm going to click on this it's going to open up and so it doesn't seem to be appearing our actual code and this is the mistake I do every single time I deploy to Firebase I don't know why I make this mistake so much but I'll explain to you guys what the mistake is we forgot to build our our project so when you're finished with a react tab you actually can create an optimized version of it by running the command yarn uh build and you'll see it will run and create this production build as you can see and we had to do this actually before running Firebase init so this is a good point because if you guys ever forget uh to do this this is what's causing the issue so now that we ran the Firebase uh we ran the yarn build we have a build folder right over here and this is actually instead of the public folder remember there was a question that asked us um where we wanted to to store our project right so we we set it to to the public folder but that's that's wrong it should be the build folder so I'm going to put Firebase init over here press enter go through this again but now we are used to it so we just press enter then it's going to ask where do you want to store your public directory and this is where we put that we want to put the build folder just like this press enter and then we just put enter to all of them and it says Firebase initialization complete now that we fixed this error we can run a Firebase deploy again and when it's finished deploying I'll be back in a second okay as you can see it finished deploying so I'm going to refresh this page and hopefully and surely it does work as you guys can see I just realized I made everything really small as well I didn't care about CSS at all and I was kind of zoomed into to my browser but yeah that's that it is deployed you can play around with it the data is matching the data that we have over here in our firestart database which is really cool but uh yeah this is the deployment process and I really hope you guys understood it uh I know it was it might have gotten a little bit confusing at the end over there but if you guys have any sort of questions just ask me in the description obviously I'll be helping out anyone who who is interested in learning and enjoying this topic but yeah that's that's basically it I'm really excited that I made this video because I really wanted to make a Full Compilation of Firebase stuff because it is a really cool technology I used to not like it until I tried it and now I'm in love with it so yeah yeah that's that's basically it I really appreciate you guys watching this video If you enjoyed it please leave a like down below and comment what you want to see next subscribe because I'm posting every week and I'll massively appreciate it again thank you brilliant for sponsoring this video it is this kind of companies that actually support our Channel and makes me continue providing valuable content for you guys so if you guys could help me out and go check out their service is really nice I'll be really grateful as well so that's basically it really hope you guys enjoyed it and I see you guys next time [Music] [Applause] [Music] thank you [Music] [Applause] [Music]

Channel: PedroTech

Views: 65,898

Keywords: computer science, crud, 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 course, react firebase, react firebase course, firebase authentication react, firestore, react firebase crud, firebase upload image, firebase deploy

Id: 2hR-uWjBAgw

Length: 99min 4sec (5944 seconds)

Published: Tue Jan 31 2023