Learn firebase by building a task management app | Manoj Singh Negi | Recraft Relic

hey guys welcome to recovery channel and i hope you are doing well some of you guys wanted me to do a video where i'll show how to integrate firestore with react so that's what i'm going to do today we're going to use firestore apis uh to store user specific tasks for example we're basically going to in basic word are going to build a to-do app for uh users so a user can basically log in they can create their task and that's pretty much it all right so let's do that and yeah let's get started but before starting uh if you haven't subscribed yet i'll request you to subscribe and share this video uh if you like it so let's get started all right so here is the application here is a firebase auth application that i already created in one of my past video and this basically integrates firebase authentication and you will be able to like sign up and log in using firebase so i already have built that i'm going to use that as a base i'll basically link down the github and the youtube video walkthrough for this app in the description uh let's get that out of the way and let's start it let's get started so firstly from us i'm going to login so i already have created a user uh using this account i can go here and create another account if i want to but i'm going to use it i'm going to click login and you can see you know uh that you know i'm logged in i can click on logout to log out and stuff so before starting starting to like integrate firebase firestore in our application or writing any code we have to configure uh the you know basically the database structure that we're going to have for that we have to create a collection and for that we are going to go into our firebase uh you know firestore so what you guys have to do um is go here select your application in that click on five bit database and yeah there is there you have it if you haven't configured the firebase database before i already have uh done it uh it will maybe ask for your location and stuff so for that i will basically link down you know a link where you can basically walk it will walk you through the setup process but yeah you know in the end you will have something like this and you can create a collection so we are going to be creating a collection and we will call it tasks so because we're going to say save all of our tasks in uh this collection and i'm just going to click next and then it will ask you know like uh what kind of fields you need and stuff so first thing is uh that you know whatever uh the document uh we're going to create it will have a document id it will have a field called name [Music] and then it will have a user you know basically a user like a user id with uh which will which will help us to determine you know to which user this task basically belongs to so we're going to save and as you can see we created our first document if you don't need it you can also delete it um delete document right so you can see we have a collection and now uh you know we can basically use it in our firebase application and get started so in order to do uh use firebase uh obviously you have to initialize your uh application you know you can watch my other video on how to do all of this but it's pretty easy you know you can get all this information for your firebase console and just copy and paste it here um okay so what i will do is first and foremost i'm going to go here and create a new folder utils and then inside i'll create a folder called filebase.js and why basically i'm building this firebase.js is because um i'm basically going to export db from it so basically you know we're going to uh initialize the app uh you know and then pass it to the firestore and that file store instance we're going to use it as a db in basically to create tasks and stuff and all do doing all that stuff right so okay so let's do it first and foremost what we're going to do is we're going to move this initialization inside the fibers.js so i'm just going to copy this it will uh really help if you watch the previous video because in all of this configuration i explain how to do it and everything so it will really great or you can just get the github source code and just follow along so and then you need this initialize app as well so now um i'm just going to go here paste this now we have initialized that so now what we actually have to do is something like this so we we're going to create a function called and we're also going to export it export const initialize firebase and what this basically going to do is take our firebase config initialize the app and store it inside app and then we are going to do something like this um cons db equal to get firestore so get firestore and then we're going to pass our app so it's basically going to get the firestore instance for using our app configuration and we have to import it um from get fired store from firebase firestore so we are going to get it from firestore as you can see it's uh it takes our app and then return the firestore instance um you can get a lot of information by just hovering over these because you know they they have a lot of documentation uh already being done for them and you can actually see example and stuff inside it it's a really useful feature and you can always you can see what are the params you know why are they optional or not in everything so now we have this um we have initialized firebase but uh what we actually what i actually want to do is to export this and in order to do that what i'm going to do is db equal to and i'm going to define db as a you know global variable which i can export them so i'm just going to do export const get db equal to return db why i am keeping it global because then it's really easy to do it that way uh you know because if i do something like this then it's you know it's scope is just limited to here and then i can't export it or what i have to do is i have to return db from here and then you know i have to call and initialize firebase again and again so i don't want to do that i only want to call it once and then set it up inside db variable and then then uh you know get it why i defined it as a function why i just uh didn't exported it um i most probably the x normal expo will also work but what this function will ensure is that you know it will always give you like the basically the latest instance uh you know from the memory so yeah that's pretty much it and it's also kind of a neat you know thing to do as well instead of just exporting global variable so once that is done what i want to do is i want to call initialize firebase here so it will initialize our application just like before and if i go here reload the page uh it will still work which is great now what we're going to do is um inside our dashboard we're going to create an input and a button which will help us to like you know type in a task and when we click on add it will add it to the like it will make the api hit or use firestore to save the task and then next we're going to you know retrieve the whole list basically so let's get started let's get uh [Music] into it so what i'm going to do is i'm going to go to login and i'm going to just uh copy this input this whole input uh it's easier again you know watch the uh other firebase auth video if you haven't already done that it will be really really helpful for you to follow along with this so i'm just going to remove it for now and save it and see how that looks great it looks great instead of email i'll just say add a task you know and then i need a button so i'm just going to copy this logout button by the way i'm using tailwind so all of this styling i'm not writing in a css i'm using table framework to style the whole application and i'll show you do that uh like i'll show some perks of that so for example this this is log out so i'm just going to remove like rename it to add task right and then i'm going to make it full width so in in order to make this butterfly i just have to say w full and it will make it full width and then i also don't need this gradient because it's repeating so what i'm going to do is i'm going to remove this gradient and just keep bg pink 500 and this is the color variation and you know you can see i have this attach also oh yeah so we have a cursor that looks great so we have the ui now let's uh save the task in the state first so let's make it a control input um so const task set task and it will be equal to use state which will be empty by default great now i'm going to add these values here value equal to [Music] task then on change will be equal to e set task to e target dot value great uh and hopefully that will work i mostly think it will and now let's uh create our submit function like which will add the task to the like which will call the firestore methods to save the task in our collection so const i'll just name it to add task and what i'm going to do is i'm going to console.log the task just to see if it's working save it go here inspect the element and also add this as an on click and instead of on click logout i'm going to do add task right so i'm just going to go to the console and i'm going to reload the page and let's see let's say buy something click on that task and you can see the buy something there right so that's great now let's uh you know basically um you know uh let's add it to the api so in order to add to the id to the api we are going to use firestore methods so let's do that um and we also need the user id like the user of the id of this user so what i'm going to do is i'm going to move it here right and let's do it so first and foremost we have to get the db which we created uh here in the fibers.js so i'm just going to say const db it equals to [Music] db is uh equal to get db or to import it great and after that we have to create a new ref or as we call like a reference uh for creating this new record so we can say new task ref and we're going to use collection provided by firestore pass in our db uh like the firestore instance you can see firestore instance right db and then the collection name and we're going to use uh this to create a new dock reference and dock will basically be imported from firestorm okay all right so basically what we did is we created a new reference for uh um for a new record that you want to create you can basically imagine stuff like that and now we're going to save this so let's do that in order to do that we are going to use set dock provided by firestore we are going to give it to the reference as you can see document reference we created a new reference so we'll just uh use new task graph here and uh and then we can provide the information so we have two field name and user so user is basically user id of the user so i'm just going to say user dot user i uid and in the name i'm just going to take the task that we created above and just implement the other thing that i want to do is i want i'm going to wrap it inside use callback uh if you are not familiar with use callback i already have done a video um you know somewhere maybe a couple of months ago about it so it will be really great if you guys go ahead and check out i also have written an article about it in medium uh yeah but if you don't have time to do that basically use callback is a hook provided by react so what happens is whenever you define functions uh inside render they are going to you know basically you know like redefine every render and you don't want to do that you know sometimes you don't want to do that you want only want them to change if certain variable changes inside them in our case we are using task and user id so we're going to provide these two variable and like as a dependency and we're going to say that whenever these two changes whenever task changes or or changes this function will get redefined and if they don't change don't redefine it so it will basically also help us to keep the references inside these functions to latest value of the variable but also help us um you know not really like also help with us with the performance by not redefining it in every render basically so that being said let's see if this works uh by the way this set dock it's a promise you can see um so you know this is a great tip you know if uh if you're a developer if you're starting out or whatever if you're using any sdk third party library something like this you can always go ahead and you know have this information at your uh you know at your command you know you can just go ahead and override it and you can read up about all of this what it needs you know what kind of data you have to provide sometimes you know we are confused what kind of uh you know like variable like arguments or parameter types we have to provide but here you can see uh like the description of every parameter it's a really good thing you don't even have to go to the google or anything you know stack overflow you just go here and just read this so it will like written a promise uh but we're not going to worry about that right now let's just add a task i'm just going to give it a good refresh i'm going to go to the network let's go to network and let's see so buy something and you can also uh have a look at our collection so in our collection right now our collection is empty i'm just going to reload it so you can see our collection is uh you know empty so now let's just add a task click on that task and you can see the api is being made and you can see the record here where's if i go here click on this you can see the name and the user just like that you know it's it's as simple as that now we have added a task now let's add another task by something two times all right click on add task and go in our uh you know like firebase console and you can see we have now have two records and that's great you know this is like the creating a record in firestore it's so easy you know and if you have like multiple collections you can always you know just rename this to something else and you can save in that collection as well so here it is here uh like adding so now let's you know this is adding now let's get all the tasks you know which is a bit tricky uh and maybe confusing so let's do that first so what we are going to do is we are going to define a function i should do do we do that let's define a function so we'll define a function called uh we'll call it const patch by the way this naming convention is wrong like it should be a should be small so patch tasks right and this will be a sync function because we are going to use a weight inside it so a sync and now we have what we're going to do is firstly from us we have to create a query to you know so what i'm going to do is i'm only going to fetch the task which is uh related to this or which are uh which are created by this user that's why we added this user id and this is how i'm going to filter them out so what i'm going to do is fetch tasks and then i'm going to say first if i must get the db or what i'm going to do first and foremost what i'm going to do is i'm going to say if user is defined because initially user is undefined and then we fetch it uh and you know then only then we use it so you know it will be like under like it will be null at the start so it will basically throw an error so that's why i put if there and then we're going to create a query const q q as in query and we're going to import query from file store query collection all right which collection we want to query uh it's tasks right and then i'm going to put the query i'm going to use where user comma double equal to comma user dot uid so basically what i'm saying is go into the go into our dv uh into the task collection and get me all the get me all the records where the user i like where the user field equals to user.uid of the current logged in user that's what i'm doing basically so great so now we have the query now we have to like uh execute it so let's do that by uh we're going to do cons we call it they call it snapshot so i'm just going to call that you can also do results if you want to which is like more uh easier to understand so i'm just going to do a result for results and then i'm going to say get docs like this and inside get docs there will be query right and i'm going to await it so await it i'm also going to put it in inside a try catch to catch an error so try and then catch the error if there is any and console.log the error we don't have to do any fancy error handling here so great it says db is not defined yes it is not so let's define db so cons db equal to get db one thing we can always do is uh we don't have to re like you know get it again and again the db from uh like wherever we are calling it because we can always just import it here and just save it inside like a global variable i just don't want to do that right now so yeah but that's always easier you know if you're using a lot of db uh instances in a lot of different places just import it here in one file and just use it like globally and just use it but yeah for this it will work um [Music] so great we have the query we have executed it now let's console log our results yep let's see if it will work so now let's reload the page the thing will work reason being i'm not calling this somewhere right i have to call it somewhere so i'll do it inside use effect um in a different use effect and i will tell i will uh explain why i'm doing that but yeah i'm just going to use a different use effect and i'm just going to call this fetch tasks and just going to say only get called when user gets changed yeah because user it is its dependency because it you know basically how the renderer works is this will get like called first time if i uh remove this and at the first time user is always null so this thing will never work so what i'm telling it to do is whenever user basically get modified or change you know uh basically call it again and then it will have like the latest instance and i think i should also just put it inside use callback i think that will be much more easier to do and then instead of here i just have to call it um but i still have to call it like this right so yeah so now let's reload the page and as you can see there is some things going on here and if you look at docs there are like some two records which basically correspond to our task so how we're going to extract that information in order to do that what i actually have to do if you look at the prototype you can see we have a forage here right so we're going to use that um for each so they provide you a for each so you can like trade through the list but they don't provide a map which is for some reason you know there will be a strong reason for that but uh what we can just do is for like we can loop through them and push them into an array and use that array you know uh save that in our state and just render it so doc so every record is called a dock and you can just say dog dot data to extract the data basically so i'm just gonna console.log it give me a second so all right so now right so you can see right so we have these two um basically uh records so now we are able to save records and get them now let's show them in the ui um so what i'm going to do is and maybe there are better ways to do it but this how i do it all the time when i work with firebase so what i basically do is either you can create a really function for this but you know for this it will work so i'll just say let tasks equal to not task let's say result tasks and uh what i'm going to do is i'm just going to say results.uh this will be an empty array and what i'm going to do is i am going to return i don't know something like this so return not return but i'm just going to say result task dot push an object with triple dot dot dot data but there is a one thing missing here you can see in the name and the user and stuff uh but you you will not be able to see the uid of this record because and we need this that uid in order to delete the record maybe or maybe for other stuff so you can get that by doing something like this dog dot u id i think that's how it's being done but yeah we will find that out so dog dot uid and let's see if that works i'm going to console these result tasks and see if we have the new array result tasks and you can see the array and uid undefined and this is undefined yeah i think it is id not uid let's just reload it um uid uid and if i go ahead and match it with the uh firebase console you can see they match right i and db yeah you do so that's great right so we are able to like get the information we have that in a good structure now let's just save it inside our state so i'm just going to say set tasks here paste it const tasks that tasks equal to you state and yeah now what we're going to do is we're just going to map over it i can use this right yep let's do it so after that task what i'm going to do is i'm going to map over task dot map and say for every task i'm going to render this div and basically going to do is task dot name here and inside the key i'm going to do task dot uid because i think i named it there right so uid great now reload this page and you can see that in the ui i guess you are great right so we are able to create records now we are able to fetch them and show them here and now let's delete them you know that i think that will be the last thing that we'll do and we will basically end this video it's already getting gotten i think almost a half an hour so we'll just uh you know just wrap it up but yeah you know some of you guys uh commented on like previous videos and you really like this live coding session thing rather than a pre-recorded session uh yeah that's the whole idea behind this live coding session is that i show you really how much time it takes to build all of these things and not you know some cut it like pre-cut version you know and i'm glad i'm glad that you know some of you guys really liking it and if you want me to like do a video on a different uh area please let me know people wanted me to do a firestore video i'm doing that right now and i also was checking out some comments uh and you guys want me uh some like i think one of you want me to do a video on firebase hosting so i'm also going to do that you know in the upcoming weeks but yeah you know let's uh stay on the course and uh what i'm going to do is i'm going to render do you uh i want to render a button let's render a button and let's see how that will look and we'll render a button we'll call it delete right and we are going to [Music] use this right um here class name equal to this save it uh and instead of these big buttons what i'm going to do is make this p2 and this as one um i'm going to make them red i'm going to delete this and [Music] delete and i'm going to decrease the font so it will be let's just remove this and maybe text access i don't know yeah so text access does the job and yeah i like this uh now uh you know this is all tailwind so please go check it out i already have done a lot of video on tailwind styling uh they are good for prototyping and like these kind of tutorials because they help you build ui really really fast so yeah in the class name what i'm going to do is i'm going to render this delete button in the front of the task so i'm going to make it flex and i'm going to say justify between so it's basically going to give it space between and going to move the deliberation there great um so these deal written have a cursor pointer great so now let's you know start deleting them right so let's create a delete function at task uh we can create a const delete task and i'm going to use use callback do i need to use use callback i don't think i have to write because it's not going to take any external dependency it's going to only take one argument which will be the id and i'm going to provide it to that so i don't think it's going to use any state variable so let's not use use callback it's going to take ideato and yeah that's pretty much it so let's extract db again get db and db right and what we have to do is we have to use a try catch obviously try catch and console.log e in the try let's uh delete them right yeah we can delete them right um so we are going to instruct delete dock here right and we're just going to get the dock from the db right from the db and into the task collections and the id of that uh you know record basically so if you don't know what basically happens with firebase is like it's you know it's a json based you can say you know nosql database seven the paths are basically you know db collection then the id of that record so that's what we are doing basically building that path and let's see if that works you know i think uh this will be and um like a a sink like a promise so i'm just going to do this and console.log that result as well and then i uh this is fine i'm just going to make it a sync and i'm going to call this delete button like this call this on a delete button so click what basically happen it calls delete delete task and it is the das task w id let's see if that works so we have our task we're going to the network click on this and everything comes as 200 let's see yeah so deleted by something two times uh but again you know we don't see that updated error because we haven't uh like refreshed the refreshed everything so that's what i'm going to do fetch talks tasks and i'm just going to call it again here so now go to click on delete and you can see that it goes deleted again let's do that again like uh fetch tasks when [Music] you add the element as well so set dock that i'm using a dot then uh you can use a weight whatever but let's just do that for now patch task reload this and let's see if that will work so [Music] um buy something at task and you can see by something right or let's say land a house maybe a track and you can see i can go ahead click on delete and click on delete and yeah so one thing to check again is when you click on this and if i go ahead and lock out and i create a new account for example manu singh negi and say just you mail.com password should and if i go ahead sign up and i go your mail.com here also much login i will not be able to see that task because that task is all only for that user because we are basically filtering the task here and i'm just going to say something i have to do and i click on add task i will able to see it if i log out go inside this i will be able to see lander house but not that time so basically you know this query here it's also working and yeah guys that's pretty much it you know uh this is a you know very small cool video uh i'm really really thankful to the people who wanted to uh me to try this fire store thing uh this is a really uh great way to build a like prototype application you know because you don't have to worry about the you know database or hosting it or whatever you can just go there and just get started with your app um basically application development so thank you guys um i'll say you know subscribe to the channel share the video and please do let me know in the comments you know what kind of videos you want me to do i am here every sunday doing these live coding sessions and till the next sunday have fun you

Channel: Recraft Relic

Views: 164

Keywords:

Id: lv_4Uw4T1C0

Length: 40min 55sec (2455 seconds)

Published: Sun Sep 26 2021