Build & Deploy a React Todo App with Firebase | React Tutorial For Beginners

so hello and welcome back to my channel my name is sanskar and in this video you're going to learn how to build this awesome looking introduced app with react and firebase we are going to start from the scratch and hosting it live on the web so if you like the sound of that make sure to hit that like button and let's continue making this so first of all i would like to show you the demo how it looks like and what are we going to build so this is a total application where you can type in a tool so for example me doing something that's a to-do which i want to do and it will be added in the real time you don't uh as you can see it's instantly visible the best part is it is saved in the firebase storage so it's not something which i am just able to see right now i would be able to see it from anywhere i want right other than that we have an option to mark it as done if that is completed if or market it as undone if it's not completed we can even delete a particular one so overall what you can see we are going to cover whole firebase operations like create read update and delete right so this is going to be really super fun and going to cover a really broad aspect of firebase file store database other than that we are going to learn how to host this particular project for free um on online so that you can share it with your friends and family and show them what you have built so without any further ado let's begin so first of all um open up your vs code if you haven't already set up react uh just visit nodejs.org and over there just download this right once you download and install open up your terminal or cmd depending on your operating system so let me open up my terminal then you have to type node dash we this is going to show you the version of the node installed right if it is showing right then it's installed successfully congratulation if not then make sure to do that again and properly okay once that is done then let's move on to create our new react js project so i'm going to open up sorry what is this i need to open up a new terminal window and we are going to create a new react product project so to do that i'm just going to type npx create react app and i'm going to name this application to do app tutorial now this is being created at the main directory that's not exactly what i want so let me okay that's not what this should happen excuse me for that let's i should have started from the skies then okay let's just create it over there so i'm just going to hit enter and create that one mistake which i did was just directly creating that in my main directory you can just uh go to your directory of going through cd and all and then create it wherever you want because that folder will be created now so now let me open up my file so like just a second i'm going to open up this folder of mine and it should be inside users my name i'm not sure it's it's just okay so you can see it's created over here this is the project and i'm going to open it up in vs code so i'm going to take it and here we go so let's open up let me close this particular window so if you're confused what i did i just created the project and i open that particular folder wherever it exists right it was existing in my main directory and i opened that up with vs code if you have no i don't have this what this is right this is called vs code um so make sure to download that it's a tool by microsoft so you can just type vs code and you can just download that it's a very lightweight tool and a must if you're recording okay so now let's continue what we are going to do first of all we have a boilerplate code for a react project so let me try to run this so that you can see how it looks like so i'm going to say npm start this is going to start the project in our browser so as you can see this is the fresh boilerplate code which we received for a react js project now what we are going to do is we are going to get rid of all the things which we don't want and then we so that we can work on what we actually are here for so let me remove this and we don't even want test so let me remove that as well and we don't want these styling i don't want these styling either i think we can keep this uh this is the font families and all so let me just save that and that and let's move on to the app.js the error it is showing is because we have deleted the logo so let me remove that from here and uh i'm going to get rid of all of this no confusion just showing h1 as sin scott davari my name and a bit of an emoji for just a little fun and that's fine so let me just save that and you can see it's saying this particular file does not exist so i guess we are using it here so let me just get rid of that and save that once i'll do that i'm going to re load it's still showing issues let me get rid of that and you can see we have that okay so first thing first i personally don't like this font so i i want to use a custom font so what i'm going to do is i'm going to visit google fonts open that up i really like this font what is it called just something like you can use whichever we want so let me use something which i haven't used or should i use something which i already used well the font is called poppins so let me just search for it this one this is the font which i used for this application so you can see this font looks totally different to what this is so i'm just going to use this regular 400 version just click on it it's going to show you this option so i'm going to use it inside a css file so i'm going to just copy this part visit my app.css paste it there then mention star which is basically for all the elements and then we want to apply this font family of poppins and if that is not available then send self now if i will see you can see it looks much beautiful okay so let's back to that um i'm going back over here okay so what we are going to start with well we are going to start by adding this particular text field so that we can accept the input user can type the to do then we are going to connect our application with firebase so that we can do all the fun stuff with fabrics okay so let's first use this now i'm not going to create this from scratch and the one which we which the web have for the input field it really looks quite ugly and we have to do a lot of css to implement a proper look good looking one so what we are going to do we are going to use something called material ui so what is material ui well material ui is basically a popular what is it saying it's it's it's basically components pre built for you you don't have to build them from scratch so for example i want to use text speed right i can use a text field and this particular text field can be added just by this much of a code right so i'm going to just add that now you're not going to use be able to use it directly you have to first add this to your project so for that i'm just going to visit the home page over here you have npm installed so just click on this get started and it will show you this yarn as well i'm using yarn because that works for me this was not working for me so it was not a choice for me but if it is for you then choose whatever you want um so i'm just going to copy that and paste it in the terminal and hit enter so now it's going to run get all the packages from that material ui code and then we will be able to use where it is this one with just a single line of code okay so it's imported um let me just clear all of that now i'm going to import that from that particular package f i okay it's not showing an option well if if it does for you that as well just open up this code okay this have this code option in their website just click on that and then you can copy that and paste it here now you can see without writing much code we have this this looks good isn't it so now what we want is we want to change this we don't want a standard looking over here we want this to be you know something like write a to-do so i'm going to save that so you can see it's going to update and it is updated okay now first thing first um this looks bit you know too much at that particular side we are going to um have that in the center so let me just do that quick i'm going to use a style now we have two options whenever you want to style your particular components in this react so first of all i hope you understand a little bit about react um if you don't this uh this is not exactly html this is uh jsx uh so things like styles and all are not directly used the way they are in html and you know even these values it's not class for example you can see its class name so that is something which is different in jsx and um html so you can read more about it for that it's a little bit of out of scope of what we are going to do but overall if you want to use a style we can either you know take the class name create a new file like this you know styles file import that like we have done over here and then assign the styles over there the other option is we can do in styling directly over here so that's what i'm going to do right now so that it's much easier for you to understand maybe um and i'm going to say display and i'm going to use flex okay this is a bit of a csf css if you're not not aware much about it um like whenever you want to uh like you know have two different components and you want them to be aligned vertically or horizontally this is what i used to go for so i want these particular ones to be aligned vertically you may think that they were already aligned like that but i want them to be in the center as well so i'm going to say justify content and then i'm going to say center now if i will save that one thing is they are in the center but they are like side by side that's the initially defined property for flex that the the components for them will be aligned horizontally but we want them to be vertical so we are going to change the flex direction to column once i will do that you can see they are one above the other not yet because it's not column yet it's just call so let me just say and then column and now i'll save that and you can see it's just below that so now that looks much better but i don't want this to be like taking the whole space like that that's not exactly what we want right so i'm just going to take it put inside f get this style out sorry get this style out provide that to this tip okay this is much better option i don't think that that sounds like that so um what can we do i do want to provide this particular you know text field a maximum weight so i'm going to say style okay then we will provide these curly braces twice and then i'm going to say max width and i'm going to fix that with 300 pixels and that should be fine now one thing which i can notice they are still not incentive right what happened so what i'm going to just grab all these slightly and put them there now if i'll see reload that well the maximum is not taken care of so i'm going to say width i want that to be around 90 v w what do i mean by that i mean you know i want the width of the view whatever view we have um so this is taking the whole space but it's not aligned that like so i'm going to say align items and center and that is going to do the work for us okay so one thing which i can notice is now what we want is we want to connect this application to firebase to do so just visit firebase.com i'm going to show you how we do that just type firebase open up the first link or you can click the second link that can save google a little bit of a penny but then select your google account so i'm going to select this one once you do that click on go to console i already have created one project before so it's showing that but if you don't don't worry if you don't see any project just click on add project create a new project and i'm going to name that to do app and i'm going to click on continue i'm going not going to use google analytics so i'm going to turn that off and click on create project it going it's going to take a few seconds so let's go back and see what we are going to do so now what i'm going to do once i am going to connect that i am going to add functions to add this to the firebase database then we are going to fetch that then we are going to update if it's completed or not and then we are going to delete so i hope that structure is clear now let's continue over there once you will do you will be on this overview page of your project what you have to do now is you have to connect your web app with firebase to do so you have to click on this web option click on that and then give a nickname to your application i'm going to give a nickname of app now as i said we will be hosting our project online but that will be done in the end so i'm not selecting it right now but don't worry we are going to do that so i'm going to click on register app now and it's going to load for a second or so once it's done it's going to provide us a lot of keys you're not sure you should just create your own please don't use mine i'm going to delete this project anyways but yeah just just you know now to use the firebase in your project you need to first install it so i'm going to say yarn add firebase if i will be using npm then i will say npm install then firebase or you can say npm i then space and then firebase okay so it's going to take a while in the meantime i'm going to go inside my source folder click on this which is going to create a new file i'm going to call this firebase config dot js and over here i'm going to is i'm going to paste all of this code okay so these are basically keys and also i'm just going to click on continue to console so now i would like to show you how our database looks like and how are we going to structure the data for that so in this application you can see what we have is first this particular text of what is the to do second is is it in progress or is it completed right the third uh the third value to that will be the timestamp so one thing which you can notice is if i add if i add new to it will be at the top right so what i'm doing is i'm sorting this all my to do's by their timestamp so the one which is added recently will be at the top so we will have three values for each of these to do the first one is what is the task second is it in progress or is it completed third is what is the time so this appears to be problem with your network let me just close that and try once again i'm going to say yarn add file base if i do that okay so let's uh let's give it a few moments of time okay uh so it's finally done it it took quite a lot of while than expected so if it takes more time for you than expected don't worry about it so firebase is finally installed what i'm going to do now is i'm going to go over here and then i'm going to open up this let me close this sorry and open this up much and i'm going to import firebase from you guessed it firebase okay so now once you will import that what we need to do is we have these keys right we need to initialize the firebase project as well so i'm going to say firebase dot initialize app and pass in this firebase config now we are specifically going to use file store for this so let me define a variable for that so that from outside of this particular file of this firebase config.js i can just get this basically i will be exporting it from this and then i can use it in other files to perform actions with the firestore so now i'm going to say db is equals to firebase dot firestone okay then i'm going to say export db so why am i doing this because now i can import this in any file so for example in this one and then i can use and create a function over here to add the to do get the to do and things like that and i don't have to import firebase again right so i hope that makes sense so let's do that now so as i said first we will connect which is actually done so next step is to add uh to do so let's go ahead and see how we are going to do that so first we need to accept the text or the task which the user types here right save it to some variable so that we can later on push that to our database so what we are going to use for that is hooks right if you don't know do not understand much about it first do this say use a state import that it's going to add it right over here like this then you can just say use a state this is a template of how a particular hook is defined so it is kind of think of it like this is the variable and this is a function which can update the variable okay this variable cannot be updated by saying that variable name is equals to something something right you can only update the value of that variable by calling this for particular function so for example for this i'm just calling it so let's say let's call that um right to do input right so that's the input which the user has submitted for the to do so i can then say set to do input right so that is a function which is going to be responsible for updating the to-do input variable right it's not exactly variable but i hope you understand how this works so initial this is the initial value so it says initial state but this is basically the initial value for that particular variable so this is going to be his input field so i'm just giving it a blank string string if that's what that was um so now i'm going to take this variable what i want is whenever i whenever i will write something here so if i write something something here it should be updated to that particular variable so how can we do that i'm going to use on change and what on change does is on change can provide will provide us this particular value and i can just say set due to input e dot target target dot value value value okay now i can also say value of this particular text field is going to be to do input so if i will save that and if i type something something this should be saved to this particular variable or i should say right now how to verify that okay so let me show you so now what i did over here is rather than do using it directly i just added these curly braces so that i can write a bit more code over here rather than just a single line of code so what i'm going to do i'm going to just console.log this is the input what you can see the to-do input input and i'm going to print this whole value so that you can understand what we are getting with it okay so let me just inspect go to the console clear it all and restart now if i type something over here you can see whenever i type a single character it's updated so you can see this is a to do and this particular on change what is on change means well the text field is changing that's when this is called so it's updating this value so let me just remove that and even you know uh sorry remove that and remove these curly braces as well since we just have a single line of code so it does not makes much sense to use it like that okay so this is much lighter short code okay so what do we want to do now we have the value we want to upload it to the database to do that we are going to create a function it's going to be constant add to do okay and this is how we do with creating a you can create like this or you can even create like this it's not going to be a very big change i don't want you to be confused so i'm just saying there's not much there are reason why why to use this more and things like that but just to make sure you don't get confused i'm going to use it like this so you define a function you named it and this is how it is so what do we want to do well first of all when are we going to call this well we are going to call this whenever we will you know write this down and hit enter because that's what i have implemented over here if you write something right you don't have to click a button you just hit enter and it resolved if you're thinking about mobile devices don't worry mobile devices also comes with an enter kind of button you can uh you you may be using you can think of it like whenever you click on it it just goes to the next line that's that's an active button so you can use that on mobile phone if you're browsing this website from a mobile phone okay so now how can we implement that kind of functionality so well actually we have to start with the button so let me go to material ui i'm going to grab a button so let me grab a very simple button like the first one this default one we're not going to show this this is just there to do its function so i'm going to go side of this text field and then i'm going to import that button from material ui so whenever i will select this it will show auto import from material ui i'm going to click on that and save that and this should have shown me the button but i okay this is there it is so this is the button right so what i want is whenever i will click on this button i will have an on click i want to call that to do function actually it's called add a to do so add to do i want to call this function now if you want this particular button to be clicked whenever we hit that enter then just wrap text field and the button inside form and then just saved and defined this as a you know type of button as a submit just a second where is my mouse yeah here it is so you have to just define the type as submit okay so you define the type as a summit now if i will say let me just show you console.log and i will say you are trying to add a to-do if i'll save that see the console over here let me clear all hello and hit enter hello and hit enter one thing is happening this is reloading that's not what we want so what i'm going to say i'm going to say e and i'm going to say e dot prevent default prevent i'm not yeah prevent default and like that okay so now it should not uh so basically what happens is uh this is the basic property or the defined default property of a form then whenever you will write some things and just hit enter or it's called submit that's what we define you know the type of that button has a summit it reloads the page we don't want that right so that's why what what i did was i added that preventer default which will not allow that reload okay so now let me show you how exactly it's going to go so i'm going to say hello and when i will hit enter make sure to see the console i'm going to hit enter now so you can see you are trying to add it to again and again and again so what happens is when i hit enter this particular on click function of this button which have a type of submit which is inside a form is called okay so i hope this all makes sense to you now okay so now let's move on to the function of how we are going to apply uh upload this data to firebase so we need to first set this cloud file store up so i'm just going to click on create database we have two options production mode and a test mode we are going to start with the test mode because this gives us option to you know work on this for 30 days without even adding the authentication but we can always change the security rules yeah so just make sure to select whatever you want this particular thing does not matter and just click on enable wait for a second or so and it will be you know provisioning cloud firestore i actually don't know what that means uh anyways let's let's give it its time now how we are going to create that function is by using this particular variable which we created with firebase file store in firebase config file so i'm going to say db dot i'm going to go and go for a collection i know you may not understand this but let me explain first so this is file store and how we structure data over here is we create collections so let me call that to do's and every collection can have unlimited amount of documents so i'm just creating a document think of it as a to do and that to do is going to have three values as i said before the first value is going to be the to do itself so i'm going to say the key of it is to do and this is the to do i hope that makes sense this is the key this is the value i'm going to add one more the second one is going to be is it in progress or is it completed so we are going to say is in progress is in progress and this is going to be a boolean value if it is true that it is in progress i can just call it in progress i guess in progress i am going to call that initial value of that to be false always whenever we will create a new to do but from our application we can update that to true if that particular task is completed the next value is going to be the timestamp so i'm going to say time stamp and this is going to be actually timestamp and i'll show you how you can get a server timestamp so that it's correct always like it's not from your mobile device time but from the server timestamp so this is the date and i can just sorry give it a time maybe something like i don't know which date i have it's 25 okay so let me select something like 24 and maybe 12 12 0 0 and i'm going to save that now i would like you to see this particular structure first if you don't understand much this is a collection every collection can have unlimited amount of documents and this document have these key value pairs like a map now the best part is that or actually the part which makes it like very scalable whatsoever is each document in itself can have collection so you can see this loop is starting that collection can have document unlimited amount of documents and each document can have a collection or actually multiple collections now that those collection in itself can have unlimited amount of documents and so on and so forth so that's kind of a structure don't worry if you don't exactly understand it at the first time more you work more you will be able to understand it and work with it but for now i hope this is clear that this is a collection of to-do's and all the different documents i will be creating inside of it are going to be a single so this is a single to do then we will have more and more like that every to do document will have these three values the first is it in progress or is it completed if it is completed then this will be true if it is in progress then it will be well actually it's supposed if it's in progress then it will be true if it isn't completed then it will be false it's like that um so it's completed right now so i'm going to turn that to in progress yeah so the timestamp is basically going to be server timestamp and i'll show you how we can upload that and this is a to-do which the user submitted right over here okay so before we continue as i said before we have already implemented that this to-do will be added when we hit enter or written on your keyboard so we don't need this button anymore and i don't like this ugly button as well so let me hide that so how will i do that i'll just go inside this and type in style and then i'll add these two curly braces i'll say display and i'll say none okay so now if i'll refresh i should not have to not sure why it's not represented instantly but yeah you can see it's updated yeah i didn't reload it or anything it does automatically so now what we need to do now is add a function to do what we did here manually what we did we went on to this collection we added a document with a random id and then we defined added these values so let me keep this open and open this up so as i said we will be using this db which is the fire file store and i want to say dot collection so we are starting with a collection so what is the name of that collection it is to do's so i'll say two inside of that we have a document okay in this particular document so now we have multiple options fi either we can tell what do we want this document id to be and or we can let firebase create a random id for us so if we want to give it ourself then we can say talk and then provide that id okay but i don't want to you know create new functions for generating a random strings and all so i'm just going to let firebase create a random id for it and add my value so that's why i'm going to use add if you are going to define something on your own like you are providing the value like this document and then you are doing then you will use dot set okay so i hope that is clear so now i'm going to say dot add and now inside of that i'm going to provide the values okay so what are the different values the first is in progress so i'm going to say in progress well what is it going to be for a newly created to do well it's going to be true second what is the timestamp so well timestamp is going to be timestamp we are going to get it from the server timestamp so we are going to use firebase for this so i'm going to say firebase dot file store now to use this as like firebase we need to import that so i'm going to say import firebase guess from it's going to be from firebase right so we will import that and then we will say dot field field value dot server um server timestamp okay so what i'm doing is this particular line will get a server timestamp from firestop for this particular field value then i want to update that so that's the tool so we will be getting that in this particular hook which we defined well that's basically it once this is done what i want to do is get rid of this particular text from this particular text field right clearing it up but i i guess i can show you first so firebase is not defined that's what it's saying i actually mentioned is a free fee base it should be firebase okay so make sure of that okay so let's write something let's let's do something other than watching tv tv all the time this is the to-do i have already clicked on enter i am not sure if you have heard it but let's see if anything else is added guess what it's added so what i was saying before was once we will add that i want to clear this text so that i can add another do right so for that what we are going to say i want you to think how can we update this value pause the video okay so how we are going to update this video i hope you are clear we are going to use this set to do input so i'm going to set to do input and set that to blank okay so if i will save that and let's add a new one new to do something new if i hit you can see it's clear now and it's added to the database as well seems easy let's continue now we are adding that but now we want to show them over here in a list so how we are going to do that well let's start by creating a new function for it so i'm going to create a function i'm going to name that get data so what this uh let me call this get to rules okay that makes much more sense right that we are getting the two rules okay so how are we going to get the to do well before we discuss how we are going to get the to-do's first let's understand where and when should we get that to do right so we are going to get the to-dos when we start this application for the very first time right so for that you can use use state okay sorry use effect my bad uh first import that then you can use the basic structure of it now if you're not uh if you're not able to see these snippets i'm sorry i should have mentioned this before but i am using this extension called es7 snippets this one okay es7 react redux graphql react native snippets uh this basically helps me i don't have to write this from scratch and i have the code available beforehand but anyways so you can see this is the particular code which you can write so it is use effect and this so what you can see is we have these brackets over here so how use effect works is if you want to do something when that values changes so for example i want to do something when the value of this changes i can copy this and basically add it over here so if any changes happen to this but a particular value then this particular this use effect will be called and whatever there will be inside of it will be you know run now we want to run this only the first time in that case what we do we leave it blank and i'm going to call this function from over here so i hope this you are clear blank you run only on first launch i hope that makes sense okay so now what we want now we are clear when are we going to fetch it now let's discuss how we are going to fetch it so we are going to use db again right i am going to say dot collection first we need to provide the reference from where we want to get the tools or where we want to get the data in firestore from so i'm going to say i want from to-do's dot then i want to go inside well not inside any document we want to get all the documents right so what i'm going to say i'm going to say dot on a snapshot now i want you to get clear about this first there are multiple ways to get the data from firestore one of which is getting on snapshot now the reason why i'm using on snapshot is because whenever a new data will be added it will be instantly reflected in our list there is a other option as well in which we just say dot get which just returns what we have at that particular movement so what will happen if we use dot get is then we will be able to fetch the data for the first time but when i will try to add more to do's i will not be able to see them real time updating in the list right so that's the reason why we are using on snapshot how on snapshot works is whenever a new data will be updated it will be instantly reflected on our list so it's a real time database so let me use on snapshot and now how we define this is very simple you just have to say function and this function is going to have a query snapshot that is something which we received um received from that particular query which we have done which is this on a snapshot query and i'm going to say on snap shot i hope that i named it correctly yeah it does not matter but yeah so this is a query snapshot which will uh we received by this on snapshot query and now i'm going to use it to set our to-do's now similar to how we have created this particular hook to save a single to-do i'm going to create a hook to save all the list of to-do's so let's uh so let me create that i'm going to say use a state let me make it simple for you if you don't even have the snippets so what we are going to do first we will say const then we will name the particular variable for the list of to-do's which is going to be called to-do's right um now for the name of the function which is going to update that i'm going to say it's set to dose right and then i can say use state and just like that now the initial value for this to do is going to be a blank addict okay i hope that all makes sense so now what i want is i want to use this query snapshot dot you can see it have all these documents right docs i can just map through all of them and get the values and save all of those values inside this particular to-do so let me show you what i mean i'm going to go map and map is going to return me a particular single document each and every time and from that document what i'm going to do is i'm going to get the values right now i don't want to just get a single value i want to get a multiple values so what i'm going to do i'm going to say id this id is going to be doc dot id now you may be thinking where is id in this and why am i using an id well later on when we want to delete the particular uh since we want to add a functionality to delete that particular to-do we will need this particular id to go inside this collection then go inside this i uh document and then delete that right so that's why i'm saving that now the question arises how am i going to get that well to get these values like in progress timestamp or to do what we need to do is let me define one so for example to do i need to say doc okay that particular document dot data and then i can say i want the which is the key inside of it but if you want the id then you can directly say doc dot id and you will be able to get that id this one okay so i hope it's clear on how we can get the id the next value which i want is in progress and i'm going to get that similarly to how i get this to do doc dot data and dot in progress okay now it's showing it uh some errors over here because what we need to do is let me cut this out we need to have a single brackets like that and then we should do this okay so now whole of this map and going over and returning this what it is going to do is it's going to create a list of doodles and that's exactly what we want to set in our to-do's so i'm just going to cut this out and say set to rules and set them like this so just to clear this so that uh it's very clear what we did we get all of the documents so i we just map all over them right one by one and then we are returning the value inside of it right and that value since it's a map it's going to be one twice third thrice and so on and so forth it's going to become a list of these and that list is now assigned to this set to dose which is going to update about to-do's so now we will be able to access this data which we got through this variable or hook now let's see how we can show the list so here's it now i want to show the list just below this form so i'm going to say first let me use this so we use these brackets to use javascript inside our jsx right this is not html this is jsx just to be clear again so what i'm going to do i'm going to say to do's dot map okay so what i'm doing is i'm mapping through all over my tools now this is going to provide me a single to do every time and with that what i'm going to do is i'm going to just a second what did i do with this one okay i'm going to return a paragraph with the to do so i'm going to say to do now this is the map i want you to be clear about this this is this map this whole value you get this to do which is the text of it i need to say this map dot to so i will say to do dot to do now since i'm using javascript inside jsx i need to call it like this in these brackets now it's showing an error because it says that we need a comma let me make sure i'm using enough amount of these okay i guess i'm using a little less okay if i'll save that now congratulations we are able to fetch the data from firestone that's the first statement the next thing is we want um to you know provide this option to update if it's in progress or if it's done and also show that of course and then we will be adding an option to delete as well so let's see how we can do that so first i'm not going to just write all of the code here we can do that um or we can just actually create a separate folder to for this particular tool type you know this particular tile i mean a list item why i'm creating a separate folder from like file for that particular one because modernization is something which you should do and i just want to make sure that you understand how we you know kind of uh separate these so i'm going to say to do dot js so this is going to be the file which will have our jsx code uh j6 by that i mean this particular paragraphs buttons html things like that and to style them i'm going to also create a css file so i'm going to say to do your css now this is interesting i haven't used this to do one do this this okay this is a good one i i personally have been using vs code for quite long time i've never created to do like that but yeah um so yeah what we are going to do is we have this js and we have this to do dot css so first to create a new component we can use through this you know es7 snippets i can just say rfc and if i will hit enter you can see i have this basic boilerplate code for a component with regard i will be calling it to do list item okay let me just close the sidebar um i'm going to do that by command b and you can do it like according to your shortcuts um so now we have this to-do list item and i'm going to cut this out so now cut this paragraph from there and paste it here for now now we don't have this to do provided here so how we can you know accept data in a component from another component this is something you can learn that's why i am using another component rather than you know just showing it right over here so how we can do that is by using these curly braces and defining what we want well i want the to do let me show you by this i want the to do i want to know if it is in progress or is it done i also want to know its time but i i'm not showing it here so it's fine i can just keep with these two values but one value which i want is the idea to make this delete function work so i'm going to say id and save that okay so we have it but it will be showing an error if we use that so what i'm going to do now is i'm going to visit here and i'm going to use this particular component right over here so how do we do that i'm going to say to do list item and then just end it to pass in these values we are going to say to do and i'm going to pass in the value now here i'm not accepting that to do the whole map let me make it clear this to do which we are getting from to do's map is actually this whole right i don't want this whole for this to do this to do is going to be the text right text only so for that what i'm going to say to do dot to do i just want to make sure this does not confuse you right then for the in progress similar thing will happen the to do is to do but inside to do we want in progress because to do is a map and in that map we are providing this key and we want the value for this key the next thing is that id so i'm going to say 2 2 and to do dot id how i'm able to use the id because i'm providing that okay so if i will see that let's go over here and let's see if it is visible well it's not visible first of all because i am saying 2.2 which because this is not a map which we are accepting so this is a string so in a string if we say dot something it will not work right so if i will save this now you can see we have what we had before back but i'm providing the value correctly somewhere okay so i need to provide this id here like that this is the id guys right so i hope that the error which i made actually make things clear for you that if you are passing a value here and you are passing that value again then the next value will be used here right so this is how you learn that you learn by making mistakes but anyhow um so this is working the same you will be like you know sanskar what is the difference we were using this paragraph there we are using it now we are actually not going to use this paragraph because we want this kind of structure where we want the top one and then we want a secondary text as well well i'm not going to bore you with writing css for it so i'm going to use a component instead so i'm going to go in here i'm going to say list item and i'm going to open that up then i'm going to click on list and you can see this these are the kind of list well what i want is i want this you know primary and secondary text so i'm going to show the source of this and i should be able to see okay so you can see this is the list item text and this have this primary text and the secondary text right and this list item text is inside a list item so these are the two components by material ui which we will be using so let me show you this and let me show you how we can do that so i'm going to say list item import from material ui then inside of that oops i think it's not imported list item okay now it's imported now inside of that i want to use list item text so i'm going to import that as well over here like that and like that now i can provide a primary text what is going to be the primary text well the primary text as you can see here it is photos so the photos is the top one right the main one and the secondary one is this january 9 2014 forever our application we want the main text to be this and the secondary text to be is it in progress or is it completed so i'm going to make the primary text as you know the to do which we are accepting so if i will save that you can see we have this now we are also using the paragraph and this so i don't want to combine them like that let me just save that like that okay so now we have it we will fix this spacing issues but yeah so now we have the primary text what about the secondary text so let me add the secondary one now secondary text is not going to be fixed it's it's uh it's going to show in progress if it is in progress true if it is not in progress then we will show it's completed so what i'm going to do i'm going to use javascript here which is a tertiary operator which is let me show you what i mean if you write a condition here and then you say question mark and true and false so what will happen is if the condition is true you know then this particular first one will happen if the condition is false then the second one will happen so what i'm going to do is i'm going to check if it is in progress this is a condition this is a boolean value right so if it is in progress i'm question if that will be true this text will be visible if that is false this text will be visible so what i want is if it is in progress show in progress and you know we can just show some fun emojis as well where are my emojis where are my emojis bring me emojis anyhow i'm not able to go now so i'm just going to copy that in progress paste it here i'm going to call it in progress for this i'm going to call it completed yeah so if i will see that you will be able to see we have in progress for all of these if i will change for maybe this first one to false and you can see it's instantly updated right i don't have to refresh the list so that's the best part about snapshot but you can see it's completed now okay so what's okay now it is visible anyhow um so what do we want now is we want these two buttons over here uh one will be to delete it one will be to update if it is completed or not so i'm going to use button from material ui again and similar to this one right this this button which we created and this button is going to be done let me just see if it's visible okay we need to import that let's make sure of that auto import from material ui enter we have that let me see that okay we have this done button but we want this to be you know side by side not like this one above the other so i hope you remember how we do that we use style we will say display we will say flex this is the defined property of it like our default property of it now you can see these are structured exactly how we want okay so we have this done button and then next we also want a button to delete that so that's going to be that okay so now we have the button we can continue further to give them the properties they need so whenever uh first thing first i don't want to show this as done i want to show this as undone when it's completed and show done when it's in progress so let me fix that similar to how we did it here i'm going to copy that paste it here so if it is if it is in progress i would like to show that the user can mark it as done if it is not in progress which means it is done then mark is a mark it as undone so now you can see it is showing until for this and done for this okay now let's implement the functions for these so first function i'm going to create is going to be the function which is going to update i'm going to call this toggle you know toggle is basically changing from one to another toggle in progress progress because what this function is going to do is this function is just going to change the in progress from true to false or false to true so whatever the value of it is right now just flip that so that's why i'm calling it in progress well the actual thing what i'm going to do is i'm actually updating that in the database right so how can we update that in database well very easy just first tell them uh tell firestore what is the path so the path is database which is to use the file store dot collection which is going to be this one so i'm going to say to do's then dot document inside this particular document i want to update so i need to define provide the document id so even for the update we need this id so i'm going to copy that id paste it here then say dot update you can see how easy it is right literally you are typing english right now okay so inside this update since we are updating the key so uh in a map so i'm going to provide like these curly braces then the key which i want to upgrade what is key this is the key in progress so just copy that paste it here and i want to change that to whatever it is so right now it is in progress i'll just use not sign this is a not sign okay um this will be in your one key you know number one key in your keyboard so this particular sign denotes not so i'm just saying whatever the value of that is just not it which means if the value of this in progress is true we will upload false if that is false we will upload true so that is what the whole toggle in progress means so when do we want to toggle that well whenever we will click on this so on click i am going to call this function well this should be equals to not plus okay so if i will save that now and let me cancel that come over here this is right now completed if i will click on this you can see it's in progress if i'll click on it again it's completed well guess what it's working for everyone okay so the next step is to delete that particular to-do so let's see how we can do that i'm going to say function delete to do and inside of that i'm going to say database dot collection to lose dot document we are going to go inside the collection inside the document by id and then i'm going to say dot delete okay like that now when do i want to call this delete to do when i click on this button this exponent so i'm going to say on click provide that function and let's get back and see if it works new to do something so this is new to do something let's see if it will get deleted if i will click on this so here i go click well guess what it's deleted okay so i hope it's clear how easy it is to delete it how easy it is to update how easy to upload how easy it is to fetch we literally never wrote more than one to two lines of code to perform some action don't count this one this was to save the value to a local variable right so yeah that's the whole part of it now for the ui you may be thinking since i wanted to look a little bit better than this right so let me just do a one quick thing that um writing them properly these alignment is not perfect right so let me just see what's the problem right now so as you can see this list view is still this part but this is not able to be in the center so i'm just going to go inside of this text field and i want this in center always so what i can do is i can just say a line item i'm not sure it will work for this but i'm just trying so uh i don't think that's the best thing to do let me just remove this maxwell property this makes it much more bad let's get rid of the width as well get rid of the whole style thing if i'll save that you can see it's just right over here i wanted it in the center it's not going like that so i'm just going to provide that you know these these all this style if i cut it from there and provide it from there it is better but um yeah let me just provide the width as well so i'm going to say width will be 90 um view width okay so that's how it is so if you want to provide height so that is how it works if i'll save that now it's taking the 90 percent of it but it's not exactly centralized let me just confirm okay so it's it's not centered in itself so let me just clear that all and i'm going to just say width to 100 now since it's the most outside element it's going to take the whole okay now i want these uh to have a fixed width not like that you know this does not look good when one is starting from here one is starting from there so i'm just going to fix that guys and let me just do that quick i'm going to say style where is it because that fixes that and for this to do i would like that to have a little bit of a more you know width so i'm going to say i want the style to be of 90 maybe not 90 because when i will provide 90 it will depend on this div but i think we can depend on it since it's already taking 100 so i'm going to say 90 and give this a try okay it's not changing anything and also i'm going to just say v w so you can see it's just taking the whole space i don't want that too much to happen i'm just going to say max width and i'm going to provide that to 500 like so so you can see that that looks fine to me um i'm going to provide the same styling to this particular div to make sure you know these these looks like they start and end at the same place okay that's perfect um actually these this item have a little bit of you know um i have padding from both sides that's why it's a bit you know what i can do is i can also provide a bit of a margin top just as a cherry on top just to make it bit more better i guess okay i need to say pixel okay so now that's the app next step is to host this online on a website adobe and things like that well as i said it is going to be free so you don't need anything like let's see how we're going to do that click on get first click on firebase hosting then click on get started copy this if you're doing this for the first time you will be required to place this and install it is going to take quite a lot of time for me if i'm going to update mine so i'm not going to do that but believe me i have done this before okay so then i'm going to click on next then i'm going to login now i'm actually logged in with another account so i'm going to first log out and then what i'm going to do is i'm going to login again go to the terminal and i'm going to log in with the new account so i'm going to say firebase login and hit yes this will open up a new window where you can log in so i'm going to use my account of this one the same which i'm using for creating the firebase project once that is done it will say who you're successfully logged in so you can see that here as well now what we we want to do is we want to do this firebase in it so i'm going to say firebase init hit enter then select hosting hit enter use an existing project because we have already created that project hit enter i am going to use this to do app because this is the one which i created in front of you guys the sample one was before already there right okay now for the directory name i am going to call because whenever we will build this particular react project which i will show you how to build we will have a build folder so i'm going to name this build rewrite all the urls to index.html i guess this is self-explanatory all the urls will be redirected to index.html yes um i'm i have not fixed that but yeah we are not here and i'm going to set up the github automatic uh deploy so let me do that okay so now the firebase project is set up what we need to do is build the react project and push it to a firebase so i'm going to say react well sorry npm run bill this is going to build the react project for us and then we are going to push this project to firebase hosting so let's wait for a second or so so that this gets done and then we are good to go to push this code on the web so i hope if you have watched till far you have completed make sure to you know link give me the link of your project i will be really excited to see your work guys um and that that really makes me happy of how you know people are actually impacted okay so now let me go to the next step copy firebase deploy i can even write that but you know but yeah so i can just say firebase deploy and just to show you guys we have this build folder now okay when i run this command of npm run build this particular folder was created and all those files which we write jsx and all it was actually converted into js like this and css css was there but i hope that makes sense now okay so it's actually live guys let me open that up and let's see if it works this should work okay so as you can see the project is live successfully if you are facing any issues feel free to let me know in the comments i'll be more than ex happy to help you and thanks for watching the video till the end make sure to hit that like button make sure to hit the subscribe button if you want to learn more and i'll see you in the next

Channel: Sanskar Tiwari

Views: 13,706

Rating: 4.9717646 out of 5

Keywords: react todo app, todo app react firebase, firebase react todo app, react tutorial for beginners

Id: NsHnVSJukj0

Length: 66min 49sec (4009 seconds)

Published: Wed Nov 25 2020