🛑 3hrs to Build and DEPLOY an Authenticated TO DO APP! PostGres + React + Node.js + Kinsta

hey everyone so today's pretty exciting because we're going to be building a to-do app but not just any to-do app one that we're going to add authentication to so you're gonna log in you're also gonna be able to log out and then you'll see your personalized to do items as well as stuff like your username show up now the coolest part about this is that we're also going to be deploying it so that you can share it around your friends family they can log in they can use it and they'll see their own to-do's okay so pretty complete project here by the end you'll be able to add users as well as allow them to add their own to do items delete their interview items edit their own to-do items as well as create new to-do items okay so great what are we waiting for we're gonna be doing this with a postgres database as well as react for the front end and node.js for the back end okay so first off I'm just going to sign up to kinsta which is where we're going to be hosting our front end our back end and then our postgres database as well our front end and back end will be hosted from a GitHub repository so that's going to make our lives a lot easier and of course the fact that everything is one place as well is super convenient so just go ahead and sign up I do want to let you know that it is free to sign up to kinsta and they're kind of going to give you 20 in pre-hosting for your first month okay so as this is a tutorial please do use that and after that you only pay for what you use each month so we're not going to go over that free twenty dollars in this tutorial don't worry but like I said if you want to use the app frequently after you deploy it you might have to pay a little bit more but don't worry you can see exactly how much CPU usage and memory usage your app is taking so you can monitor it from the dashboard also you also get to enjoy the free daily backups firewall DDOS protection SSL and 24 7 Global support if you get stuck so there is also that too okay so all I'm going to do is scroll down here and sign up I'm just going to put in my personal information so you know stuff like my first name my last name and so on right here so just go ahead and do the same obviously this information is sensitive so please don't share it once you have done that you will also be asked for your credit card details so please go ahead and put those in like I said we're going to be very careful and definitely not go over that twenty dollar limit but you know for using this you're gonna have to supply this information just in case you do go over that limit okay great so once that is all done this is the dashboard that you should see okay so this is the dashboard you will see we're going to be essentially deploying two applications a front and on a backend like I said and a postgres database and also the coolest part again like I mentioned is that we can deploy it directly from our GitHub repositories so I'm just going to go ahead and connect my GitHub so continue with GitHub and just sign into my GitHub so please go ahead and do the same and put in your password and there we go so that is now connected we've done everything here that is preparing our app to be deployed thanks to this platform so let's carry on the next thing I'm going to do is just you guess create a repository for our project so for this I'm actually just going to get up my terminal just like so okay I'm just going to make that a little bit bigger for you and let's go ahead and save this project on our desktop so I'm going to go into my desktop if you want to see what I have on my computer it's all of these things I need to go into my desktop so I'm going to use the command CD to go into my desktop and here I'm going to use the create react app command in order to essentially create a react project with all the necessary configuration for me so for this I'm just going to clear everything in my terminal using command K so command K and I'm going to use npx and then the command create react app and then whatever we want to call this so I'm going to call this deployed to do ah okay so this is by itself then there's a space then this is the command we're going to use and there's a space and this is what I'm calling my project and I'm just going to hit enter and wait for that to do its thing okay so we're gonna wait for that you can see it's already shown up here and if I click on it you will actually see all the files being populated for my regards project okay so let's wait for this to complete okay and there are files this is looking good I'm actually going to shut this down and here is my project let's open it up so to open it up I'm actually going to open up vs code so I'm just going to create a new window okay and there we go we have now opened up vs code and I'm going to open that project up so I'm simply going to search for it on my desktop and there we have it deployed to do app I'm just going to open it up there we go so first off I'm just going to clean this up and get rid of everything that we don't need for this project so that's going to include getting rid of anything to do with tests so setup tests removable vitals and also the logo SVG so please go ahead and delete that too I'm just going to move that to trash and delete this app test JS file I'm also going to delete that and the app CSS as we're going to be holding all our CSS in one place which means you're only really going to have three files in here once again I'm just going to delete everything that we don't need in the index.js delete everything that we don't need from here to and I'm going to delete this semicolons just because that is my personal preference so this is what your index.js file should look like at the moment and your app.js file once again we don't need any of these I'm going to change this to a functional expression just because again that is my personal preference and let's just return a div okay so we're just going to return one div in the jsx just like so and get rid of any semicolons and again just delete everything in here so once again three files should now exist in the source directory your index.js file that looks like this your app.js file which looks like this and your index CSS file that looks like this the next thing I'm going to do is actually put all of this in a directory so make sure on the root of your project to make sure that is the case just click on the readme and click here and I'm going to call this client and I'm literally going to grab everything in here including the node modules and drag it into this directory okay guys so now my project called deployed to do app is literally just going to have a client directory with all these things in there next I'm also going to create a server directory that's going to hold all our server code and for this well if you click on the server directory and toggle the bottom panel to get up your terminal we're going to have to essentially initialize this in order to use node modules so making sure you're in the deployed app also making sure in the server directory so you CD to go into the server directory I'm going to initialize this using npm in it and just hit enter okay so then you'll have some prompts I just want you to choose all the default ones by using enter enter enter enter enter enter enter enter enter and there we go so now our package Json file has been created using all the defaults that I chose so you've got a server directory and a client directory this is looking good okay so I'm also going to want to have a DOT EnV file on both of them but one thing I'm also going to have to do that's going to help us deploy this is have another package Json file okay not in the server I'm not on the client but actually in the app itself so let's go out of the server using CD dot dot and make sure you're on the deploy to do app and once again just do npm in it and hit enter and just do all the defaults okay so there we go there's our package Json file right now wonderful okay so great we have our client we have our server we also have a package Json file in the root of our project now make sure you're on this one right and not the other two this can be very confusing so just make sure you're on this one and we're going to write some commands I'm going to get rid of this we're going to write some scripts in order to essentially build our front end and our backend so this is the command that we're going to be using I'm just going to paste it in here and talk you through it so we're going to need a f e and V package and then we're going to essentially go into the server and install all the packages from its package.json and also do the same for the client so for now just save this as it is get rid of that trading comma and we're going to have to install this package so making sure you're in the deployed to do app that is important not the other two just check you're not in server or client I'm going to install that if Envy package so just go ahead and do that and it should show as a dependency here and that it is great so now we can use it in this script next I'm going to write a command to essentially start our server and for that we use node and we're going to go into the server directory and we're going to create a server.js file that holds all our backend code we're going to do the same for the client and this time I'm going to go into the client directory and use the command npm start in order to start it okay so these should be familiar to you we're just doing everything from this one file instead of separately okay so great this is looking good I'm ready to carry on now we don't need a main for this file so let's just get rid of that and we don't really need an author or a license you can keep it if you want but I'm not going to let's move on so we have our package Json the next thing I'm going to do is essentially create that Savages file so making sure you're in the server this time just double check that you clicked on here create a server.js file so this is essentially going to hold up back end okay great so this is looking good I think we should start with the client first and just making sure the UI looks nice so let's do that first let's start up our client so I'm just going to get rid of everything right and just make sure you're in the client I'm going to minimize these for now make sure you're in the client so once again just get up your Terminals and make sure in the clients who see the clients because we're going to use this package Json in order to start this and this is the script we need so just do npm Run start in order to start your client and that should open up in your browser okay so there we go if I go ahead and inspect this page this should just help us out by letting us see the elements of course at the moment there isn't anything in here if you look in the body and they did with the ideal root whereas essentially injecting our whole app that should just be that one div from the app.js file so this is looking good and of course if I now I'm just going to minimize this go into the app.js file which is in the source directory and type Anya just like so that should show up in this div but also in here great let's carry on okay so what's our app going to consist of well I'm going to essentially want to make an auth modal for logging in a list has a and some list items okay so that's what my app is going to be made of so perhaps let's also in the source directory I'm going to make a new folder I'm going to call it components and I'm going to keep all my components in here so my first component is going to be an auth modal and also we're going to have a list header let's also have list items so list item .js and that's going to hold one component for a list item and I think this should be it and let's also create a modal for essentially creating new elements so modal.js so creating new list items I'm also going to make my own custom progress bar so create that and I'm also going to create my custom tick icon component okay so just go ahead and create this now the easiest thing to do is just essentially copy the app.js file content and for each of these just paste it in and replace these with whatever we have called the component just to make everything super readable so that's my auth Js let's shut it down here is going to be my list header so list header when we didn't make that a JS file so let's rename it we need to let our code editor know this is a JS file by adding the dot JS extension and that will now be treated as JavaScript great now let's do our list item so I'm just going to change this to the list item and same for here list item and get rid of that next let's do the modals so we're just in the modal now modal and modem if you're ever not sure what file you're in you can see that file highlighted there now let's do the progress bar so just spelling it exactly the same as we call the file to make things a lot more readable and our lives a lot more easier and finally The Tick icon so tick icon and take a car great so there we go and now in my app.js file so let's just go back to our app.js file where we're going to put in the list header file so let's go ahead and do that so let's import that list header I'm going to import lists header from if I can only spell it correctly and then let's go into the components right so which means we need to go into the components and find that list header so that we can import it into here okay so all I'm going to do is just put in the list header just like so and perhaps let's give this the class name of app so we can style it up kind of like an app great so that is my list header let's go ahead and pass through a listening first so if I go ahead and pass through a prop and let's just call this list this to-do list holiday checklist for example I'm going to show you how to pass through this prop so holiday tick list let's also maybe go ahead and put an emoji why not we are on holiday and we can use emojis and code editors so I'm getting that component and passing through a prop which means that on this I need to destructure that prop and pass it through okay so this is me destructuring the prop which is essentially an object I'm de-stretching that object of props and I'm getting through the list name which means the N minus harder I can essentially show it like this if I want so using these cardi braces we'll just let our code as a node do not treat this as text but treat it as code so now if I look in here yay holiday technician up because we've created it over the course of app and this essentially is representing my list header okay let's perhaps give this the class name of list header so it's really obvious so list header just like so and let's put this in an H1 element okay so I'm just going to paste that and like so so now if we look in here ta-da this is essentially representing my list header component and in it is an H1 element with holiday tick list wonderful so I'm happy with this so far perhaps let's style up our app and our list header next so let's grab the class name and in my index CSS file I'm just going to grab the class name of app okay I'm also going to grab the class name of list header so let's go ahead and grab both those things just like so so first off before we do anything I'm just going to grab the body and let's get rid of any default padding and margin so I'm just going to set them both to be CRM margin 0 adding zero just like so I'm just going to perhaps minimize that and I'm going to actually make the background color of this Alice blue and maybe just let's change it a little bit okay so just like so and I'm going to use display Flex initialize flexbox on the body and I want to send everything from left to right so I use justify content sensor I'm also going to send the font family in here and I want to go to Butcher Ms and Ariel and Sans serif as backups okay so that's what I have done next on the app itself well I'm just going to give this a background color of white this time so RGB 255-255-255 and I'm going to also maybe give it a box shadow so box Shadow and my box Shadow well I'm going to use black but a transparent black so hence the A and my opacity is going to be 0.05 next I want to say that I want 0x axis Shadows 6 pixels on the y-axis 24 pixels blur and then I'm going to Overlay it with another box shadow so once again I'm going to use black for the transparent black and 0.08 opacity and 0xax is zero Y axis zero blur and one pixel spread so that is my box shadow I'm also going to round off using border radius to round off the edges and I'm going to use 10 pixels for that so 10 pixels border radius is what I am using let's also cut it out from everything that I'm going to put inside of it by 10 pixels and I'm going to hard code the width to be 800 pixels okay let's also space it from the top of my body by 50 pixels okay so at the moment this will look like that is my app I've spaced out 50 pixels I rounded off the edges I've given it a uh box Shadow and I think this is looking really good the next thing I'm going to do is just dial up my list header but to do that I think we need to put more things in let's head out so let's go ahead and do that so my list header I'm going to as well as put the list name I'm also going to put in another div and this is going to hold some buttons so I'm actually going to give this the class name of button container so let's go ahead and do that button container just like so and in here we're going to have two buttons so we're going to add one button just like this and this is going to be add new so we can add a new this item and also another button that's going to essentially help us sign out so that's what I have done and I'm going to give these both class names as well so this is going to be to create as a button with a class name a create and this one is going to have a class name of essentially sign out so we can pick them out and start them accordingly they're also going to essentially have on clicks but they're going to do two different things so I think perhaps maybe let's well we can add it on click to this for now so on click and this is just going to call a function to sign out which I'm going to Define here I'm going to use functional expressions for this so it wants to sign out and the sign out function for now I'm just going to consult log sign out okay because we are essentially going to have to do a bunch of stuff in here that we have not come close to even covering yet I want to do it step by step okay so that is our function to sign at the moment I'm not going to add an unclick to this yet because we will do that in due course okay great so that is my list header let's go ahead and grab the button container as well so that is something that I'm going to do I'm actually going to just put list header here so it's really obvious what we are styling so we can even make sure that this button container if it lives inside the list header is going to have the styling or we can make it generic so I'm in fact going to make a generic so let's go ahead and grab this and just put it up here with everything that's generic and I'm just going to make sure that the two buttons appear next to each other so I'm going to use display flex and I'm also going to align the items from top to bottom center so that's what I have done and next I'm also going to save any button that lives inside the button container so just like so it's going to have a margin from zero on the top and Order and five pixels on the left and right and let's also give it some padding on the inside of the button five pixels on the top and bottom and 10 pixels from left to your right I'm also going to give each person a border radius of 12 pixels so it's kind of more like a pill shape and let's just get rid of the background color I'm going to make the background color trans okay so if we look in here that is what they should both look like at the moment great I think the font size should also be smaller so perhaps let's also add a font size to these I'm going to go ahead and give this the font size of 10 pixels and wonderful so that's what they both look like the next thing I want to do is make both the H1 element and the div with the class of python container appear next to each other so we need to use display Flex for this so on the list header I'm essentially going to use display flex and justify that content in between so let's first off make sure that it's 100 of its parent and I'm now going to initialize flexbox and next I'm going to use justify content space between to space out those two child elements okay and I'm also actually going to give my list header a border bottom so I'm going to make this a gray line or maybe let's make a transparent line so black with 0.05 opacity and let's also make it one pixel and solid okay so that's what I've done it's very faint but I've essentially added that line and great those two items have been so both Childs of the list header so the H1 elements and they did with the class of button container have been spaced evenly wonderful so this is looking good I'm happy with that the next thing I think we should do is style our artist items but for this we're gonna have to need some data so let's go ahead and do that next so for this I'm actually going to use postgres right I'm going to use postgres locally on my computer so let's go ahead and install postgres if you haven't already so just please go ahead and go to postgres and downloads and just download the one for you for me it would be Mac OS so I will go ahead and do that but of course I've already done it so please go ahead and choose the one that's right for you and once it appears on your computer for me it's at the top of my computer and I can just open it up so I can open up postgres like this okay it's in the top tab there's my postgres and I can click Start in order to start it now here just go ahead and click on postgres just like so and we're going to have to create a new database so I'm just going to make this a little bit bigger for you and let's write the commands to start a new database so for this I'm going to just do create database just like so and I'm going to call it to do app and just hit that semicolon right here and great so once it has appeared just double click on it okay I'm just going to make this a little bit bigger and we're going to create our fast table now to make this a little bit easier for you I'm actually just going to write the uh commands the SQL commands for this let's go ahead and do it in the server as that's essentially kind of linked to the server so in your subdirect we just click on here create a new file and I'm going to call it data.sql giving you the SQL extensions with our code at the nurse you treat this as SQL so the commands we've already written one one is create data base and we call that database to do app so just put that in there as a reminder for you and the next one is create table to Do's okay so that's what our table is going to be called that lives in the to do app and now we're going to define the uh columns that it will take the first is going to be an ID this is going to be a primary key it's going to be how we're going to find things in our table and as the type I'm going to put varcha with 255 characters so we can essentially put strings in as the ID that's what I decided and let's also make sure this is a primary key this is how we're going to find stuff in our table the next thing I'm going to put in is a user email okay so this is essentially who the to do app is linked with and once again I'm going to use varcha so that is something I have done the next thing I want to put is the title of the to do and again I'm going to use voucher however this time let's just limit it to 30 Okay because I'm going to limit that on our form as well so it's not super long next I'm also going to put the progress and this is going to be an integer value okay our progress is an integer because we're going to have to want to display that on the progress bar and finally the date of when this was created and I'm actually going to use a voucher for this as well we can even have 300 if we want and get rid of the trading comma and add the semicolon at the end I'm also going to actually want to create another table so create table is the SQL command and this is going to be for the users so this is essentially going to store our user by its email and that's going to be unique and this this time is going to be our primary key let's also specify that this is text and we're also going to store the hashed password not the actual password itself that is super super not safe okay we're going to sort a hashed password so we will come to that when the time comes and don't forget this is semicolon at the end so these are my two tables now it's really easy I'm just going to copy all of this and it just means that in the terminal in my to do app database I'm going to create that table of to Do's by just pasting that in and hitting enter so that has now been created and let's also create a table of users so let's paste that in and hit enter so great so at the moment if I do the command select all this is select all from does the SQL command to juice there will be nothing in there okay and if we want to create a to-do so I'm just going to use command K to clear everything in here I can use the command insert into to Do's so that is the command that I will be using to insert that into my database so let's go ahead and maybe do that now I'm going to show you how to do that so in order to insert into our SQL database into this table called to Do's I'm going to essentially Define The Columns that we want to insert into so for this well we should probably have an ID so let's go ahead and put ID the next one we called user email making sure to spell it exactly the same as the columns we just wrote a title some progress and a date so that's what I'm going to want to put into there and as the values we can now Define the values so the ID for this I'm just going to put 0 for now my user email is going to be Anya at test.com and then my title of my to-do is just going to be first to do you don't have to have a capital so first to do the progress of this let's say 10 and the date is just going to be today so I'm going to go ahead and just post the new date object response for today so I'm going to do a new date and call it please go ahead and copy this okay so that's what I'm going to do okay and then don't forget to finish off and everything that's a string should be a string in here so what did we give VAR chart to well we actually gave it to the ID so this needs to be a string the email also needs to be a string the title needs to be a string the progress doesn't have to be a string this needs to be a string so the whole thing okay the date needs to also be a string and now we close off the values and use our semicolon and hit enter so now if we do select all from a table called to do's ta-da you will see one item in our table I've just added that okay using the insert into command so we have one Isom in here so far great now let's get to writing some code in order to get that one item from our postgres database and we're going to do so in the server so let's get rid of this I'm going to get rid of that on the list header and the app.js file and let's get to writing some server side code so I'm going to minimize this client and I'm just going to click on the server.js file that lives in our server directory so let's do it let's set up our server so for our server we're going to have to need a few packages so just go ahead and open up that bottom panel and just go ahead and click here we're going to create a new terminal so we don't want to stop the front end from running so just make sure that it's still running and in the deploy to do app just go into the server directory so we are now in the server directory the packages that I'm going to have to install so use npmi making sure that you are in the server directory are going to be expressed it's going to help us with our routing pause to get rid of any course error messages that don't allow us to communicate with our database and now we're also are going to have the package be Crypt that is going to help us essentially hash our passwords so we will cover that when the time comes to it we're going to use Json web token which is going to help us create a token so that we can stay logged into the app even if we navigate off it and we're going to use another package called uuid which is going to help us generate a random unique identifier another package that we're going to use is dot EnV to help us essentially work with secret variables and I think that should be it no demand is another package that we're going to have to use in order to essentially listen up for changes on our server JS file so if you don't have these two installed globally on your computer please go ahead and install those and just hit enter and wait for that to essentially populate in the package Json file okay so just the package.json file again just check that it lives in the server and it's not the other two so server package.json is what I should say and those should populate now if you are watching this in the future and having any issues it could be down to the package you are using so the package version so if your package version isn't the same as mine just go ahead and change it like so and run npmi again and that will reinstall all these packages along with that version well if I'm not going to do that because these are the packages that I need so I'm just going to get rid of that so these are my packages again if you don't know what I meant by installing a package globally you can install something globally by doing npmi.g for globally and then the package and that will mean that it's installed on your actual software so on your computer and you can use it anytime however I think it's quite nice to actually have the packages visible so that when someone's looking on your GitHub it's very obvious which packages used for the project great and next I'm just going to write some code to start this up okay so let's just double check we have all the packages that we need another package that we actually need is PG to work with our postgres database so just go ahead and add that one too wonderful now this script to start this so I'm just going to get rid of this script because to start this I'm going to have to have a command and I'm going to use no demand to listen out for constant changes okay constant changes on my server.js file so this is a post to me just using node okay node will listen out for one it will essentially run the script once but no demon will listen out for constant changes so that is a great package to use to deploy this okay well we're not going to have to listen up the changes because you know it's going to be kind of deployed we can't make any changes so I'm just going to use node and file name the build script for this the build script for this while it's just going to use react Scripts build I'm just going to add some generic scripts here so test is going to use react scripts test and then eject is going to use react script subject okay so that's all I really need in here which means that now to start the server I'm going to do npm run start okay making sure that you're in the server so save this file and then run that script and you should see this green code showing up and no demand essentially is listening out for changes okay so we can minimize that okay great so this is looking good now let's go back to our savage.js file so here's our savage.js file I'm gonna have to essentially decide what port we want to be running on however we might want to choose this port so we might want to change the variable port on kingster so this essentially is going to access a secret variable or if one doesn't exist we're just going to use port 8000. okay so that's what that line of code means I'm not going to add this port variable in our project this is something that I will be adding in the consist of platform so just keep that in mind now let's actually get Express so this is going to require the package express okay so we're getting rid of that package we're saving under this constant and then once we have that content we're going to call it so it releases all of its wonderfulness all of its methods and I'm going to save it as apps so we can use it which means that now app has all those wonderful methods and properties and I can use it so listen is one of them listen comes with Express and I could use app Listen to listen out for changes on the port so port and then I'm just going to put a callback function and this is essentially going to say server running on Port and then we're going to use the dollar signs and curly braces so it treats this as code and not as text so now if we look in here so just toggle the panel and we make some changes in here so just you know hit save okay it's restarting due to changes and let's console log this out so console log server running on Port 8000 and that should show up so every time we make a change no demon is restarting due to changes okay and the server is running on 48 000. so this is looking good so now that just means that if we write a root so this is what Express is for I'm going to use app get and then I could just say that the root is this and then let's use the request and response I could do res send to send something to our browser going hello okay which means that now if we actually visit localhost a thousand I will say hello okay and we can of course change it to hello Anya if we wish and then just refresh and that will show up so that is rooting that's what we're going to do and we're going to change our route in order to do different things every time we visit a different group s so you can keep that or you don't have to I'm not going to so great we have Express working so now I'm going to essentially write some code to get all of our to-do's so get all to Do's okay so I'm going to do ab get once more so get is the method that I am using in order to get it's a request okay and the I want to visit to Do's for now okay that's the end point that I want to visit and then I'm going to use request response and I'm just going to essentially write that query the SQL query and I'm going to do so in a try and catch blog so try catch and the catch is going to essentially catch any errors and just console log them out so console error error this is just for us okay you won't see them anywhere it's for error handling so we can read exactly what is going on and why something isn't working okay so I'm going to use the await keyword which means I need to make this an async function and I'm going to await now we're going to actually have to use postgres the postgres package in order to communicate with our postgres database so let's just comment that out and I'm actually going to write a new file to help us do this so this file is just going to be called dbjs and in here well I'm going to Define pool so this is just from the postgres documentation and I'm going to require the package PG that we just installed and I'm going to get the pool okay now I'm also going to require the dot EnV package as we're going to hold some sensitive information in here and also information that we want to hold on kinster right so that is how we would essentially use Dot tnv now let's define our pool so this is essentially how we're going to communicate with our postgres database so for this I need the new poor Constructor which we just got from the package and I'm going to create an object so that is my object and in my object I'm going to have to pass through a user so for this I know that my username for postgres is Cuba Anya we're also going to have to pass through the password that we have for our database so I'm going to put that in a secret file we're also going to have the hosts and the host is localhost so we can put that as a string so I'm just going to put the local Post okay next we're also going to have the port so the port is 5432 I believe and then the database name which we know is called to do app as that is what we called our database on postgres right so if we look in here it's just the name of this great and then we're going to do module exports cool so this is going to be our code to help us communicate with our postgres database let's just create a DOT EnV file so just make sure it's in the same place as that dv.js file so dot EMV is what I'm going to create and I'm essentially going to hold a bunch of secret stuff so I'm going to hold my username which is Cuba Anya or actually it's Anya Kubo sorry so that is my username for my postgres database notice how I haven't made a string I don't need to okay that is implied my password which I'm going to put in last and then the host which is localhost and then the port I'm going to put DB Port so we don't confuse it with the other Port that we are using which is 8 000. so my DB Port is going to be 5432. so now in order to access these secret variables I'm going to use so I'm going to copy this and I'm going to use process EnV and then whatever I call that variable so same for the password process EnV and then pause word same for the host so process Envy and whatever we called it here host and then the port which is this so DB Port is another thing that's going to go in here so to access it I use process EnV and then whatever I call that variable great so now I'm just going to put in my password here to communicate with my database and wonderful making sure to spell that correctly so module exports so now that is it let's check if this works so to use the contents of this file I'm going to have to import it into here so I can do so let's call the content of that file pool as that is what we are exporting and I'm going to require and then I'm going to essentially go into that file we don't need to add the JS extension because this is a JS file so that is implied great and now in order to use that pool I can in here use a weight it's going to minimize that Paul dot query and then I can write my query which is Select all because we want everything from to do so from to do so we're essentially using SQL okay so let's test it out let's get the response of this and save it under the const to do's okay and then I'm just going to show it so I'm going to use res Json and I'll just show it in the browser as Json and I'm going to get the to-do's and I'm going to get the rose okay so let's test it out let's visit this endpoint so localhost 8000 forward slash to do's and grades we get the to do rows okay it's an array of one item that one item is represented by an object that has an ID a username a title a progress and a date so amazing this is looking so good okay just make sure you do uh return the rows because otherwise if we save this and refresh that will work will give us a lot of other stuff that we don't really care about we just care about these words okay so just get the Rose which luckily for us is a nice little neat all right wonderful so this is looking good however because you know we want to log in and log out of the app I only want to get certain to Do's based by that email so what we're gonna do is write some more SQL so we're going to essentially change this command select all from to do is where the user email column equals and then whatever variable we passed in so the vast variable we pass in which is going to be a user email okay and we're going to get that user email essentially from the front end but for now I'm going to just hard code user email as my email so on your test and just stick it in here as a string so now this should essentially if I call this just bring back one item short but if I change this to annual 2 it should come back with nothing because Anya 2 does not exist right she has I need to has not made any items to put in our table called to do's and was searching and we're looking for the email of Anya okay so this variable is essentially the first item we put in this array great let's carry on so now I think it's time to connect this back end to the front end okay so let's go ahead and do that so let's go back into our client and let's go back on the app.js file okay wonderful because we're going to get that data next so in order to get that data I'm of course going to you guessed to write a function and that function is called get data and I'm going to essentially write this code so to get the data we're going to use try and catch once more just because the catch is really good at you know helping us read the errors I will show you this when the time comes so console log or console error is probably better okay and this time again we're going to use the fetch keyword and this is an async method which means a return to promise which needs to be resolved so we're going to use a weight and once it's resolved we'll save it as something I'm just going to save as the response as you know that's what it is okay and we use the away keyword here which means we need to make this an async function now what we want to fetch exactly well we want to fetch this so that's what I'm gonna do I'm going to fetch this notice how I use back text because I also want to pass through a parameter I want to pause through the user email okay so that it knows to just get our user email and we can do that by passing a parameter through with the URL so let's do that I'm going to do forward slash and then I'm just going to pause through the user email okay so let's check this works fast I'm going to save this and let's copy that and I'm just going to for now what to get the Json this response uh we need to get the Json from it by using Json method but uh oh this is an async method so we're going to use the await keyword and the response of this let's say that as Jason because that's exactly what and I'm just going to console lock the text okay so now if I call this function I'm actually going to call it a use effect so use effect and then this is the Syntax for use effects and I'm just going to call that we're going to do a bunch of stuff in here as well so actually no we're not so let's just put this on one line just like so just to make our lives a lot easier okay and then we're also going to pass through an empty dependency so this is essentially going to run well once it's technically twice but it's going to help us get our data and not keep re-running this so if we didn't put a empty dependency in here it will run infinitely but we just want it to run once hence we just put that okay and now let's import use effect from react okay so let's define our user email here so I'm going to do const user email and instead of having the user email on the back end so here I'm going to try pass it through from the front end so here it lives now I'm going to pass it through as a parameter so which means that on here we need to get the request params and get the user email from it so I'm also going to just console log the whole request so we can see what's going on in the back end as well as the front end okay so save this and now here if I refresh this and let's look at our console log aha we are getting a blocked by course policy so so in order to get around this let's go to our server let's import the course package so of course require the package course and now I'm going to use course by getting app used so this is Express and just calling course in it so that will essentially get rid of this course message that is blocking Us by the course policy and great so there we go however this doesn't really seem to like this why is that it says 404 not found okay so it's passing through the email however now let's go to our back end uh we used to pass it through here as well so we need to essentially here say that a parameter is being passed okay we are defining that root and by using dot dot it just means we don't know what this is this is a kind of parameter that exists okay so it knows to essentially look for something with a parameter so we know that it's being passed into here let's console log the whole request which we are doing and now let's check in here so this is the entire request that's being console logged out let's find the params so I'm just going to search for the whole request this is the entire request okay so there we go and power arms does exist here so at the moment request parents were saving all of this to the user email we don't want that we just want this property so I can destructure this whole object okay and just get the user email so that is something you can do or you can this is also valid just go into this object and get the user email and say that to the cons user email so both ways are fine however if you have more than one param you probably want to destructure the param so I'm just going to do that just because I think it's a good thing to learn so now that should essentially allow us to use the user email so this string and pass it through into this command so let's just minimize that and try again so let's test this out I'm just going to console log user email so it's really obvious that this has been destruction and let's test it out so I'm just going to refresh this and great we are getting back that one object and if we look in here there's our email okay it has been destructured so we can pass it through into here wonderful okay so let's carry on so that is working fine we are now able to get to Do's based on a certain email address based on what user email we pass through into here of course this is being hard-coded we are going to have to get that uh from when we log in but we will do that later on so for now I'm just going to say that up here and let's move on so at the moment we're console logging the Json to essentially show up in this URL so if I wanted to I could even go to localhost 8000 forward slash to do's and just hard code Anya at test.com and I should come back with that so that's essentially all I'm doing and constructing a URL however I want to actually save this Json to the app right so I can do so with your state so const let's save it as tasks and then let's also change those tasks with set tasks and then I'm going to use state in order to essentially say that the beginning state of tasks is going to be no okay so let's import use state from react as well so use state and now this will be assigned to here and we can change it using set tasks so I'm going to change task review now to whatever the Json is okay so that's what I have done let's not console log this out anymore I am however going to console log the tasks here so that we can see them so now there are tasks there's just one in here with a next let's actually get to using this tasks in order to map them out onto list items so let's do that next okay so at the moment there is only one task in there however if I want to sort by date so if I want to get those tasks and sort them by date I'm going to use these sorts methods and I will get the tasks and check if they exist because at the beginning they are now on the first round that they are now and if they exist I'm going to use the sort method to essentially compare A to B and what I'm going to do is essentially get the first tasks date so I'm going into the object and using dot notation getting the dates it will return this and just in case it's in any funky format I'm going to pass it through into the new date Constructor from JavaScript and what I'm going to do is essentially compare it so to compare date to date I'm going to get the a date and the B date and I'm going to also pass this through into the new date object just like so and that will sort our dates this will come back with a new array so I'm going to store this as sorted tasks okay so that's what I have done now I'm going to get those sorted tasks so essentially let's get up our curly braces so that jsx knows not to treat this like text and I'm going to get those sort of tasks and if they exist I'm going to map each one onto a list item element okay so there we go now let's import that list item element so import list item from and let's go into the component and get that list item so there we go so now that list item is imported we should just have one but let's complete the syntax first so to map well first off I need to look into the array and get each task okay and for each task I'm just going to map it onto the list item when we map each component also needs a key and luckily for us our task does have a unique ID so I can just use the ID and then I'm just going to get that task hold task the whole object pass it through into our list item so that's what I have done which means that now on the list item let's get up our list items so let's look in the components let's get the whole task to the whole object and destructure okay which means that now I have access to this whole task assault object and all of its properties so if I just want to go ahead and put an AP element let's get up our curly braces that shows the task tighter I can do that and there it goes okay wonderful so now that that whole object is putting passed through we do have access to all of its properties however I also want to style this up a little bit to look like an actual list item so I'm going to give this the class name of list item and let's style it up okay so for this I'm just going to get my index CSS file up and this time we're going to be styling each individual list item so let's grab that class name so the class name of list item just like so I'm going to say that each list item is going to have a width of a hundred percent of its parent I'm going to give a margin of top 10 pixels and bottom 10 pixels and zero from the left and right to space them up from each other it's also around each one off so I'm going to give each one a border radius of 10 pixels and then I'm also going to do box Shadow on each one the Box Shadow I'm going to give is going to be black but a transparent black with 0.08 opacity I'm going to go 0 x axis 0y axis zero blood and one pixel spread okay so that's the book Shadow I'm gonna get it so at the moment it will look like this great so I think this looks okay for now I'm just gonna also want to initialize flexbox as I want everything in the list item to essentially go from left to right and have equal space in between it so I'm going to do justify content this time space between wonderful so that is my list item now let's go ahead and put more stuff into here so what else do I want to put in here well I think I'm going to actually create a div and this is going to hold our information so I'm going to give this the class name of info container so I'm going to put into a container just like so and in here well I'm going to put the task title I'm also going to give this the class name of task title so we can pick it up later okay great I'm also going to actually put in the progress one so let's go ahead and put the progress bar element in here and I'm also going to put in an icon in the info container so the tick icon is one that I made so again it's a component okay so now let's import those two things I'm going to import tick icon from let's go into the tick icon file and once again I'm going to do the same for importing the progress bar so progress bar from and as it's in the same place as we are in now I just need to get the progress bar so great so those are essentially the things that live in my info container next I'm also going to want to create a button container okay so let's create another div this time I'm going to give it the class name of button container and we've actually used this before right so this should essentially apply this padding so that it essentially makes everything go from left to right and I actually want the same style to be on the info container so I can actually do comma info container and this styling will be applied to both classes okay wonderful and what do I want to be in the bottom container well some buttons I guess so let's put in one button this is going to be to edit and another button this is going to be to delete okay so I'm going to add that functionality to the list item let's also pick this button out let's give it a class name and I'm going to give it the class name of edit and let's also give a class name to this one I'm going to give it the class name of delete okay great so that's what I have done let's carry on uh in fact I think we should probably make the list item an actual list item element as that does exist so let's go ahead and do that until I have done wonderful this should be class name otherwise that class name will not be applied so just make sure that says class name great I'm happy with that so that's what it looks like at the moment I think this looks good let's go ahead and create a custom tick icon next so let's do it I'm just going to get rid of that and get rid of that and let's bring up our tick icon okay so our tick icon is essentially going to be an SVG so it's just going to return an SVG so svgs are fun okay I've actually taken this SVG from font awesome icon so please go ahead and do the same I am not going to create a custom SVG it's very difficult however we can just use libraries such as this one in order to get so for example I can get the code for this simply by selecting the one I want and grabbing this whole SVG card okay so that's what I am going to do there it is again here's the URL please copy this and we can customize it as well so just paste it in like so there we go okay so that is my SVG that's all I'm returning I'm going to give this a class name as I'm going to pick it out but the width we can essentially control from here I'm going to put 25 that height I'm also going to put 25 The View box I'm going to keep this same and then the title icon let's keep the same the path however I think it's fine to leave it as it is so this however the style so the style is something that will not work on here so there is the style we're gonna have to essentially do this in so let's pick out the whole style in CSS okay so I've just taken that and let's give this SVG the class name of tick and save it and now in here so this is on the list item so I can even go down the list item if something with a class of tick exists then it's going to have this style so now I'm just going to get rid of that star word and just put it in like so so putting everything in like that okay and there we go I do think maybe we should make this generic but it's up to you so I can make it generic if I want okay and this is actually on the path so this is the SVG with the classroom tick we need to apply that to the path so we're going to look for an element with a class of tech and then the part that lives on it is going to have this styling okay and now I'm going to grab the SVG itself so the tick and just Pat it out from everything so I'm going to give it a padding of 10 pixels and wonderful so this is looking good I don't need this styling either so let's just go ahead and delete that and this is what my code should look like for my S feature okay so that it is let's carry on so now if I look in here ta-da there is my tick it's looking wonderful I'm happy with that let's move on so great I think this is looking good let's carry on the next thing I'm going to do is just style up these buttons so let's go ahead and do that we happen to edit we happen to delete and we also have one to create so I'm just going to make these buttons generic so just put them up here and if something has the class of edit I'm going to overwrite the Border I'm going to give it 1.5 pixels solid and then this RGB color that I picked out earlier so there we go I'm just adding a green and I'm also going to make sure that the color of text is going to essentially be the same color so let's give the this RGB and then I'm also going to make sure that the background color is transparent even though that's a default so that should be applied and the text transform I'm going to set uppercase so perhaps we don't need that let's carry on okay so that's what my edit button looks like and then let's perhaps also add a on Hover to it so I'm going to grab anything with a class of edit and I'm going to say if we hover over it I'm just going to change the background color slightly and I'm going to use RGB for this and I'm going to use 182 23 186 so it should no longer be transparent anymore and there we go and finally I'm just going to do one for the active and for active so let's grab this so if we actually click on anything with a class of edit so anything with a class of edit right I'm going to get the Border and color and background so background color and I'm going to change it slightly so I'm going to use RGB 141181145 and I'm happy with this green however the font color I'm going to change to White so I'm going to do two five five two five five two five five okay so it should look like that great and now let's do the same for the delete so once again I'm going to grab anything or the class of delete and for delete well I'm just going to say that I want to give it a border that is 1.5 pixels solid and I'm going to go with RGB two five five one seven five one six three this time so kind of reddish color I'm also going to make sure that the font is the same so they match and I'm also going to make everything up okay so text transform uppercase great and then I'm going to say that if we hover over anything with the delete class I'm going to change the background color and the background color is going to be RGB 255 201193 okay so that's what I'm going to do and once again I'm going to grab delete and say that if we actually click on anything with a class of delete well then I want to add a border 1.5 pixels solid RGB two five five one seven five one six three okay great and just add a background color uh that's essentially the same so I'm going to choose that and then make sure that the font is white so RGB two by five two by five two by five so just the same as before in fact I'm not even sure if we need this let's just check because that is coming from there anyway so let's check it out if I click on it okay so we don't need that let's get rid of that that is some unnecessary that is coming from the delete class anyway so just do the same for the active class or edit as well wonderful so this is all looking fantastic next we also need to do the create button so edit delete and create other buttons that we're going to be having and you create the create I'm going to give this a border 1.5 pixels solid RGB one zero eight one one five one four eight and then let's also give it a color so let's make the font the same so I'm going to grab that and make sure the font's the same uh text transform we're going to do uppercase one more time okay and then the background color well that is going to be transparent so we don't have to do that once again let's change what we do on Hover so on Hover of create I'm just going to change the background color and it's going to be a lighter version of that same purple so I'm going to use one three one one three eight one seven two and then also if we grab create and say that's active so if you actually click on it I essentially want to get the background color and change it to be this color okay and let's just change the font color too so using Color I'm going to do RGB two by five two by five okay and great so there we go just the sign out button I believe next so let's do DOT sign out and if something has a class of sine out I'm going to give it a border of 1.5 pixels solid RGB two five five one seven five one six three this time I'm also going to make sure that the background color is this for a sign up button so it's going to be slightly different and the color is going to be RGB two by five so just making sure that it is white okay great and don't forget that last semicolon and this time if we hover over a sign up button so just make sure to do that let's change the background color and I'm just going to make it rgb17594 and for this time with the same border okay so I'm just literally changing the color 1.5 pixels solid and then this is going to be it okay so that's what our sign up button looks like at the moment in fact we don't really want the color of this to be white let's maybe make it two three four two three four two three four so we can actually read what is there that is very light let's also make this important as to override any background color so there we go let's also apply it for the hover as I don't know why that's not being applied so that is now being applied that is good and finally if we're active on the sign out button so active we're going to change the Border 1.5 pixels solid RGB 175 8181 let's also change the background color to be the same and this time let's make the font white so color RGB 255 255 okay so great and I believe we should probably have to make this important as it's having trouble overriding that so I'm just going to add that just to be sure and great that is looking good Okay so we've finished the styling of this app let's actually get to maybe adding new ones if we click on here so for this I want a model to pop up so let's go ahead and do that so I think let's actually work on our model next so our modal well first off let's actually style this to look like an actual Moodle so I'm actually going to wrap this all in the class name overlay so we can add an overlay for when we are interacting with this model okay so after we create that overlay we then actually want to show our modal right so let's give this the class name of no job so there we go now what do we want to have in our model well I'm going to create a div and this is going to hold our title as well as a button so I'm going to have an H3 element in here and this is going to say let's create your task however this I actually want to be based on whatever mode we're viewing the Moodle in so for example if the mode is create I want to show that in here so let's get up our Kylie braces and just type in mode so this string which is assigned to this console now show up in here same if I change this to edit okay so that is something we want and I also want a button in here to essentially shut down our model so here is my button and I'm just going to put in an X for now okay and that is how we shut the model next I'm also going to have a form in here so let's create a form I'm going to also give this the class name of let's go with Forum title container so we can pick it up now what do we want to go in our form well we're going to have an input right so essentially all the inputs that we need in order to create our task so we're going to have three inputs I think let's just have an input for the title and input for the progress and then an input with the type submit okay so that is essentially going to show up as a awesome right okay and the first input I'm going to make it required so let's put required and I'm going to add a max length based on our database I want this to be 30 for the task title and as a placeholder so as in placeholder text I'm just going to put your task goes here I put in a space so to space it out a little bit from the edge and as a name I'm just going to put title okay so that's the name of my input and as a value I'm just going to put for now an empty string and we're going to essentially update something every time the input changes so we're going to write a function called handle change to do this so cons handle change okay for now I'm just going to console log changing so that we know what is going on so that is my first input okay the type of this text as a default let's maybe also put in a break here so I'm just going to put in a break element and let's now have an input the type of this I'm going to change to the range because I want this to be a slider so that's what I've done let's also put this as required I'm also going to give this a Min and a Max so the minimum of this is going to be zero and the max of this is going to be 100. uh let's name this some things and this name of this input is going to be progress just like so okay and the value of this is going to be just an empty string for now and it's also going to update every time we change so this is going to handle change okay great and like I said this input is going to have the type of submit and on click of it we are going to essentially uh either post some data to our database or edit some data that part is going to be totally up to us okay and the class name of this input is going to be either create or edit so I'm just going to pass through the mode that we are currently viewing this then which as we just wrote so we already have a class name of create and a class name of edit and this can be applied to anything so not just a button which means that we can apply it to this input as well wonderful So currently we are on mode edit so it should show me the edit button however we actually need to see this modal right so perhaps let's go ahead and grab this element and let's show it on the list header okay because if we click on here we want to create a new element right so for now what I'm going to do is essentially right before this finishes I'm just going to put in my modal okay which means we need to import it into here so I'm also going to import modal from and then we're going to get the model so at the moment this is what it looks like because we haven't started up so let's get to doing that next okay so let's get up our index CSS file and first off I'm just going to pick out the overlay so let's do that all the way down here let's start styling our model okay so I'm just going to comment that out for now so let's grab our overlay now our overlay is going to have a position of absolute because it doesn't want to take anything into your account so position absolute is what I'm going to give it from left I want zero we're also going to do top zero right so it sticks to the top the width I'm going to do 100 of the viewport width the height I'm going to do 100 viewports height okay just to make sure it covers the whole viewport the background color I'm going to go with a black so RGB a make a transparent a zero point yeah sure let's do this one maybe let's make it 0.5 however and then I'm going to initialize flexbox and I'm going to use justify content Center to Center everything from left to right and I'm going to use align item Center to Center everything from top to bottom and we've assigned a height so that should work okay so that's what our overlay looks like now let's get to styling up the modal so now I'm going to grab the modal next okay so the child of the overlay now let's also just grab the modal and why do we want to start our modal like well I'm actually going to hard code a width for it of 500 pixels so just like so I'm going to give it a background color of white so I'm going to do RGB two by five two by five two five five just like so and let's Pat it out so I'm going to do padding 40 pixels I'm going to also do border radius 10 pixels and I'm also going to do box Shadow okay and my box Shadow is going to be rgba zero zero zero zero point zero five zero pixels x-axis 6 pixels y-axis 24 pixels spread and zero blur and then overlay with another box Shadow so again RGB a and I'm going to do zero zero zero zero point zero eight as the color and then zero zero zero and one pixels per okay so this is what my model looks like at the moment next let's also decide that we want our form title container so let's grab that and for readability I'm just going to say that it lives inside the modal I'm going to initialize flexbox on it so display flex and I'm going to use justify content space between this time okay so that those two items appear like so and now let's also grab the button that lives inside the form container okay so I'm just going to grab the button that is inside of it and I'm going to do border none as well as these background color transparent so that's what I have done and that will just mean that my X looks like this great next let's also make sure that it has an active class so when it's active I'm simply going to essentially change the color of the text to be this kind of red color so that's all I want to do in this case okay great okay now I'm going to get the form but only the form that is inside of the modal okay no other form and I'm going to use a display Flex and then say that the flex Direction I Want Is column so make sure that everything is stacked on top of each other like so and now I'm going to get any label that lives inside the modal as well because we're going to add labels in here and I'm just going to say that I want the font size of the labels to be 13 pieces so great that's what it looks like at the moment let's also edit the inputs now this isn't the only place I'm going to put inputs so perhaps let's maybe just put them up here so I'm going to make them generic so put them with all the generic stuff so let's grab any input that lives in our project and just give it a margin of 11 pixels from top to bottom and zero from the left and right I'm also going to give each one a padding of 12 pixels top and bottom and 16 pixels left and right and let's round each one off so I'm going to do a broader radius power pixels okay and let's also give each one a border of 1.5 pixels solid and RGB I'm gonna go with 230 232-236 okay so our inputs should now look like this great and you will see how that edit class has been added to this input okay so I am happy with this I think it's now time to move on so back in here I'm just going to add a label here okay and this label is going to say drag your to select your current progress and this is going to be for the range which means I need to give this an ID so I'm going to give this the ID of range which means that this label is 4 anything with the ID of range okay so for ID and that's how you essentially look them up okay now to start off this module essentially it's going to have to store data right so we're going to have to essentially import state to do that so I'm going to import use state from react okay wonderful and if we are on create mode so we're creating a new one I essentially want to save whatever the data is so data and then we're going to use set data to change that data and I'm going to use state and start off with State be an empty object because when we create our essentially our object that's going to represent a to-do item of course we're getting the title from the modal and of course we're getting in the progress but we also need to add a user email behind the scenes as well as the dates of today's date so for these Reasons I'm just going to put each of the properties that make up my object in here and I'm going to override them if need be so title and I'm gonna have progress empty string and then the date so if we are creating so let's go ahead and just put mode up here and I'm going to put edit mode right like this and if mode equals edit and this is true then we know that we are in edit mode so we're going to put true otherwise we've put false right so let's put the mode up here once again we are actually in create mode so to get a constant edit mode that stores a Boolean I'm getting the mode and if mode equals edit and this is true then we want to return true otherwise we want to return false okay so now let's get at edit mode and if we are in edit mode and this is true well we're going to want to essentially get the uh date from the object we are passing through otherwise we're just going to use new date and get today's date okay so hopefully that makes sense this can be a bit confusing because you know we're going to be using this mode for creating new tasks but also editing tasks too but like I said we're on create mode so let's pretend we're in create mode Let's Pretend We're you know just getting the contents of these inputs for the first time and saving them to sit okay so let's do it in order to do this I'm going to have to handle the change and we're going to get whatever input we are essentially interacting with so let's pass through e and we're going to get each one of the inputs names so we're going to create essentially a property and value pair based on the name and the value okay so if we grab e and I'm just going to put an e here for now if I interact with this and let's look at our console log this is the whole e object okay it's telling me that I am interacting with an input okay that's the target input and it has a name that has title so we're going to get that e name and we're going to also get the E value so let's get the E name and I'm going to save this as something I'm going to well essentially we can get the whole e-target and we can destructure it okay we're destruction that whole object and we're getting the name and value from it okay so that is a cool way to do that hopefully this is useful for you but again we're essentially going into that object getting the whole Target object and getting the name and value from it so there's the name as you can see here I'm also going to get the value so we're destructuring that from the object once we have that name and value let's create our key value pair and I'm going to change the data using set data so in order to essentially set the data of an object I'm going to essentially get whatever exists already in there right so let's go ahead and do that I'm going to destructure everything in there like so so I'm spilling all of this out spilling all of that back into here and now I'm going to override some things so I'm going to get the name and go into the object and create a property based on the name and then I'm also going to get that value and just assign it to the value okay so essentially if I'm interacting with something that has the name of title we're going to overwrite this and if I'm interacting something with the name of progress we're going to overwrite this okay so we're going to be changing this object and this is the syntax to do it I understand why it's confusing so please take your time with this okay I'm actually just going to console log out data to show you this changing so let's delete that and now let's look in here so here is my console and if I just type A okay you will see that original object and title is just being changed a and I can also change the progress I can override this progress from being a string to actually having a value okay so there we go I've just changed it to 67. now let's actually show this in the modal so I can do so by essentially grabbing the data title okay and then passing it through here so data title and also grabbing the data and getting progress from it so now that will be represented in here too just like so so that is my new object this is essentially what I want to pass through to our server in order to create a new task but for that we also need to update our user email so let's carry on so we have already done this in create mode however I think we should be able to set what mode we are in from the parent itself which is the list header so here if we click on it in the list header well this will be to create right so I want to essentially pass through the mode of create so I'm just going to pass through the string of create if we are clicking on it from the list header so because we essentially interact with this button and I want to also control if we see the model or not so on click of this I also want to set the show model so I'm going to essentially get my use State syntax so I'm going to put show modal and then set show modal here too and use state for this is going to be null to start off with so now let's go ahead and import use State primary act and now I can change this so in fact show modal should probably be false as we don't want to start off with a share metal being seen and then I'm going to use set show mode also if we click on this I want to set your middle to be true okay and we just call this method so we need to make this a callback function again so that's what I am doing by adding this this code okay wonderful so great let's test it out however I also want to control if we see the middle or not from the modal right because it has this little button right here which will allow us to essentially shut down the modal so let's also pass through these such show Moodle method into here so that we can use it so now on the modal I'm essentially passing through let's do structure the props the merge and set show modal right because I'm passing through mode and socio modal so let's pause that through a mode to search your model which means we don't need to hard code the mode here anymore that's being passed down here if we click on it from the list header the mode that we pass down is going to be the string create and set show modal well on this button right here I want to essentially on a click once again make this a callback function set show model to be false just make sure that that is on click and also let's just change this to be your task okay great so we are passing that through and essentially on the list header we only want to see this if show modal is true so let's wrap all of this in some Kylie braces and if set show modal is true then we can show this component okay so this is true then we also show that so let's save this and test it out okay great so let's create your task we can open the model and shut it let's do the same for showing the modal if it's on edit mode next by clicking on this button okay so this time instead of doing this on the header we're gonna have to store State on the list item to set the show middle or not so once again I'm just going to import use state from react I should probably have that on the first line up here and then I'm going to use const show modal set show modal and then use State and start off with the being false and now if share Moodle exists so I'm going to do this probably right here I'm going to get up my curly braces show modal and I'm going to show the modal okay so the middle element like so so let's go ahead and import that next I'm going to import Moodle from Moodle okay great and on click of this so on click of this button I essentially want to set show modal to be true and we've just called that so we need to make this a callback function and if it is true the mode we want to pass into this well it's going to be edit as we are clicking on an edit button so that makes sense that is the mode we want to pass through and we also want to control if we shut this Moodle or not so I'm going to have to pass through such a model like so okay so great so let's test this out so if I click on here let's edit your task and I can also shut it however if we are editing a task we also want to pass through the data from that task right so I think we should do that I think we should get the whole task that is populating our list item and pass that through into the show model okay so let's pass that through into the Moodle as a third prop if it exists and if it exists then we want to essentially get the task and get the user email from it if it exists right and if we are in edit mode I guess so if we are in edit mode and that is true then we get the tasks user email otherwise we start off with it being null same for the title if we are in edit mode then we get the task title otherwise you put no and same for the progress if we are in edit mode and this is true we get the task progress otherwise it's null or let's make it 50 to start off in the middle okay so this just means if I click edit it will populate my app with a task data or if we add a new one it starts off fresh so once again edit it's populating the title it's populating the progress and if we click a new one they're both refreshed and reset so null and 50 is the values that are being passed through okay great hopefully that makes sense now let's get actually using this data in order to send it to our database so let's start off in create mode first so let's go ahead and write a function for if we want to post data to our database so just as if we're creating a new post so post data is going to be my function and post data well we're going to use try and catch okay to catch any errors so catch error just like so so this is what I'm going to start off with and if there are any errors we're just going to console error the error so just like that okay and what do we want to try well we're going to fetch and let's actually write this in our server so let's get up our server next I'm just going to minimize these and get up our server so this time we want to create a new to do to put in our database right so let's go ahead and do that so to create a new to-do we're going to have to use the post method and let's post to the to-do's endpoint okay so let's just keep it like that that is absolutely fine it's a post method so it's okay if it starts off with the get method one as well so they're kind of similar but that is fine and then we're going to pass through the request and the response so this is my syntax and in here once again I'm going to use the try and catch blocks to catch any errors and then console error the error so we can see what is going on under the hood now if I want to make a new to do well let's actually write the command that we're going to have to do this I'm going to use pull query and the command that we wrote In order to insert new items into are to do table is insert into and then the table is called seduce and then it's open up our parenthesis because we're going to put an ID column a user email column make sure this feels exactly the same as we did when we created our row very early on we also need to pass through a title we also need to pass through the progress and we also need to pass through a date so that's what we need to do and the values are going to be well I'm going to use variables for this so we're going to have one variable a second variable eight third variable I'm going to have five variables in total so four and five and now let's actually pass through the values of this variable so I'm going to open up my array and then we're going to have to pass through an ID a user email from our front end so user email a title from our front end progress from our front end and the date from our front end so let this time attach that to the body so we're going to attach to the request body this time not the params and we're going to destruction all those things from that okay we're not going to destructure the ID as we are not passing that through we're just passing through these four things so we're going to pass through the e-user email the title the progress and the date okay so we're going to pass through those four things I'm also wanting to make a unique identifier and we imported a package to do this so let's go ahead and use it so up here I'm going to this time const it's going to use V4 this is from the documentation I'm going to use uuid version 4. and it's going to require the package that we installed called uuid so this is going to give us a unique identifier so if I get this method and I call it I can make a new ID so that's what I've done and I'm just going to save it as ID and that will be passed through here so now that's getting to passing through these four variables with my request body so we know the URL we need to go to it's localhost 8000 forward slash to Do's so let's go ahead and do that I'm going to put http maybe just make sure to make it the same so just as we wrote here just copy that and paste it in like so so that's what we're fetching right but this is going to be a post request we're sending data so we're also going to have to pass through the method which is post so just go ahead and do that I'm also going to pass through some headers because we're now working with Json right and sending Jason over and working with Jason so I'm going to put content type app location Jason and we're going to pass through a body right because we know that we want to send some stuff over with the request body and we want to get these things so let's pass through those four things with the body in fact I can just pass through these four things because I said on the data so let's get data and pass it through the body but let's also wrap it in decent stringify as it's an object so that's something we have to do great so this is looking good let's also get the response of this so I'm going to save the response of this and as this is an async function I'm going to use the await keyword in front of it which means we need to make this an async function okay so let's actually console log the response for now so I'm just going to console log it out and let's post the data now when do we want to post the data I guess we need to post the data if we click on the submit button right so type submit here let's also added on click however if we are in edit mode so if edit mode is true then we want to do something else otherwise we want to press the data so that's something that we have to do and it just means if we're in edit mode we can edit data or if we're not in edit mode which we're not currently we can post the data so let's check it out at the moment we're just going to be console logging the response but I just want to see that we are passing through the data correctly here so all I'm going to do is also console log those four things so check that they are passing through my request body so for now what I'm also going to do is on here let's just go ahead and put Bob at test.com because you can't leave it as no so I'm just going to add new blur let's change that so that is my object now user email does exist and hit submit and great this does refresh the page though so we can't see the response to stop that refreshing as it's a form I need to do e prevent default to prevent a default action happening so e prevent default just like so and call it and pass through the AP so let's check it out so one more time add new SSS submit okay we are getting an internal server error this is because we are trying to pass you Json but we haven't actually written code for us to be able to do this so I'm going to use app views and then Express Json and call it so that should now work one more time let's submit and now let's check it out let's get up our terminal and there we go so we're getting our username we're getting our title we're getting the progress and then we're getting the date so we're passing those two things in and then we're putting them into the juju table great so this is looking wonderful let's carry on another thing I want to do is actually just show that response in the rest Json so let's go ahead and say this is new to do just like so and this is an async function so I'm going to have to put the weight keyword there and make this an async function just like so and this time I'm just going to use res Json in order to return that new to do as the response okay great so now at the moment we are getting all of this but if I click submit you're getting the response we're getting a 200 status so I can also say let's go back on the model okay instead of console logging the response I can say that if response status equals 200 like it does this time I can console log just for us to see worked okay and what I can also do is set show modal to be false again so shut it immediately okay and then I can also get the data again so get data right so get the freshest data and call it so that's only stuff I want to happen if the response status is 200 this also means we need to pass through the get data function into the modal so let's pass that through as the third parameter maybe okay as we're going to have to pass it through for both modals so now on the list item as a third parameter let's pass through get data and also pass it through from the app to the list item and also same for the list header so pass through get data and pass it through into the middle okay so that we go our modals sad prop is going to be get data on both the list header and the list item but the list item has a fourth one too and of course we need to pass through get data into the list item and enter the list header and they both deliver in the app.js file so that means that we need to pass through get the data into here but also into the list item okay great and of course that function lives here so that should work so let's go ahead and test that out of course we need to make sure that it's under the user email of Anya at test so on the modal instead of hard codingbob at test.com I'm going to put annual tests and let's try it out because of course we're only showing stuff that has the user email Anya so let's create a new one I'm going to go clean desk and I'm going to do that and hit submit and there we go how cool is that next let's work on if we want to edit a task so let's do that next so I'm just going to minimize all of these we have written some code if we want to post data however let's write some code if we want to edit data so this is going to be very similar I'm just going to make some space here I'm going to write edit data this time and make this a function once again we know there's going to be an async function and I want to prevent the default action happening of the form I don't want it to refresh so I'm going to do e prevent default next I'm going to use my try and catch blocks so try and catch and I'm going to catch any arrows so we can see them in our console log so we can debug better so console error error okay great and we only wanted to edit data if we are on edit mode so if we are if we click on the input and we are in edit mode we want to edit the data this time we're going to await Fetch and we're going to have to write an end point but we're going to edit a specific task and we're going to do it based on its task ID so if we're passing through a task if we're an edit mode and we're passing through a task we can actually get its task ID right so once again it's I'm going to use back text I'm going to http logo host 8000 forward slash to do's forward slash whatever the task ID is so I'm just going to pass through the task ID okay so now let's get up our server and write that endpoint Okay so we've got to create a to-do now let's do edit it to do so to edit this is going to be a put request because we're going to find an existing element based on its ID and then we're going to update essentially so let's use app put this time put as the correct method to use and we're going to now find the endpoint of to do's and then we're going to pass through the ID as a parameter okay this is once again going to be an async function we're going to pass through the request and the response and then we're going to get the ID from the param so from the rec params so just like we did before and then we're going to destructure this to get the ID okay great and we're also going to pass through the task with the body so I can get the request body and I can get the user email from it I can get the title from it I can get the progress from it and I can get the date from it I can get all those four things from the request body okay so they all live on here okay and I've destructured them great now I'm going to do try and catch so this should hopefully all be familiar to you and I'm going to catch any errors I'm just going to console error the error and what are we going to try to do well we're going to use a weight pull query and we're going to write a query to update so this is the SQL query for updating I'm going to do update to do so I'm going to get the table to do is set user email and then I'm going to pass through the first parameter to essentially update the email I'm going to get the title and pass through a second parameter to update the title essentially I'm going to get the progress and pass through a third parameter to update the progress I'm going to get the date and pass through a fourth parameter to update the date and then I'm going to do where ID equals the fifth parameter okay and I'm going to finish this off with a semicolon so that is my command and now I'm just going to pass through those values so my first parameter is going to be my user email because one is here next is going to be the title next is going to be the progress next is going to be the date and then where ID is five so the fifth one is going to be the ID okay and let's save this as something I'm going to save as edit to do and then I'm just going to res Json edit to do okay great so now let's work on passing through the idea as a parameter as well as passing through these four things with the request body to this URL so we've already written the URL we've already passed through a parameter which is going to be our ID okay we pass through the task ID next we're going to have to pass through the method so this is going to be a put method we're gonna have to pass through some headers as we are working with Jason so I'm going to put content type application Json let's also maybe make this consistent but I will be cleaning all of this up at the end and then it's also pass through the body which I'm just going to put as the data because we're in edit mode so it should come back with the task user email so whoever's attached to that task the task title the progress or an empty string so let's just change that to be the task up date so the original task date of when this was created okay wonderful so now we just need to wrap this in Json stringify as it is an object so I'm going to do Json stringify and wrap that whole object in it great and once again just like we did before so let's save the response of this and if the response comes back with a status of 200 so if response status foreign well I want to shut the modals to make it false again and I want to get the data again right I want to get the freshest data don't forget to put dash dash here for that to work so let's try out let's go ahead and edit this one I'm just going to put an exclamation point so that is the data that we're sending right and hit submit and that has now been updated how cool is that the last thing I want to do is just delete a to-do item before moving on to the auth modal so let's do that next so in order to delete something let's just go back here and perhaps let's maybe put this on a new line so you can see more of it there we go of course this code will be available too but I just want to make sure that you can see as much as possible of it right now okay so there we go let's write something to delete so delete a to do and we're going to have to do it by its ID okay as that is the primary key for it to do so to delete a to-do item I'm going to use app delete so the delete method and we're going to go to the to-do's and we're going to pass through a parameter in order for us to grab it so we know which to do item to delete let's just get our past Syntax for writing this method okay great so now we're going to get the ID from the request param so request params I'm going to do structure it to get the ID from it so destructure that object because request Powers is an object to get the ID next I'm going to use a way to pull and write a SQL query and the SQL query to delete is literally going to be delete from and then we're going to get the table's name where ID equals and I'm going to pass through a variable so that's it and the variable here I'm passing through at the first variable is ID so that will be replaced here cool and let's save this as constituted delete to do just like so and I'm just gonna do res Json delete to do wonderful now let's stick this in a try and catch so we can catch any errors so try catch error and then I'm just going to console error the error okay and just grab all that and whack it in here like so making sure that this is a comma right here so this time we want this to happen on the list item right so let's get up our list item and this is going to happen when we click on here so on click I essentially want to delete item okay so now let's define this I'm going to Define it up here const delete item equals and then once again we're going to use try and we're going to use catch error console error error and we're going to use a weight so let's make this an async function I'm going to await Fetch and then I'm just going to pass through I'm going to use backticks I'm going to do http local Post 8 000 forward slash to Do's forward slash I'm gonna pass through an ID right so we've got the tasking through into here so I can just grab us by D and then let's save this as the response okay and once again if response status equals 200 then we can get the data again let's get the freshest data of course you can write else if you want to handle errors but we're not going to do that in this tutorial okay we're just going to stick to the basics and finally I just need to pass through the method in here and that is going to be a delete method okay so just make sure to make an object and pass through that method with it we don't need to handle Json as we are not passing through any Json or anything like that so now let's test it out so let's just go ahead and delete this one and we've done it wonderful so this is looking good I just want to actually hide this because we are using Create react app this will be a little bit different to how we saw them on the server so just click on client and create a DOT EnV file okay so making sure that is in the client directory and in here I'm going to have to add react app to the variable and I'm going to call it server URL okay so that's all I'm gonna do and now that just means that I can replace this so I can replace this in kingster and for now I'm just going to essentially replace it here so I'm going to just use that and I'm going to use process Envy in order to get it okay so that's all I have done please make sure to do the same essentially so do it here I'm just going to copy all of that I'm going to save this file and just put http localhost 8000 okay and where else we do this so we also do this on the modal so just replace this spot only and once again up here too so just the localhost 8000. okay and make sure to change that to be wonderful so that is it at the moment I believe we use it one more and that is on the app so just replace that in here too great let's carry on so now let's work on the auth modal so I'm just going to shut these down and let's get up our auth model here so our auth modal well let's give this a class name of auth container just like so and in here I'm going to create a div and let's go ahead and give this the class name of oauth container box just like so and in here I'm going to create a form and my form is going to have three inputs so one input another input and another input I'm also going to have an H2 element that essentially if we are on login mode so is log in mode log in and I'm going to put that as false to start off with so if is log in is true okay if we are on login mode then I wanted to say please log in otherwise I wanted to say please sign up okay so those are the things that I wanted to choose to say okay based on this variable okay so that's what I want to do I also want this input type so the type of this to take email I want this type to take password and I want this type to take password too so that is something I'm going to add I'm also going to add the placeholder of email for this so people know to put that email and for the second one I'm gonna also put password for this third one however I'm going to say confirm password and we only really want this one to show if we are signing up right so I'm going to wrap this one in curly braces and if is log in is not true then we can show this okay because if we're logging in we just want to see that and if we are not logging in so otherwise we are on the sign up form we want to see for three great so that is looking good I think we should also have a fourth submit that's going to have the type of submit right so it's going to show up as a button so let's give this the type of submit just like so okay and I'm also going to give this the class name of create so we can style it as a create button so that's what I have done let's carry on so that is going to be my auth uh I think we should also consider adding a P tag that is going to show some errors but that's only if Eric's exist so I'm going to say const error set error and start off with the error being null so there's no errors however if they do exist I want to show them here so let's actually wrap this whole P element and say if error does exist then we want to show that okay and of course we need to import your state so import use state from react great so that is looking good next after the form I just want to create a div and this is going to hold up both options so I'm going to give this the class name of course options so we can style it up okay and in here I'm simply going to put two buttons one button is going to be for signing up so we can choose to sign up or another button is going to be for login okay so that is what we can do and I can essentially change which view we are in up here so let's go ahead and do that so I'm going to do const is log in and set is log in and I'm going to use state of this and set state to be true okay so instead of having this here I'm going to be doing this in state so I can now use this on the button so on my first button I want to change the state but I'm actually going to do this in a function so let's call this view login so view the login option I'm going to pass through a status and then I'm going to set login and whatever the status is this is because I actually want to do two things in here if we change from either view I also want to clear the error so I want to also set the error to be no so now I can use this function instead and on click I want to view login and I want to pass through false if we are clicking on sign up so let's also make this a callback function now and then do the sample here so on click and I'm going to view login as true because we've just clicked the login page we want to see the login View and then let's also make this a callback function as we have just called it and we don't want to call it immediately it says that we go how cool is that one other thing we can do that is quite cool I'm just going to put this on two lines so it is more readable and we can add more to this button I can actually change the style of this based on if we are clicking this or not so I can do background color and if we are not on log in I can essentially change the color of this button to be white so that's what I'm going to do otherwise I want the color of this to be this kind of dark gray that I have picked out okay so great and now let's just copy this whole line and do the same one here however this time if Logan is true then we want it to be white otherwise we want to be Gray just make sure to spell unclick correctly here so let's see how this looks okay I'm going to get the auth and on my app so app is here and for now I'm going to say auth token exists so I'm going to say true as essentially having an auth token or not having an auth token is going to dictate whether we see the orthod or not okay so at the moment if auth token is true so here is my app if auth token is true then we want to see everything in here okay so I'm going to get the auth token and and then I'm going to wrap all of this in here so everything up till there and I'm going to also put it in an empty div just so that it's really obvious that we are essentially wanting to show this if an old token exists otherwise if no auth token exists then we want to show the author model okay so that's all I have written here so once again if there's no or token we show the auth modal however if an Auto token exists then we show the Lazada and we show the list items okay so let's import that author modal into here or from and then we're going to go into the components and get the auth component okay and let's say that auth token is false then we should be able to see that oof okay great so now if we click on here it should say sign up and it should show these right here and if I click login it should show these like so okay great so once again changing color and showing whether on the sign up page or the login page let's style this up further next okay let's carry on now in order for our token to be picked up we're actually going to have to restart the app so on the client I want you to just press Ctrl C to stop that from running and then to npm I'm going to start again and now our environment variable should be put up so but just let that refresh and wonderful we should also probably stop this running for you know if we are not locked in so let's go back to the app and let's just get the data if there is an auth token so I'm going to essentially just get this and say that if auth token exists then we want to get the data okay so there we go just save that and great so I think we are now ready to essentially style this up so let's get our CSS and saw the oauth container so I'm going to just grab this and then I'm going to say that we're styling the auth Moodle and let's grab the old container and I'm going to use display flex and I'm going to Center everything using justify content Center and margin I'm going to say 50 pixels okay next let's grab the auth container box so I'm going to grab that next just like so okay I'm going to use a DOT there I'm going to say that the width of this I want it to be 500 pixels I'm going to give it a border radius of 10 pixels okay let's tap this out I'm going to do overflow hidden and then also let's do a box Shadow and I'm going to do rgba I'm going to do black with 0.05 pieces t 0 x axis 6 pixels y-axis 24 pixels blur and then I'm going to Overlay it with another box Shadow this time it's going to be zero zero zero zero point zero eight and I'm going to do zero zero zero and then one pixel okay so great next I'm going to get the form so let's go ahead and get the form so I can say the form that lives inside the old container box and I can do display Flex initialize flexbox and I could also set the direction so I'm going to set column to make sure that everything's kind of sat on top of each other and let's also give it a height of 300 pixels as well as some padding of 20 great and the inputs we have solved already so that should be applied that is looking good the last thing I want to start is these two buttons so let's go ahead and grab the buttons they live in the auth options and the order options I just want that to you know make sure that they're next to each other and now the buttons that live in the auth option so each button every button that lives in the auth option essentially is going to have a width of 50 percent a border of none a padding of 10 pixels and then let's also set the font color I'm going to go with RGB 35 8 47 okay so that's what I have done and essentially they look like this so so much better I'm really enjoying this a lot more I'm also going to probably change the height of this maybe let's go with 350 pixels just so there's a lot more space in between okay great and margin I'm gonna say five pixels okay great now let's get to hooking this up so let's do it so we can get rid of that for now and on the auth let's write our code okay so the things we're going to want to store up here well we're going to store the email I'm going to change it using set email I'm going to start off with email being no we're going to do the same for the password so const password set pass words I'm going to use State and set it to be null and we're also going to do the same for the confirm password so confirm password set confirm password and we're going to use State and start off with the big no okay so we're going to use these things in order to essentially log in and sign up and we're going to do so on the handle submit okay so the handle submit is essentially going to help us deal with both of those things and we're going to do a prevent default as we don't want our form from essentially reloading so make sure to pass an e through here and E prevent a default now if we are on the sign up page so if we are not on the login page and our password does not match our confirm password well we don't want to be able to do anything right so I'm going to set an error so we can see and we're going to essentially set error to change this here so that it shows up right here in this P element so my set error is going to be make sure pause words match okay so that's what I'm going to do and I'm going to return out of this okay so that's the first thing we need to check for next I'm going to essentially use a weight fetch and I'm going to essentially go into process e and V and get the react app server URL right okay so that's what I'm going to do we've used the awake keyword so we need to make this an async function so I'm going to go in there and then I'm going to go to forward slash and we're going to actually Define our endpoints so our endpoints essentially I'm going to pass through so it's either going to be sign up or logged in so that end point I'm just going to stick in here so let's use this and on the handle submit well the handle submit is going to go when we click on the submit button right so the input with the type of submit on click of this I want to handle submit but I also want to pass through e and I want to pass through an endpoint okay which means we need to stop this from being called I'm going to make this a callback function and I could just pass through e like here as well okay and the end point well that end point is going to be dependent or if we are in logged in state so if log n is true then the endpoint we want to pass through is log n otherwise we want to pass through sign up okay so that endpoint should be passed through into the handle submit so that we can construct a URL and next we need to actually write that endpoint in our backend so let's do that next so in my server I'm going to have to write two endpoints one two sign up and then one two login now we've already defined those endpoints so let's go ahead and just write them down to sign up well I'm going to be posting stuff so there's going to be a post request and the endpoint is sign up as we defined previously there's going to be an async function as possibly the request and the response and then I'm going to use try and catch so try and catch I'm going to catch errors I'm going to console error the error okay so let's also grab this because our sign up function and our login function are going to be the same but this time it's going to be the login endpoint so just make sure that it's the same as you know our endpoints that we are passing through here into here in order to construct this URL great so that's what we're going to be doing and actually in both cases we're going to have to pass stuff through so we're going to have to pass stuff with the request body and that is going to be our email and our password right so const email and const password so whatever we are typing in as our email and password we're going to pass to the back end essentially so we can hash it in the sign up and essentially so we compare against the hash password that we have saved and then login so let's add that to the login as well great so now let's focus on the sign up first so if the endpoint is signed up we're gonna have to match the method and the method is a post method as we saw here so it is a post method and we're gonna have to pass through the email and password with the body so we're also going to have to pass through headers for that to work as we are working with sending Json so I'm going to pass through content type and I'm going to put application Jason okay and now our body that we're going to pass through well I could just get the email and the password so I can create an object in order to send over my email and password and it just means I need to wrap it in Json strength file in order to send that or you could have created a console data and save this object to it and then pass through data it's up to you okay great so that is cool and let's save the response of this so I'm going to get the response and I'm going to get the Json from it and I'm going to await this as Jason is an async method and I'm going to say this as data and I'm just going to console log the data because essentially what I want to happen is that when we send over this email and password I want to return my hashed password as well as my email so let's go ahead and do that so once again let's save the email and password so let's go ahead and do that on the input types so here is my first input so on change of this I'm going to do on change and then I'm going to essentially say that I want to set email to be whatever the e-target that I'm interacting with this value is and of course we need to make this a callback function as we are calling that immediately so set email and then let's make this a callback function so there we go we can of course make this a little bit more readable by splitting this out onto different lines and don't forget to pass through the key so there's my first input and here is my second input I'm of course going to have to save the password to so on change of this I want to set pause words and whatever e Target value is I want to update that with the password and let's make this a callback function and finally pass through the E and do the third input so here is my third input which you can only really see if we are trying to log in so let's add on change to this and we're going to set confirm password this time to be e Target value and then let's make this a callback function and pass through the ID so now those three things are being saved every time we interact with the inputs I'm just going to show you this so console log email pause word and confirm password and save and now here every time I interact with this that is being changed and if I go on the login page and if I go on the sign up page or through and now saved but we just want the email and password right because the only reason we're using confirm password is to essentially check if they're the same okay before carrying on so I'm passing through that email and password to the server so here and what do I want to do with them well first off I want to Hash the password so to Hash the password what I would do is use the package called bcrypt so let's go ahead and do that I'm going to save it as B Crypt and I'm going to require the package the script just like so so now I can use this and all this wonderful that nurse that it comes with so down here when I sign up I'm going to get the b-crip package and I need to generate a salt from it so Jen salt sink and I'm going to pass through 10 sort rounds because that is the amount of rounds that I want to essentially sort my password with so that is going to be the salt okay and now I can use bcrypt again so be Crypt and I'm going to use hash sync to pass through my password which can be one two three and then these salt rounds okay and the result of this is going to be my hash password so please refer to my hashed passwords section and tutorial in order to understand this better because I really do a deeper dive with that in there so now that we have our harsh password it's no longer one two three I can pass it through with the email to save it in my database okay so let's do that next I'm going to use a way to pull your and then I'm going to use insert into so the cql command insert into to set into my users table so we haven't used this table much yet and I'm going to pass through my email and my hashed password making sure to spell exactly the same as the columns we used to create this table so great on the values I'm going to pass through what we're going to have two so one variable and a second variable and then let's define those values so I'm going to open up an array I'm just going to do that on a new line for you and I'm going to pass through my email that I'm getting from the body and my newly hashed password I've hashed so it's no longer one two three thanks to using b-crypt and that's what I'm sending through into my database okay so that's what we're going to do essentially I'm going to save this under the const sign up okay and we're also going to need a token an authentication token which will allows to say signed into the app so again I can do so thanks to a another package called Json web token so I'm going to save this as JWT and require the package adjacent web token so now I can grab this in order to create a token right so let's go down here and sign up so once we've signed up let's generate your token so I'm going to use sign from the Json web token package and I'm going to pass through my email and then I'm going to say secret so this is just from the documentation and I can also say when it expires and I can put one hour so my token will expire after one hour unless of course I get rid of it myself and let's say this as token great so now what I want to send back is my email and my token so that we can pick it up from our front end now let's go ahead and try sign up using an email that already exists so for example if I try and sign up with annual tests and just put one two three one two three well we know this already exists so if I click submit and if we console log the error we will see here an error so we're controlling the error and we even see the detail so I can get that detail and essentially here instead of just console logging the error then I want to send over some Json and that's going to be the errors detail right because if you console log the error uh I'm just going to do error detail right here and save that to be sent back as the detail so if I now try to sign up using an email that's already been used so annual test has been used and I click submit and amazing we get the whole error and now we can use the detail from it in order to show it here if we want so I can also do set error data detail if a data detail exists so if data detail exists then I just want to show it here okay great so that is something that I can do with the errors otherwise if nothing exists I want to get the res Json and we are sending the email and token so let's go ahead and get that I'm actually going to get that data email and I'm going to use set it to cookies using set cookie and this is something that comes with a package that we are yet to install so I'm going to set cookie and I'm going to call this cookie email so that's all I'm going to do and I'm also going to use set cookie to set the auth token that should be returned back to us so that is going to be the data token okay that gets sent back to us if there's no errors so let's go ahead and install that package next so the package I need to install is react cookie so on the client this time I'm going to stop that from running I'm going to do npm install react cookie as well as dot EnV as we are using the dot UV package on the front end too so just go ahead and install those two things okay and now let's start again by using the command npm one start and there we go great so now I can use that package I'm going to import use cookies from react cookie and the Syntax for this will be very familiar I'm going to use const cookies set cookies or cookie and remove cookies so they've written it to look like a react hook and I'm going to use cookies and just leave this blank for now okay great so now I can set cookies and if I just console of the cookies I can see them at all times but not only this okay so let's try this out so if it's a success we want to of course set the cookies but that's not all we want to happen right we also want to refresh the pitch so I'm going to do window location reload okay because only once we set the cookies do we want the page to reload and we want it to affect the auth token that essentially tells us what we can see and can't see on the app so on the app now I'm going to go in here and I'm also going to import use cookies from react cookie and instead of hard coding my user email so let's get cookies set cookie remove cookie use cookies no I can get that user email from the cookies right so I can essentially use cookies and get the email from it okay and I can also get the auth token so auth token equals cookies fourth token making sure to spell exactly the same as you did when you set the cookies so now auth token we can delete that here and it will control what we see on our app one other thing we need to do is stop hard coding Ania so we do so on the modal I believe so let's not hard code this anymore let's get this from the cookies so once again I'm going to import use cookies from react cookie and then do const cookies set cookie remove cookie and then use cookies and start off with it yeah no and now we can use cookies email right here great okay so let's test that out so I'm just going to sign up I'm going to sign up with Sarah at test.com I'm going to do one two three one two three I'm also going to get my application up to check if it's saving to the cookies so on your cookies just make sure you are clicked on localhost 3000 and click submit and great that auth token has been saved as well as the email so that we can use it and our Pages reloaded and because an old token exists we are seeing this page how cool is that so once again with an auth token we can see this and if I remove this so if I delete it and if I delete the email and I now refresh the page below the page we are no longer logged in okay so because we are no longer logged in we see this auth modal because of the code that we wrote here okay because an if an auth token exists and we're going into the cookies and getting that auth token if it exists then we show the list header and if it doesn't we see the auth modal component okay so hopefully that makes sense let's carry on now let's deal with logging back in so essentially the end point that we are passing through needs to be log in right and it's going to be on log in essentially if we click on here so then we're just going to pass through the email and the password sure so again we are passing through the email and the password with our body to the login endpoint but instead of hashing at this time we're going to check it against the hashed password so let's do that here so essentially down here I'm going to use a weight pool query and then I'm going to do select all from users where email equals and then we're going to pass through a variable and that variable is going to be the email that we're passing through that body and because we know that in our table we made the email unique we made the primary key they should always come back with maximum one item in the array or zero items in the array so const users let's say the response up this and if users Rose length so if that does not exist if there is no length then we know that user does not exist so I'm just going to send back whereas Json and then the detail of this is going to be user does not exist so we can save it as an error otherwise we're going to await the Crypt and bcrypt comes with a compare method that allow us to pass through our password which can be one two three and compare it to the password that we saved the hash password so I'm going to go into the user's array so that is the array and get the first item and get the hashed password from it so hashed password just like so and I'm going to compare the two so one two three compared to the hash password now if this is a success and a match okay so if this is a success I can say that if success I'm going to stand back whereas Jason and I'm going to send back the email which is going to go into the user's rows and get the first item and get the email and I'm also going to send back a fresh token so to create a token well we've already done this so I can simply grab this code right here to create a new token for us so let's do that here and great otherwise if it is not a success I'm going to send back or as Jason and then I'm going to send back the detail of just login fail to something generic okay great so that's what I have done let's test it out so this time let's just refresh this and let's get up our application so we know that annual test.com exists if I sign in let's hit submit we're saving the auth token and we're saving the email to the cookies and we see how to do for Anya this is great the last thing we need to do is just sign out and to do that we need to remove the cookies so let's do it so in order to sign out well this is on the list header so there it is and my sign out function so if we click on the button I'm going to remove the cookies and for that I need to import use cookies from react cookie and then also we need this syntax right here so I'm just going to grab that and stick it in here and now I'm going to use remove cookie to remove the email cookie as well as remove the auth token cookie to spell it exactly the same as you have right here in the cookies and then we're going to refresh the page so I'm going to do window location reload and call it so let's test it out let's sign out this time and great we are now signed out and let's sign up again this time with Darius at test .com let's put one two three one two three submit and great we are now signing as Darius he has an email Anna auth token and now we can add new items so DARS item click submit and that will show up amazing so this is looking so good one last thing we could do is actually display the username in here so let's go ahead and do that maybe let's do that on the app itself so perhaps just under the list header I'm going to put it P tag and this is going to say welcome back and then the user email so I'm just going to put in the user email that we have saved from the cookies right here so that is what it's going to say and then also at the bottom up here I'm also going to put a P tag and this is going to say creative coding LLC so just like that and now let's start these two things up so I'm going to give the class name of copy right and then give this the class name of user email okay so there we go and now let's start this up I'm just going to get rid of all of these things and go into the index CSS and I'm just going to pick out the cop yright and also pick out the user email just like so I'm going to give the copyright the font size of 13 pixels I'm also going to give it a margin from the top of 10 pixels as well as a color of RGB 114114 and then for the user email I'm going to make it float right so float right I'm also going to give it well let's just give it all these two okay so just like that and now this looks like this how much better is that okay so now it's time to build out the progress bar so let's just get rid of these and get up the progress bar now the progress bar well I'm going to have an outer bar and an inner bar so let's go ahead and create that I'm going to give this the class name of alter bar just like so and then I'm going to create a div inside and give this the class name of inner block so that's what I'm doing and then we're gonna have to of course style both of these up but the width I'm going to control from the Javascript file and it's going to be based on the progress we pass in okay so that's what I'm gonna do and I'm also going to assign a random color however fast let's start with the basics and just grab that outer bar okay so I'm just gonna grab it down here I'm going to give it a width of 200 pixels and a height of 14 pixels and I'm going to make sure the background is just one color so let's go ahead and do that background color and I'm going to go with RGB two one six two one six two and six so kind of grayish color there we go and I'm also just going to round off the edges so let's give it some border radius I'm going to go with seven pixels and I'm just going to use overflow hidden to hide essentially the inner bar if it's outside of that border radius so let's also grab the inner bar just like so and I'm just going to give it a height of 14 pixels because as we said we want to control the width from here okay great so now I'm just going to put this on another line just like so okay because I'm going to use style and then use two Kylie braces in order to give this a width of whatever the progress is so let's pause through the progress into the progress bar so where does that live that lives on the list item here is the progress bar I'm just going to pass through the progress just like so and that lives on the task object okay great so now that width is just going to be I'm going to use my back ticks for this because I want to insert the progress and I'm just going to add a percentage sign at the end okay so that's all I have done we of course haven't assigned it a color so another thing I want to do is give it a background color so I'm going to use background color spelled like this okay so camel case and you know I could just go red if I want and that will be red okay but I don't want this I want to do a random color each time so to do this I'm actually just going to use an array of random colors so here's my colors array and inside I'm going to put in some random colors I have picked out so these are my rounding colors that I'm going to use we're going to essentially choose from one of these right these are actually colors that I kind of already used in this project just to keep everything a little bit consistent in terms of a color scheme okay and I think we should just have four so I'm just going to put in the others okay one four eight and one last one so it's again a string and I'm going to go one four one one eight one one four five just like that so that is my colors array now to get a random color for from here well you know what to do we're gonna get that colors array we're going to pass through an index from 0 to 3 essentially zero one two three right to get back one of these four and I can do so by getting the colors length and to make it random I'm actually going to multiply it by Math Run done and I'm going to also pause this whole thing through my floor to round it down to the nearest full integer so we get a full integer this will turn if we'll integer that is either zero one two or three okay great so that's what I have done and I'm going to save the return of this as random just like so so now I can get that random color and just put it here and now we'll get a random color from that array each time great I'm loving how this is looking so far one last thing I'm going to do is actually on the list item just grab the task title okay and I'm just going to assign a width so that it's hard coded at all times of 300 pixels okay so that is what it's gonna look like okay so we are done here the next thing to do is deploy this so to do this first off I'm just going to go to GitHub and I'm going to drag this code onto a new directory okay so let's go ahead and create a new repository I'm going to call this deployed to do up and then let's make it public I'm going to add a readme and I'm just going to create the Repository now in my project well I'm actually going to delete the node modules as we won't be able to upload them and we don't need them okay I'm also going to delete any package lock Json file so delete that too let's delete this one so delete all three of the package lock Json files from this project just delete them as well as all three of the node modules so there's one more delete there's some node modules so delete those and there's some node modules so delete those two okay all three should now be deleted great and now let's stop this from running so Ctrl C on the server and press Ctrl C on the client so that has stopped running and now all I'm going to do is in here well I'm going to upload files and I'm going to upload them from my desktop so maybe let's move this out the way and let's open this up and I'm just going to drag in those three things like so into here and wait for that to do its thing okay so there we go that is now uploading let's just wait for this to finish and great and commit those files now let's actually upload them onto kinsa so let's do it so I'm going to go back to kinstar and I'm going to add a service the first thing I'm going to do is just create a database so go ahead and click on create database I'm going to go ahead and call it to do app and just select postgres SQL as the database you want to work with your database username well that is just going to be generated for you so just let that generate itself okay and just go ahead and select your data location so I'm just going to choose the closest one to me essentially and then this size I'm going to go with the smaller size and I'm going to create the database and wait for that to do its thing okay great so while that's doing its thing let's go ahead and do some other stuff as well so essentially what I want to do is create a table in postgres so we're going to now have to use that username and database password to communicate with our kinset database and I'm going to do so using PG admin so please go ahead and download PG admin if you haven't already okay in here you're gonna have to put in your master password so this is a master password that you set and let's go ahead and create a database called to do app so just like we named it here now back on consider we're gonna have to wait for the external connections to generate so just wait for that to do its thing and once they do I just want you to copy the external host's name okay and then I just want you to paste it in like so okay and also grab the external port and paste it in like so and finally grab the username and paste it in like so and also grab the password and paste it in like so and click save so there we go now we should be able to communicate with our Kinser database through PG admin okay great so now let's actually create our table so we know what to do we can actually grab this Command right here so great that we saved it and click on the to do app once it's finished running and we're going to use our query tool in order to create that table so just paste that in and execute this query and great and do the same for creating a user's table so we're just using this in order to communicate with our Kinser database right and execute this query as well wonderful so now that we have done that that's really all we need to do next these are the internal connections we're going to need in order to hook up our back end that we're going to host on kinsta to this database so keep these in mind I'm going to copy that host name okay and and we're going to also copy the username so keep these somewhere safe and also copy this password and also copy the port so these four things are necessary because now we're going to essentially create our backend so let's add a service this time it's going to be an application and in my GitHub repositories I'm just going to find that to do app okay and let's maybe make sure to differentiate this I'm going to call this server and the data location for this again I'm just going to choose one that is close to me and as the environment variables this time we didn't upload the dot EnV file okay from our local projects because we're gonna have to put the environment variables in here in the kinster App instead and I'm just going to put username just like we did in our project but the username this time is going to be the one I just saved to communicate with our database on kinsta we're also going to paste in that password we're also going to paste in some other stuff so what other things do we have in our project in our back end well we also have the hostname and the database Port so let's put in the host and this time I'm just going to put that instead of localhost 8000 and now we're also going to put the DB port and once again it's going to be the one to my Kinser database and once again I'm just going to put five four three two for this okay great so this is looking good let's carry on I'm just going to add another one here and that is actually going to be for the type and it's going to put server so we're going to have to specify that type and just make sure that this hose does have cluster logo at the end okay just double check that and once you're happy with that click continue once again I'm just going to do the standard amount and as this start command to start this I'm going to use npn run server so essentially the script we wrote in our package Json file the root of our project and I'm just going to confirm the payment method great so that is now done let's get to hosting our front-end application next so once again I'm going to click application I'm going to find my to do app I'm going to find the main branch and then let's rename this to clients so we can differentiate okay and let's choose the closest location to us and as the environment variables is time I'm going to use the environment variable for my client which is react app server URL and this time I am essentially going to put my server URL my kinsta server URL so let's just gravitate towards constant again so we can grab it the back end should be finished doing its thing so once that has done you might have to wait a bit we're going to get this URL in order so we can go to this instead of localhost 8000. so once again just wait for that and copy it this is our essentially the equivalent of localhost 8000 and paste it in here okay get rid of that last forward slash that is important and go ahead and click continue and once again just choose the default settings and the Star Command we're going to do is npm1 client because that is what we wrote in our package of Json file in the root of our project I can find the payment and there we go now this might take a while to deploy but once it has done its thing this should be kind of ready and finished I'm just going to add one more variable here and that is the type client we did forget to add that so add the environment variable again and then okay perhaps let's also redeploy this so let's double check these those look good and let's click on here again so click on here and deploy again just to make sure that variable has been added so great okay now once we do all of this I just need to actually connect the server app to the database so that's what I'm doing right now please go ahead and do the same just find that application it's going to be one of the two applications we made on kinsa and just connect it like so once this has finished deploying we should be able to go here and we should be able to essentially see our app and interact with it so let's go ahead let's try and sign up I'm going to put Anya at anya.com one two three one two three and submit and wonderful we have done it we can now add new projects in here I'm going to go my first task and hit submit this should be working exactly the same as it was for us locally except now it's running on kinster and we're going to essentially get this URL and share with anyone we want so this is looking fantastic I'm so happy with this I hope you found this useful and I hope you now know how to deploy a fun project for personal use of course this does have some security settings that we didn't cover and we didn't write any tests or anything like that but I think it's a cool project I hope you agree and I hope you've enjoyed this lesson on how to deploy a full stack application

Channel: Code with Ania Kubów

Views: 164,336

Keywords:

Id: LYEkguL9PcY

Length: 178min 29sec (10709 seconds)

Published: Thu Jan 26 2023