🔴How to Build a TODO app with React + Firebase (LIVE)

sunny what's up guys how's it going oh man I have hidden you my friend - give me one second I'm gonna have to show you there we go how's it going guys my name is sunny I'm a react developer and I'm pumped for today Kazi yeah this is gonna be awesome guys we are hoping that we are perfectly live everywhere but this is going to be us building it to do app with react and firebase from scratch we're gonna be doing it live this is going to be completely beginner-friendly so if this is your first time learning about react or firebase or whatever you are fine if you're more intermediate or advanced and you want to learn firebase and react you're also in the right place we got 92 concurrent viewers right now oh nice he did he send a messenger out nice awesome so we're up to 160 guys this is amazing once we get started we're just gonna straight-up keep going until it's completely built and live so what I will tell you to do is in the meantime we're just gonna wait a little bit to make sure everybody is here and live and then it's up to you whether you want to build this app live with us or you want to just sit here and watch it that's right nice okay so we are live on all platforms that is sick let's see if we can maybe we can show some of these people's the messages let's go yeah awesome guys how is everybody doing here oh nice Kiska is on here awesome abdullah what's up abdullah let's go awesome abdullah is here says humma-nah what's up dude nice yeah oh you can see my screen right sunny yeah I can see a screen I've got the comments up as ah so you can see nice nice cristobal says best teacher sick okay guys oh you guys can hear that you can't hear that a little click sound right i turned it off so i think we should be good to go awesome are you guys excited to get started on this project drop it in the comments below let us know damn dude everyone's floating in how many people we are now we are at 264 nice yeah so this is sick all right guys we're just gonna get started and jump into it what do you say son you want to get started dude I'm ready let's go okay let's do it so I'm gonna get off of go back into visual studio code yup live on all platforms also dope okay and here we go sharing the screen now and popping up the picture-in-picture give me one second sunny what I'm actually going to do is I'm just gonna make sure that we have we're properly nice and zoomed in awesome okay right there all right guys just want to make sure that this is as smooth of an experience for all of you guys as possible this is our first time doing a joint live event like this so just make us and if you guys enjoy this we'll keep these things coming so we know them to do yeah really our goal is to be able to do it like every day honestly like that's where we want to want exactly - Oh awesome all right Sonny let's go I think we're good just let me take away my text overlay actually I'm gonna just hide it for now yep - so you know is it still hiding some of the screen you see what I'm saying let me have a look so it's hiding a little is cropping a tiny bit of the window right now yeah that's what I'm trying to understand like why it's doing that because so if you go oh we're good actually we're good now we're good I think okay yeah we'll also zoom this in a little bit more so everybody it's easier for everybody to see is this good for you guys to see all right I think we're good to go let's let's just go let's do it so cause yes to everyone what we build in today we're gonna be building a to-do list app with react and firebase this is actually something I'm really excited about because you have been teaching a bunch of react recently and yeah well sorry I'm like super pumped about it because react is just so fast and also firebase excites me much more than freaking Amazon AWS cuz I hug Lee and so I really want to learn how to use fire store database on firebase and react so I'll ask you questions kind of along the way awesome let's do that so for those of you who don't know what react is it's pretty much it's a library and it just wraps the web development languages so web development is just HTML so yeah in JavaScript reactors like a library that Facebook built and it's widely used it's very popular and it's super powerful and you're gonna see that today and we're gonna combine that with something that Google bill which is called firebase and that's gonna allow us to have a complete fully fledged app that we're gonna deploy and every single one of you guys can hop on to you and play around with awesome that's right and guys if you're wondering how we're doing this right now this is called vs code live share so right now me and Kazi can both code in real-time on the same terminal I'm the same coding platform which is insane and this we're gonna give you guys a really cool experience and we can show you how to do this if we get enough time in the same localhost exactly yeah awesome all right so how did you in the beginning okay so let's get started so now where should we start what's the first best place to start should we set up our fire should we set up our firebase or should we just set up our front end first and then set up our firebase what would you recommend so the first thing that I usually do whenever we start a react project is pretty much use something called create react app and what that is it's basically Facebook built this starter package which all you need to do is run one command in the and the terminal and that's gonna start everything up for you and give you a starter template so the way we're gonna do that is if you just go into your terminal now yep yep and let's type in npx space create react up with dashes between them and which we call a app okay can we just put it here no so you actually just put the name here also here you just put to do that so we could call this one is all right so we're inside of react to do right now yeah and then we're good here if we just don't have a space so yeah reacted you up cool so like this or do you want me to still right the next thing yes I want you to put the name next to it like this so we'll have something like this so to do I got it that's what we typically do yeah yeah so guys MPX is something called node package executor and it's just gonna basically go and find this package the one that Facebook created called create reactor and then of course you just hit enter on the keyboard and what this is gonna do now is inside of this folder it's gonna sell everything that we need to get our first react project started which is a really really handy thing it installs all of the packages that we need to get started with it it actually gives us a really nice starting template and then from there we can start coding for many of you guys that don't know what react is or I've never used it before it was really really cool to go and look at something called component based design and that's something which we're gonna show you today and I think everyone's gonna enjoy that because it's really really powerful and it means that you only have to write a small amount of code to get a lot out of it yeah so why that's starting up Kazi let's go ahead and set up firebase cool I think I just zoomed in somehow again so I'm gonna have to zoom out and then zoom yep cool dope all right so I'm on firebase calm yep so what you want to do now is I think I can see the overlays on the screen right now okay yeah I'll just move those it says camera effects and things like that okay no we're good we're good yep so if you go to console yep so those are gonna show to us sunny like worried we can see it but like nobody can actually see that got you okay okay nice so now what we need to do guys all you need to sell firebase is completely free so don't stress about having to put your credit card details in and everything like that firebase is a free service you just need to have a gmail account come over to where we are right now and then you just want to click on add project okay dope so I'm gonna click this right here yep and we're gonna throw in an aim for our project all right what do you want to call it we're gonna call it to do ah CP yeah perfect oh yeah and enable Google Analytics for this project uh we can do yeah let's leave on okay nice and you just want to select your default account there we go okay and just like that it's gonna start creating the project and guys firebase is not just like a back-end so it's not just something like a database it's like a suite of tools so not only can you have a database where you can host your information your user information it handles things like authentication you can deploy your website and it's super easy to do that and on top of that you can do some crazy stuff like machine learning it's really really insane what you can do here so let's just click on continue okay also and now I'm stuck with Python it's okay because even if you're using Python and you learn what we're about to do today you can do the same exact setup well actually is that's not true right you told me yesterday we're talking you said you cannot use firebase with Python right I think you can actually use firebase with Python yeah you can if you've got Python app so as I say you've got a Python app which is a back-end service yeah you can definitely connect to firebase from that yep oh okay can alright okay yes oh yeah so if you guys are using Python you learn what we're doing today you can actually combine firebase and maybe even react with your Python apps and like just make them like the front-end amazing and even the backend amazing exactly that Yuri says I I enrolled into pwj good vibes nice oh so nice okay so what's next right so next what we want to do is go over to that little cog icon on the top left so I'll sign here icon there we go and then project settings uh-huh and all we need here is that we need like a key right which is gonna tell our app how to connect to firebase so right now you see where it says at the bomb it says there are no apps in your project yep you wanna click on the one which has a symbol for web dev so it's the third one on the right this one not you that's right yep and then you want to give it a name here this name doesn't matter too much you can be anything you want and should I do also set up firebase hosting or just do register yeah yeah that's set up firebase hosting and that's really important because that's gonna allow us to actually be able to deploy so that everyone can use this once we're done okay and so then click alright let's just wrap great yeah and then that will set that up for us and the next one so this one we can actually ignore so this is how you include all of the firebase code into your project but because we're using react react uses something called node modules so they're basically like prepackaged bundles of code and we install them with something called NPM so we don't actually need to do this step and I'll show you how we do that inside of our code afterwards so we can click Next on this step got it so this one's important right now so here what you want to do is you want to click the copy you want to open up your terminal so you can either do this in vs code or you can do it in a separate terminal and what you're gonna do is just paste that come on and install that and what this says is whenever you have NPM install with that little dash G it means install this package across your entire computer so it doesn't matter if we're inside of this project it doesn't matter if we're inside of a different project we're always gonna have access to firebase tools right now now we need firebase tools okay so in this case you need to write sudo yeah so you need to have sudo in the beginning because when you do things like this you need admin privileges yeah yeah and some people are asking so mark johnson has how long is the PWG course and is this something I can do at my own pace and time mark yes so pwj course you can definitely do it at your own pace and time it's now we have turned it into a membership so you know as long as you remember you can just go at it at your own pace and AJ asked is it react or react native sunny so that's a really good question it's react what we're doing now but once you learn this you can use react native so just to tell you guys what the two are we practice for when you're doing web development so any website is going to be using react if you're using the library but if you want to then deploy say for example to iOS or Android apps then you would use something called react native but right now we're just doing pure react man this thing keeps doing this weird zoom thing like it keeps messing up to zoom and so maybe oh yeah I just wanted to show entire screen and then zoom in and I think then this should be good to go now wherever I go it should be good ok awesome great yeah nice so we install this what's going on yeah so we installed that and then next we need to actually log into our firebase hosting so back in this go back to the command line this to firebase login uh-huh and then let's type in Y so that Wi-Fi yes and then this will pop up a little window just need to sign into your account so they actually take all the headache out of it so this is literally as simple as it gets to set things up and then you go there you go so we've logged into our account we will follow will do the rest of the steps afterwards because this is gonna be deploying the website mm-hmm yes we can we can carry on with this once we've actually got the site built so this could continue to console great so here's the magic so you see where it says firebase SDK snippet what we want to click on config yeah and this object is basically the magic which connects our react up to our firebase back-end so this is gonna be crucial right now for this config and what we want to do now is now that we have access to this we can actually go back to the app and then we can implement this afterwards but we should have got everything set up so let's go over to our folders right now yeah yeah and in the command line what we want to do is because we ran create reactor we just wonder if we want to go into the folder that it created the project in so if we type in LS in the terminal we should be able to see there's an app so you can see it says to-do app so if you just want to go inside of to do up yep nice and then what you want to do is when guys whenever you set up got a project it's so easy to get it started all you need to do is write MPM stop and it will spin the app up it will get everything running so now let's start off let's start the app by running NPM stop nice we got three hundred forty-five people live right now awesome insane nice so yeah a few people said please zoom out of there someone said please zoom in a bit I think what we do zoom in on the code because I think that it might be a little small but we can double check that yeah there you go so this is the react template that we get started off with so if you guys have made it to this point awesome okay and you can watch this later it'll be recorded we'll leave it up so yeah you can watch it live or record it but I mean we would want you to watch it live and the reason is well you can actually like engage and ask questions and we can answer those questions that's a huge plus but if you have to go to sleep or whatever and you have to wake up tomorrow and do it that's fine too yeah exactly so so this will be up for you guys to go at your own pace with and you can keep pausing the video and carry on so now what we're gonna do is we're gonna actually look at the code the files so if you go to the left where it says open editor so you see the top left yep you wanna click on drop down actually this click on react five is to do that cool so and then there's open up to do up so now this is our sort of folder structure so we can delete index or Jase outside because that was something we made before yeah yeah so this is gonna be all the code so this just set some base rules so that nobody breaks the project and just knows where to go from here so never touch node modules is the safe way of thinking of it the only way we're going to touch that is if we do commands in the terminal but right now the one that we're interested in is all of the things we're interested is inside of source ok so let's click into SRC and what I like to do is we just saw they created that app right with the spinning react logo I like to clean things up so it becomes a fresh template and what we do here is is Esteli the test js4 so gonna be running here in cats right now also let's delete that let's delete the set up test JS file uh-huh yep let's delete the logo door SVG which is that little really and I love that logo okay we can keep it if you want and then this go to your app Doge is okay not deleting that one right no no and then what you want to do now is because we've deleted the app we need to basically what I do is I get rid of everything inside of the div so everything inside of the outside div let's just get rid of that yeah and then I'll put a h1 tag and I'll just say hello world so well and then you see on line two we need to get rid of that because we deleted the logo file awesome all right what online to now you see in the terminal it says no such file logo to SVG so we have to get rid of that yeah and there we go so right now we have a warning but let's ignore that for now it's because we're using an emoji but there we go that's our starting point for the app I usually clear the CSS files as well but we can do that afterwards because why not i keeps everything centered which is easier to see okay dope so let's get started on actually building the to do up mm-hmm right yep one sec let's go to app yes okay so what we need is a few things and what I like to do here is I just like to sort of frame the the app first so we have a rough outline of what the app looks like and what its gonna do and then we're basically gonna power up with firebase and make it super powerful so the first thing we're gonna do is add an input field so we want to have an input field so let's do this an input field is self-closing so let's do it like this so you have an input field and the second thing we're gonna have is a button and that button is gonna be simple it's just gonna say something like add to do alright and now if we check our app says have a look at the app we can now see if we refresh refresh come up no buttons on here no okay let's go AB dot C AB dot CSS maybe you didn't save now it's here oh there we go nice there we go yes so now we have like it's broken so now what we want to do is we want to basically make this so we've got the the UI a very basic level done all right this C Kazi do you want to make this look really pretty with material UI first you get a function anyway let me actually think let's add basic functionality to it because that's what I like to do sometimes I'll add it like right now I'm just telling you what my gut feels and at this exact moment I would be just looking to add in like literally if I can just create a UL or you know those li like a regular bullet point list to show up then I would want to yeah over the material UI okay awesome yeah let's start with that so then the first thing we need to do is we need to understand so what we kind of want to do is let's just do another baseline for the app so we're gonna have a let's say a unordered list and then inside that unordered list we're gonna have a bunch of list elements right yeah so this one could be like take dogs for a walk and then we can have another one which is gonna be like take the rubbish out take yeah nice and then if we save that and run that so yeah you have to save it on your machine otherwise it won't take effect mm-hmm okay save got it yeah save and let's have a look hold on if I do this yep yep I can a you oh that is interesting cuz I'm I'm on my Yeti so I'm muting it oh really yeah the month so the mic is muted right now so probably you can hear me from Skype because it's probably picking up my computer sound but let you keep probably cannot hear me on the live stream actually so let me actually just take a look and let me pop open the audio no not that one that one time No yeah so Cena Sherrod says cause your voice is so low so I think it is yeah you're all right yeah it's gone a bit low right now yep this is a nice comment that amana's put let's see if we can add it says the real power to react yes is we can create a full stack application with just oh I can actually move his comment up oh this would just react in firebase without anything else like the back end and blah blah blah that's right that's awesome good guys yep I was just gonna say it is a sunny is that because with with firebase you just speak through API endpoints instead of like you know either having a ORM or like sequel and stuff like that so firebase think of it this way so like they took all of the complexity so where we were to where we traditionally would need an API to talk from our front end to our back end yeah they took all of that and they basically just made it so that all you need to do now is install a package a node module package called firebase into your project yeah and then you just import that so you say import firebase from firebase and the top and then you can actually just like communicate from the front end directly to the back end through your front end code which usually wasn't the case before you would have to do a request to the backend to push they are in I'd have to do a request for them refetch but they've taken all of that complexity out and on top of that they made it real time so you get real-time information which is insane actually I just got a great idea so what I'm gonna do is as you are speaking I'm going to write out some of the stuff you're saying and then we can actually just publish it as an article afterwards nice yes do it the heart state could use that with 5/8 awesome so let's see everyone says hey Kazi hey Sonny Sam what's up Sam now the audio is good can you set the syntax to JavaScript react for Jessa syntax on whole completion yes you can Visual Studio code is actually really clever at picking up what language you're doing so usually when you create react up everything gets out for you so you don't have to worry about all of that okay nice dope so this is where we'll take notes as we go along so everybody can visually see the notes with us I think this just makes it very easy for everybody this is also yeah yep okay nice my audio yes so now I think but okay go ahead go ahead yeah so why does it say is in that list it would be really handy underneath of react to just do a little bullet point saying we used create reactor because that's the fundamental starting point to get the app running okay yeah so we'll add that into the list afterwards okay so nice let's get started so what we want now is we want it to be basically when we type in the input field and then we click the add to do button we want it to push into that list right yeah and the way we do that in react is react has two fundamentals that we just need to learn about so one is called state and the other one is called props will touch on props in a second but state is really where the magic kind of happens and what we could when we say state what we can think about is pretty much like a short-term memory so if we refresh the page the state is cleared so it's non persistent which means that if we were gonna click refresh the state gets cleared so you need to remember that that's one of the important things somebody just said react hooks yes reactants is this new implementation in react where we're they're basically pushing for this very like nice concise code so we will be using reactants in this so the state gets cleared off to refresh props will touch on afterwards let's go bouncing a bit let's jump back to the code uh-huh and what we're gonna do now is we're gonna set up a piece of state and the way we do that is you can see guys so right now imagine in react everything is component based right so a quick run-through of what is actually happening here is the app component which is basically referring to the entire component that you're seeing on the page it returns some C HTML but this is special HTML guys this is called JSX which means that if we want to actually run some JavaScript here we can do that by simply having these curly braces not and in these cutting prices you can actually run some JavaScript which is really powerful okay I might just show us like 1+1 like show us the result of that with javis like adding it in there okay so let's do Const let's do some and it's just do equal 1 plus 1 aha and they say hello ever programmers and then we want to pop out the Sun yep somehow we can also just do some math in there right we could even type in 1+1 right there yep like you do that okay let's do that cool and so let's save that and this right let's check it uh-huh so there we go hi beautiful so we can actually run dynamic JavaScript with JSX which is really powerful and right now what we're gonna do is we are going to create some yep so run dynamic JavaScript with JSX and JSX whenever you see that just think of it as like javascript and the cross is like a hybrid with HTML so you've got this wicked little hybrid right cool nice and what we're gonna do now is we're gonna basically set up some States so remember state is like short-term memory and its component specific so right now when we add state to the app component it's gonna be short-term memory for the app component so what we're gonna do now is we're gonna set that up and here is the syntax to set up a piece of state so we write Const which is basically setting up a variable and the syntax for how we do it is we're gonna say let's call it to deuce so here we have our list of two dues which is going to be an array and whenever we use a used state hook it's called we need to basically have our to do variable so the traduz variable and then we need something that we can cool that isn't gonna allow us to change that variable and the reason why we need this is because react is very clever in how it rear Enders yeah so we call this usually the standard of doing this is usually have set and then you have to do so it's set with your variable name camel cased and then you say use state like this and what we're gonna do is we need to basically say you stay and then we basically have the initial value which is an empty array so our two dues is gonna start off with an empty array here and because we're using this use state hook so this is basically something that react gives us which is basically that one piece of that one little function called used a is gonna set up that short-term memory for us so to actually bring that into our code we just need to go to the top here and we just need to import it so like that so now we've actually set up some short-term memory for the app which is literally that simple and what we can do now is we can actually test this so we can go over to our list so element one second one second hold on so here we added this here right the two dues yeah okay and then so only few things that we have added is you state and then this over here yeah exactly just two things that we've added to set up the short-term memory and so two dues variable is like is an array yep exactly cool and this will basically add things to it kind of like live or but in the short-term memory because yeah this would be like a little record of in the short-term memory of what the two dues are got it okay cool nice and what we're gonna do now is where previously we had these things hard-coded like take dogs for a walk take the rubbish out now what we're gonna do is we're gonna basically cut this and we're gonna put it inside of our array as a string so that's one of the tasks and this one we're gonna have here nice as a second thoughts I see what you're doing okay so like it current yeah right now to do's basically starts with do I have my app screen brush on this computer I don't okay but like this variable to do's is an array that is starts off with this right dog take dogs for a walk take the rubbish out or whatever right exactly god yeah and then what we can do is using the set to do this variable like we can keep appending things to this array like but kind of on the fly exactly not even regretfully want to change to do is we have to use that to do this diet so yeah we can add things to the array without hitting refresh that is sick because then that allows me to like do everything super fast right instead of having to like send it to my back-end and then hit refresh and all of that exactly I remember it's short term so if we do append something as soon as we hit refresh it's gone this state is gonna go back exactly like the front end but it's not as soon as you hit refresh that array is gonna be gone forever got it so during that time but what I would need to do is send it back to my database in that time yes got exactly that cool yeah so then the next time oh yeah keep going keep going so the next step now is basically we we have this list right we have this list of to do is we just want to basically run a small little loop right which is gonna go through the list of items in the inside of the to do array and its gonna populate this list just like we saw it before so right now what we're gonna do is we're gonna use that JSX power that we talked about before so these curly braces and we're gonna say to do's and then there's a very powerful es6 function like a looping function called map and map basically goes through that array and it basically goes through the array gives you the element of the first element of the array so in this case take dogs for a walk and then you can do some stuff with that right and you can return like a little element so in our case we're gonna return the first last list item so this one and then it's gonna go through it again get the second one so take the rubbish out and then we can return the second this time so how do we do that we say to do is map and then we do something here called an arrow function so the way we write an arrow function is when we go through the to do store to do surae we want to get every single to do so singular so bear in mind that this is the array and this is each item in the array so that's why we have to do and then we have an arrow and then we have a normal parantheses so we have this and this means that we're gonna return some HTML and what we're gonna do here is we're actually gonna say list so we're gonna return a list I am and then inside of here we're gonna have JSX and we're gonna just put the to do nice so now what what this little piece of code is doing is it's going through the array so the the to do array it gets the first one so take dogs for a walk yeah and then it pops it in here and then it pushes this element out so then we would at this point have the first element and then it would loop through get the second one pop out a list element and get the second one got it so let's save that do me a favor real quick yo can you speak to them just about the overall what we're doing and I'm gonna download app real quickly so then I can actually annotate over the screen out so then they can get visual aid as they're watching okay yeah so for those of you guys who are new right now or you just want to go over a fresher own what we're doing we are using firebase and react so react is a front-end library and we're using it's built by Facebook it basically think of it this way web development consists of three languages HTML CSS and JavaScript and what we're doing with that is we are essentially just making it so that we are wrapping that inside of a library could react and react is gonna allow us to build a really really powerful to-do list app and not just a to-do list up guys Instagram tinder uber all have amazing applications Facebook the entire Facebook app is being rewritten with react right now all of that is done in react so it's a very very powerful library and what we're gonna do once we have that once we have that working is connect that app to firebase which is a service provided by Google and it allows us to do a bunch of powerful things like host our applications our react app online it allows us to have a database it allows us to have authentication so you can log in you can do a bunch of things like that and it's all real time which and the real time part is the really nice part when were using react and when we're using firebase so imagine we have the two dudes in our app and let's say some of the users so once we deploy this you guys can actually try us out yourself but when we deploy this live we are going to actually have it so that whenever somebody adds it to do it's gonna pop in onto your screen and there's no more additional code that you need to do in order to get that working so let's go through some of the comments and let's see what everyone's saying so we've got let's have a look what is react hooks so react hooks is something which is provided by so react hooks are relatively new guys and what they do is they're very basically small snippets of code which basically look like the honestly honestly don't look like you don't have to write much code for a reactor hook to work so one of the ones that we just used was something could use state and they basically behind the scenes is gonna set up the state it's gonna do a bunch of stuff for us but before we had react hooks we had to use like class-based components and a lot more complicated logic but then the guys over at Facebook said hang on this is too complicated this make it simple and they came up with react hooks and now react hooks on my best friend I love react Turk's you can even write your own react turks and it becomes quite powerful so you see you can need okay so our cash ji says you need to use a Django rest framework a create an API and then use react to communicate between the API so this is something which I get a lot in the coaching cause a lot of people so just to clear this up react is a front-end react when we talk about react we're talking about the front end okay Django when we talk about Django we're talking about our back-end so like a sort of service on the backend right now what we tend to do previously is have a react front end and a Django back-end or you can have a node.js JavaScript back-end and then you would have an API which allows you to talk between them right but with firebase we actually don't even need the backend we kind of we just have this front-end and then we basically connect that to firebase and they take away all of the headache for us so that's what they wanted to do by introducing firebase they wanted it to be a super easy and fast solution to getting around a headache there we're good to go now I can easily annotate on the scroll awesome so nice nice so what we just did now is we added our first piece of state code that reduce yep at the top and then we map through them to get each of the to do so take dogs out for a walk that's like the rubbish out it's gonna go through that so now if we save this and we load it we should be able to see what we previously saw before nice and just to prove that this is actually true Kazi let's go ahead and add another string inside of our state okay I'll add it here Kazi wants to live stream today awesome oh don't say look at that nice okay so now what yeah so now we're looping is we want to basically showing it yeah goes up I just want to emphasize guys that like it's we're not hard coding anything it's like actually looping through our array and then writing each one of these out from that like loop that we wrote exactly yeah cool nice so now what we want to do is have it so that he doesn't have to hard code it every time but when we type in the input field and click the button or we click the enter key we want it to basically push and append into that array right yeah so the first step in react is again we need some kind of short memory short-term memory to remember what we actually type into the input so if we just scroll up a little bit and we go to line 6 and now what we're gonna do is we're gonna add another piece of short-term memory and this is gonna the the pure purpose of this piece of State is going to be to remember what they type in the input so here I'm gonna say input and I'm gonna say set input which is the convention that we use when we're writing a hook and then we say you state so this is exactly the same what we did for the for the first scenario guys with the to Do's but this time we're initializing input with an empty string because when you first land on the page it should be empty right yeah so we do that and now we have my favorite so just to be clear when you say input you're talking about this over here so this should be empty exactly cool because this is not working right if I hit add to do that doesn't do anything yet exactly it doesn't do anything and we want it to basically push into that list and then rerender everything dynamically so this is the bit where everyone like if your rewatching this afterwards just pause it make sure you get this bit correct because this is where everyone tends to go a little bit wrong but what we need to do now is we need to connect the input to our piece of state right and es6 javascript allows us to do this really really nicely and the way we do that is we say this input should have a value of our input state so we're saying right at this point that we're mapping our input in the state to this input field right now if you save this Kazi and you go back and try and type in what happens so let me save and then go here and type right I can't type so nothing's happened I literally nothing's happening because what would you yeah so nothing's happening here so like even if you type nothing's gonna get pushed in there so the reason why that's actually happening now if we go back to the code yeah that's because we're setting the value here to be the value in our state which is at this point we're saying is always blank so that's why no matter what you type it will stay blank got it okay oh it keeps making it blank okay yeah so that's the sort of that's step one that we need to do and the second step is every time you type what I need to do is update the state to tell react hang on you just changed the input so we need to keep track of that got it right yeah so here what we do we go to our input and we do we use something called on change and unchanged is a function which is part of an input and basically allows us to basically capture the event that gets fired off every time you press a key inside of the input alright and this gives us something called an event so here we could just say event so every time you press a key on the keyboard it fires off this thing called an event and what we do is we use something in ES scored an arrow function and we say when that event gets fired off yeah set the input to the event and then basically this bit doesn't make sense to a lot of people but it will make sense once we explain it so it's we're basically saying get the event that gets fired off yeah get the target so the target means oh we've got some web stuff there so event and then get the target which is the input field that we're typing in and then we're saying get the value of that okay so basically whatever I type is gonna get stored in this variable input and then that's and basically you're saying set that input to whatever the whatever I'm typing at that time exactly so every single time you type it's gonna get updated here and because we're updating the value it gets represented here because it reacts quite clever right when we use this set input it knows that we just changed the input so it knows to re-render this impact eyes this is what's amazing about react yeah so before if I had to write the word sunny what would happen is like I would write s but then it would delete it and then I would write O and it would kind of delete that yep but right now what we're doing is like if I'm actually writing this it will make sure to leave it there like all of it at the same time okay exactly so now if we save this and we try it uh-huh so let's save it let's go back and hey okay cool so now it's actually keeping it is yep yep so now it looks like similar to what we done before but instead we actually have that input in racial term memory now so we can use it like literally this variable is getting it like it's creating a variable you could we see it could be console.log it around here yeah we can yeah so if you do a console.log okay so put a little gun emoji right here nice I like to add funny little emojis next to my print statements it just visually pops it out so do i that's awesome yeah and then you're gonna click the inspect ok let's go to and guys you should really get used to using the inspector because just for bugging just for everything it's gonna be your best friend so console.log everything we always console.log to back to the regular view so you click on if you go close out of the cellphone I see there's like crazy devices that are here yeah you can actually set like a bunch of the phone so I think on the right the comments and reactions are covering it right now you're gonna click that little cross uh-huh yep and then you wanna click on you see on the bottom left right now you've got a blue icon that's highlighted so next two elements yeah you click that and that gets it out of the responsive view got it perfect yeah mm-hmm and there we go so now you guys see that little like emoji right here and now if I right nice there we go so now I can say that we clever programmer damn that is so fast it's crazy right and guys notice how there's no refreshing on the page yeah yeah so it's awesome okay great so now isolating and what we want to do now is basically we have the input value so we just want it so that whenever we click the button to add it to do it's gonna push it into the field right so what I tend to do here is you can either do it in line where we have the button here or I like to make a little function just called Const and we can just say in this case it's just call it add to do this is gonna be the add to do function and this function so we're gonna use es6 arrow syntax for writing functions here and the way we do that is we just write so it takes an event so most like anything with like an input or a button whenever we have like an unchanged or on click they typically fire off events yep so this one takes an event and this is the code little snippet of code that's gonna get fired off so this will fire when we click the button we click the bun there we go so now what we want to do is we need to basically say we need to connect that to our function so we say on click oops on click and we're gonna say add so you add to do there we go I yeah and now just to test it just like Ozzy said before it's always good practice to do console.log and then here you could just do something like a lien and then you could say it's nice yeah so I would save that and then just test it so that way we can see if it's actually reaching that point and whenever we click that add to do button this should console.log right exactly just make sure you've saved the yep there we go ok cool so now add to do I'm working nice there we go so then we have lo alien emoji coming up so we know that the functions connected now wait hold on this might be really hard for people to see I just realized that there we go right there we go nice zoom and maybe even more to be honest okay so there there we go yeah cool awesome so now what we want to do is this is where we need the the sort of the fancy logic to say push it inside of the list and before it used to be a quite a headache to do this but with es6 so like whenever I say yeah 6 by the way guys it's like the new JavaScript standard so you get es6 yeah 7 every year they sort of upgrade JavaScript and that's the set of standards everyone sort of abides by so every year you get more supercharged features so whenever I say es6 that's what I'm referring to so now what we're gonna do is we're gonna use the set to dues function so what we're gonna say here is we want to basically update the to dues width and the way we do this so this very very close attention to so we need to basically set the to dues to an array so we're gonna say to an array but we need to keep whatever we have in the array currently so we're gonna use something called a spread and what spread does is we say that's sick because that's basically like you appending it or pushing it to the end of the current state exactly not exactly okay if we if we were just to do set to dues and then add a new string it's gonna forget about what's already in the short term memory yes we need to say literally imagine you're spreading out the current contents inside of this array and then we basically wouldn't have it so that we would have here we would have comma and then here would be the new to do so here is the new to do so here would be the new to do right but what is our new to do it's pretty much what we have inside of input right now yeah so it would be whatever we've typed in right so here we just put input nice yeah and that would actually say if we save that we hold on so this input is what is populating what is yeah so what's happening here is basically oh I got it so this is like what previously already exists and this is saying I push whatever you have in the input exactly that so imagine where we have take the dogs for a walk take the rubbish out literally imagine you're spreading that out into your current array is somebody said the link in the description is now working and I know hold on give me let me give that a try as well one second that story Chris Farley says what version of JavaScript should I learn when I'm getting started any suggestions you can learn like honestly just learn it's working right yeah I just learned the most modern version of JavaScript maybe it's not working on Facebook so check that because he it seems like he's messaging from Facebook so yeah yeah I would recommend learning the most modern version of JavaScript you will be fine with that and those are the things that we cover in our course profit with JavaScript and today is actually the last day of July for sale so if you guys are enjoying this and you want to like learn how to be able to build these things and make an income you should check out that link in the description below outside of that we're just gonna keep going and build this full app so a great question awesome yes so we were on the setting to setting the to do so we have the array we have the spread which is saying keep whatever we currently have in our short term memory and then we're gonna append to do append the input sorry so does that make sense yep yep that makes nice so if we save that and then we can give that a try and then look what magic happens now to test had to do oh that is nice whoa had to do this is awesome but now even so if I hit refresh everything goes away because it's short term memory it's in a is just in a state it's not in our database yet so it's not permanent but even with that it's like so fast so front end is looking pretty awesome so again GC right this is awesome why doesn't why when I hit enter why doesn't that work do I have to do something special to make that one yes that's a really good question so what we're gonna do now is we're gonna upgrade this so that we have it so when we press ENTER it submits that ad to do is it because also or what was that sorry is it because this is not a form and yes exactly okay or is it because we don't have the submit thing yeah so exactly it's a it's because it's a form so do you know how to do that um not at the top my head probably like at the forum yeah encapsulated would form yep so that's exactly right so you and add a form you just literally do what you said so you go here you add a form you basically put all of your content inside of it because it's a button you don't also need submit either right because the button will do the same job as a submit so you do need to tell the form that it's type is a submit yeah so now so that way that's the one is gonna go to okay nice notice no it's this now so say you see what happened there you're typing it in and because it's submitting so this is a really important point which a lot of people get stuck on yeah because it's um submit so it's a form I'm submitting it and then the whole page is refreshing so exactly and now yeah yeah we don't want things to refresh you told me that like that's we hate refreshing so does that mean I need to like what preventdefault or what is it that I need to do to make sure that that doesn't happen exactly that so basically where we have our submit so submit is firing off the ad to do function right so if we scroll up a little bit okay and then so we're where we fire off the ad to do functions to this function here we actually need to prevent default behavior so we can get rid of this comment now or we can keep that comment if we want and here we can just say event dot prevent default and what this is gonna say is it's gonna say don't refresh the page when you submit because in react we don't want to refresh your we're controlling everything on the page and we're using react to do things so now what this will do is it'll stop the refresh which means that our behavior of appending to the to-do list can happen as it as it would normally yeah and that's really important guys because so many people get stuck on that all right I'm gonna put that in as a note in here too because that's actually pretty important even for myself let's see if it I think that's fine okay cool so that's awesome so let's go back now if I hit if I hit save here and then I come back here and I hit test okay cool right so the next question is is that why is it not clearing on input we would have to probably clear it every time we submit right yeah so any idea where we would roughly do that okay so where I would do it is I would make the yeah once are probably in here in this function add to do and what I would want to do is just like set it back to this empty state so I don't know the best way to do that like would it be I don't know set in yo to blank again perfect that's exactly what you do really yeah that's exactly nice so guys I'm learning what's cool about this is this is real time it's not like a rehearsed so I'm actually cuz I'm very fascinated by react and I want to learn it and Sonny knows it so well I'm actually live learning it with you guys together so if you're new and you're picking it up like I'm picking it up myself sure I have experience with some other programming languages like Python but I'm having a lot of fun like picking it up so that's why I'm asking so many questions now hopefully is bringing you guys value oh yeah that's awesome oh so nice it's clearing it up ok love it nice so somebody just asked now why do we need form when we can do it with a normal button so the reason why we we wrapped in a form was so that naturally when you're typing in a form you usually hit the enter button and you want that to submit the the input filled right so that's why we wrapped it in a form and that's how you get that behavior that we're all used to if you don't have that then when you click the enter key it's not gonna submit the form so that's a good question yeah input cool awesome right so now I guess we're onto the fun part so we can do a few things right now oh we have $2.00 oh nice that is saying oh that's such a good question as well cause you want to jump on that question nice thank you low low let me actually hit this that is so cool so they said self-taught boot camp or a degree explain so my personal opinion on this is I'm I mean I'm self-taught completely as a developer and when I say self-taught I mean yes I got help with a bunch of mentors along the way I did go to a college and I was pursuing my degree but I quickly was realizing that a lot of the theoretical stuff and the things that I was building there were not that helpful to me so I ended up choosing my own path of learning by myself and getting clients so for me it was self-taught but I mean I'm sure there's a lot of value in boot camp and you know getting a degree as well but what are your thoughts Sonny so I think I was a really good a way of answering it to be honest I was the same as Kazi I started self-taught I pretty much got a book from the bookstore the Apple bookstore told myself Java I would honestly recommend guys because I've done a degree approach as well so my viewpoint on this is honestly from what I spent getting a degree and doing that as compared to sort of a bootcamp or doing things practically myself I would highly recommend going for the boot camp first because it gives you a lot more practical hands-on sort of approach as opposed to just theory in a degree so I would recommend the approach that I would always give is give a boot camp a try first so self teaching to give it a boot camp a try first because it now with the internet and with all of the courses available including clever programmer we just have so much at our disposal so give that a try first before you even consider a degree if you feel like you honestly I would recommend a degree maybe for machine learning for those really in-depth things but as per coding I would recommend a boot camp because you're so involved and you're so immersed in a coding boot camp that's what I love about it it's like eight to ten hours a day so definitely I think if you have to pick between a college or a boot camp I would agree like go to a boot camp exactly exactly that was a really good question so now let's basically so we have two options now we can basically either create a component for each of the two dues or we can introduce material UI so you can't cause we wanna do material UI right so right now the app looks a bit ugly we want it to look really nice right yeah so what we can do with a reactive and this is what I love about react is many of you guys are used to Google's sort of look and feel right so we actually know that to be something called material UI so to install this into our project it's gonna be super simple what we need to do is MPM install material UI core so that first command so if you just want to copy that go over to vs code and I think we have to open up a set okay but yeah you could do up we just have to make sure we restart the app when we do that yeah so what this is gonna do now is it's gonna install all of the material UI core soil elements into the project so this includes buns it includes a bunch of stuff like that but that means that we can get a really nice clean looking app so I'm just gonna open up material UI as well on my computer so I can see what's going on and if you just want to go over to material UI click on the left side the sidebar cause a nice lawyer that he just subscribed that's awesome awesome nice so what do you want me to do go to materials Oh yep so you click on the Left little drop-down so the little sandwich bar and then you wanna click on components uh-huh and here you'll get a list of everything inside of here you can click on button so let's start off with something simple like a button and now you can see you get all of these beautiful bars and even when you click it look what happens on the primary button this default secondary do you get that little ripple effect as I clean yeah you get really clean sort of UI and now you can see examples of how we actually code that so right now with the primary button if we just copy and paste that code that's what I want and I'll just go to our button and actually what I'll do is I'll paste it like this exactly and then let me see type submit' yep so and then on that lake I'm gonna put the on click on in this too perfect and then we can actually yeah we just want to change the text to do that's it and then this one I'll just comment oh how do I if you want to comment here if you press command for size yep done yeah okay so I think this should oh I have to also import it right or no exactly yep so now you see that if you ever have an input area it comes up in the terminal so to import this I'll show you a little trick so know that you don't need to do that one there's your buddy down fpm yep so you can either do that a little bit there so import button but you know what I'll show you a little trick to this you don't even have to do that if you go back to your your code and you just go to button and you basically press Oh spacebar control spacebar and then if you go oh no I think you have to maybe it's not so if you go to the end of button so next to the end so just to scroat next to the button yeah and then you want to do control spacebar now okay so it's not doing it but usually what happens is is right next to the end so inside of the brackets we can do an import for now you do a normal import but sometimes vs code allows you to base basically we'll bring that in for you yeah like so if we say all right yeah for save and now it should be good to go let's hit refresh yep so I think we need to run the app I think you stopped running it cause II maybe no that is so fast bro did you realize how when you click Add to do you actually submit an empty value to your list oh material ui does that by default no so that's not material UI that's actually something we need to account for so what we want to do is whenever there's no what are you saying so if you click on add if you click on add to do now watch how an empty the element gets added to your list so you see if you scroll down now okay you've got gaps you see you've got gaps in the list yeah uh-huh yeah so we don't want that to happen because you don't want to have those gaps you don't want to have actually adding empty thanks to my array of - dues right yeah so right now it's actually adding empty things so the way we sort of fix that I think is super easy is you go to the bone can we see it first because I don't I want to see it first like can I print like I just want to kind of console that log to dues yeah I just take a look at what you're actually saying so I can understand okay test ID to do I mean is it actually adding because I don't see no survived no so right now is adding it correctly but if you say that if you spam the add to do button without typing anything input phone so so if you hit the app to do bond oh that's what you mean that makes a lot of sense sense so we don't worry nee we don't want that to happen right so the way that we fix that is we disable the button if the input is blank right aha if you go to button so on line 24 and exactly exactly like disable at some point and it's like not inputting yep I was not just remember but it makes sense ooh oh that is clean look nice right Wow that is fancy a normal so now we have no lovely fitly okay cool yeah yo Candice just said she signed up for the profit with JavaScript course oh nice super welcome to the course yeah pumped to have you that is amazing thank you so much for joining it really means a lot we're good and you'll see you in these calls every single week multiple actually three or four calls like these inside of the program and then yeah you guys gonna be building projects in that program every single week exactly awesome okay so what's right so now in this add one more element so I'm gonna add some just I've just searched something called form control inside of material UI so I'm gonna go here I'm just gonna paste it yep so it's this code right here and then it's just straighten this up and basically this one's really nice right so I'm gonna clean this up we don't need any of these extra bits and bobs so we don't need the ID we don't need this one for now yeah and we don't need we don't even need this so basically now what we want to say is here the input label is just gonna say no right so now we're gonna also have it's like how our our input looks really ugly right now we're gonna improve and make our input look pretty exactly so we're gonna say write a to-do and then in the input so we just need to grab all of the stuff that we had in our previous input and just chuck it over here now and guys you see how me and cause you're coding at the same time that's amazing that's all through vs code live share yeah that is so exciting nice so now we need to import all of these things so we can just do we can go to the top we can do import so is ups we say import form control we need to import import animal yeah nice so if we save that this D structure is nice in yeah yeah sex really no really nice so check you see the way the text kind of went up so when your cursor is not on there it says right where to do and then it moves up by itself so everyone just said I just joined profit of a JavaScript nice nice someone said which code error is this this is V s code yeah you guys yeah nice so that we have already an app which is looking a lot more better just with material UI and that's an example of how you don't need to rewrite the book on this stuff like you can just reuse design libraries from people like Google and you can start taking their code so you don't have to write all this stuff from the phone which is amazing so i think i think there's actually one for list elements i'm not yeah there is one cluster do you want to do that or you leave that one no no let's do that because this looks really ugly right now okay so what we're gonna do is before we do that let's actually have it as a so right now we're rendering on line 36 in our code we're rendering a list of - duze right line 36 yeah yeah so right here we're rendering a list of - deuce but react has this amazing thing called components right now components basically allow us to write a component that we write once and then we can reuse it so yes we can we can do that but then what I was gonna say is we actually maybe write a component and then inside that component we use material UI so we can show props okay yeah and then we can show how material or how components work - yeah okay awesome so for now what we're gonna do is we're gonna basically create a component which is gonna replace this and then if we ever want to change how our to-do looks we just go to that component so what we're gonna do now is we're gonna create a new new file on the Left called to do Jas yeah so if you want to just create a new one Kazi on the Left uh-huh so here add a new file and we're gonna call it to do and like this right yeah yeah exactly yeah who do to do input or something right not just to do no no it would be a to do because what this components gonna resemble a to do on the screen so that's why we're gonna row right just like one yeah exactly it'd be like one row exactly all right so in this case so what I want to show you as well as well is basically there's this amazing snippet called es7 so if you go to extensions right now we can just give them a quick demonstration of this one so go to your extension on the left okay extensions wait wait where do you want me to go app GS so that ya know so you see the extensions on the sidebar right so that little square box yeah that one there yep that's on there yeah and then you type in es 7 there so es 7 by the way this is the plug-in guys we're using to be able to be on the same visual studio code exactly so here you want to type in es 7 yep and click that and then you see that top one yeah seven react Redux snippets right yeah I just want you to click install on that okay so guys a million people download this and it's so so powerful right now because we always forget how to write the code for a component right so let's go back to our to do Jess yep and now all you need to type Kazi is our f c/e yeah and then press enter and that is really crazy all right how that's so cool is it react framework control I don't know what is but what is react functional component with an export beautiful beautiful beautiful okay great I love that nice and then what we're gonna do now is basically we want to have also you if we're also another one that we recommend you guys get is prettier yeah definitely so this is a really good one to use for your code as well but okay yeah yeah because I will save you guys doing the whole like indentation headache that we all hate doing another really like is bracket oh yeah that's really under this is super super helpful when you are looking at your code and you want to know like which brackets you guys see how it's like colored how this yes imagines this yellow here and this pink parenthesis matches this pink parenthesis here because once your code starts to get more and more involved it starts to get very confusing in JavaScript like what's ending where so like this yellow starts and end this yellow over here that's amazing they change that now it's actually much cleaner than it used to be nice okay so now what we wanted now what we want to do is go to app DOJ's and we want to grab the code that we have for our list element so this one here we're gonna copy that go over to our to-do element yep and we're just gonna paste it here right now obviously we are using a dynamic variable here code to do right so we don't actually have access to that right there and so what we're gonna do is we're gonna use something called props now guys a component is something that we write once but we can use several times in several places so we can reuse a component and then but we only have one piece of code to change that component props stands for properties and allows us when we're using a component allows us to differentiate one component from another so in this case the to do itself the to do title would be the prop that we're going to use right so here what we can do is we can write props and then here we just write props dot to do so that's how we use props in in react right now the next step is naturally okay we're passing through props but how do we actually call out to do now so if we go back to your apt or Jas hold on I'm trying to think so what are we gonna pass and props so I'm gonna pass the entire we're gonna pass the entire array of two dues or what is it that what is props going to be so prop is props can be anything you want they can be just like how a div has a bunch of attributes so you can have on click can I have class names okay it's literally gonna be like this right so we're going it in our case so we're going to just be passing it the to do so the actual tie over the text so in this case we could even call it text so we can say text so we're gonna okay okay got it so that makes sense so we're gonna give it a to do and then we're gonna do to do that text now we're gonna say prop star text because props is a set word right so we can call this this is a diet we can actually call this anything we want we can call this yeah you can do that but the thing is right you don't actually want to call it to you otherwise it's gonna get very confusing yeah because I'll show you why is because when we go to do this yeah let's go to app DOJ's and when we actually use our to do so here when we do this when we say to do this is how we do it we say to do and then we just do a closing right like that right yeah and now remember we the prop was called text right yeah but we want the value of it to be the to do do you see what we did though so what we're saying here is it what makes actually easy is if you grab to do Jess and pull it to the right side of your screen then we can have both things open at the same time so split your window so yeah let's just drag that over to the right side and then let's do come on B to hide the side bar so come on B the shortcut yeah and there we go so now you can see we have app door Jess if we just pull over to do Jess yep so you can see now yeah where we have the so you see on the right side yeah we have props text yeah right aha so text is you see that the prop is so props or whatever we pass through here so we can have a prop called a we can have a prop called B I see makes a lot of sense okay okay that makes a ton of sense okay so now if I just so this text is what let me actually do the again this text is basically what's right over here right exactly oh yeah and props is bit this guy is like whatever is like to-do list attributes right or to-do list props are exactly yeah cool got it okay okay cool somebody just said I really want to bring my jazz level up and folks interacts when he is the bomb thank you this might be the ticket if he has a big part of the pwj team so honestly we're we're always running reactor me and cause he always coding react we have coaching calls on react so for sure if you're on the level up your react game then pwj is in profit a javascript we are teaching react with combined react as a fundamental part of the course so every single week you guys are building full-on react apps in the profit with JavaScript course and once again um today is the last day of the sale so if you're interested in it I'm not trying to push it I'm just saying like the price will go up tomorrow like midnight tonight so if you're thinking about it probably said is the chance to pull the trigger yeah and guys just to mention we actually have a gree act coaching call tomorrow so actually times really well like it would just be silly for you to not be in the program so like you should just join it and then if you don't like it 29 days later you can cancel it but like it's it's the most unbelievable program so at this point if you are hooked by this and you're seeing value click the link join the program and then come back and watch this training with us exactly it's in the description so go click the link in the description it will take you straight to it read it up click the button buy it join the community and then come back to this training yeah I think some people are having problems clicking the link so it's not actually a clickable link so if that's the case guys just copy really can you see that yeah you can't actually even I can actually click that link so maybe that's why it's very very problematic ok let me see let me see what is happening oh okay I got to change that right now because that's that's really bad yeah awesome welcome to the team ank's and hopefully I'll see you in the coaching good tomorrow awesome someone asked a good question so why are you doing that how quickly explain so what's the difference between functional components and cost-based components which one should I use so and do where do I need to learn hooks Oh hooks belong to functional components that's to answer your first question class-based components so guys if you need to know this answer because a lot of people ask it you're gonna need to know both as your fundamentals and we do teach both functional components are the new way of writing the components they're very clean they're very slick what we're doing right now is functional components most companies that you join will have a code base written in the old stuff so class-based components so you're gonna need to know both but it's not affair and honestly once you know one it's very easy to pick up the other one yeah alright go so if you actually go and click the link on YouTube right now it will work awesome now it's working yes you know we're gonna all so we just gotta update it in a few different places so I'm gonna update it right now in the Facebook group as well and just make sure it it also works they're nice so now the also if any of you guys are on Instagram kya say Instagram story right now make sure you tag clever cause II have a cozy and ssss Sangha and then just last guys know that you're watching we love to engage with you guys speak to you guys and instagrams a really good platform for us to reach out and talk to you guys yeah and tag us and what are our tags so I am clever cause II and then you are funny saying no it's ssssss Sangha so it's for esa's Sangha yeah last one there we go make sure you give us a shout out and then we can reach out and have a chat with you guys yeah yeah we reach out know some people just please yeah reach out with the reach out with this that's gonna be awesome we're gonna share your story and we're gonna put it on our Instagram story nice okay dope so let me oh wait I was actually sharing that the whole time but apparently I wasn't sharing anything so here you can reach us at Instagram go here and tag us here's it at clever cause II for me and then here's Sonny Stanga yep so okay cool all right go for it it's nice so now what we've done is we created to do component we passed in the text prop right and we gave it the value of to do which is basically going to be the value so it'll be taking the dogs out for a walk or whatever you put inside of your to do so now if we actually save this and run this oh we might actually have to import our to do so if you go to the top cause II yep yep and just do import to do from so important to do is it uh it's not so no no you have to do in a separate ones that we import to do and then from and then we use some so you need to do the directory so our current directory for slash good to do yeah and you don't actually need the Jess anymore so it's actually really clean how we do that yeah and now what we done is we put in the are the to do that we just created and it should be working now so if we give that a save and we give that run oh did you add it in already somewhere here oh you did yeah yeah you did okay clean so if we go back and we check no have a look at this so awesome right wait hold on it worked yep so if we try and type in something else like ABC there we go okay so it's not pretty yet but yes there's not pretty but now what we just did is we actually just moved all of the code over to a separate component so it's actually the cleanup process okay so let me just write that down as well as a note so break your code up into okay cool nice awesome okay so now what we're gonna do is now the really nice part is is that we're gonna actually upgrade this to do a component to have material UI but all of the code now that we have to handle is just this which is really clean right we don't have to worry about all the other code we just add it here and everything will work for us yeah that's perfect that's perfect we can add as much complexity as we want but it's real it's not gonna be all in that same app.js file exactly that is really a benefit really here is not just that it's a different file so your code is clean it's actually that it will render separately from the rest of whatever is happening in your different components your app GS or whatever so even if this is loading it won't cost your entire app to not load right it will everything else will still load and then your component will keep loading and it will like get refresh later exactly yeah exactly this is super clean like it's gonna be really really nice to use what I'm gonna do now is I'm actually gonna copy a snippet I've got from material UI so what we're gonna do is we're going to change the divs to be list and we're gonna just grab this and we're gonna I got this from material UI Docs so these are a bunch of elements right now we don't really need the avatar I guess at this point I guess we can kind of leave that one for now so have a look so yeah we can leave that one for now so we can get rid of this one we can get rid of this one so list item avatar and then here what we can do is we can just have so see list item push this in and what are for our text what we want to do is we just want to have the primary text could say like to do and then the secondary text could be our actual to do text some prop start text so something like this so I've just looked at the docs in material UI and I pretty much seen an example and I've repurposed it for what we won here so well now to get this working we just need to import all of the right dependencies so I'm gonna do basically what we've done in the other ab KS and we do an import and rather then this is what we employed inside of the apt or jest but in this case we just need to do these ones so list list item list item text nice yeah and if we save that and we run that if everything went well it should be looking beautiful oh look at that nice Oh clean okay test right oh nice okay this yeah and obviously we can enhance that as we want we can make it centered we can do a bunch of stuff and you know what let's actually try and give it that avatar so there's a list item avatar let's try and give it this one so this might actually be really nice if we did even put a little box around it if we want later yeah exactly so let's do that and give that a girl that's not and then we need to quickly import yeah yeah that's crazy what is that shortcut maybe it's not I have it not set up in this one yeah yeah usually it's quite a nice one where you basically you will go to the end of the line so if you go to where my cursor is right now so if you go here rad all missing imports oh click that did that what's that one I mean I think we had all the imports already so let me try it so I just deleted why don't you you know source action add all missing imports huh but if you click on so if you go to the end of the line and you do control spacebar so you're right where my cursor is so not outside the bracket but inside so inside nice yeah oh there we go that's it yeah that okay clean it and it would actually do it for sometimes you have to go down one okay yeah so doesn't always work but it's quite a nice woman it does know it's working so we put this awesome oh nice yeah and then I'll go to list item tag nice okay cool so this is good to go now list item list item tax all of that yeah awesome so if we go in the our image icon is not employed so it's image icon the table image icon alright that's from iio that's from a different thing so we'll leave that actually maybe that one would you just for now yeah so that's from a different dependency so we haven't actually installed that one okay so there we go awesome okay cool yeah so now what we're gonna do is we are going to what is just a surprise go ahead what were you gonna say I'm just gonna session the primary text be props that text yeah we can change up agenda I just quotes quickly so back to text we don't need this second bracket okay and then this will just be like let's just put like dummy deadline yeah oh nice yeah that's a good use case yeah awesome okay that looks pretty yeah and a quick sort of like tip here so now say we want to star that list to be centered right haha so every component can have its own CSS so here let's create a new file on my man this quote oh I didn't know you could you could do up but if we were gonna do this we could import forward slash to do dot CSS so we need to make a file called to do CSS all right give me one second Mark Johnson is asking preview videos of pwj course so we don't currently we're not doing preview videos though that could be a good idea maybe we could put some preview videos yeah but if you go to the page that we have in the link like underneath this video that will basically show you what the whole course is about and I have a full video explaining all of the things that you actually get from the program so if I were you mark I would just check that out and then you know just jump in the program and from there you can decide how you like it and you can cancel at any time yeah awesome what were we doing no we were saying we were trying to enter it so we're trying to Center it yes sir so we just create a file called ugss okay so we will create that file to do to do dot CSS what's the reasoning behind every filename being like capitalize like that yeah so it's a good question so that it's kind of it's a standard really so that way you can quickly identify what is a component so if you know is all of the components here to do apt ojs they all have capitals right so as long as you have a capital and you stick to that standard especially when it grows so it gets quite big your project especially when you're in a production environment yeah it's very quick to then see what's a component and what's not okay that's this or reasoning yeah okay all right let's keep it going let's keep it going cuz right now we're at 208 viewer so I just want to make sure everybody can get as much spot i'll slow my questions down a little bit so if we go to to do CSS and now inside of to do ojs yeah I'm going to add a class name to the list so I'm going to say class name equals and let's just call it to do I can't this is working okay you're writing right here okay yep and then here we just inside of to do dot CSS now I'm just adding that CSS row and here I'm gonna say text a line it's text-align:center and this may be do it this might do it it depends on how we've set things up but let's say what to do and save and the to do died Jess got it and then let's go back alright okay so this is this happens typically because we have a component inside of so material UI has a bunch of rules that's built into it so I think one of them might actually be centering what we'll do is I think this actually keep this to the end so we can style it at the end yep because we can even host right now if we want or I mean we can even start connecting firebase to it now yeah let's do that for now so this is scary do this for now okay so what we're gonna do now is remember guys in the beginning what we did is we set up firebase and we got config so a little config right yeah and what we need to do now is actually connect that config so I want you to do is create a file called firebase jeaious and this is the beautiful part because right now it's so quick to do this right so that's the config right but what we're gonna do now is I have a little snippet of code that I always use so I think it's let me get one second to do so I always have this snippet of code that I use and you guys need to do is actually just copy this so pause the video copy out what I've written here and we'll explain exactly what it's doing so this snippet right here so if we basically so this one right here so it says comment out at the top right now and so this is what its gonna do is it's gonna import firebase so we need to actually install firebase so cause if you wanna install firebase to the project okay so let me go to firebase oh nice mark Johnson I totally just joined no I that is awesome so if you want to go to notify base here so if we go to MPN we need to do is NPM I and then firebase so inside of a terminal the NPM I firebase and what that's gonna do is gonna install all the firebase dependencies inside of our project nice okay so why that's happening what we can do is we can carry on so we then have this command is firebase initialize app so this is something that firebase gives us and all we need to do is that config that cause he grabbed earlier all we need to do is basically just copy that so we can we can here this for a sec and then we can basically just paste that inside of here and that's like our key so that's gonna be the key that gives us the basic all that is gonna connect everything that we need to do is gonna connect everything so it's basically the key to our back-end and here we don't need to we don't need these services so I'm gonna get rid of this and all we're saying here is we're saying using the firebase app that we just initialized so this one right here we're connecting to firestorm and we're basically just storing that in a variable called DB and then on line 18 so if you scroll down yeah on line 18 if we export that so that way anywhere else in our reactor we can just import it and then we have access to the DB so first so fine store here guys whatever but you okay firebase on Google Chrome okay so firebase has a database so if you click on the left the database tab left got it yep and then you click on fire store so it will say create database uh-huh and then you wanna click on the start in test mode yep and click Next yep here you can say it USN true it doesn't really matter to be honest okay what we're gonna do guys this is setting up the entire sort of database back-end so the real time database query is just getting set up right now and it's sort of doing all this for us just from what we just did there so once that's done we should be able to actually start using our database and guys your minds gonna be blown when you see how simple the code is to get it working I like it always it amazes me yeah I'm really really pumped it's really really nice so Abdul said ydb inside of x4 so that's just a syntax you can actually write a different way you can do it like this you could say export default DB so let's just write it like that for now that means that we can import it easier so that's something called import-export which I'd recommend we do teach you in the course but I recommend you check up on on what an import and export is and you'll be able to explain what a default and all those things are yeah nice because yeah because one thing I learned about react is like if he didn't do this export line over here then in our other files we won't be able to use this exact DB exactly yep perfect wherever playing it yeah nice so the database is also beautiful so fire store has a structure of collection document collection document collection document and it sort of goes on forever what is a collection it's just like an array and then inside of the collection you just have an array so in our case if you click on start a collection and our collection is gonna be code - duze right yeah so you could go next and then the first document if we just we don't have to type in the auto ID but in the field what we're gonna do is text so remember guys that's how we sort of set it up so text can be like take the dogs out for a walk or it could be like we could even call it oh no three yeah we can call it a task or at any value yeah or to do and the value should be the actual to-do itself so take dogs out or something like that nice and click Save Hey look at that I love my emojis nice and then look at that that's already in the database it's got a field it's got a value and so forth so now I guess our mission is to connect our reactor to this database and start pulling it in so that if we open up apt or Jess so do you remember when we set up the initial state right for to do is we actually hard-coded the beginning values right yep yep we did so if we go to the top so yeah so we actually hard-coded these but now instead of we're gonna get it from the database yes exactly mhm so now if we press come on be you'll be able to hide the sidebar and it should give you some more screen yeah there you go and then so now what we're gonna do is we can get rid of this console log for now so what we're gonna do is we actually want the two dues to be empty initially right we don't want them to have anything inside and then what we're gonna use is we need to now so this this actually run the scenario I had so when the app loads so when the app loads we need to listen to the database and fetch new to dues as they get refreshed right as they get added removed right so when the app loads we need to listen to the database and we need to basically just say fetch all the to dues as we add and remove them right and we want that information to go right into our to dues so that's the mission and I've always recommend just writing a small comment as to what you're trying to achieve before you start coding and what the way we're gonna do that is we're gonna use something called a use affect so here we do something called a use fetch so just like how you state setup it's a it's a hook which sets up state inside of our app a user fact is basically something which we we call it so it's a hook and basically it runs once when the app loads so and the syntax for it is we basically have a user fact and then we have a function and then we have dependencies so I'll explain what these are and we also offer a place it as we need to so the function we write as an error function so you just do this and honestly all you need to know at this point is that this loads so this code here fires when the app loads so when app Doge is so when the component that we're in when it loads this code here is gonna fire and this dependencies right here you basically have an array here and whatever is inside this array so if you leave the array blank right now it's gonna run once when app DOJ's loads right if you put a variable inside of here it's gonna run once when the app loads and then whenever any variable changes whenever like say for example if I put input in here every time so when the app loads it's gonna fire it off yeah every single time the input loads it's gonna fire it off as well so you see it's very powerful so yeah so basically this of I it took me a while to wrap my mind around this before but basically how I think of this is for example if he made it to whenever this input variable happens the use effect would be firing every single time I type here because I'm changing the input but if he so then the input actually is the dependency if he has no dependency meaning he just has that like empty array what that means is like the only time it fires is when i refresh the page or I start the page but after the page is started it will actually like never fire again based on any it's not watching for any changes anymore exactly I think we actually need to run the app maybe are we doing that yeah okay we also yeah yeah keep going nice awesome so in this case we actually just want to run the snippet of code once when the app DOJ's loads and never again because we want to attach a listener to the database one time we don't want to keep attaching a listener because it's gonna get really stressful for the browser we just need one listener which says hey when the database changes ping me the new stuff right nice so the way we do that now is we need to import that special DB that we set up earlier so we say which say import DB from and then remember at the file that it was inside of what's firebase and here what we do is we just do this now so we say database dot collection so remember we set up that collection earlier which was - duze yep hey everyone's on the core nice oh if a day raised up collection did you also call me cute earlier what was up she also said you were cute earlier that's a that's a nice girlfriend guys that's my girlfriend guys it's up man so we've got database collection - deuce yeah and what that is gonna then do is we need to now say so this is a bit that sort of just takes a little bit of getting used to so every single time the database changes if we want to fire off some kind of event all right and the one that we're really interested in something called on snapshot Yeah right so that means that every single time it changes yeah it fires off a snapshot and imagine the snapshot is like literally imagine a camera right yeah so every single time the database changes it snaps it and it gives you that snapshot right and whatever you decide to do with it is up to you but it's just going to snap it and give you that snapshot so in this case we do snapshot and then we need to have some code run whenever that happens here so now what do we do with this snapshot and this is the part which is a very slick es6 line of code but we'll break it down so what we're gonna do is we're gonna say set the to Do's so we want to set the - duze - and now this is a bit which gets quite intricate so we're gonna say snapshot dot Docs so this is gonna say all of the docs so remember when Kazi added a task yeah all I could to do inside of that collection yeah so we're saying go and get all of the docs and then we're gonna say map through every single one of the docs or in this case right now Doc's is every single to do that I've added to the database right now it's only one that I've added exactly got it yeah so I'm mapping through all of the docs and then we're gonna say for every single doc because remember the syntax for this is you've got the plural here and the singular here so every time you loop through for every single doc in this case right set it inside of - duze yep so so we're saying that so right now this is kind of like the the more complex bit here so we're saying snapshot Doc's don't map through all the docs so for every single doc I want to then do doc dot data which then basically gives me an object back of all of the properties so the only property that cause he added earlier was one to do right take take out the dog yeah take out the dog but the key for that that field was to do right yep yep so the key was to do but remember dr. day is just gonna give us back an object all right so we need to match this sort of the previous shape that we had earlier which was like strings yeah so ABC and then like DF for example so now what we want to do is well say dr. data dot to do all right so we're gonna say go through every single doc right which is basically all of the to do is get the to do filled and it basically bubbles up so this is gonna bubble up into an array right and then we're setting that to become the two dues so does that is that and this is a bit which is like this is really sort of more of an intricate part where right now what we're doing here and we can actually console.log this to make this a bit clearer yeah so what we're gonna do here is if I just do console.log yeah and I do this so let's do snapshot don't you do is right hold on okay so this part here is getting that specific to do and so so I'll show you actually if we don't add the to do what does this return what is this whole thing like what is this thing inside of the parentheses here gets evaluated to once this entire loop finishes running so I we've console updates to save it and run it and you'll see okay yeah that's the best way to see it and then you can play around with what you get back refresh so now if we yep so if we refresh so whoa that just happened okay so firebase does not contain a d4 oh because we need to save the the firebase file uh-huh okay so if you notice guys whenever you don't save a file it's got that little circle so that's sometimes what happens so use effect also we need to import use effectors are inside of apt Oh Jess yeah also so that say if you click it again and you go down one yep there you go use oh no it is still not there yeah so sometimes that doesn't work via use effect nice okay so so can you see it actually grabbed that the take dogs out right yeah so so it doesn't take dogs up like if it takes dog out from my database that is sick yeah that's beautiful okay all right well well what we want what we kind of want to do here is let's let's make the console a little bigger so we can just see yeah so it's made the console a little bigger and then what I'm gonna do here is I'm actually gonna remove the code that sets the to do so we're just gonna be console logging all right so we're actually not gonna do anything functionally we just want to see what's inside of dr. data here uh-huh okay right so now if we refresh do after I have to hit save to right yep we have to save and then we go back when we refresh so now if you go so you see there you go so that little object in there in the console yeah right here that's basically the collection you see that it gives us back like an array of objects ah so this is an array so this will return to us an array of objects that piece yeah basically when I do set to dues then it said the to dues to that array of objects yes but if we did that so that's the bit with that that's where everyone makes a little error so if we did this right so this wouldn't work because ours are too dues are only right now set to handle a raise not array of objects exactly so that's why when we map we're accessing the to do so I would have to make sure that in here somewhere when I'm looping through I need to access the object so yeah you could either do it here oh you can actually do it so you can either pass the entire object here uh-huh oh you can just get the two dues which would actually work with what we currently built okay so this will give us back strings right oh oh okay okay that's why I was confusing because you didn't do dot to do here you didn't do this yeah exactly okay I was just trying to show you that it was an object that comes back cool cool cool okay and okay awesome got it so then this basically is just at the end of the day like a flat array with no objects yeah okay exactly it's a flat array of strings right nice okay I would recommend that you usually do pass back the whole object because then you can do more complicated right now this allows us to read from the database yeah but are we gonna the next step is gonna be to also have like that two-way sync so I have when I actually write stuff on my react app it also adds it to the database yes exactly so this is where it's really beautiful right because this piece of code right here is doing all of listening right so it's always going to listen to whether or not it gets updated whether or not it gets changed it's just gonna say whenever there's a snapshot so whenever anything changes in that database if we push it if we do anything it's just gonna basically fire this line of code off yeah right yeah and so this is actually all the hard works kind of done at this point so we can actually get rid of this so now so as soon as the app loads now so if you save this and we go back to our as soon as it loads it would actually refresh and then it would show us the the stuff that's in our database you know default okay so like for example if I just went in here and like I added another no so you would add another document so on the Left yep you're at a document okay and you had to do yeah and then and guys this is real-time so he's not gonna refresh right now he's gonna just pretty much add this to the DB and it's gonna be in real time gonna get added to our Oh dad is crazy it's crazy right I didn't even refresh yeah it's just an instant thing so now we have this one literally three lines of code guys and it's just like literally two lines of code if you think about it oh my that's just been everything that is beautiful which is insane right it is so beautiful yeah okay and the crazy part is adding the to do is even easier now all right so now if we go to our add to do function so on line 22 yep and then we have a look here right yeah so now what we want to do is rather than sort of manipulating our local state right yeah we we of course want to clear the input because that's local it's what we do locally but let's get rid of our our console logs for now and what we're gonna do here is we're just gonna say DB yeah doc oops DB doc collection mm-hmm to do's and when we click the add to do button we're just gonna literally do this when I say add open right and we pass it an object all right and remember your yield is gonna be to do yeah and I'm gonna let you finish it off so what's the value gonna be value is going to be whatever the input is exactly so it's going if you want this yep yeah in this case would be perfect yeah I mean I think that's a sign of code yep okay right yep now we don't have to worry about spreads and everything because what this is gonna do is it's gonna basically add to the DB yeah which then fires off a snapshot yep which then oh wow that's so nice because as soon as this happens this it's changed so on snapshot because it takes a new snapshot and then it just Maps oh wow that's beautiful so this is just one line of code and now I can add things to it already yeah exactly that is insane blowing okay so if I do live call rocket emoji and then I had to do holy crap it's right there and if I go here it would be in this yep so live call right here oh my god what's wrong okay eat a banana now you might be wondering why it sort of popped in at a different point each time yes because it generates a random ID right and it sorts our sablée Oh for exactly okay got it so I can I get so the easiest thing would be like I want the most recent to be at the top yeah so that should just be like a simple sort by cuz I'm sure it's creating a timestamp field right in the back created on that you would think it was but right now what we're gonna do is we actually need to we do need to actually add a timestamp yeah so we're gonna add a time some every time we push something in and what we need to do here is firstly we need to import a firebase at the top so could we need access to firebase because we need remember whenever we do a timestamp guys we actually want to get not our time stamp but firebase is of times done right yeah in that way no matter if cause he pushes it in America or I push it in London arts our server time stamp will be the same so it's always gonna be correct mm-hmm all right otherwise it could have timing issues so at the top of the file we're gonna say import firebase from firebase yeah the actual dependency we want and then we basically just need to get the the timestamp value so here I'm gonna do firebase da I think it's firestore and then I think it's I just need to check this one one second I need to I I think Google this piece of code and the guys it's always normal to do that by the way like nobody remembers this stuff fully off the top of their head so firestore I need the server timestamp awesome so earlier just right now we had mark Johnson he joined that was super cool so thank you for jumping in and he was like I went ahead and joined it to try and test it out for 30 days yeah I challenged you test it out I mean a stress test it just make sure you come to every call we have like three to four live calls every single week succumb to those be a part of the slack community go through the modules like really extract a value out of the program and you're gonna be mind blown by it exactly because we always say it's always about how much effort you you put into the course which is going to determine how fast your progression is so I tend to those live calls make sure you're there every single time and just show up and the results will come yeah awesome nice so now if we go back to the code I found the code that we were looking for if we go to app Doge is yeah so you see this here it says firebase dot fire store dot field value server timestamp right got it now this is something that is that finally this is this is uh this is firebase is server right this is our yes okay this is where our app is hosted yes there's gonna be if where the day is stored the timestamp of that server yeah okay yeah and the reason why we use this is because when we push in no matter where we are in the world where we push in that timestamp is going to be consistent with ever run yeah right so what we might need to do now is actually delete all the current to do is because they're not gonna have time stamps so if we go into fires store and we just go there what we can do is a shortcut for this is if you go on the three dots on the top right so those three dots click delete collection and just type introduce ya to dues we can delete the collection and once you guys if there's no collection even if we push the collection in it will create one for us does it does it still keep them somewhere and like could you like restore it or is it just gone gone like so as far as I'm aware it's gone gone dang I think there is a robot mechanism so you don't actually need to do to do sir you don't need to create another one oh wait because I was gonna show you how it works even without it so oh because yeah I mean yeah we shouldn't have to right because they'll create a collection on the fly if it doesn't exist is that what it does exactly that is another emoji plug-in I'm using by the way guys it's called it's called rocket emoji it's fantastic get it it's Matthew Palmer net so crazy it's for Mac not for PC find something on PC but it's absolutely awesome so I just hit colon and then I'll just write my whatever rocket or whatever word and then it like pops it up yep exactly yeah awesome so now if we go to the react app you know so here so yeah back to the code so where we do the on snapshot all we need to do now to sort it is crazy what we need to do is just do order why we say order by and order by takes two parameters right it takes so it's just like a chaining right so we say order by the first parameter is like to do it's gonna be the actual cookie you do yep so the key is to do in this case right so remember while we sewing it by the tit to do or the time stamp the times the time stamp yes so this bit will be the time stamp yep and then you would have ascending or descending so hello I see okay descending would be a sin descending right-t something because because the most recent one is gonna be the highest value yeah so that's correct then right descending yeah that should be correct so now if we save that and give that a go hopefully everything's done well so here we go so I tried a and Z just because I wanted to see if it does it automatically but it doesn't it just does it by timestamp oh by the way cause II it didn't do it by your value last time alphabet it did it by the idea generated for that document I don't understand what so if you go to fire store now yeah but the collection and refresh because you're gonna have to refresh this hunt together they're not made with react so you see each of these have a unique ID right yeah and then they get by themselves that's what it was sorting by a alphabetically the unique ID beautiful so wait hold on oh that it's that's what I was doing before but right now it's doing it by timestamp right exactly yeah okay cool yeah awesome nice so yeah somebody said hey Sonny put the order as an input so the user can choose whether to view in descending ascending that's genius I think we should try that this this I've never done that let's try that out that's really good let's do um so this go back to the code and this add a quick sort of drop-down I guess uh-huh so if so this how do you do an input inputs is it switch switch oh you're trying you're gonna do some fancy e note stuff by the way son CER joined welcomes ANSI oh nice welcome also let's try this out so let's do something like actually know this first year's deploy it and then we'll give that a go because that's a really nice idea but I think deploying it would be a cooler thing to try first yeah we can add the delete functionality to what is this complaint that's happening actually I can just ignore that right yeah so this is actually quite an important thing right this is um well the keys are important and react further for the sort of demonstration of this like for going through this demo I don't think we would go through everything on the keys because I think it might take a bit time but I'll show you actually how we could do this I mean with you know cuz we're gonna add deleting we do you need to add keys anyway okay yeah we can do that it's good let's give it a go then yeah so what we'll do now is let's first do a deployment and then we'll add the delete functionality yeah yep let's do it down so to deploy is so simple firebase deploy that's it literally so now if you want to go to your terminal yeah yep and what we need to do now is do something called firebase space in it right and this is gonna pop up the firebase CLI so it's a really nice sort of user experience here now what we want to do is just go to hosting and press spacebar and not fire store or anything else because we've already set that up yeah I mean fine store so if you add this here what it's gonna do is it's gonna give you a filed it's to determine like security roles yeah so if you want to apply like security rules to your database that's where you could bring it in here but we can do that later if you want but I mean I haven't actually tinkered too much with the rules but god hosting is that is where we do it here so if you do hosting and then press Enter cool and then you just click on use existing project cool and we find the one that we have there mr. to-do app CP right yeah and then here this bits really careful guys you have to type in build yeah so this is a reacting so we all of our build stuff goes into your photo code build so yeah we do that and then here it's so react is a single page app which means all of the entire app loads in one go so here we want to click yes yes oh really oh yeah yes okay because by default it's a no so you can't just hit enter here yeah you would have to - yes yeah cool and then there we go so now what we need to do is run two commands one off to another so the first command is gonna be MPM run build so if you wanna run that one first and what that's gonna do guys is this basically gonna so one whenever we're coding react we have a bunch of extra stuff that happens right we have hot reloading we have all this extra stuff and that's basically gonna allow us to have a really nice developer experience so every time cause he saves the file it reloads and it refreshes so that way we can develop easier that stops quite heavy so we don't want those features when we deploy it right so what we do is we do NPM run build and basically it wanders up our entire app into a really really efficient tiny package yep right and then when it has that tiny tiny package then we deploy that tiny package so that goes into the build folder so now you can see on the Left we have a build folder and we don't touch the folder we don't really look into it but this is what gets generated this is what gets generated by NPM run build so once we have that now we do something called firebase deploy and what that's gonna do is it's going to basically go to our build folder find the contents and then deploy it oh nice the most simple deployment I've ever seen in my life Dan so now if you click on posting URL that's a live link guys that's a live link which is completely free what your guys jump on this app right now it's live so let's paste that into the comments let's see everyone get your side put this in the comments Frankie you can I can't okay else like you else like you here I got I got it so Frankie here I just liked you you can drop it in the chat for everybody and guys if you like this and find this cool throw a story on Instagram and tag us when you see everything flying through yeah it'd be awesome to see that oh yeah because we'll have everybody starting to write on here right yeah that would be insane right yeah we had a hold on we had a mark Johnson just enrolled in pwj nice sensi just enrolled in pwj oh we got people here now they're saying yo it's almost like a chat app right look at that we basically have a job to do out nice yeah awesome that's actually fast maybe we should have started to somebody said subscribe to clever programmer Sam says hey somebody says by the course alright maybe we should have started with this you know next time like have everybody start that would have been yeah yeah nice and guys this is showing you how powerful this is right now like there was no service setups there was no like headache and sort of intricate setting up it's literally a case of we just deployed it we had it connected to fire store and look at this everyone from around the world is all check it out so somebody that there's a react worth to trouble 100% 100% is worth learning is one of the most I think Kazi is one is the most highly demanded framework a lot yeah look at look at all these records that are coming in though yeah seriously guys this is like react is one of the hottest trends in the world right now it's one of the things that it's the most looked up and it blew my mind when I started building things with it myself and I I mean I'm really excited right now because I'm actually learning all these skills too about how to actually use react to host it on firebase to have a full crud functionality within your app it kind of blew my mind how simple this was because whether you use Python and Django or you use any other whatever you use making to-do list apps and all of this stuff you have to add so much tedious functionality to make it fully crud enabled even if it's like with the REST API and you have to have so many new routes and so much stuff and this is just single page because normally sunny what you have to do is like you got to create all these like different pages and then you got to have all these different endpoints like slash delete and slash create and this was exactly honestly the simplest one that I've ever seen yeah and guys its production ready so if you get a client who wants you to build a website your turnaround time here is ridiculously fast Wow like you can get this running very quick let's say like Kazi wants to update something in the webpage now and change it and fix it all he has to do is make the change npm run build and firebase deploy and the things done Wow that's fans in sane that is fantastic I mean I love that they're actually writing on here so how can we add the delete functionality yeah awesome so Abdullah said guys pose for the photo nice gonna give you five seconds five five four three two so now if we want to add a delete functionality so this is gonna take a little bit of work right really so I say that but it's actually not that much good so yeah now what we need to do is we need to remember we were doing it to a flat array here right yup so now what we want to do is we need that object so we actually we we need we can keep this structure but we need the ID right uh-huh because we need to know which document it is that we really ya know which document which ID to delete right yeah so here what we can do now is we can actually do so this is again we already understand what this bits doing so we kind of just need to create an object right so it's gonna be an object and here what we're gonna do is we're gonna say that object is gonna have a key with to do right and that's gonna have what we had previously right but it's also gonna have an ID and this ID is gonna be dock door ID so what we're doing here now is we're not just having the flat structure that we had before you have an object whether to do yes is what we had before but we also have the ID got it yep and and we're still gonna have array of objects right yes so now we're gonna do an array of objects but if we save this now it's going to break so it's going to break now because the it is passing through an object now in our component yep right so insan line 48 now we now this is now an object where we have to do to do and then we have to do the ID all right my bad so so if this once it starts running is actually going to break so Chad William says can you get a job after taking this course actually it's a really good question because a lot of people actually get jobs while they're on the course or they get clients while they're on the course right by the seventeen-year-old he's landed his own coaching client which is insane he's actually on the court - right yeah I'm an earth actually landed 180 dollars from a coaching call which is insane guys yeah yeah so you can definitely do that that's crazy yes so if you go back now cause you to you so it says to do you need to save this yep uh-huh okay save saved save and now it will error out so if we go back to our code it's going to what happens this is gonna freak out in a second and it's gonna say well you're passing an object object is not a child or some kind of crazy error is gonna pop up it's now yeah see like it's bugging out it's like fully are bugging out right yeah so as you see this objects are not valid as a reaction to this is happening because we're now passing an object so if we go back to the code apt yes line 48 so now to do is no longer a string right haha so to do is actually an entire to do so if we now if we pass in to do yeah yeah so if we go inside of our to do component also integer dot yes to do that Jace got it okay by the way I'm following you so I think if you go to it I'll go to it on Oh awesome so now you see where we have props here we had props text before now it's props dot to do yep dot that got to do remember that's what the key is right yep yep yep so this is like really like this is the text part and this is the to do object yes exactly okay and now what we're gonna do now is every single to do is gonna have a button on it right and this one is gonna say delete me yep right yeah and basically we're gonna have a function which is gonna be up here which is a say Const you don't actually even need a function but I will show you how we can write this but here we're gonna say Const and this one's gonna say delete you know what I'm going to show you how we can do this without even a function so we can do it in line so here what we're gonna say is we're gonna say unclick right unclick so let me click this button I'm gonna say yeah that makes it that's that's a really good way to do it on click like basically remove it yeah so unclick and then here what we're gonna do is we need we need a DB so we need to say import DB from firebase so you can say from firebase and guys remember this is our local firebase not the dependency firebase yeah all right so this is our PO that we created and then here we're gonna say DB drop collection thought to do as introduced and then we're gonna say delete and then delije is basically going to have I think here we literally do props dot to do dot oh no sorry sorry not that one we don't do that we say go to the doc with the ID so props to do the ID you go to that ID and then we just say delete and that's it that should literally do it I think that's a identifier expected this is because we have we need to wrap this inside of a print so break it here and then we do this that's wait why are there two squigglies because we were I think I think we didn't import the button that's why actually wait I don't what the hell so another so to get rid of these for a sec I'll show you I the reason why it's freaking out right now is because we haven't imported this so yeah there you go okay cool yeah so now we're just running the jump okay yeah there we go that makes a lot more sense we need to import the material you I yeah say I'm missing why don't you put a bin icon yeah that's what I want to do that's I just put like a X emoji but we're gonna put like an icon yeah and we're actually going to show you how you can use material UI icons which would be even don't let modo so let's refresh this and see what happens I'm refreshing you need to save apt yes cause otherwise it's not gonna yeah okay there we go and now we should have done everything right so it's gonna be to do and then to do don't to do yeah so okay so we're here yeah when I try to write it just kind of crashes oh oh all the delete Me's are right there yes oh you go woah it's actually deleting it I think it's deleting it yeah no it is deleting it so I tell you what cause if you put one window on the on the right for the firebase app and then you just keep hitting delete and have the react app on the left you should be able to see the actual database showing red lines where it deletes it AHA okay so now if I hit delete oh there are so large it might not be a case of yeah so if you just spam the delete one so yeah so you keep going to Lee and so it's gonna delete eventually to a point I think yeah it's gonna get to a point we're not gonna see it cuz there's so many things yeah yeah it's definitely doing it yeah is deleting it oh I saw it on the red you see the red I saw the red yeah so it is actually deleting it delete my message please nice nice right so that's actually honestly insane because from one line of code we literally just delete things and we did that by using the ID of the to do yeah right so yeah if we want to use the icons it's very simple and material UI they've got an icon packed so if you go into Google and just type in material UI icons so what you need to do is do an NPM I and then you need to install the package so when you go into that one you'll see you see that material UI icons so you need to the NPM I am here my two URI cons yeah nice and that will install of the icons and to actually use them it's super simple so now if we actually go back to that page that you're on and type in bin or delete so these guys are going what's up so if you go to material UI they're spamming this a lot so let's just shut it down is there a way we can undo it so under playing it so if you go to whoever yo just stop your spammy messages okay so if you're this up for everybody we're gonna ban you from the account you know from the YouTube account so if you're if you if you want to do that just don't be here please we want to just make a good environment for every single person but in the music I'm Frankie can you make can you make a few people admins and then just tell them like they have permission to kick anybody out that's actually causing a bad experience cuz somebody keeps spamming Ahamed ill and all this stuff so just kick a dil out as well and then anybody else was doing that because we just want the environment to be really really good you know exactly yeah okay go ahead go ahead yeah because we don't want it to be spam guys and we just want it to be a good good environment for everyone to sort of learn from is the difference between when you do something for free when you have paid like you never have this happen right so that's why in the program when you actually join profit with JavaScript it's a very clean community and we keep it very organized because if somebody does that yeah we will literally throw them out of the course on the same second so that's never gonna happen there's but that even goes for girls guys like a lot of girls actually you're in the course and there's people that say inappropriate things we don't tolerate anything so it's a completely safe comfortable environment for everyone to be a part of once you're inside the course right yeah yeah because I mean really we will fly to your house and kick in your door if you are acting like that around other people because people are above everything exactly yeah so now what we want to do is we installed the icon pack a Chad just joined a welcome to the program that's awesome okay cool Steve intros coaching cool yeah yeah you're you're doing your react coaching call tomorrow right Sonny yeah nice yeah okay app 7:00 p.m. PST that's it okay 7:00 so sure 7:00 p.m. PST isn't that late or is a 12 p.m. I think is 12 p.m. est so your time is 12 p.m. you 11 a.m. I think okay okay got it got it 11:00 yeah Pacific got it and 7 p.m. your time yep that's it so if we let's go to material UI on the website uh-huh let's click on so material UI yep the docks and then you see where was the icon 1 so you see a right tab the one on the most right you got meteor UI yeah so you click on another so at the top tab so you've got a tab open material icons material ok right here yeah so you see search icon so this is like a little search drawl right so if you click it if you type in bin to lead it forever so that's a good one yeah so now you see it's gonna import that right ooh clean so clean guys like it's crazy I'll clean this is so now you go into the to do Jas that's all right so it wouldn't be here would be inside of the to do yeah you'd put inside it to do jazz and then here you wanna do import and then you want to chuck it and - yep what was that shortcut that you showed me that switches between recent files yeah come on P yeah command P and then what you just let go of it let go of what come on P so you press come on P P twice so press con PP yeah oh that's it they go nice yeah this is awesome like I always switch between two recent files oh that's really sick that's quite handy for being fast so now all we need to do is type in literally so we're delete forever icon if you just replace button so you see where you've got button yep so you don't even need to do that honestly you could just you see if you if you highlight a button yeah do that and then literally make button self enclosing so you don't have any text for the button so we can get rid of all the text and all of the right stuff oh nice so make it a self enclosing attribute so oh so like okay so you mean like basically do whoops do something along the lines of that so is that what you mean yeah exactly yeah okay yep cool and is it is it easy to underplay the app or no yeah I think it is quite simple if you go to the firebase console we can we should be able to see there I think there is a way to do that yeah or we could just deploy a dead version of it so it stops there so if you go to on the left and you go to hosting so hosting you know hosting right here yeah you see one of the deployments of that so oh you need to go back to hosting so yeah that one and then it will refresh and now you see you've deployed it the bomb but if you go to so the three arrows the three dots are three dots see on the way it says epic Kazi a clever programmer calm uh-huh then you go like that and then let's see so really storage things so now what I think we'll do instead is pretty much have it so well I mean what we could do is we could actually deploy a bugged out version so we'll do that quickly to stop everyone sort of spamming it okay yeah yeah so if you let's just quickly do this so we'll basically have it so I will disable the form and all of this so in a projects I've just disabled the form so I pretty much like just commented it all out yeah and then I'm gonna do so you need to do it in the in the terminal okay you just need to do NPM run build so if you do ampere mumbled and and uh-huh firebase deploy yeah now this would it will rebuild and deploy until shortcut this guy is a really handy trick is if you go package Jason now cause it yeah and then you see in package Jason on the left so on that the file the package.json file yep yeah so that command those two commands what we can do is we can actually combine it and make a command here called deploy nice nice nice nice oh yeah and then do you have to install also react scripts or do we already have that I know it automatically does that when you use creator yeah the reason why we don't want to put a lock on databases cuz we still want to use it you we still want to use the database yeah but like the online version is gonna be bugged out now so nobody will be able to use that but the actual version will be fine I mean I've got an idea like maybe in the future what we can do is like deploy it in a way where anybody who comments anything that's like bad then it can kind of just filter that you know it just has like natural language processing I'm sure there's probably just a really easy way to add a filter we should do that actually you know we should we should have a a cloud function which runs every time somebody brings a message in yeah check if it's uh that's a that's a good use case because literally we need that yeah that'd be awesome we should definitely build that yeah who did that I'll be nice awesome so now if you wanted to run that call you the NPM run deploy and it would do that but it's all ready to play the thing is is that some people have a cached version oh it only be internet refresh they actually does I assume but yeah but I should should fix it mainly okay change now or else yeah exactly cool so I think what we'll be doing now let's go to your localhost yep okay so NPM stop mm-hmm did we install react scripts or did it already come with it it automatically comes with it when we do NPM I thought when we use create react up it automatically sets everything up okay yeah oh I need to uncomment this there we go so if you saved that phone Oh so we're save app to jet uh-huh yep and then come back so now yes you see that no delete icon yep nice nice if I click it it goes away Oh clean yeah so you can add some CSS rules around it which changes it to a point uh which is kind of cool so that way it looks a bit more interactive and you can have it so they like it gets a little bigger and you so hover over I mean the main main thing right now the only big thing that's left from this is to be able to edit an existing to do okay so editing an existing to do is more but I'm actually sure let's figure out that one so we would need to either do a modal yeah or something like that would pops up yeah I can do something like that or we could do a [Music] wanna see me let me have local material you either see what models they have material you I am model there's a few ways you could do this one okay so let's have a look so modal simple model okay yeah so let's use this as an example so we're gonna have a button on D to do yeah so if we go to our to do component let's okay hold on or to do component yep yeah so every component is gonna basically have a module attached to it right so it's gonna have a nice you're not just joint that's awesome welcome Jana nice welcome awesome so now what we're gonna do is we're gonna have a modal so let's just have so you you can't ever have two things next siblings you have to wrap it in something called a rack fragment uh-huh you see like to zoom in so what I'm gonna do is have a modal outside so you see this see what modal and then what we're gonna do is this is just code from material you are guys and what this is gonna say is this is gonna be a piece of state which basically tells us if the modal's open or not and this is gonna be a function which is basically gonna handle what happens when you open the model so I will get the code for that here so if I do this now and I have it here so handle open handle closed and then I do Const so we need to keep track of what open is right so we need a piece of state mm-hmm so you stay and then this is gonna be by default it's gonna be false because it's not going to be open right yeah so handle open handle closed so right now this just makes it a bit simpler because we just call that to open it we call that to close there nice its ability you could just do it like this you could just literally do on closed e set open to be closed and then we don't need this pair code okay great and then open with the same thing yeah yeah and the same so we want it to open this is the thing way we want it to open when they click and edit button so when they click a button so right now we just have a simple button right edit me so idea and then here we're gonna have on okay lay thank you war war p9p and t9 that's life he's in profitable shortcut program thank you by the way so yeah he's really good nice yeah here we have set open to be true so that way we want that modal basically just to pop up when the person clicks it right yeah so then we're gonna have simple modal was a simple modal it's a good one second I'm just trying to find the code for it so bully okay so now I just want to test this so I want to say let's just have a div inside of here and it's just cool like an h1 saying open and then we're gonna have a we're gonna have here a button which when you click that button it's just gonna say on click it's gonna close it for us so I'm gonna say on click II set open to be false so now we've got a button inside of our modal because this is the body of the modal right it pops up yeah I'm a modal not a model oh yeah and then here on close so now if we actually run this so we save this and run this okay save it oh we need to do the imports yeah we need to the imports so you stay we need to import it here so model and then where's you also date you state it's it's up it's already there just that I think yeah you know the modal model is here too now nice so now if we run them so another thing I didn't fancy I know right oh boy look at that modal I mean it's popping up so I'm pumped I can I'm gonna click out of it it goes away yeah awesome right so obviously we can style it we can make it look really pretty right now it's quite ugly but we can make it look really nice afterwards yeah so no we want to do is we need it shouldn't it look somewhat normal it's coming out of material UI right yeah because we're not actually using so they have something called modal style so if we implement that so I will send you a link for the if you just go to google and type in material UI modal you'll see where I'm at uh-huh yep and there you go so that's where I'm at now so I was just looking at some example code so I was like eh you see where it says toggle the code snippet okay modal right there editing code sandbox by the way code sandbox is freaking awesome you guys yes that's a really good way of playing around with this yeah actually by the way sunny maybe in the future we should be really using code sandbox to do this type of stuff cuz then that would be cool literally everybody could follow us along that's true yeah that's very true is it read-only can we do like a read on anything well they can't write on our thing like they would have to fork it oh nice okay yeah that's really good the same update in real time like if I was to come to yours oh yeah I mean for us I think it would be updating in real time and then for them it would just be like if they want to change the write the code they won't have access to write the code they would have to fork it or something that would be awesome yeah we should definitely do our next time yeah yeah cuz then I guess then people won't have to suffer this of stying up headache you know follow us along as we're building it exactly okay let's just see where they've get the styles from now so you can see in if you go to show the source of that code so that it over here in its package okay so you see here yeah so you see the motor right styles right here and it says yeah and inside of the modal so on at the bottom do you see where the modem on the screen holy yeah it's crazy right what is this recursive models great and they all like nested correctly as well which is crazy so now if you go to the bomb uh-huh so you see the body right that little body object on line 45 yep that's rendered in line 66 inside of the modal right uh-huh and if you see on the body so 46 to 52 right they say div style equals modal style and class name equals classic paper right yeah so modal style is using something called if you follow the code up it goes up and it gets modal style which is a bunch of random stuff so we're gonna ignore the get modal stuffs we're gonna ignore modal stuff now we're gonna get class name that's the one we're interested in yeah right so they use something they've got a hook called use styles so if you scroll up yeah so we're basically gonna implement that so in order to do we need to do yeah we need to basically add that so at the top above our function yep there you go and here we need to basically inside here we do Const classes equals use styles I think that's it and then here I think we have to import that I don't know what the import was was it so it's important we'll make the code available for this later I just I think like aren't we gonna have problems with sharing api's yeah I mean I'm not sure if they cuts off after a certain time so what we could do you guys is we'll actually upload the code I mean how will we give it to them that's the thing so what we'll do is we'll upload it in a public repo but on the config part all you need to do is sell a firebase like for set of fibers yourself and then on the config part you just need to basically where we got the key so that config stuff you just copy and paste your one inside of there so so what we'll do is after this video is done in the description underneath the video we will put the link to the code and then you can go there so if you're watching this right now as a replay you can like in the description it'll be there and then you can just like get the code from there exactly yeah yeah so at the top I just imported make styles uh-huh yeah so I just imported mix tiles at the top yeah and then we use that in this line of code here yeah and then so that's a hook and this is basically how you style things in material UI guys so that's actually the documentation which is told us to do that if we then save this and we run it if we should now have the styles that we saw roughly roughly I mean it may be full screen but it will roughly work okay there okay so I think maybe one second is it saved correctly let me see I'll go to app just save is there like anything else I have to save besides to do an app oh we didn't have the classes so the actual modal has no Constitution at the moment so you see the body right now yeah yeah yeah you need to do classes that paper right yeah there we go yeah there we go this oh nice there we go that's clean nice okay now what we're gonna do is we are going to hook up the actual logic for this so right now the buns empty guys because we have no text in it so if I say update update to do and this is gonna be not a normal button but a material UI bun so we're gonna say button I'm gonna import that from the top yes we already imported that so now we've got the material UI button but remember guys when we click update to do we don't just want it to do this right we don't want to just close the modal we actually want to execute an update function right yeah so this create a function we're gonna call this update to do all right and what this is gonna do now is it's gonna basically do this so it will set this open to false so we'll do that but we're also going to do a bunch of stuff is when I say update the to do so update the to do yep with oops with the new input text right yeah which means that we also need the input text here well we need an input field right we need some kind of input here yeah yeah so what we're gonna do now is remember before what we done is we previously had we needed to do there's a few steps that we need to do to get this right so if we scroll up to 922 the first step was we prepare a piece of state so remember I was input set its input set input and then we basically start this off with a blank string right then we go down to line 42 and we basically say the value is input and remember what this this did at this point was it locked the input yeah remember because it's constantly assigned to that blank value that we initialized it with rightly right then what we need to do is do an unchanged so every single time you type if fires off an event and then what we're doing is we're setting the inverted a event to be the event or I get that value yes exactly value and now that pieces leaning about here I think that's just it's bugging out but it's not actually a bug like that should work yeah okay yeah sometimes it gets a little slow on like the learning but there we go so you have an event and what that's gonna do is it's gonna update the inputs and now we have the input over here right the outside of the update to do function in line 31 got it okay yeah so we need access to our DB which we've already done we've already put in so we're gonna say DB doc collection - duze yeah now because we're inside about to do we already have the ID pastor as a prompt so we're gonna say to do da know so sorry props dot to do dot ID yeah right so that's how we did the delete before right and then before remember we did like a delete here right so the way you update things in firestore is you say set yeah and you pass in whatever you want to pass in but you have to include an option here so afterwards there's a second parameter here yeah and they see in and basically it's an option and what you need to say is merge true what this starts here is it prevents you from overwriting what was already in there so say for example if I was to write like a ah 3 it's not gonna update the to do it's not gonna remove the to do key is just gonna like add the key a like appended essentially okay exactly and then if it found the key that match they would update yeah okay so like for some reason if you wanted to add like a time just all you want to update the timestamp of it and not that to do in this case what it would do is like remove the to do but then you do merge true then it will actually just append the time stamp to the to do exactly and that's a really good point you mentioned time stamp because here when we update it we not truly want it to pop to the top what happens another question is what happens if I see what you're saying so you want to update the timestamp of the updated right yeah but I think for now we'll leave it so we can see it in the rows so if you use the same key of to do then it will just update to do right yeah exactly okay okay say for example I didn't have this and I used to do it will do this but then it will get rid of any other fields that are in there uh-huh okay so to do a what input yeah right and then what we need to do is so that actually does it right so that's going to update the the field and then we've set over then we close the modal but isn't input go ahead go ahead no just I say one more thing is you know the input initially right we actually wanted what we can do is because we already have the prop which is the to do text right we could actually do something like this we could say props door actually I will leave that for now we'll leave that for now but what we could do is we could say input value we'll try it we can try it winter week it is because a props door to do what to do I don't know if that will work but we can see if it were I will try it you know so what that's gonna do is the initial value of the input would be the today's value yeah all right yeah well actually no no bear yeah what we'll do instead we'll leave this blank we'll go down to our import on 947 uh-huh and we'll set the placeholder we'll say a placeholder to be prop start to do yeah thought to do and now what this will do is so when we run the code SAVE we save this and run it this would be really nice now so if we click edit you see it gave us the placeholder as the initial value now and we were ready to do perfect that's all good and then you see okay so that was interesting so the reason why but if you was to refresh now so go back to that if you refresh yeah so delete this thing he's saying bad things so it didn't actually do it as we wanted it to do so did you click on oh okay yeah we don't actually even fire off update to do oops yeah yeah so right now we just closed so update to do we need to connect to our code on line 48 yep there that's why it wasn't very off yes we need to save that and then it should do it now yeah whoo clean line all right oh look at that nice okay I like that and you can do the whole wrapping it in a form and everything like that to get the inter functionality okay got it that's awesome you know so crazy right so now we have full crud functionality yeah essentially at this point we got full crud functionality and basically what what do we have we have a full I mean actually we can even write this down because I think it's nice to see it in writing but essentially what we have done up until now is we have a firebase and this is also our database right yep the base is our database onions are hosting yep it's hosted online yeah okay what other things do you have so it has what that we have full UI functionality yo material UI for the designs material UI for the design yeah we have so that's top of that we have own controls we have material for designs so in I think use react and then react has a bunch of side like underneath points so we actually used react hooks okay so under react we can basically go so react looks we used yeah underneath folk so underneath it's full underneath firebase we can have a real-time database yeah so real-time database so and the crazy thing is guys I don't think you want to sound like we're building a real-time database is actually harder than you think if you do it the traditional way you have to have WebSockets you have to have like yeah usually you'd use something called socket die oh yeah and you'd have to set up like a two-way sync between your back-end and front-end yeah and you have to kind of maintain what's going on with I mean even right now I feel like it's so hard for us even we're hosting our data warehouse on redshift right and we're using what is Postgres the databases on Postgres and like I'm having so much trouble figuring out how to have a two-way sync so I can like update it from other places and there's no easy way at all yeah just so that people for people who don't know John I explained what redshift is and what Postgres is right so redshift is basically an Amazon Web service Amazon has you know Amazon this is called Amazon Web Services and yeah they have something called redshift and this is essentially a Postgres database when I say a database just imagine a giant excel sheet like that can hold you know insane amount of data like for example and when I try to upload like a 10 megabyte file to my excel sheet or a Google sheet it crashed so when you need something bigger than that with more functionality you're probably gonna be looking for a real database you know and so Postgres allows you to have like petabytes of data you know Walmart is hosted on redshift exactly yeah so that's and then it allows you to do a lot of things like add things delete things edit things you know the basic functionality that you would expect from database exactly and just to mention there Postgres is a sequel database what we what we just used now is more closer to something could and no sequel database well what fire store did right so firebase initially had something called the real time database and you guys might accidentally use this instead that's a no sequel database which is essentially a Jason tree it's just a massive jason tree whereas the sequel database has a lot of structure to it right yeah fire store was sort of and they realized that a no sequel database wasn't as powerful as a sequel database why is it has built a custom yeah why is that why is a sequel database not as power or a no sequel is not as powerful as sequel database so think about it this way in a sequel database because there's so much structure right you have tables you have all these things you can perform quite complicated queries and you can join tables and you can do a bunch of indexing right yeah now in a know sequel database because you essentially just have a Jason tree yeah there's no clear way to index or search which makes searching for things really inefficient yeah so what they did by it was they combined the two and they basically came up with the would not really combine the two but they they enhanced a no sequel database with this collection document collection document approach which allows you to have all of the benefits of no sequel uh-huh but you can also have really complicated indexing so you can search for things you can do order by you can do all of these nice and it works and yeah it's really really it's really proud because I actually use then the no sequel database before I use firestorm so you try to join if you try to join the tables on like two different things that and they don't exist like because you know you know yeah what happens there so there's a completely different architectural mindset when you think of a sequel database compared to like a no sequel yeah a no sequel you are completely responsible for how you build it write a sequel database you pretty much have and also tier access sir I have one question yeah shoot your questions will answer them Norris so sequel database you have very clear structure you have primary keys and tables you have foreign keys which link to other tables there's a very clear definition of how should be laid out right yeah in no sequel there is no structure there is actually a case of what is good practice what is bad practice so let's say in sequel databases you do something called normalization right normalization is basically removing all of the repeated data right so you don't want to have repeated date or in a sequel database however when you have a no sequel database yeah it's actually weirdly good practice to sometimes have let's say we had a collection of users yeah and we had like users and their information inside of each document now let's say we have the collection of messages right yeah in every single message we could literally have the users ID inside of the messages to correspond to the user right now you could also do it the other way so inside of all of the users you would have another collection with the message IDs so at this point you have two places where you've got repeated information yeah but because of the way that a no sequel database works that works better do you see what I mean I see if there's a much bigger architectural decision when you when you use a no sequel database but honestly guys when you're starting off it's a case of you run into these problems naturally so it's not a thing that you need to really like kind of worry about like a 4-man and everything okay awesome so what else is left for what we're doing right now so I guess like the styling of the app is is something which we could mess around with but otherwise functionality-wise function I think we have a yeah we have a complete built firebase app awesome primers react up it has full credit for a material UI it's using the latest es6 standards with react hooks yeah and it clearly demonstrates how easy is to deploy how easy is to get up and running and guys this is completely free so if you want to have this and build this I highly recommend you build it add it to a personal portfolio which is also hosted on firebase and then you pretty much have something to add to your CV which you can use and this is really impressive guys if you show up to a job interview with this there we'll be impressed they will be like wow this the because this is quite cutting-edge stuff right like cozy when when I first sort of introduced you to fire basin and react well I was your initial reaction I was really I mean my initial reaction was like I didn't want to learn react I'm like managed can we just do this with Python and once I started getting into react and I started picking up things it really blew my mind especially just because once I learned about components and how their work the development is so clean and then my apps are so fast and then you know adding like the fire base on top of it I mean and everything just happens in real time dad is freaking mind-blowing yeah that's and once you really see that for the first time especially once we deploy and everyone sort of using it that's usually the sort of like WoW moment everyone sort of realizes that's really where it clicks as to how powerful is with so little code which is amazing of topic but it's half past 4:00 in the morning 4:30 in the morning where she is at and she's like I'm currently watching this no regrets that was nice yeah that's awesome so guys at this point what I would say is like look the app is ready to build on your you have an app that completely works it's bill would react firebase is material UI you can improve it and you can build things on top of this if you want to you could take it really to the next level but I think and we're gonna wrap up this tutorial right yeah I think so okay so what we're gonna do is we're gonna wrap this tutorial up and what I recommend you guys do at this point is if you got value out of this and you thought that this was awesome wait till you actually join the profit with JavaScript course because in that in that program we go deep like you get all the 15 modules you get all of the training I mean maybe I can even show it on the screen yeah that'd be awesome other okay cool so let me go ahead and share that with you guys so this is the profit JavaScript course you guys you know this fourth of July sale is coming to an end in ten hour some would recommend you check that out but you know go ahead check this program out some of the things that arm makes it different from any other program is really like the fact that you have success coaches that are with you so Sonny like can you tell me a little bit about the success coaches part yeah so success coaches are really where I personally feel like your development your like progression as a developer excels because a success coach is somebody who's gonna give you one-to-one personalized video feedback for every single assignment you do guys so every single time you attend let's say a live coaching call and we set some homework when you submit that homework it's not an automated system it's actually somebody checking your code and giving you one-to-one personalized video feedback and that's gonna help you become such a better developer because they're gonna recommend what the latest standards are if you what you did well what could be improved you're gonna have all of that one-to-one to of communication and feedback and not only that the energy between the successes success coaches in the community is amazing so you constantly have an army of success coaches to ask for help support and not only that guys you have me Kazi nas all the people on all the coaches on the course you constantly just start a message there's no like hierarchy you can pretty much message anyone whenever you

Channel: Clever Programmer

Views: 226,608

Rating: 4.936522 out of 5

Keywords: clever programmer, clever programmer python, python, python developer, clever qazi

Id: VqgTr-nd7Cg

Length: 179min 26sec (10766 seconds)

Published: Mon Jul 06 2020