React Todo App With Firebase v9 / CRUD Functionality

you can clone; however when you run my project it won't work because I'm not going to include any of my keys in my github project ok so use your own keys it's very very simple don't use mine and if you are going to host this , make sure to hide these keys in an env file. this is what we want to do, just copy it, so that's perfect, go ahead and continue with the console now, once we're in our console, this is where we're going to work. We will click on this build button on the left side and we will search for the Firestore database and this is a real cloud storage for Google for Firebase here, so what we want to do is just create a new database, we can start in test mode, okay, go ahead and click start, just choose the Firestore location closest to you, anyway it should be the closest to you by default, so let's go ahead and click start, it says it's provisioning our our account so this is very very easy guys and it's almost done it's usually pretty quick to set up the security rules so that's all we need to do so what What we want to do is actually install or rather configure cloud storage in our Firestore in our application, so what can you do here if you want?

I'm going to go to the docs just to show you how to do this. It's really quite easy. Firebase has some really great documentation for you to read, so I encourage you to read it. If you're learning Firebase and person, click on that build and here on the left are all the projects or products that they offer again. We are using Firestore. You see, click Get Started, scroll down, and by the way, guys. We're using a Virgin 9 modular, the most up-to-date version of Firestore here or Fire Firebase, so what we need to do is import and get Firestore from Firebase.

Let's go ahead and copy that if you look at our code here. on the left it says add SDK here for the Firebase products you want to use so that's exactly what we're going to do go ahead and paste it in there just like that and then down here at the bottom what we're going to do say is when. to export sources because we want to access this throughout our application export const db for the database here okay so I'm just going to say git firestore and then we want to go through the application like this that's all we need do. inside our

firebase

dot js file so we can go ahead and close it, just make sure you import get firestore and then also export the constant database and that will be equal to firestore passing through the app okay, so we can close that and I'm going to close the docs for now because I'm not really going to go beyond the documentation, although I recommend reading it if you're learning Firebase, so now that we're at it, let's go back to our application level here. and what I want to do is okay so what I want to do let's go ahead and I'm going to go ahead and create a collection here and the way that Firebase works with collections is known as a database so you can think about collections . like the database and then all the items inside your collection are real objects or however you want to store them, so I'm going to say generate an automatic id and this is just an id for the item inside your database field. say text text there and that's going to be a string and I'm going to say learn we just type learn

react

okay and we also give it another field that says completed and we're going to give it a boolean value here and let's do all this with code too I'm just setting it up this way, we'll say false, okay, so let's go ahead and click save and it will generate our this is our article right here, our document, sorry, our document is what you're referring to and then each document can have properties so what we're going to say I'm going to create another document here and this one will have an auto id and this one can be uh see text and this one will say we'll say ryan elite code like this, okay, and we'll have a full boolean here, I'm going to change this to false , okay, so let's go ahead and save it, okay, and now what we want to configure first, okay, let's go into our application and bring this down. a little bit, so now we have everything coded and what we're going to do is come in here just above the return, but below our state we're going to have some different things.

What we want to do is We're going to say create our credit function here create to do, then we're going to have a read to do it, read it from Firebase, okay, we're going to say update it in Firebase and then delete it to do it. This is our to-do list inside our to-do app, so let's start with reading things to do here, so what I'm going to do here is we're going to use the use effect hook. There are many different ways to do this, as I said. I'm going to use the use effect hook okay so what I want to do first is go ahead and import that hook at the top

react

uh my vs code doesn't seem to import stuff for me lately so that's all good . use an effect like that and that will just take one arrow function and I'm going to pass just a dependency array here so it doesn't fire over and over again and cause a memory leak here so what we want to have here I'm going to say constant and basically this is just defining a path for our database and I'm just going to store this in a constant named q and that's going to equal query, okay, query They're going to open up our uh our parentheses here and we'll say collection and then we're going to have another parenthesis here and we're going to say db and then the name of our database which is okay and we're getting some errors so we need to import things from Firebase so first what we need to import let's go here and let's go to import it to do it right, sorry, let's go down here, let's import our database there and that's the constant. we export so we'll say import we need to put this in curly braces and that's from

