React Todo App With Firebase v9 / CRUD Functionality

what's going on guys in this video i'm going to show you how to build a react.js to do app but it's going to be special because this is going to have a firebase backend what does that mean that means we're going to be utilizing firebase cloud storage as a backend service to store all of our uh lists and our to do app we're going to be able to create new items we're going to be able to read these items of course we're going to be able to update them and also delete them that means we're going to have crud functionality with the firebase platform and i'm going to show you how to build all of this in react by the way it's going to be styled with tailwind css because i'm a huge fan so if you want to see how i built this then let's get started and just to give a quick example this is it right here at to do app you can as you can see here i'm typing we're going to learn react we might even learn some firebase and then maybe even grind some leak code here at the end possibly who knows but as you can see we have created our items we can refresh the page they're still there we can close our server restart our server they're still there we can update our information and we can delete them and these are all being stored real time in the firestore database provided by firebase so let's get started here you guys so i'm in vs code i'm already in the directory i want to be working with and what i'm going to do first is go ahead and open up my terminal here and what i'm going to do is install my react application i'm going to be using create react app with yarn so i'm going to type yarn create react app and i'm going to go ahead and install this in the current directory so in the meantime what i want to do is go ahead and we're going to install tailwind so let's cruise over to tailwind css uh if you're already familiar with tailwind you know how to configure it then just jump through this part i'm gonna put some um i'm gonna put some bookmarks at the bottom of the video so you can skip through it but we're gonna click get started the framework guides and then we're going to be using this create react app here just to kind of jump start our application with tailwind so what it wants us to do first is create our project we've already done that so let's install tailwind here um go ahead and copy the complete line for using npm but i'm using yarn i'm gonna make sure my picture is not in the way here so once you copy that let's go over to our application assuming that it is done installing happy hacking that means we are ready to get started i'm going to go ahead and paste that oops sorry i need to say yarn add i'm going to paste that in there copy the whole line like i said if you're using npm so while that's installing what we want to do is grab this next command here this npx npx uh tailwind css init dash p and let's go ahead and run that command inside our terminal here [Music] what's going on here auto okay so let me go ahead and make sure i've installed this correctly since we hit that little yarn ad okay there it goes not sure what was going on there okay let's copy that and i'm going to go ahead and paste it in here looks to all be working fine there we go it created our tailwind.config file there so inside of this content array what we want to do is just copy over this little string right there so i'm just going to paste it in here on the left and go ahead and save and give it a nice little format there next we're gonna go over ahead here and copy this uh this text right here inside the index.css and let's just throw that inside of our source folder here's we're gonna be working today and inside this index.css what we can do is actually just delete all of this stuff and we're going to replace it with these uh three tailwind values right there okay so what i want to do next now that tailwind has been installed and configured what i want to do is kind of just clean up some of this application we're not really going to be using everything so inside of this source folder the app.css the app.test the logo.svg report web vitals and the setup test let's just go ahead and delete all of those just to clear some things up we're not going to be using them so just to clear up any confusion there so we can close down um tailwind okay shrink that down a bit now let's go ahead and start our development server i'm going to type yarn start to get everything started up here and what we should see so i'm going to be running mine on port 3001 we should see just a blank white page we're probably going to get some errors here so let's go into the uh index.js and just kind of delete some of these files here so um this down here at the bottom the report bottles will get rid of that they're importing the report uh web vitals we'll get rid of that inside of the app.js let's go ahead and delete all of this jsx code in here and just leave the surrounding div tags and then up here at the top we'll just replace that with import react from react just like that looking good okay so now we have uh created our react application we've installed tailwind and now we are ready to start building this thing so what i want to do is go ahead and let's go ahead and type out our code here okay so in where i'm gonna go ahead and kind of type everything out and then we'll come back and style it at the end and i'm gonna be using tailwind but i'm not gonna type these all in line i'm gonna extract this to the top i think it's gonna be um a lot easier for you guys to follow along and we're still going to get the knowledge and that kind of basis of tailwind so for this outer div here i'm just going to give everything some class names and i'll show you what i mean so let's go ahead and give this outer div a class name just like so and we're going to use curly brackets okay and i'm going to say style dot bg just like so now it says style is not defined and like i said we're going to be kind of extracting all of our tailwind css to the top of the file so what i want you to do just under this import section and above the uh above the uh actual um application here above our function we're this is where we're gonna add in our styles right so i'm gonna say const style okay equal to and then we'll open up our curly brackets here and in here we're going to add in our class name so i said bg right in here let me go ahead and zoom in just a bit there so what i'm going to say is bg we'll give a colon there then we're going to use backticks you guys okay so make sure you use the back ticks that's very important then what i'm going to say is and this is kind of like the background of our project i'm going to say h screen which not this isn't really a tailwind uh a tailwind tutorial so i'm not going to go super in depth but basically h screen means a height of 100 v per height and same with the the width here so with 100 viewport width so that's what we're going to be saying right there and then what i want to say is p-4 i'm going to see a bg radiant to right and what i'm going to do is actually i'm going to copy this over because i see the hex code i'm using and what i'm going to say here we go is from and then you can type in a color um i'm going to be using my own hex code so if we use uh brackets we can actually use custom values and tailwind so let's open up our brackets here and our hex code is gonna be oop don't need two of those this is the color i'm going to be using so you can see a nice blue on the left and then we'll say from that right there and then we'll say two let's open up our brackets again and i'm going to copy over this hex code that i'm going to be using here let's go ahead and paste that in and now you can see we have our nice background so moving forward what i'm going to do next is go ahead and finish typing out all of the jsx and then we'll come back and style everything i just wanted to show you this first div how we're going to how we're going to style everything with tailwind so i think this would be a lot easier for you guys to follow along so next let's go ahead and create another div so i'm i can't use my shortcuts because this is a js file and what i want to do is actually just cr change this over to a jsx file so if you click that little javascript button at the bottom we just type react basically it's just going to allow us to write jsx gonna it's gonna use our um our snippets a little bit and we can create elements a lot easier just like that so in here for this div let's give this a class name and this is going to be style.container okay then below that container we're gonna have an h3 so let's give this an h3 and i'm gonna give this a class name okay and this is gonna be a style dot heading and i'm just going to say to do app just like that okay so next let's have our form okay so we're going to have a form and we don't need an action for this here um just don't need an action we're gonna are gonna give this a class name however and it's gonna be form sorry style dot form so inside of our form what are we gonna have here so we're gonna have uh an input section here so we're gonna have input type text and then just a button on the right so let's have an input and that's gonna be a type of text let's give it a placeholder and the placeholder is just gonna say whoops add to do just like that and then um we're probably going to need to give this input a uh a class name as well so i'll give that a class name of style dot input okay then just below that input let's do a button here that says um we're gonna use react icons for this actually so we'll we'll add up that package here in just a minute but let's give this a class name real quick of style.button okay so like i said we're using react icons so i'm gonna go ahead and open up a little terminal here side by side just say yarn add react icons react dash icons um if you're not familiar with it it's a really really awesome tool i use it all the times here if you just google react icons this is the site that it is that we're using so i'm not gonna go through all of that right now but just know it's pretty easy to use and you have lots of really cool icons so the one i'm gonna be using is called ai outline plus and it's just a little uh plus sign that we're gonna use for our buttons so let's open up our bracket there ai outline plus just like that okay and what we can also do is give this a size property it's a it's a feature of react icons so i'm going to say size 30. now we're getting an error because we have not imported it at the top so let's go ahead and import this at the top here so we're going to import i'm going to put this in curly brackets from react dash icons slash ai and the ai's just go a subfolder that is at the uh the beginning of our icon so just if you're using react icons in the future on many different projects if you have different little pretext there you're gonna have to import those on different lines so after we have the button what we're going to do now so that concludes our form and now what we're going to have is our unordered list here and then we're going to have our list items so let's go right beneath our form here we're going to have an unordered list there and the unorder list does not really need any styling and then we're going to have some list items now the way we're going to lay this out we're actually going to have a another component here just to keep things clean so i'm going to open up a terminal or sorry my side menu here by the way i'm just pressing the command b button toggle my menu side menu back and forth so inside our source folder and you guys usually i'd create like a components folder but since this is all going to have one extra component i'm just gonna throw it in here so you guys get the point so to do dot jsx i'm gonna type raf ce it's gonna give me my functional component here now i'm gonna go ahead and type this out in here so um what we're going to have here this is just going to be a list item just like that and we're going to use a couple react icons here and what we're going to do first is just kind of hard code a couple to do's in here so let's go ahead and you know what let's just add that as some state and that let's go and do that right now so we can go ahead and access it and see how it looks so let's go back to our app.js and inside here at the top we're going to import the you state hook okay and our state is going to go inside of our functional component here above the return so we're going to say const open up our brackets here and that's going to be equal to use state go in our state in there so i'm going to call this make it relevant to do's and set to do's just like that now we have to give this some initial state and what we're going to do we're eventually going to put this in a database but for now we're going to have an array of a few to-do's so let's have an array in here and i'll have a few to-do's here i'll say learn react is one and then we'll say uh grind some leak code questions there i've done some leeco lately it's code war so i might make a video about that and kind of the the platforms i like to use uh there is one i like to use before leak code when i was first starting um long story short when i first started on leak code all the problems seemed like incredibly difficult even the easy ones so um there are some other platforms i encourage people to start on start out on before you work up delete code but anyways let's go to our ado app to do app okay well first let's see here let's go ahead and add in our to do just like that and we have to import this it's not auto importing that's okay so import to do from and this is right here in our file where we are so import to do there it is and as you can see it's pulling over our um going over our our component already so in here we delete that that should go away so we're gonna have our list item and let's go ahead and give this some styling as well so we'll say fonts style we're going to do the same thing kind of over in here just like that there so for our list item i'm going to give this a class name and we're going to use some ternary operators here can we kind of toggle our uh our state back and forth or sorry not our state but toggle back and forth whether the item is completed or not so we're going to have some css changes in here but for now what i'm going to say is to do or sorry let's say style dot and we'll just say li for now and then underneath this let's go ahead and say um we're gonna have a div here and this div here is gonna be a row so let's give this a class name style dot row there we go then inside here we're gonna have a couple of things we're gonna have an input okay and this input is gonna be oh not that one right there sorry let me go ahead and make sure i get this right but it's input and we're looking for the checkbox there we go okay so we don't need the name or id um in fact i think that's going to be good for now um we'll come back and add some properties to it here in a minute and after the input this is just like say going to be the checkbox what we're going to have is a p tag and this is going to be our uh to do so let's go ahead and i'm going to go ahead and pass in to do just like that and let's give this a class name just like that and we'll say style don't worry about the error we're going to come back in a minute style.txt okay so we're getting an error set to do is not defined so what we're going to do here and this is the state that we're going to be passing through temporarily so let's go ahead and do that right now so just below this unordered list here inside the app.js let's open up some curly brackets and our state here is to do's right so in set to do so we have two strings inside of our array there so we're going to map through these things since it's an array so what i'm going to say is to do's that map then open up some curly brackets this is going to take in an arrow function and what we want to say in here is actually we're going to map through everything give it the name of to do and then what we're going to say we're going to open up some parentheses we're going to render out a value and this to do little to do component we can just shift up and we're going to render through all these to do's so still going to get some errors that's fine what i want to do is kind of give this an index at first react likes to uh needs to have keys and their list that we're mapping through i'm just going to say key index just like that then we need to pass in the to do so i'm just going to say to do just to do and this is called just passing state down in components so um we're also going to pass them up via functions i'm going to show you how to do that here in a little bit so now that we're creating our our to-do that we're passing down we have to just accept that in here and rather than saying props we just keep this uh destructored i'm gonna say to do just like that then in here you can actually see this mapping through all of our state so it doesn't look great yet because we haven't finished styling it but we're just about there so next just below this div here this div is going to surround the input in our p tag next just have a button and inside here we're going to have another react icon is f a r e g trash oops i forgot we need to put this our angle brackets there make sure we close that off and let's go ahead and import that so let's cut that or paste or sorry copy it import paste in some curly brackets from react to icons fa all right so that looks pretty good so we're done with the uh this component here uh we haven't given it any styling yet and then the app.js what we want to do is just add one more thing below here and that is going to be just our little account right there so let's just go ahead and um we'll just go ahead and hard code that in there so just below our unordered list we're going to have a p tag and we'll just say you have two to do's and we'll just hard code in there for now and we'll make this a dynamic here in just a little bit and let's give that a class name class name we'll say style style dot count okay so now what i want to do is actually go through everything and just give it some styles and that's going to be real easy to do with the way that we laid this out so really important up here the styles or at the style up here at the top what we want to do is actually separate each line with a comma if you don't you're going to get an error so the first one is background next one is going to be container just like that so let's say container and then again remember we have to use backticks here and what i want for the the container i'm going to give it a background of slate um 100 and that's going to be kind of just like an off white there a very faint white and then what we want is i want a max width of um again i'm going to use some some brackets here so i can give a hard-coded value custom value 500 pixels we'll say width full margin auto rounded md it's going to round the corners off a little bit then we'll say shadow dash xl and then p 4 for just a little bit of padding okay so looking good so far so next let's just go over and remember we have to add our comma there so next let's dial our h3 which is our heading that we gave a class to so we'll say text dash 3xl it's going to bump up the size a little bit next we want to uh let's see text 3xl we'll say make sure it is uh font bold text dash center so it sits in the middle of the screen and we'll say text gray let's say 800 so it's not really a black but it's still pretty dark and i will say p 2 to give it uh some padding here so not seeing any changes there wonder what's going on let's give this a refresh there what's going on so heading that's right class name style.heading i spell it right yeah yeah yeah make sure sorry guys style.heading okay going on let's go ahead i'm going to stop the server real quick and just restart it here it looks like i have everything correct text three xl got my commas oh yep misspelled something there you go okay so um sometimes tailwind just acts kind of funky so let's add another comma here after the heading and we're gonna move on to the form so what we can say is just form and again we're going to use our back ticks so flex justify between okay go now let's give this another comma and next let's hit our input here and with our input what we want to say is border we're going to say p dash 2 okay with full then text excel just to beef up the text a little bit there that's going to spread it across the screen perfect now next is going to be our button and that's just going to be surrounding our little plus sign over there so let's add our backtick and for our button we'll say border i'm going to say p dash 4 margin left too just there's a little bit of space in between our um in between our inputs and then what we'll say anything above small actually we want to have and this is just a media query here so anything above small i'm gonna say um margin top zero might even need not need any of that there let's just leave that out for now so um then we'll say background purple and we'll say 500 and again just for for the uh the wake uh colors work and tailwind so i'm putting in 500 if you're gonna put 100 that would be a lot lighter just in case you're not familiar i believe it goes from 100 900 900 would be quite dark so just a little quick run down on some colors there these are all just def default styles and um and um go in and again if you didn't want to use that you could just remove the purple and the number 500 and just use brackets like we did with the backgrounds radiant and just enter in your own hex code or rgba or whatever you want to use there so just a little quick rundown on the colors and the same goes with the text so that's with any value and and tailwind so slate i'm going to say 100 just so it's like kind of a off-white there so everything is looking good you guys next we're just going to style the count with a count just like that and i just want to say text center and then p 2 padding that's actually 8 pixels so that looks good right there now let's let's just hop over to our uh to do uh component here and let's just style off our our um our to-do list here so it looks a little bit nicer excuse me so list item we're gonna go ahead and type that one out and um what do i say for list item and actually we're going to add in like i said we're going to have styles both for uh completed task and then also styles for incomplete tasks and we're going to go ahead and add all those in right now and then we'll come back and use our logic later to to figure them out so we'll say flex justify between just like that we'll say bg slate 200 okay and this is what all of our um what all of our list items are going to look like when they are not capitalized there when they are not completed so that is looking good right there so this one uh like i said i don't need to go through all these styles but capitalize want everything to be happily just looking nice so next this is going to be we have not it's going to be like complete is what i'm going to call it and this is what it's going to look like if it is a completed task so i'm going to say flex um basically everything's going to be the same so let's just copy this top one there just like that but instead of slate 200 i'm just going to change this to 400 just like so okay and then next like i said we're going to add the logic later let's do our row and that's just going to be flex okay and next we're going to have our text okay and for our text what i want to say is margin left 2 just like that then cursor cursor pointer just like that okay then after our text i'm going to have text complete which we haven't added in yet this is another one that we're going to add in our add in our logic later so cursor dash pointer and then line through through just like that and for our last one we're gonna have our button and it is almost time to do some firebase so her sir pointer flex and then items center so looks good this is how our our app's gonna uh look of course there's no functionality right now we can click nothing happens can't delete anything um just for example this li we're gonna toggle it to li complete after we complete a task and it's going to do something like that so of course it's not going to do that to all of them we're going to come back and render out each one so let's go ahead and remove that so next what i want to do is go ahead and let's configure firebase and get this thing dynamic and be able to create up read update and delete add all this wonderful functionality to our application so let's go on over to firebase we'll say firebase.google.com and what we're going to say is go to the console here at the top right now this is the application i created what you're going to want to do here is you know let's create a let's create a new application so i'm just going to create a new one here with you guys we can do this together to do app i'll say yt for youtube there so go ahead and click continue and by the way you guys is 100 free you don't have to give them a credit card nothing like that so let's get rid of that i don't need the google analytics for this project so that'll just kind of weigh things down so go ahead and create your project this is very quick you guys only takes just a couple of minutes here so this is awesome you guys smash the like button if you feel like you're getting some value out of this you're enjoying if you're learning firebase for the first time it's a very very powerful tool and it's really simple to use so really really simple so it looks like it's already done being completed so this is the this is the website it's going to afford us to what we want to do next is create the application for the web so we're going to click this button right here for the web and we'll just say another just to do app just like that register your app now we're going to start getting into the coding side of firebase so what we need to do is install firebase that is our first uh our first command here so i'm using yarn i'm gonna say yarn add firebase just like that npm npmi firebase or just copy that if you're using npm so what we're going to need to do is go into this source folder here we're going to create a new file called firebase dot js not jsx just js there's not going to be any jsx code in here and then what we're going to do is copy this and you guys these are your secret keys don't just copy mine though i am going to put a a link to this build down in the description below and it's going to be up on github for you to clone however when you uh run my project it's not going to work because i'm not going to be including any of my keys into my github project okay so use your own keys it's very very simple don't use mine and if you are going to host this then make sure you hide these keys in a env file so this is what we want to do just copy that over just like so that's perfect go ahead and continue to the console now once we're in our console right this is kind of like where we're going to be working out of we're going to click this build button on the left side and we're looking for the firestore database and this is real cloud storage for uh for google for firebase here so what we want to do is just create a new database we can start in test mode is fine go ahead and click start just choose the uh firestore location that's closest to you it should default to the closest one to you anyways so let's go ahead and click started it says it's provisioning our our account so this is very very easy guys and just about done it's usually quite quick setting up the security rules so that is all we need to do uh so what we want to do actually is install or rather configure cloud storage into our firestore into our application so what you can 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 really great documentation for you to read so i encourage you to read through it if you're learning firebase and person click that build and over off here to the left are all the projects or products that they offer again we're using firestore you see click on the get started let's scroll down and by the way you guys we're using a virgin 9 modular the most uh up-to-date version of firestore here or a fire firebase so what we need to do is import get firestore from firebase let's just go ahead and copy that if you look at our code off here to the left it says add sdks here for firebase products you want to use so that's just what we're going to do go ahead and paste that in there just like so then down here at the bottom what we're going to say is when to export fonts because we want to have access to this uh throughout our application export const db for database here okay then i'm just going to say git firestore and then we want to pass through app just like that now that's all we need to do inside of our firebase dot js file so we can go ahead and close that just make sure you import the get firestore then also export constant db and that's going to be equal to get firestore passing through the app okay so we can go and close that and i'm going to close the docs for now because i'm not really going to go off the documentation though um i do recommend reading it if you're learning firebase so now that we're in let's go back to our app level here and what i want to do okay so what i want to do let's go ahead and i'm going to go ahead and create a create a collection here and the way firebase works collections is kind of known as a database so you can think of collections as the database and then every single articles within within your collection are actual like objects or however you want to to store them so i'm going to say generate an auto id and this is just an id for the article inside your database field um gonna say text text there and that's gonna be a string and i'll say learn we just type in learn react okay and let's also let's give this another field that says completed and we'll give this a boolean value here and we're going to do this all with code as well i'm just setting it up this way we'll say false okay so let's go ahead and click save and it generates our this is our article right here our document sorry our document is what it refers to and then each document can have can have properties so what we're going to say i'm going to create a another document here and this one will have an auto id and this one can be uh see text and this will say we'll say ryan elite code just like that okay and we'll have a completed boolean here i'll change this to false okay so let's go ahead and save that okay and now what we want to set up first okay let's go into our app and shrink this down a bit so right now we have everything hard coded and what we're going to do is let's in here just above the return but below our state we're going to have a few different things what we want to do is we're going to say create our cred function out here create to do then we're going to have a read to do read it from firebase okay we'll say update you in firebase and then delete to do this is our to-do list within our to-do application so let's start off with the read to do's here so and what i'm going to do here is we're going to be using the use effect hook there's many many different ways you can do this like i said i'm going to be using the use effect hook okay so what i want to do first is let's just go ahead and import that hook at the top react uh my vs code does not seem to be importing things for me lately so uh that's all good so use effect just like that and that's just gonna take in an arrow function and i'm gonna pass in a just a dependency array here so it doesn't fire over and over again and cause like a memory leak here so what we want to have here i'm going to say const and basically this is just kind of defining a path for our database and i'm just going to store this in a in a const by the name of q and that's going to be equal to 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 a another parenthesis here and we'll say db and then the name of our database which is to do's 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 over here and we're going to import to do okay sorry let's go down here let's import our our db there and that's that the constant we exported so we'll say import we got to put this in curly brackets from and that's from the firebase uh the firebase file that we created so next what we can do here with the rest we need to import from firestore and we're going to do that with our import some curly brackets and one's query the other one is collections what we just use and this is going to be from firebase slash firestore so that should take care of all of the errors that we see there now let's move on with our use effect here so what we're going to have here we need a const unsubscribe just like that and that's going to be equal to on snapshot and this is like taking a snapshot kind of like a picture of our database and in firebase and then reading it to us on so we can render out on the screen so on snapshot that's kind of how i think of it so using q and that's the kind of like the uh the path that we're passing in here okay so q and then we're gonna have query snapshot just like that and then we're going to use an arrow function here and what we're going to pass in sorry just we're going to have our let we're going to create an array here so we'll say let um we'll say to do's array and we're going to set that to an empty ray for now then we'll just below that we'll say query for your snapshot we're going to use the four each and then for each doc you can name this whatever you like pass in the narrow function here by name it i'm just going to name my doc okay and then in here we can say to do's dot array dot push sorry this is to do's array not to news dot array this is our array here that we just created and then we want to push everything into our array and this is going to be a lot easier whenever we update our arrays as well so what we're going to do for our push we're going to be using a spread operator here so what we can say is on our object here doc dot data there we go and then we'll say id doc.id and this is the id of our of our array here so don't worry about that we're going to come back to that here in just a minute but once we have our snapshot we want to just set that to our state which is our to do's right here so the way we'll do that we'll just say set to do's then in here we can just say the to do's array and that's the to-do's array that we just created as an empty array and then we're using the the for each method to push each each object in our array into the new array so in that we're passing in the to-do's array and then just below that we just need to unsubscribe so we'll return our little arrow function here unsubscribe just like that okay function okay so we're gonna get an error there and that's because we just need to import this on snapshot just like that okay zoom out here for you now so now let's go ahead and let's delete this are our state in here because right now it's pulling through our state so let's just delete this and set it to an empty array and hopefully if we did everything right we should not see any changes of course we didn't do anything right so let's go ahead and look inspect so objects are not valid as react child so let me tell you why this is happening if we go over so right now we're passing through our state down 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 through an object and you can't actually render through objects it says objects are not valid as react a child so if you look at our firebase right here we actually have a text is that we actually want to render out on the screen so we just go back here instead of rendering to do here in our p tag if we just say to do dot text that should remove that and we now have um that should remove all the errors there so now if we refresh we should see our um all of our items being mapped through and if we want to let's go ahead and uh we'll change this uh learn react is what we see right here let's change that to learn firebase you can't really see here i'm going to bump that open a little bit so we'll say learn firebase update and then we should see that on our screen there you go we're in firebase okay so great now we are able to read all of our data from firebase so next what we want to do is probably um let's go ahead and toggle being able to update our uh our data here so and what we can actually go ahead and do now um let's go ahead and add in our logic on our to-do component to kind of like change our css or tailwind depending on whether or not the list item has been completed or the to do item has been completed so the way we're going to do that let's go over to our um right here for our class name and what we'll say here okay so let's just cut that out and what we're going to say we're going to leave the curly brackets and we're going to use a ternary operator in here what we'll say if to do dot completed and where we're getting the completed you guys right now like we did the to do text the to do is our access to this point right here and then we say to do text to render out our text or if we say to do completed we're going to have access to that boolean value which is a true false so if to do completed if it is true what we want to have rendered out for our css is style dot li complete else if it's not complete we just want to render out style dot uh li so let's go ahead and do the same thing for our uh for our check box here i believe not our yeah our checkbox we're going to want to do that for and also the uh the text our tech box is going to be a little bit different though so what we're going to say for our check box is uh first off we want to have a checked attribute here and then we'll say instead of just saying checked like that because that would just render out everything as being checked and we don't want that so what we can say is like i said just we like we did above if to do completed it's true then yes we want to render out checked else we can just leave this as a as an empty string there so and like i said nothing is everything right now is by default false so that looks good there and then let's just do our text as well leave the leave the brackets in there and we'll say if to do dot completed is true then we want to have the was it style dot text complete else we just want the style text i hope this is making sense for you guys uh if it is leave me a comment down in the in the comments below let me know how i'm doing and smash the like button you guys i'd really appreciate that helps the youtube algorithm so let's go ahead and save um go ahead and refresh getting an error that's because we haven't used the um we haven't used an on change event for our check box so 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 guys if we change this this learn firebase let's change this boolean value to true and we'll see we can see anything there there you go perfect but we can't do this on the client side yet just just on the back inside so what i want to do let's just change that back to uh change it back to false now let's go ahead and set up a function so we can update our update our database okay and we're actually going to be able to pass you can't really pass state up only down and react components but we can pass up uh functions and we can kind of lump state in there as well so uh what we want to do here in our um we're gonna actually add this a couple different places here but it's gonna be toggle complete is gonna be our function okay you can call it whatever you like though so toggle complete that's not like a firebase term so toggle complete just like that and we're going to pass this in inside of our to do component here and i'm going to have this on a couple different spots here so whenever we have a user click the text or the check box so let's start off on our text here for now so i'm going to say on click and on click what we want to do is run this toggle complete which is going to be arrow function toggle complete then we're going to pass in uh pass in the to do okay and let's just kind of do the same thing on the input but rather than on click it wants us to have an on change so we'll do that on change same thing pass in toggle complete and then pass in the to do so let's go ahead and save perfect so we're passing this up now what we want to do next is actually go into our app dot js file and we're going to add in our um update to do code here but before we have access to that just like we passed down state when we're passing up our function we can have to do the same thing so i'm going to call this toggle complete just to kind of keep everything uh streamlined and easy to understand and use so now we have access to this function that we're kind of passing up stream if that makes sense so let's put this code inside of our update to do here that's what makes sense so and like you can actually see on the screen toggle complete is not defined and that's what we're 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'll just say async just like that there an arrow function and we want to do is pass in to do and remember because we we pass it in and the to do and the to do component and this is where we pass it in you know right there so that's how we have access to this here and then what we want to say is await and then here we get to some firebase we're going to say update update doc okay and in here we're grabbing the dock and then we're looking for db and then we're accessing the to do's just like that and then we need the id of the uh of the document that we're going to be updating and we have access to that as to the id we don't need to put that in quotes but we have access to that by to do dot id and then in here we can just change the completed that's what we want to toggle and we can just use our logical operator here and we'll just say to do dot completed so by by doing this it means that we're going to change the um we're just going to change this the boolean value from false to true and and vice versa so the errors that we're getting are just the uh the firebase terminology that we haven't imported at the top so let's go ahead and do that we'll say update doc then also dock and that should take care of all those questions there are those uh all those red flags there so let's go ahead and refresh now if we click on this if we did everything right all right there you go now we have um let's refresh and make sure everything's working and now if we go to our firebase uh back in here whoops like the wrong thing we're looking in firebase so we should have our let's refresh here it should change all of our state to true so you can see our completed is now true and over the learn firebase is true as well so now we have uh we're able to read our data in here in firebase and we're also able to update it now what we probably would like to do is actually be able to create a new id or a new um document or to do and push that to firebase so let's go ahead and do that one next okay so pretty cool here we're learning create read update delete functionality and firebase inside of react with tailwind sprinkled on top i love this tailwind you guys now you guys are loving it too by looks of it i get a lot of comments everybody seems to love tail and just the amount of time it saves people writing out code so all right for our create to do let's do that next and um what we're going to have here i'm going to give this a const and you can call this whatever you like i'm going to say create to do that makes sense of course we're going to be using an ace asynchronous function here um and what we want to do is pass in the event and i'm going to show you why we're going to do that we don't actually want our form to or our page to reload so that's why we're gonna do that we're gonna say prevent default just like that okay and let's go ahead and give it a save there so we need to hook this up to something and it probably makes sense to just put that on our form so if we find our form right here for our form what we can say is on submit and then whenever we submit our form basically we just want to run that function which is uh which is the create to do so what we'll say is create to do just like that and now whenever we submit our form it's just going to run our create to do function so if we just go ahead and refresh here whenever we submit our form you can see it's submitting our our page is not actually reloading and that's why we like to do the uh the prevent default okay so next after the prevent default let's have a um a little if check here because it doesn't make any sense whenever if somebody tries to submit the form and the form is blank let's give up like a little error to the user so first off let's add a little if check and what we'll say well actually first you guys we actually let's delete that what we need to do is actually have some state to manage the text that's being typed inside of our input box so um i can't believe i forgot that so let's go up here and let's say const and we'll have uh input and set input okay again you can call this whatever you like so you state let's say this to just an empty string uh by its default value and then um let's go down here to our input form here so our actual input what we want to say here um i'm going to give this a value of input okay and then i want to on change and there's many different ways you can do this i'm going to have an on change and then whenever the form is submitted it's going to take that input the value that's inside our our input form and it's going to store that inside of our state that's called input so we'll say on change and then in here what we'll say is for our unchanged event what we're just going to pass through is um we'll say password event then we're gonna say set input event dot target that value and guys you can say e or you can say event i'm just keeping it a little bit short there so i hope i didn't confuse anybody with that so zoom out there so like we said on the we give that a save so it gets formatted for you guys on the input we have the value set to input and we have an on change and that's setting our input to the event.target.value let's go ahead and give that a refresh now if we if we just console.log this real quick guys we're in console.log the input whenever we type in here you should see at the bottom you can see our text being rendered out on the screen and uh which is cool that's what we want we just don't need to render it out so you can see it rendered out in the console i mean sorry so now we have access to that input inside of our um our text field there so next let's stay in here so just below let's go ahead and add our gonna add our if check here right so what we'll say here is if and we have input so if if the input is equal to um and we'll just say if it's equal equal to like an empty string then we'll go ahead and we can shove an alert or something like something like that so let's just go ahead and say if input is equal to an empty string for example what we can say is we'll just use an alert and say uh please enter um a valid to do something like that okay so now everything is uh blank if we hit the enter button you'll see we have we have this uh pop-up here it says please enter a valid to do okay so now we have our little check going are you guys actually we need to return that if you don't add a return statement it'll actually continue uh running our code and we don't want that whenever we throw up that alert we want to to stop the code and not proceed with adding otherwise just going to add a blank item into our to-do into our database so make sure you add the return there so it just stops the code right there and it's tracked so now what we want to do is actually add or use our firebase code and we want to again this is asynchronous functions we're going to say a await and then we're going to say add doc okay and this is going to be into the collection of database and our database is called to do's and you guys i know we already created our database in here and i'll show you what i mean you don't have to do that first whenever we we just did that because we did the read first however you don't have this is actually going to create a new database even if one is not there so and if it is there it'll just it's just going to update it so and i'll show you what i mean here in here in just a moment so after we uh add doc collection or database and to do's okay what we want to add is text and this is our text field so this is configuring everything for us so we actually don't have to do that so input like that and we want completed by default it just makes sense to have this d default to false and then what we can do is just set our or that's all we need to do right now we will set our input i'll show you what i mean here in a minute so add doc let's go ahead and do this add doc that should remove all of our errors there so we have let's see our two things in here our learn firebase and grind leak code now let's say we want to learn react let's go ahead and submit that now we have three to do's and you can see where it is it there it is perfect you guys so um if we can do anything we'll say go work out perfect now uh it doesn't make any sense our our input is not clearing and that's a real easy fix that's what i was about to do just a minute ago so just outside of this ad doc what we can just do is just set the input and we'll just set it back to an empty string so um go for a run there we go okay and now it empties back to an empty string so great now we have a bunch of to do's in our in our back in here so next what we want to do let's go ahead and take care of this down here at the bottom so right now we just have it hard-coded this says you have you know blank to do's so um first what i want to do is see here let's find it here at the bottom so what i want to say let's just put this in some uh back ticks right there and if we use backticks we can actually add a template literal is what we're going to add and that's basically just a value in in javascript so we're going to do is the dollar sign there and then our curly brackets and what we can just say is to do's links whoops there's something wrong there what i want to do here i need to open that in some curly brackets there all right back ticks and then you have to do length news so now we should see you have five to do's if we delete one here um learn firebase hey we just learned firebase let's go ahead and delete this delete document yes you can see you now have four to do's now and also you guys i'm going to go ahead and show you let's delete our entire collection use is asking us do we want to confirm yes so now you can see we have no database here i mean we have a database but we haven't started a collection or anything and and that's what this create input is going to do or sorry our create to do is gonna it's gonna create a new collection and then add in our custom fields so you see we have zero to do's and also this brings me to another point real quick uh it let's just not even show this message if we don't have any to-do's in there so let's just do this right here underneath the unordered list i'm going to open up some curly brackets and we'll say if we can say if to do's dot length is uh less than 1 if that is true then let's just um we'll just return in null else we can just paste this in here so that and paste it in there and so by doing so that should remove our to do's now begin just to recap we have no collection here if we say hey we want to learn uh react right hit enter it now appears we have one to do and you can see it created well i'm sure it did let's refresh and there it goes you can see it created our collection added the document and the values in there so and of course we can toggle through everything perfect so one more thing you guys let's make sure we actually delete an item from firebase delete a document so let's go ahead and do that next you guys i'm gonna go ahead and save get it nice and formatted so next let's go into our to do component and what we're going to do next is at add that delete functionality and we're going to do that with a function that we're going to pass up as well because you need to pass in an id in order to delete a document from firebase so just like you would in a if you're deleting something from your state you have to have an id so let's do that we'll say um so we have the toggle complete what we can also say is another one that will say delete to do so let's say delete to do just like that i'm just going to go ahead and copy that now let's just add this on our little button here so i'll say on click and on whoop on click what we want have a arrow function and we'll say uh delete to do and then here's where we want to pass in to do dot id okay so that is looking good so let's just recap here on click passing in our arrow function delete to do and passing in the to do dot id and the id you guys is auto generated for us so um so that's where it's grabbing the id from so let's go in back into our app here and just like we did with our passing our state down and passing up our um passing up our functions here i'm gonna do that right here we'll say delete two equal to delete to do i'm gonna go and save that i know that was kind of quick so we have our key index and we also have to do that we're passing down and we have our toggle complete the component or the the function rather that we're passing up and the delete to do also the function that we're passing up so um now that we have access to that we're getting that error saying hey delete to do is not defined so let's say we have create read update now delete to do we're going to put that in we're going to put that in right there so for our delete to do let's go ahead and just paste that in there um delete to do and you guys this is gonna be another asynchronous function here and then we'll make this narrow function and inside here to be real easy we just need to await then our firebase code here delete doc and then we again we have to say um database or sorry doc here and then it's going to look for our database of to do's and then we need to pass it the id okay and um we're gonna just pass that in here at the top just like so and that should be all we need to do that's yeah that looks good so now um again we have to add in that firebase term delete dock method there so once we give that a save let's go ahead and refresh you guys so we have our one to do and let's see if we click this it should delete if there's no problems there you go let's check our back end here and there you go it deleted our document but it maintains our collection so let's just recap here let's make sure we can uh see we learn react uh learn firebase didn't get around to grinding any leak code but i'm gonna be doing that next and then uh um maybe learn tailwind and what did we get accomplished today uh learn tailwind then react learn firebase great so let's just delete those off our list real quick just making sure they're in here and let's just delete these off our list we still have some grinding lee code to do perfect you guys thanks for watching smash the like button if you feel like you got some value out of this you just learned crud functionality building a simple to do app with a firebase backend in react style with tail and css thanks for watching you guys subscribe to the channel so you can get some more of me and i'll see you on the next one thanks guys

Channel: Code Commerce

Views: 47,697

Keywords: react, react js, react firebase, html, css, javascript, learn next js, learn firebase, firebase, firebase cloud storage, firebase firestore, cloud computing, web developer, software, engineer, learn react, learn react js, learn tailwind css, tailind css, react firebase project

Id: drF8HbnW87w

Length: 58min 16sec (3496 seconds)

Published: Mon Aug 01 2022