Build a FULLSTACK app with React, Express, Node & Mongo MERN STACK

what is going on fellow web developers my name is tyler potts and in today's video we're going to be creating a full stack to do list application using react.js and node.js uh what's going to be using db sr database and express as our surfer um framework for example so here we're going to have um as you can see a simple react application that is connected up to an api we're going to create in a node express environment and here you can see we've got this so we can tick these and if i let's say refresh the page completely refresh it you know it's it's saved it's not saved to local storage it's saved to our database whatever we do here um we'll change you can see create youtube for your tick subscribe to our parts called tick this cool let's say we you know we actually don't want mindset let's just close that we can delete it and if we refresh you can see it's all still the same we can add a new task so the new task is going to be um entertain the viewers boom click create task and there you go as you can see we have now entertained the fewer so we're gonna take that off and that actually has refreshed it's still the same so guys without further ado let's get started but before we do i just want to say there's a couple of pre-requisites for this tutorial you're going to need to know half node npm installed and also mongodb now if you don't have these there is tutorials on my channel um under a node.js um name i do it pretty so often installing this stuff and show you guys how to do it so go check out one of the older videos on how to install that or just google it it'll probably come up it'll be straightforward you just install it and bam there you go so guys without further ado let's get started [Music] [Music] bye okay guys as you can see here we've just got vs code opened up in a new directory and i'm going to create two new directories or folders within this directory the first one is going to be called api and the second is actually going to be generated using the command line now as i said you need mpm slash node installed for this so what we're going to do so i'm going to press control and my at symbol slash single quote that's what we call it um and in here i'm going to run mpx create react app just gonna close the sidebar so i can actually read that and then i'm gonna call it client and what this is gonna do it's gonna create a new folder called client inside my youtube directory and it's going to basically set up a bunch of files so while that is doing i'm going to open a new thing and we're going to cd into api um now inside of api i'm just going to clear in here uh what i'm going to do is i'm going to npm init and it's going to basically initialize an app so it says api we can just call this uh learn to do api hit enter first number sure none of this really matters uh put your own name here if you want do whatever license bam yes cool done so as you can see if we go to our thing and we drop down api we have a package.json now we need to install some dependencies so what i'm going to do let me just shrink this down um is over here i'm going to run um npm install or you can just do i for shorthand and i'm gonna run express because we're gonna need express js um we're gonna need mongoose which is gonna be our mongodb orm so it's gonna handle our relationship with our database and then i'm going to call course because we don't want to have any course errors let's just there you go oh it's 1s25 there we go there you go now you can see everybody so we have express mongoose and course now what i'm going to do is i'm going to hit enter and that is going to install those um for us so while that's installing inside for ap i'm gonna create a new file and this is gonna be called surfer.js now inside of here let's just close that one that's doing inside of here what is this why are you popped up go away close um inside of here what we're gonna do is we're gonna say const express is equal to require express and now this is what we're going to use to basically handle our api we're then going to get mongoose which is going to be equal to require mongoose as you can see there it's going to handle our database we're then going to finally get course and we're going to set that equal to require course and that's gonna get our course well it's basically gonna allow us to do this so we're gonna say const app so we're gonna create a express application here uh by doing express as a function we're then going to say app dot use and we're going to say express.json so it's going to allow us to use um content type of application json inside of our api and then we're gonna say app.use and we're gonna say cause now this is gonna stop any um cross-origin errors we actually get so that's gonna protect us from that now once we've got that we actually need to go back to our terminal and as you can see the api is done so we can clear that um let's have a look it's reactive nope that's still going this is taking a long time reacts it definitely is taking long it's fine we don't need it yet cool let's close this sidebar and now inside of here what i want to do is we're going to first we're going to npm install hype excuse me what are you doing all right that's being weird let's click back in there let's delete this and reopen it because for some reason it's been extremely weird hopefully this is working still it looks like it's good so let's just go in here a new one less cd back into api and clear and hopefully now we can actually uh type in without having any issues so we say npm i hyphen d which stands for development dependencies and we're going to say something called nodemon now if we hit enter this is going to basically install nodemon and nodemon will allow us to run a surface so if we go to our package.json under script we can delete the test we do not need it inside of here though we're going to run start now the start command will allow us to create well we're going to say nodemon and then we're going to say surfer.js now this is going to start a surfer which will automatically refresh every single time our surfer.js file updates and as you can see our dependencies and our def dependencies are right here so let's clear that and there you go so that's now installed now we need to have installed so i actually do this open so if i type in here and hit enter it's not actually going to work because i can't actually do it inside of powershell i actually have to do it with git bash so here we go now if i type you can see it's now signing into and you can see i have this connecting to string here and this is it here we need this string now i'm going to copy this i'm just going to x out of this with ctrl c i'm just going to exit this i don't actually need that terminal and just yeah there you go gone now what we're gonna do is i'm gonna say mongoose.connect and we're gonna pass through our um string here but then we're gonna give it a name so it's gonna be our database name so i'm gonna call this merm to do and then we're going to pass through a couple of parameters now the first parameter is going to be called use new url parser i'm going to set that to true now the second one is going to be use unified topology which is going to be true now i don't know what this does but if you do not have these it will shout at you and moan at you like there is no tomorrow so we're going to do a dot then and we're just going to console log we're just going to say inside console log connected to db it's just going to stand for database and then we're going to catch any errors and we're just going to say console dot error so if that if there's an error it will log it for us let's break this down and that down there and let's bring them out one just so it matches uh and let's close that side there you go so that's now set up there then we need to actually go down to the bottom we see you say app.listen and we're going to listen on the port 3001. so now if we we can also pass through a um callback here so we're just going to do an arrow function that says console.log and we can just to make sure it's working we say surfer started on port 3001. it's safe now we can open up our terminal and run npm start hit enter and as you can see it says here surface started on port 3001 connected to database that means it's all worked successfully and we're now set up now we're going to need to basically create a model now a model um essentially so let's create a new photo and call call this models a model is how your database structure should be created so in here we'll create a new file it's going to be called to do.js and then in here we're gonna say const mongoose is equal to require mongoose and then we're gonna say const schema is equal to mongoose dot schema just like that oh and semicolon then once we've got that we can create a new to do schema i'm gonna set that equal to schema just like that we can actually say new schema because we want it to be a new one we pass through an object and this is going to have a bunch of different elements so we're going to need a text element we're also going to need a complete element this will tell us if it's complete or not and finally we're going to have a timestamp now we're not actually going to use timestamp but i just want to show you because you could add this and then you can filter sort or use the timestamp later on now in here we actually need to pass through an object to each one of these we need to pass through a type and this one's going to be string and we need to say if it's required or not so here it's going to be required true now inside of complete we want to say type and we're going to say equal to boolean which stands for true or false and the default value for this will be equal to false so when you first create a to do or store 82 in the schema it's going to set the complete value to false unless you specify otherwise now the final one is stamp which is going to be equal to a string but it's going to have another default value of date dot now which is going to get the current time string and store it inside of that so every time we create a new to-do it will store the current time so that's now working it's looking good now let's go to const to do is equal to mongoose dot model now this is where we actually create the model so we've got our schema but we actually need to give it a name and give it a schema so the name is going to be to do and the actual schema we need to pass through is going to be to do schema just like that then we're going to say module dot exports is equal to to do and basically if we go into our server we can now import that model and use it inside of our application so what we want to do is just say um const to do is equal to require and we'll say dot slash to get our current root models forward slash to do just like that you don't need to put dot js at the end because it will automatically know to grab the dot js now under here we can actually get started for our first route now we're going to want to list out our to-do's so what we're going to do is we're going to say app dot get now this is going to create us a get root which is going to be forward slash to-do's i'm then going to make this asynchronous and i'm going to get a request and a response and we're going to do something inside of here so inside of here we're going to say comms to do's it's equal to await to do dot find and then we're just going to rest dot json and we're just going to pass through the to do's so let me explain what happens here so if we make a request to localhost 3001 forward slash to do's it's going to find our to-do's here we're going to find it using our model which connected to our mongoose database and it will find all of the to do's we need and then it's going to pass them back to this file here the reason we're using async and wait is because it's an asynchronous function you can then go and say then and do it that way but using this way is a lot cleaner and works a lot better so here we go we now get rest.json to do's which will store our to-do's in there now if we made a request to this now i'm going to show you an extension i'm currently using um it is called if i can find it here uh rest climb here by who chao mao i'm sorry i butchered your name um huge ammo and what it allows you to do is make request server site or client side requests to our api here now if we go up here and we create inside of api we can create a new file and call it uh requests.rest and inside of here we could just say something like get http localhost 3001 forward slash to do's now if we save this and we hit let's close this side bit and click send request you'll see it's going to make a request it was 200 okay which means it was successful it's powered by express it was jason the content type was application json and it returned to us an empty array which you might think oh it hasn't worked but actually in fact it has worked because an empty array is exactly what we expect because we currently do not have any to-do's so we can close the dot to do and inside of our server here you can see we get app.todos now we need to actually create a new one so what we're going to say is app dot get forward slash to do's or to do slash new now in here we're going to create some new to do's so what we're going to do is just a request and a response we're going to set equal to a arrow function and in here we're going to say const to do it's going to be equal to our new to do and we're going to say new to do and this is going to create us a new to do inside of our um to do table in our mind to do mongodb database or not table collection and then in here we need to pass through text because text is the only required field this is the only one we actually need to pass through so we can say request dot body dot text so what request dot body does is it anything we pass through in our request eg the body of the request we can get in here and we're going to get a tech we're going to send through a dot text or just a text through our body here to store it now under here we could do to do dot save and what to do dot saved us you can guess it it saves the to-do to our actual collection we're then going to say rest.json to do and that's going to pass us back our new to-do so we can add it to our list so that should now work so let's give it a go so in our requests we're going to create we're going to use free hashtags and that's going to basically allow us to create a new request and this time it's going to be a post so over here i've put get i actually need to put post that was actually a mistake it needs to be app.post and we can say post http forward slash localhost 3001 forward slash to do slash new now under there we're going to pass through the content type so we're going to say content type and let's just say it's going to be application json and that's all we need then under here we can pass through the body which can be equal to text and then here let's just say um get the milk get milk get bread get the bread get the bread we're going to hit save and now if we make this request you can see it's come back for a status of 200 which is good it means it's worked and it's come back with a new thing a new document here so this showing our id so this is the id that is saved inside of our database um this is the text the timestamp we asked for and also the completion the completed status of false now if we make another request to our forward slash to-do's you'll see we now get an array with one item in called um get the bread so if we now go back to our text here let's create another one let's call it um order pizza because who doesn't love order and pizza click send you can see it's now added and now we make enough requests to four slash to do so you can see we now have two items inside of our array so that's just going to keep adding and then in our front end client once we get around to making it will allow us to actually store it so that's that route we then need to be able to delete a route so we're going to say app dot delete it's going to be equal to slash to do slash delete forward slash id now using a colon a name so this could be anything this could be name this could be literally anything this is called a url parameter and in here this is going to be a dynamic piece of data we're going to pass through inside of the url which i'll explain to you in a minute let's say request um response what's going to do asynchronous here because we're going to need to make a asynchronous request and inside of here we're just going to say const result is equal to await to do dot find by id and delete now this is a function built into mongoose that allows us to find an item by its id and just delete it there and then so all we have to do is say request dot params dot id now this is gonna be whatever we've called it here so if we name this um unique identifier like that we would have to name this unique identifier we're not going to do that because that is way too long and we're just going to call it id for identity um and there you go we're then just going to do that and now this gonna basically all we're gonna do is say rest.json and we're just gonna say result now we don't actually need the bits there but there you go so now we're just gonna pass back the result and that should now um pass back saying so let's go have a look if this works in our request we're going to create a new request we're going to call it delete and we're going to say http localhost forward slash to do forward slash delete and now we need to pass through an id but to get the id we need to actually send a request to our to-do's and let's say we no longer want to order pizza our pizza's been here it's been done you know we don't anymore so we're going to copy this id and all i'm going to do is paste that id at the end of our url like this and you know what we do after that we hit send request surface isn't running or proxy firewall is missing what did i do wrong i'm not sure let's have a look so let's go back to our request let's actually have a look at the surface running ah something's not working because here you can see it says restart your changes but it hasn't well you know let's just quit npm start and there you go that seems to be working delete to do delete id oh we missed out the port number of three thousand one so this was all working it was just a port number that's fine let's send request and there you go it says okay and it passes back the id the to do we deleted so what we'll do is go to our seven request and you're gonna see we now only have one item in here which is to get the bread order the pizza has been deleted so they are free of our items now we have one more we actually need to do for this app and it's gonna be app dot put and we're gonna say slash to do slash complete slash id now what this is gonna do it's gonna toggle deleting our um our not deleted it's going to toggle completing our to-do so when we toggle complete like click it didn't go works it's actually turned off it will then turn its status to complete which will work perfectly for us so in here we just want to say const to do is equal to await to do dot find by id and we're going to find the request.params dot id like we did before but this time we're not going to delete it we're just going to find it and store it in our to-do but i'm going to say to do dot complete is equal to not to do dot complete so we're just going to reverse wait so if it was completed then we're going to make it not completed if it if it's false it's going to be true if it's true it's going to be false so we're just going to flip the value but i'm going to say to do dot save and that's going to save it back to our database and then all we want to do is say rest.json to do and that's going to pass back our to-do with the new updated completion method here so all we want to do is go back to our requests and we're going to create a new request again so i'm going to do the dish i'm going to say put http localhost 3001 do not forget that to do slash complete and then we need to get the id so let's make a request to to do's and we're going to complete our get the bread task so i'm going to pass that and then i'm going to hit send request and there you go because it says now complex uh complete true if we send it again you can see it says false and we just keep sending this and changing the complete status so we're going to leave that false for now but there you go that is now all four um api we need apis we need um to actually create this to-do app on the right here so let's go into let's see if our react has now been done so under here you can see it's now done so we can actually cd into client it's being weird again let's just clear cd into client and then once we're in client we can just run npm start but we're not going to do that just yet we'll do that in a second so we can close down our server now and this and our surfer should be still running so you can see leave that running in the background now inside of our api we can drop this and now inside of our client you can see we've got a bunch of new files so these are the react boilerplate files from create react app now we're going to delete a few of these we're going to delete the app.css literally the app.test.js will delete the logo.svg report web files and also setup test now we're going to go into index.js we're going to remove the report web files we're going to remove this and we're just going to hit save and then we're going to close the index.js now inside of our index.css we're just going to delete everything for now and delete that again close that and now finally inside of our app dot js we're going to delete everything from in there and then everything from inside the app we're going to highlight this detect tabs i'm going to say convert to tabs and then indent using spaces off um four just to make it a bit more cleaner on our end now there's a few things we're going to need inside this app now the first one let's actually well first off let's actually start off by making the the app look alike so we'll say welcome tyler just like that with a h1 then under that we're going to have a h4 which is just going to say your tasks just like that we're then going to have a to do's element inside of here so we're just going to sort this markup quickly which is going to have a singular to do the to-do will have a check box it will also have a text element which let's say again the bread and then let's also shut this side bit here and then finally we're going to have a delete to do element which is just going to have an x in it for now so that's good so let's go to our terminal let's go to our react folder and let's just run npm start and that's going to start our react application in development mode so it's going to start a development surfer as you can see it's now loading on the right here and you can see here you go this is what we get to start with it's not that pretty let's create a couple of to-do's just so we have multiple of them um and let's just say instead of get the bread get the milk gotta get the milk and we're also gonna set this to is complete so it's complete will basically mean this has been done and this one is not so there you go that's what we've got set up with currently let's go into our series and just give this some styling so we can actually so it actually looks nice you know we don't want it looking too boring too plain so what i'm going to do is i'm going to create a root now inside the root i'm going to set up some variables i'm going to have primary okay so now we've got the root what we want to do is get a start we're just gonna say we're gonna start effing with a margin of zero a padding of zero uh we're gonna also have a box sizing of for the box and a font family our fire uh sans and sans serif just like that and there you go that's already looking 10 times better we're going to have our body with the background color of far dark or actually far dark alt we're then gonna have a color of um far light by default it's safe and there you go already looking ten times better we're then gonna get our app class and we're just gonna style this app with a padding of 32 pixels um and that's about it we just want to bring everything in basically let's just get a h1 give it the font size off about 40 pixels um give it a font weight of 700 i know it's already bold but just you know make sure it's definitely bold uh and margin bottom of 32 pixels of course that's almost there we almost nailed that one save and there you go so that's already looking a lot better for the title let's start the h4 now now the h4 is going to be a font size for 18. so we're going to say font size 18 pixels we're then going to say our color is equal to light alt and i'm just going to say a text transform of uppercase a font way of 400 and finally a margin bomb of 60 pixels hit save there you go need to refresh it there you go it's there looking a lot better i don't want to style my to-do so i'm going to say dot to do and it's going to be position relative because we're going to have some absolute position elements in it we're going to say background color it's going to be dark it's uh padding is going to be 16 pixels not pad padding of 16 pixels um our border radius will be 16 pixels um and our display will be equal to flex we're going to align the item center and we're then going to set a transition of 0.5 seconds for our animations we will set a cursor off pointer because we want to be able we want it to look like you can click the whole thing and we want to set a margin bottom of 16 pixels just to push everything away and there you go that's already looking better let's go to our to do on huffer and we're just going to set the opacity to be about 0.8 because that should be good there you go so it gives you a slight slight change in color which is nice more opacity now we're going to get the to-do check box and the to-do checkbox is going to have a width of 20 pixels a height of 20 pixels um a margin right of 16 pixels um a board the radius and it's going to be if you guessed it it's 99.99 pixels um we're then gonna have a um background color and we're just gonna set to dark alt just so it matches the background we're gonna have a background image which is going to be equal to actually not on this one sorry on the we're going to add a transition sorry of 0.4 there you go what i'm going to say to do dot is um it's complete and inside of here we're gonna say dot check box and we'll say the background color is equal to primary and our background image now is going to be a linear gradient to bottom of far or basically primary if that worked a far off secondary and there you go you can see that's why it's going to look like checked we're then going to go below here and say to do dot um dot text and our text will just have a font size of 20 pixels what i'm going to say to do dot is complete dot text that's tet not text and then here we're just going to say text decoration line through that's just going to put a line for us you can see there it now looks like it's been done we're finally going to style the to-do dot delete to do button and we're just gonna say it's position to absolute we're gonna have hit top fifty percent and we're gonna have it right of 16 pixels whatenga said transform to translate y minus 50 there you go it's now center on the left but then you give it a width of 24 pixels a height of 24 pixels uh we'll set its color to be far light and we'll set background color to be we'll make a custom red so we're going to say af 1e2d because you know we want it to be red that's looking good let's give it a border radius though of uh 50 because we want to be pure round uh and we need to center that text so we'll just go use flexbox to center that we're just gonna say flex um a line item center justified content center and there you go that's now centered and i think that's good that button's looking good for now so that is now styled we're then going to add in a couple more bits so here you can see this nice and styled right so let's actually get our actual to-do's from our application so in our app above function we're going to say import and we'll say use state and use effect from react just like that and we're going to import the uh user state from react we then want to go into our app we want to say const and we want to say we're going to create a couple of variables so we're going to say to do's and set to do's is equal to use state and this is going to be an empty erase this is where all our to-do's are going to be stored we're then going to say const pop-up active needs to be in one of those and set pop-up active is equal to a use state again and this time it's going to be false now we're going to have a pop-up for our ads button so it's going to create a pop-up where we can add a new one and that's what this is going to handle um and then we're going to have our final one which is going to be new to do and set new to do and we set a equal to use stay and that is going to be an empty string so the new to do is going to be our when we create a new to-do and we open up our ads pop-up there'll be an input field which is bound to this value here we then want to say use effect now this is where we're going to create an arrow function and we're going to pass through an empty an empty pair of parentheses an empty array my mine went blank there um and that's just going to basically say only call this when the it loads i only call this once the component mounts right so i'm going to call this once what i'm going to call get to do's and it's going to be a function inside here so we're going to say const get to do's it's equal to an arrow function which is going to use fetch now we're actually going to go above our function app and we're going to create a constant called um api underscore base and we're going to set that equal to http forward slash localhost 3001 forward slash i know just like that we don't need a forward slash so we just need api base and then in here fetch we're going to say api base plus and then this one is going to be forward slash sudos and we're gonna make this asynchronous we're gonna say async actually no we're not we're gonna use a synchronous method for this so we're gonna say fetch we're gonna say dot then and we're gonna say result it's equal to rest.json so we're going to pass back the json string and then we're going to say our data is equal to set to do's data we then want to catch it as well in case there's any errors so we're going to say error or we could just actually yeah we'll just say error it's equal to console dot error error error just like that now when if we go to our terminal uh i'm gonna put this at the bottom so it's not in the way you can see to do is to sign but never actually do anything with it that's fine let's just inside of our get to do's or inside views effect we're just gonna log to do's hit save and you can see we get an array and it has our items in there you can see we have our id our timestamp our get the bread value and our complete all the things we need inside of this array which is great now we need to actually hook up to do so it actually does sync so down here we're going to delete one of our to-do's here but we're going to keep one we're going to basically inside here we're going to say um to do's dot map and then we're going to pass through a to do and this is going to be equal to some jsx so in here we're going to bring this in and now for every to-do we have it's going to display this now what we can do is where it says get the bread we could actually swap this out to be to do dot text and that's going to say the bread obviously it's still the same because our actual element is get the bread but if we go to our api quickly or our rest we create it here and we create a new one called order pizza again submit and we refresh the page you can see we now get order pizza as well you can see we're also getting an error in the console now in the console it's going to throw an error because we need a key which is equal to our to-do dot underscore id which is going to be our unique key so if we refresh you can see we no longer get that error we just get a warning that we haven't actually used this variable check so we've got our class we've got our text let's close this on the side we then need to actually check if it's currently well we need to check if it's currently uh complete so what we'll do is where we've got our class name we're just going to swap this out to be a squiggly uh line and then in here we're just gonna put space plus and then we're gonna say to do dot complete and if it is complete we're just gonna say yes complete else we're just going to say nothing we're just not going to pass it through so let's have a look at that let's break this down to its own line here because it's again a little messy and there you go that's looking good so it's going to say to do and if it's complete it will say it's complete so if we have a look here there should be none complete at the minute so if we go to our rest client again and we just complete let's say this one sent it's now complete if we refresh you can see it's now already ticked as completed let's leave that as that for now so that's all working that's looking good we now need to create a function that will call a different api handle which will actually check it so on side of our inside of our class name here or just after it after the key we'll say on click and this on click is going to be called and we're just going to say it's going to be an arrow function which is going to say complete to do and this time we're going to pass through a to-do dot id so we're going to actually pass through the id to this when we complete it hit save and we're going to go in eric's we don't have that function yet so we'll create a const complete to do which is equal to an arrow function which receives an id just like that hit save that should the arrow should go away now and inside of complete to do we're going to say we actually want to make this asynchronous um and inside off here we're going to say const data is equal to fetch api base plus and then we need our forward slash to do slash complete plus oh forward slash plus our id and that's going to complete it but we're going to need to actually get dot then and we're gonna say rest and we need to basically convert it to jason here just so it's ready to go so we can get our data and this should give back our to-do which we can then say set to do's and this is going to basically go to do's it's equal to or an arrow function to to do dot map and then we're going to pass through to do again and another arrow function we're going to say if to do dot underscore id is equal to data dot underscore id we want a triple equals that if it is we're going to say to do dot complete is equal to data dot complete so we're going to set them to be the same value and then we're just going to return to do outside of that so that's going to return our to do i am outside of the complete to do so we're going to complete it here now that should be correct so now if we actually click on one we got an error what's it let's refresh and click order we get our gets not found oh we do a puts don't we is it a put request we do um how do we do the complete let me have a look in the api i think it is because we use a put instead of a get now we can change this to be a get and i think it will work so if we refresh here and we make a request okay so it hasn't thrown the error this time meaning it's probably worked uh you can see if i click and i refresh it updates but it doesn't update automatically which is an issue that means something is still not working so we're gonna leave it again we're not gonna it's fine if we wanted to do a um a put request we could say method put but i'm not going to do that right now we'll just leave for that it works easier close that sidebar cool so complete to do kind of works but kind of doesn't so set to do's to do's and then return to do so this should just work but why doesn't it work okay guys so i figured out i just realized i'm missing the await keyword in front of fetch that should now work so if we now click order you can see it now once we refresh it selected the correct one we currently last left it out and there you go that's not working so complete to do now works now we need to be able to delete a to do so to do that we're going to go under here we say const delete to do is equal to another async function which is going to have an id and it's going to be an arrow function um and down here we're just basically going to say const well we're literally going to get the same thing here so we're going to copy this um and what we're going to do is we're going to say api base complete delete and after this though because it is going to be a method of delete we're going to set that there as well that should now be the correct method and we can just pin that there just like that and then we can just say our set to do's it's going to be equal to our to-do's we're going to say to do stop filter and we're going to filter through our to-do so we're going to say to do it's now a function along is to do is or dot id it's not equal to our data dot underscore id if i'm thinking right there double it should be a double equals sign here so what we're saying here or is our to-do should not be equal to our data's id it's safe and we need to actually take the delete to do and add it to here so we're going to say on click they'll be equal to another function i'm it's going to say delete to do and we're going to say to do diamond score id let's refresh and let's delete pizza again and there you go you see it's gone and if you refresh it's definitely gone and there you go so that means our to do is now working so our final thing we need to do is actually create the add method so to do that we're going to need to create some new html elements so what we're going to do is underneath to do's we are going to add in a button called add pop-up and inside this we're just going to have a plus on this add pop-up we're going to have a click offense we're going to say on click and we're going to set this equal to an arrow function which is going to say set pop-up active i think it's set popup active to false although true we want to turn it to be true and also i need to uncomment these because i commented them and there you go we have this little plus button here so when we click that it will it will basically turn that to true let's refresh if you don't want it clicked right now um and let's go style this so let's go into our index.css at the bottom add pop-up and what we want is to go position fixed um we're going to say bottom we're going to be 32 pixels away right also 32 pixels so it's bottom right we're going to set the display to be flex we're going to align item center and justify content center where they could give a width of 64 pixels a height of 64 pixels we will say its border radius is 999 pixels and also its font size is 28 pixels we will say it's font weight it's 900 just so it's nice and bold and let's give it a color of light with a background color or background image sorry background image of linear gradient to bottom right and this will just be a variable of primary rimmery not that primary and also a far off secondary safe and there you go we've got this cool looking button let's add a cursor of pointer so people know you can click it there you go and that's looking good so now when we click this it's going to toggle our active state but what we're going to want to do is now create the actual pop-up model so underneath um the app the ad button we're going to do this we're going to say pop-up active question mark if it is we're going to write some code else we're just going to pass nothing through here and then in here we just want to say we want to create a pop-up save and there you go so in here let's just write saying like uh let's do a close pop-up which is going to be an x and we're just going to do the same thing here so on click but instead of what did i just do that was i opened up multiple things uh instead of saying it to true we're going to sell it to false so hit save refresh and we click plus you can see there's a little x we can click close and it'll disappear now obviously there's nothing actually showing but at least we know it's working so what we can do is say dot content and inside the content we can have an h3 we're just going to say add task we're then going to have an input an input of type text which does not need a name or an id it does however need a class name and we're going to set the class name to add to do input we're then going to say on change we're going to set this equal to a e so let me just break this down so you can actually read it class name and on change bam uh we'll get set to an arrow function which passes through the event and we're going to say set new to do to be equal to e dot target dot value and then we're going to say value is equal to new to do so what we just did there is bind our new to do value with our input field here so anything we write in that you can see here will be bound to the variable so if we just output above this oh not double we just say new to do hit save you can see whatever we write in here will appear there under simultaneously so there we go so that's now bound let's remove that hit safe and then under input we're just going to create a new button with the class up button it's going to be called create task and we'll create a function for this called on click equals add to do just like that i know we haven't got that set up yet so let's go create a method called const add to do is equal to a arrow function um asynchronous arrow function inside of here we're just going to say cons data is equal to a weight fetch do not forget the awaits as you'll be looking for the bug for a while uh we're gonna get api base plus our um it's gonna say slash to do slash new um and then after here we're gonna pass through some options so we're gonna pass through a method the method is gonna be of type post we're gonna pass through some headers now we're going to basically tell our app or our api that we're going to be using the content type of application forward slash jason we're then going to pass through a body which is going to be a json.string object and in here we're just going to have text of new to do and then what we're going to do is we're just going to log data for now and there we go on click did you mean on click oh i forgot the capitalization of the c in on click um and now let's just check this let's refresh now we should be at well we actually need to obviously go dot then rest is equal to rest.json just so it gives us the actual json so let's add a new one quickly we'll start this up in a second let's just say new to do and click create tasks now you see that's completed and if we refresh our new to do is there but it did not add it directly um it did not add it straight away and we need to style it so underneath data or just delete the console log of data we're going to say set to do's is equal to a um dot dot to do so we're going to get all our current to do's plus the new data so that's going to add it there we're then going to set pop-up active to be false because we want to hide the pop-up once we've added one and we're going to set new to do to be equal to null again or nothing so that it's basically going to reset so let's quickly test this so we're going to say my new to-do i'm going to click create and there you go it gets added and it's now added to the database as well so that's all great we can delete it we can delete that one we can add them let's just quickly style this box really so let's go here and then underneath our ads pop-up we're going to create a pop-up uh oh if i can type probably a pop-up class here select it i'm going to say position fixed i'm going to set top equal to be 50 left equal to be 50 percent we're then going to say transform translate minus 50 minus 50 to center it um we're then going to set the width to be a hundred percent but a max width of 400 pixels we will set the background to be the background color to be our light color we will then set padding to be about 32 pixels hit save yeah it's looking good um how border radius to be around 16 pixels and a box shadow just to bring it off the page a little to be 0 3 24 and dark and there you go that's looking good i mean it's not but we'll pretend it is we're then going to get our close pop-up button and we're just going to basically say it's position is going to be absolute we're going to set its top value to be 60 not 15 16 pixels it's right value to be 16 pixels and its width to be 20 pixels height to be 20 pixels and it's going to have a font size of about 20 pixels and a color off dark or dark and a curse or pointer and there you go we have this little close button up here i mean it could look better but for now that's fine i think that's fine it'll do let's also just give it a um display a flex we're missing that uh justify content center a line item center and a background color of primary why not um and let's just a color of light i know i gave her a color dark i'm changing my mind we're going light and a border radius a radius of uh 50 and the font size will be a bit smaller let's give it uh 18. it'll do it looks all right it works look we can close it and we can open it with that now under the closed bubble we're going to have our pop-up h3 which is going to have the color off dark we're going to have a margin bottom of 16 and let's say we're going to have a font weight of 400 so again just basic styling here text transform of uppercase hit save and there we go we get add task now let's finally chat style the add to do input we're just gonna settle we're gonna set appearance to be none it's bordered to be none outline none um and then we're gonna say background image oh no this uh sorry that is the um actual button not the input so we're going to say its background color will be white um we're going to set its padding to be about 16 pixels we will have a border radius of 16 pixels a box shadow of 2 pixels oh sorry 0 pixels 2 pixels 24 pixels rgba 0.2 just give a subtle color there we'll give it a width of 100 as well so it stretches the whole way across and a font size of about 20 pixels and finally we just need to style this button it's going to have a padding of 16 pixels 32 pixels it will have a border radius of 99 pixels it will have a background image of a linear gradient to right which would be far primary secondary and then we will have a display of inline block uh font weight of 700 a text transform of uppercase a font size of 18 pixels a margin top of 16 pixels a text align center and a cursor off pointer and there you go so now we have this nice looking ui so let's just uh bring this out let's make it a bit wider bit bigger close that we don't need it now let's add a new to do let's call this to do a finish tutorial click create you can see finish tool we can check this off we can check this off we can delete this one we can delete this one and we can add more so more creator so guys as you can see there um i've got a few tasks for you to do we're gonna like the video we're gonna subscribe to the channel and we're gonna leave a comment and there you go that's the three things i want you to tick off on your to-do list guys so guys thank you all for watching this video i hope you have learned something new i hope you've learned some full stack capabilities using a node.js api and a react.js client as the front end so guys thank you all for watching this video don't forget to like the video smash that subscribe button and i will see you in the next one peace out you

Channel: Tyler Potts

Views: 3,767

Rating: 4.9753084 out of 5

Keywords: webdev, javascript, css, sass, scss, js, reactjs, website development, website design, app dev, app, app design, app development, mobile app, web developer, app developer, developer, programmer, mern, express, mongo, node, nodejs, react js, react native

Id: R81g-2r6ynM

Length: 57min 44sec (3464 seconds)

Published: Fri Jul 09 2021