firebase

uh the firebase file that we created so next what can we do here with the rest that we need to import from firestore and let's go. to do that with our import some keys and one query the other is collections which we just use and this will be from firebase slash firestore so that should fix all the errors we see there now let's move on to our use effect here , so what we're going to have here we need a constant unsubscribe like this and that's going to be equal to a snapshot and this is like taking a snapshot as an image of our database and in firebase and then reading it back to us so we can render it in the screen, so in the snapshot, that's how I think about it, so I use q and that's the kind of path we're going through here, okay, so q and then We'll have a query snapshot like this and then we'll use an arrow function here and what we're going to pass I'm sorry, we're just going to have our permission, we're going to create an array here, so we're going to say, let's, we're going to say make the array and we're going to set it to an empty ray for now, then we're going to be right below that. and we'll say check your snapshot, we'll use all four each and then for each document, you can name it whatever you want, pass the narrow function here name it.

I'm just going to name my document, okay, and then here we can say do, dot matrix, press dots, sorry, this is do. array not to news dot array, this is our array here that we just created and then we want to insert everything into our array and this will be a lot easier every time we update our arrays as well, so what are we going to do? In our push we're going to use an extension operator here, so what we can say is in our object here, doc dot data, there we go and then we'll say id doc.id and this is the id of our array here. so don't worry about that, we'll come back to that here in just a minute, but once we have our snapshot, we just want to set it to our state, which is what we need to do, it's here, so the way we're going to do it which we will simply say to-do array, then here we can simply say to-do array and that is the to-do array that we just created as an empty array and then we are using the for each method to push each object into our array in the new array, so we're passing in the to-do array and then right below that we just need to unsubscribe, so we'll return our little arrow function here unsubscribe as well as that function, okay, so we'll get a error there and that's because we just need to import this into a snapshot like this, okay, zoom out here now, so let's go ahead and delete this is our state here because right now it's traversing our state. so let's just delete this and set it to an empty array and hopefully if we did everything right we shouldn't see any changes of course we didn't do anything right so let's go ahead and check so that the objects are not valid as a child of reaction. let me tell you why this is happening if we go over right now we're going through our state to our child component here in our to-do component and if we go to our to-do component right now we're just rendering an object and you can't actually render through of objects, it says objects are invalid as it reacts to a child, so if you look at our firebase here, we actually have some text that we actually want to render to the screen, so let's just go back here instead of render "make" here in our p tag, if we just say "make text with dots" that should remove it and now we have "um" which should remove all the errors there, so now if we refresh we should see "um" all our elements. is being mapped and if we want to go ahead and change this, learning react is what we see here, let's change that to learn firebase, which you can't really see here, I'm going to open that up a little bit. a little bit, so we'll say learn how to update Firebase and then we should see that on our screen, there you go, we're on Firebase.

Okay, now we can read all of our data from Firebase, so the next thing we want to do is probably um, let's go ahead and toggle updating our uh our data here, so what we can actually go ahead and do now um, let's go ahead and add our logic in our to-do component to change our CSS or tailwind. depending on whether the list item has been completed or not or the to-do item has been completed, so the way we're going to do it, let's go to our um here to see the name of our class and what we're going to say here , Alright. let's just remove that and what we're going to say is we're going to leave the braces and we're going to use a ternary operator here, which we're going to say if the point is completed and where we're getting to. you completed them right now like we did with the text to do, the to do is our access to this point right here and then we say make text to represent our text or if we say complete, we are going to have access to that boolean value which is true false, then if complete if true, what we want to render for our CSS is the complete dot li style; otherwise if it's not complete, we just want to render the dot uh li style, so Go ahead and do the same thing for our checkbox here, I think no, yeah, our checkbox we're going to want to do that for. and also the text of our technology box, although it will be a little different.

