 Hello everyone, today we'll be taking a look at how we can use Firestore in our React project. So if your React project doesn't yet have a backend and you don't want to code a REST API or even a GraphQL API and you just want to get something up and running as soon as possible, you can use Firestore. And the good thing about this is that you can migrate over from other NoSQL databases over to Firestore because there's no need for schemas. So there's one project where I switched from MongoDB to Firestore in within just a few hours and it's really easily done. Let's start integrating Firebase Firestore. So go to console.firebase.google.com, go create a project, of course you need to be signed in to do this. Firestore gives us a very generous free tier and this is a free forever kind of deal so you don't have to worry about your trial running out. It's just that once your traffic gets high enough and when you start to you know have scale up your project a bit then maybe you'll need to start paying but you can start with a free tier and you don't even need to enter credit card details or anything. So we can just create our project, maybe you can call this color palette. So let me just show you all what this looks like. So this is our final project. So it's not really complicated project but then again the goal of this video series here is to show you how you can integrate Firebase into your React project. Here we have a new button to create new entries and we have edit buttons and of course we have the name here of the color and then we have a preview of a color here. So we have dots in front of the color name and the value, the color value that's going into this dot here is actually fetched from the database so it's not hard coded. So let's create color palette, let's hit continue and then we don't need Google analytics, you can create this project and this is going to take a while. So I'm going to pause the video here and come back once this is done provisioning. So it seems like my project is now ready. I'm going to hit continue and this is Firebase. So I just created a new Firebase project but we still have to create the Firestore database. So Firestore and Firebase is not the same because Firebase includes a whole suite of products that you can use like authentication, you know, real-time database which is another type of database. We have storage, hosting, functions, machine learning, etc. But first let's go to Firestore database and create a new Firestore database. So I'm going to hit create database here. Let's start in test mode, production modes for security purposes. If you just start in production mode you won't be able to make changes in the start. So let's just go with test mode. Then here you can select your location. I'm going to hit enable. Once your provisioning is done you're going to get here. The concept of NoSQL databases is that you don't have tables and rows. Instead tables are called collections and rows are called documents. So let's create a new collection. The ID here let's just call it colors. And then we're going to have to create our first document in this collection. I'm going to use auto ID to generate a random ID there and that's called the first field name. So the name of our first color is going to be red and then let's add a field. The field name is called value and the value for value is RGB. So red, green, blue. So f00 is red. I'm going to hit save and then we're going to wait and create another document. So I'm going to generate the ID again. Let's create another color this time green. I'm going to add a field. The value for green is zero f0 because red, green, blue. I'm going to hit save and let's make a blue. So generate this. Let's call this name blue. Let's add a value for blue. It's going to be zero zero f and hit save. So now we have our first our initial database and then let's actually go and create the front end for this. So I've used create react app and I've created an app like this. And right now I'm just returning an empty string here. So if I go ahead, let's go to our Firefox here and let's refresh it. It's just an empty canvas because I'm returning an empty string. So the first thing I'm going to do is let's see we need at the new button here. So I'm going to create some divs here to encompass everything and slash div, let's say hi. So that works. Now let's make a button here and let's say new. So I'm going to see if this looks similar. So we have our new button here, but it doesn't look nice. It's really small for those of you on small screens, you won't be able to see it. So I've written some CSS here. So right now this is really small, but once I add class name of main, or is it root? I forgot. So it's main, I'm going to change this root. And we're going to add a class to a button and it's going to be called button. So when I save that, it should make the font bigger. I'm not sure why it's not. Oh, I figured out this should be targeting the class, not the IDs. So this should work now. Okay, we have a much bigger button now. Let's see if this matches up. Okay, it does. And now let's create this unordered list where we have edit and then we have the preview and then we have the actual name itself. So the way I'm going to do this is I'm going to create an unordered list here, like so. And I'm going to have an anchor here that has an href of just a hash. Let's say edit and save that and we can see our edit coming up. And I forgot to put list items. So let's wrap this in list items and we're going to wrap that and you should see the bullet point. Then we want a space when I put in our dot here, which is a custom component that I'm going to create. And then we want, let's say red, like that. So we have to create our custom component right now. I'm going to do that here. And let's do const of dot equals to an arrow function, which I'm going to create. So let's return a span. And this span is going to have some styles here. I'm going to create this style object like that. And let's do height of 25. Let's width of 25 as well. Let's have a margin. So vertical margin should be zero horizontal, should be 10 margin pixels. And then add background color, background color. So background color, let's add blue here. And border radius, let's add this to be half. So 50%. And I've misspelled that. So border radius and display will be inline block. So just basic styling here and let's add the style. And so this would work. Let's see dot is not defined. Is it though? Okay. So I realized that this is inside of the HRF. So I'm going to take this out. It's not supposed to be in the anchor. Sorry. So I'm taking that out. And this should look much more like it. And one thing you're going to notice is that this doesn't match up. So we have red, but the preview is blue. So we don't want to hard code this color in instead. I'm going to put color and I'm going to take that from the props. We have to pass in color as a prop here. So red is actually going to be hash f 00 because red, green, blue. And now I save, it's going to match up. Perfect. So let's create a few more of these. I'm going to create red, green and blue. So let's do red, green and blue. So we're currently hard coding this in. But later on, I'm going to show you how you can just get these values from the database. So now we have something that at least matches up in terms of the styling. So our project is now have completed because we have completed front end. Now we have to connect this to the back end. I'm going to pull up the back end here. The way we're going to make a connection is by going to our project settings here. So it's a cog icon here, click on that, click on project settings, then go and click on this brackets thing. So this is how you're going to create a new app. We're going to call this react app maybe. And then we can register the app and then it's going to give us some things that we're going to have to copy and paste. So navigate to your project folder here and then you have to install Firebase by using npm or yarn. So yarn at Firebase. I'm not going to run this command because I've done this already and I don't want to bog down the video. So just install Firebase in your project and then copy this. So this is specific to your individual projects. Don't just copy mine because yours is going to be different. So copy this and then go and create a new file called firebase.js and just paste everything in there. So we are going to have export some kind of firebase or firestore database handle that we can import from app.js. So we can use that handle to read and update the contents. And another thing you should know is that firebase is a collection of products. There's a lot of things that you can do in firebase and you can see that to do here it's asking us to import specific firebase products. And in this case, we just want fire firestore. So we're going to have to import get firestore from firebase slash firestore. So once we have firestore we can export default get firestore. Now remember to run this export this get firestore function after you have initialized your app like so. And then we're going to go back to our app.js here and import that database. So I'm going to import db from dot slash firebase. So that's our default export that we've done here. The next thing is to import use effect from react. So anytime you're importing anything from the API or from a database you'll always want to do that in use effect. So let's do use effect. So it's just a typical react use effect hook. So use effect. And then this is going to take in on snapshot. So on snapshot is going to be a function that we're going to call in from firebase. Let's do that just right here. Oh, it's here already. So it means that VS code auto imported this for me. So if yours isn't automatically imported, you're gonna have to import this actually it's going to be from firebase slash firestore. So on snapshot is going to take in two arguments. And the first argument is going to be the targetter. So what documents which documents do you want to get from the database? And the next the next argument is going to be a callback function, which we're going to populate later on. So let's target the collection of colors. So the way we do that is passing in collection. And then we have to pass in DB to the collection and the name of the collections. So DB is the handle to the database that we've exported initially and then colors is the name of our collection. So if you look at our console here, let's go back to the console. I'm going to go to firestore database. And in here in the collections, you can see that this collection is called colors. So that that's the name of the collection that we use and it's in squiggly lines because we have to import that here from fires base slash firestore. In the callback function, what we're going to be getting is a snapshot from the database. And then let's just console.log this snapshot. Now, I haven't figured out a way to make the font size on the console bigger. Those of you with small screens just have to bear with me a bit. I'm going to expand this object that we are printing the console here. And you see that's just a bunch of metadata and queries and underscore snapshot underscore firestore. And it's not really anything useful right now. And that's because we are targeting an entire collection. It makes sense that snapshot is going to contain multiple documents. So I'm going to do snapshot docs and let's refresh this and expand that. So now docs is an array and there are three items in this array 012. So it makes sense because if I go back to my console here, you can see we have three items in our collection called color. So it makes sense why there's three objects here in this array. But then again, there's an array. And there are three objects in this array. And in these objects, there's not really anything useful here. If I expand the prototype of this object, there's a property called data and that's a function. So this property is what we actually want to call in order to convert these arrays of objects into actual data that you can use. So we will do docs dot map. So we're going to map through every single document. We're going to get a document and then we can return doc dot data. So for each document, we're going to call the method of dot data so that we can convert this document object into just the data that we want. I'm going to save this and reload this so that we can see in the console. We finally have some useful data here that we can use. We have an array of three objects and these objects right now they have name and value. So the name is the name of the color and the value is exactly what we're setting in our console. So we have name and value. So this is the actual data that we can work with. I'm going to just get rid of console.log because we're going to change this. We're going to store this data that we're getting here in state. So I'm going to import use state from react and the reason I'm using on snapshot here by the way is because if you use the get data function from Firebase you're just getting the data once but if you use on snapshot, on snapshot is kind of like a hook that will update itself every time it detects a change in a database. So you know you don't have to fetch the data from a database every like five seconds to update it because this is a hook that this is like a socket that will automatically update and that is why on snapshot is going to return a function that you can call to terminate this listener. We should return this unsub function back to use react. So every time this component unmounts we're going to terminate this listener and I realize that I have to put in an empty array here. So remember that every time you're using use effect you should always have like an empty array here if you just want this to run once when the component mounts and I realize that this is quite inefficient here. So instead of returning that like that we can get rid of the curly braces so that we're just using an arrow. There's probably a semi colon there that I am forgetting so I have to get rid of that and get rid of this curly bracket here. So this is how it looks like we are returning on snapshot to use effect and you don't see me type return here because I've gotten rid of the curly braces in the arrow function. So this is just the single thing that's returning to use effect. So every time this component unmounts or dismounts the callback function is going to be called from on snapshot to terminate this listener. So this is something that I keep forgetting when I'm doing my Firebase project. So just remember that you have to return this to use effect so that it can successfully terminate the listener. So let's go back to where we were. So we were going to put this data to the react state. So right now I'm just logging the data to the console which is not really useful. So I'm going to make a state variable here const of colors and set colors equals to use state and initialize this with an empty array here just so that it doesn't return undefined for the first time it's rendering. And then I'm going to change this out from console log. Actually, you know what I'm going to do? I'm going to make that smaller so we have more space, more room in our code. Let's take out console.log. Let's instead put set colors. So this is what we're going to be doing. And then we can console.log colors here. So we're console logging from the state here instead of just directly console logging from this. I'm going to refresh that and you can see that it returns just the same. It returns the array of three objects and that's all good. Now let's take out the console.log once and for all and let's actually implement this. So we don't want to be hard coding this instead we're going to be getting this data from the state here. So curly braces and let's say colors.map and we're going to get each individual color and then we're going to return we're going to return something here. Let's return this list item. I'm going to cut that paste this in here. Now we see it's just all red. So what I'm going to do is I'm going to do color dot name. So that's what the property is called. And for the color, I'm going to do color dot value. So now let's refresh this and this is actually being fetched from Firestore because you don't see me hard coding any values here in our app.js and everything is coming from this on snapshot here, which is setting the colors into state. And then we're reading that from the state and we're mapping each individual one and everything works right now. One last thing that you're going to see is this warning here in the console. It's basically reacts warning of telling us every time you use dot map you need to set a unique key to each element here just so that react will be able to properly render each different item that you map onto screen. You're going to realize that most people use color dot ID because you're going to fetch the ID from the Firestore database and this is what our ID is. So when I add a new document, remember that I generated an ID that we can use. But if I do color dot ID right now, it's not going to work because let's get back our console.log here just to see what's in colors. I'm going to do console.log colors and I'm going to open this in the console. In each object, we only have a value and name. We don't have the third property of ID. And the reason for that is because we're doing on snapshot and then we're returning snapshot.docs.map.doc.data. So .data is a method. It's a function that returns only the data. It doesn't return the ID. So to return the ID, we have to do that ourselves manually. So I'm going to return an object that uses the spread operator to spread out all of the properties of doc.data. And I'm going to set a custom property called ID and this will be mapped to doc.id. So I'm just going to scroll here so you can see what I'm doing. I'm returning an object that uses the spread operator so it inherits all of the properties from doc.data and then I'm setting my own property called ID that's mapped to doc.id. I'm going to save this and then now when I save this and I refresh it shouldn't give me this error anymore because color.id is now set to the documents ID and I'm just going to console.log so you can see that. I don't know why I keep getting rid of console.log. So I guess it's a force of habit. So I'm going to refresh this and then now you no longer see the warning and you can see in the array here I have name, value and ID. And the ID is going to match the ID of the documents. And I'm just going to refresh this one last time just so you can see the new button appears first before the list items. And the reason for that is because we know that we're actually getting this data from the actual Firestore database itself and there's a latency between our app and Firestore when our app is fetching the data from Firestore. So what you can do is go up here to the initial state and create an initial object here that has a name of let's say loading. Now this is a really janky way of doing things but I'm just going to show you that you can save this and when I refresh this you can see the loading screen here before it shows up and it's going to give me the error again so I can just give it an ID you know an ID of initial. So when I refresh it shouldn't it should no longer give me the warning and should give me everything that works perfect. So I'm going to split this crash course into a few videos and in the next video we're going to talk about how we can implement the functionalities into the new button and the added anchors. So if you have any issues you can just put them in the comments and we can do my best to help you out and that's it for this video.