So what we're going to say for our checkbox is, first of all, we want to have a checked attribute here and then we'll say instead of just saying checked like this because that would just show that everything is checked and we don't want that, so What we can say is like I said, we just did it above. If to complete it is true, then yes, we want to mark it; otherwise we can leave this as an empty string there, just like I. said nothing is all right now is false by default, so it looks good at that moment, let's do our text and let's leave the brackets there and we'll say if do dot completed is true, then we want to have the was. it full dotted text style otherwise we just want the text style hope this makes sense to you uh if so leave me a comment in the comments below let me know how I'm doing and hit the like button.

Guys, I would really appreciate if that helps the YouTube algorithm so let's go ahead and save um let's go ahead and refresh getting an error because we haven't used um we haven't used a change event for our checkbox so let's go. let's go ahead and do that right yeah let's go ahead and do that right now so what we're going to do and real quick I just want to show you if we change this let's learn firebase let's change this boolean value to true and itwill. Look, we can see anything, there you go perfect, but we can't do this on the client side yet, just on the back end, so what I want to do, let's change it back to uh, change it back to false, now let's move on. and set up a function so we can update our database, okay and we're actually going to be able to pass, you can't really pass state up just down and react components, but we can pass functions and we can something like that. lump state there as well, so what we want to do here in our um, we're actually going to add this in a couple of different places here, but it's going to be full toggle and it's going to be our function, okay, you can call it whatever you want. toggle full, that's not like a firebase term, so toggle full like that and we're going to pass this inside of our task component here and I'm going to have this in a couple of different places here, so as long as we have a user click on the text or the checkbox, so let's start with our text here for now, so I'm going to say on click and on click, what we want to do is run this full toggle, which will be the function of full toggle arrow and then Let's go, uh, go, to do it right and let's do the same thing on the input, but instead of clicking, it wants us to have a change, so we'll do that on change, the same thing. toggle full and then pass to do it, let's go ahead and save perfect, so let's pass this now.

What we want to do next is go into our app's dot js file and we'll add our update um. do code here but first we have access to that just as we pass idle state when we pass our function, we may have to do the same thing so I'm going to call this full option just to keep everything simplified and easy to understand and use so now we have access to this function. that we are passing the current if that makes sense so let's put this code inside our update to do here that's what makes sense and as you can see on the screen the full toggle is not defined and that's what we're I'm going to define right now, so I'm going to say const toggle complete and this is going to be an asynchronous function, so we're just going to say async just like that, there's an arrow function and what we want to do is go to do and remember. because we pass it and the to do and to do component and this is where we pass it, you know, right there, this is how we access this here and then what we want to say is wait and then here we have to some fire base we go to say update update document, okay and here we take the dock and then we look for db and then we access the pending tasks just like that and then we need the id of the uh of the document that we are going to update and we have access to that as far as the id , we don't need to put it in quotes, but we have access to that by dot id and then here we can just change the completion, that's what we want to toggle and we can use our logical operator here and we'll just say do dot completion, by doing this it means that we're going to change the um that we're just going to change this boolean value from false to true and vice versa so that the errors that we're getting are just the Firebase terminology that we haven't imported on top, so let's go ahead and do that, We will say update document. then also dock and that should solve all those questions there are all those red flags so let's go ahead and refresh now if we click on this if we did everything right there it is now we have um let's refresh and make sure everything is running and now if we go to our firebase, uh, back here, wow, we're looking for something wrong in the firebase, so we should refresh here, it should change all of our state to true so you can see our complete state. now it's true and in Firebase learning it's also true so now we can read our data here in Firebase and we can also update it now what we would probably like to do is be able to create a new id or a new document um or to do it and send it to Firebase, so let's go ahead and do that next, okay, that's great, here we are learning how to create, read, update, delete and firebase inside react with tailwind. above, I love this tailwind, you guys now you guys love it too, from the looks of it, I get a lot of comments.

Everyone seems to like the queue and the amount of time it saves people writing code, so it's nice that we do it in our build. do that next and um what we're going to have here I'm going to give it a constant and you can call it whatever you want I'm going to say create to do that makes sense of course we're going to be using an asynchronous function ace here and what we want do is pass the event and I'll show you why we're going to do that, we don't actually want our form or our page to reload, so that's why are we going to do that?

Let's say prevent noncompliance like this, okay, and let's go ahead and save it there, so we need to connect this to something and it probably makes sense to just put that in our form. If we find our form right here for our form, what we can say is submit and then every time we submit our form, we basically just want to run that function which is, what's the create to do it, so what we'll say is create to do it. that and now every time we submit our form, it's just going to run our create to make function, so if we go ahead and refresh here every time we submit our form, you'll be able to see that it's being submitted.

Our page is actually not reloading and that's why we like to do the default prevention okay so after the default prevention let's do a little bit of um a little bit if we check here because it doesn't make any sense when someone tries to send the form and the form is blank, let's give up. a little bug for the user so let's first add a little bit of checking and what we'll say, well actually first guys let's get that out of the way what we need to do is have some state to manage the text that gets typed inside our input box so I can't believe I forgot so let's go up here and say const and we'll have input and we'll set the input okay you can call this whatever you want so indicate let's say this just to an empty string uh by its default value and then um let's go down here to our input form here so that our actual input is what we want to say here um I'm going to give this an input value okay and then I want to change and There's a lot of different ways to do it. this.

I'm going to make a change and then every time the form is submitted, it's going to take that input, the value that's inside our input form, and store it inside our state that's called. input, so we'll say about change and then here what we'll say is for our no change event, what we're just going to pass is um, we'll say password event and then we'll say set input event point target that value and guys, you can say e or they can say event. I'm keeping it a little short, so I hope I haven't confused anyone with that, so zoom out, so like we said in the, we're giving it a save. so it's formatted for you guys on the input, we have the value set to input and we have one change and that is setting our input to event.target.value, let's go ahead and update that now if we just console.

Record this real quick guys, we're on the console. Log in every time we type here, you should see at the bottom, you can see our text rendered on the screen and, which is cool, that's what we want, we just do it. It doesn't need to be rendered so you can see it rendered in the console. Sorry, now we have access to that input inside our text field, so next let's stay here, so right below let's go ahead and add our We'll add our if flag here, so what we'll say here is if and we have input, so if the input is equal to um and we'll just say if it's equal to as an empty string, then we'll continue. and we can send an alert or something like that, so let's go ahead and say if the input is equal to an empty string, for example, what we can say is we'll just use an alert and say, please enter a valid value for Do something like that, okay, now everything is blank.

If we press the Enter button, you'll see that we have this popup here that says, enter a valid value to do this, so now we have our little check going. Guys, we actually need to return that if you don't add a return statement, it will actually continue to execute our code and we don't want every time we issue that alert we want to stop the code and not continue with the addition. otherwise we're just going to add a blank item to our to-do in our database, so make sure you add the return there so that it stops the code right there and is tracked, so now what we want to do is add or use our firebase code. and we want again, these are asynchronous functions, we're going to say wait and then we're going to say add document, okay and this will be in the database collection and our database is called to do and you guys, I know that we already created our database here and I'll show you what I mean, you don't have to do that first every time we did it because we did the read first, however, you don't have, this is actually going to create. a new database, even if there isn't one there, and if it is there, we'll just update it and I'll show you what I mean here in a moment, after we add the document collection or database and okay, I'll do it. what we want to add is text and this is our text field so this is setting everything up for us so we don't actually have to do that so we go in like this and we want it to be filled by default it just makes sense we have this d defaults to false and then what we can do is just set our or that's all we need to do now, we'll set our input.

I'll show you what I mean here in a minute, so add the document, let's go ahead and do this added document should eliminate all of our errors there, so let's look at our two things here, learning firebase and leak code grinding, now let's say we want to learn how to react, let's go ahead and send that now we have three things to do and you. I can see where it is there it's perfect guys so if we can do something we'll say go work perfect now it doesn't make any sense our input doesn't clear up and that's a really easy fix that's what I was about to do it just a minute ago, so just off this blurb, what we can do is just set the input and set it back to an empty string, so let's run, let's go, okay and now. empties back to an empty string, so great, now we've got a bunch of stuff to do on our back here, so what we want to do, let's go ahead and take care of this down here, so now we just have it encoded, this says you have a blank space to do so first what I want to do is look here let's find it here at the bottom so what I want to say let's just put this in some marks back right there and if we use backtick marks , we can actually add a template literal, that's what we're going to add and that's basically just a value in javascript, so what we're going to do is the dollar sign in there and then our curly braces and what we can say. is to make the links, oops, there is something wrong there, what I want to do here, I need to open that in braces, everything is fine, back, and then you have to do long news, so now we should see that you have five things to do if we eliminate. one here, learn Firebase.

Hey, we just learned Firebase. Let's go ahead and delete this document. Yes, you can see that now they have four things to do and so do you. I'm going to go ahead and show you, let's delete our entire collection. wondering if we want to confirm yes, so now you can see we don't have a database here. I mean, we have a database but we haven't started a collection or anything, and that's what this creation entry or sorry, our creation will do. What we're going to do is create a new collection and then add our custom fields so you can see we have nothing to do and also this brings me to another point real quick.

We won't even show this message if we don't have any. The to-dos are there, so let's do this here under the unordered list. I'm going to open up some braces and we'll say if we can say if the length of the to-do point is uh less than 1, if that's true, then we'll just um, we'll return null; otherwise we can paste this here to paste it there and doing so should remove our to-dos. Now let's get started just to recap, we don't have a collection hereif we say hello we want to learn uh react press enter now it appears we have one to do and you can see it's created okay I'm sure so let's refresh and there it goes you can see it created our collection added the document and the values ​​in there and of course we can toggle between everything perfect, so one more thing guys, let's make sure we delete an item from Firebase, delete a document, so let's go ahead and do that next, guys, I'll go ahead and save. nice and formatted, so next let's go to our to-do component and what we're going to do next is we're going to add that delete

functionality

and we're going to do it with a function that we're also going to pass up because you need to pass an ID to delete a document from Firebase, so just like you would if you're deleting something from your state, it has to have an ID, so let's do that and we'll say um, so we have the option. fill in what we can also say is another one that will say delete to do it, so let's say delete to do like this, I'm just going to go ahead and copy it now, let's add this to our little button here, so I'm going to say On click and on click, what we want has an arrow function and we'll say uh, delete to do and then this is where we want to go to do the point ID, okay, so it looks good, so let's recap here on click. in our arrow function delete to-do and pass the to-do id point and your id is automatically generated for us so that's where it takes the id from so let's go back to our application here and just like we did with we're passing our state down and passing up our um passing our functions here I'm going to do that right here we'll say delete two equals delete to do I'm going to go and save that I know that was a little quick so we have our index of key and we also have to do what we are passing down and we have our switch to complete the component or function instead of what we are passing up and delete to also do the function that we are passing up So now that we have access to that, we get that error saying "Hey, delete by do is not defined", so let's say we have created, read, updated, now we delete by do, let's put that. right there, so for us to delete it, let's go ahead and just paste that in there, um, delete to do and you guys, this is going to be another asynchronous function here and then we're going to do this narrow function and in here to make it really easy. we just have to wait then our firebase code here deletes the document and then again we have to say um database or sorry document here and then it will search our to-do database and then we have to pass the id to it okay and we're going to pass that here at the top just like that and that should be all we need to do, that's it, yeah, it looks like it.

Okay, now again, we need to add that Firebase term dock delete method in there, so once we save that, let's go ahead and refresh so we have what to do and see if we click on this, it should delete if there no problems there you go, let's check our backend here and there, it deleted our document but it keeps our collection, so let's recap here, let's make sure we can see, learn, react, learn, firebase failed to polish anything. leak code, but I'll do that next and then, um, maybe learn tailwind and what we accomplished today, learn tailwind and then react, learn firebase, cool, so let's get those off our list real quick, just making sure they're in here and let's just remove these from our list we still have some Lee code to make it perfect guys thanks for watching hit the like button if you feel like you got something of value out of this you just learned a raw

functionality

, creating an easy-to-make application. with a firebase backend in react style with queue and css thanks for watching please subscribe to the channel so you can get more from me and see you next time thanks guys