Hey everyone,
Today is 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 going to log in, log out, and then see your personalized to do items, as well as stuff like your username show up.
The coolest part about this is that we’re also going to be deploying it, so that you can share it around with your friends and family. They can log in, use it, and they’ll see their own to-do’s.
It’s a pretty complete project by the end. You’ll be able to add users as well as allow them to add their own to do items, delete their items, edit their own items, and create new to-do items.
We’re going to be doing this with a postgres database, as well as react for the front end and node.js for the back end.
First off, I’m just going to sign up to Kinsta, where we’re going to be hosting our front end, back end, and then postgres database. Our front end and back end will be hosted from a GitHub repository, which will make things a lot easier. Everything is all in one place, which is very convenient.
Just go ahead and sign up. I want to let you know that it is free to sign up to Kinsta and you will get 20 dollars in pre-hosting for your first month. As this is a tutorial, please do use that and after that you only pay for what you use each month.
You will also get to enjoy free daily backups, firewall, DDOS protection, SSL, and 24/7 global support if you get stuck. You can monitor CPU and memory usage for your app from the dashboard.
All I have to do is scroll down and sign up. I will put in my personal information like my first and last name as well as my credit card details. Please do not share this information, as it is sensitive.
Once you have done that, you will be asked to supply your credit card details, just in case you go over the twenty dollar 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-end and a backend (like I said), and a Postgres database. 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. Please go ahead and do the same and put in your password.
And there we go, it 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 create a repository for our project. 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.” 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. 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 deployed project.
Okay, 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. 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 too, and I’m going to delete these 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. 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, 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 to-do” 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 init, 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, I’m also going to want to have a .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. Not in the server, not on the client, but actually in the app itself.
So, let’s go out of the server using cd .. and make sure you’re on the “deployed to-do” app. And once again, just do npm init and hit enter. And just do all the defaults.
Okay, so there we go. There’s our package.json file right now. Wonderful.
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 frontend 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 “fe” 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 trailing comma, and we’re going to have to install this package.
So, making sure you’re in the deployed To-Do app is important, not the other two. Just check you’re not in the server or client. I’m going to install that ‘Envy’ package, so just go ahead and do that and it should show as a dependency here, and that 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’. 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.
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 ‘server.js’ 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 our backend. 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, 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’ folder 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, we’re 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 header, 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 let’s 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.js. 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 .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.js, and get rid of that.
Next, let’s do the modals. So we’re just in the modal now, modal.js.
And modal. 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.js and tick-icon.
Great! So there we go, and now in my app.js file, let’s 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 list-header from, if I can only spell it correctly. And then let’s go into the components. Right, 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 prop. And let’s just call this list “to-do-list holiday checklist,” for example. I’m going to show you how to pass through this prop.
So, “holiday checklist.” Let’s also maybe go ahead and put an emoji, why not? We are on holiday and we can use emojis in 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-structuring that object of props and I’m getting through the list name, which means then, inside my h1 element, I can essentially show it like this if I want. So using these curly braces, we’ll just let our code editor know not to treat this as text but treat it as code.
So now, if I look in here, yay! “Holiday Checklist” is showing 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, 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 Checklist.”
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.
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 0. Okay, so margin: 0; padding: 0; 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: center.
I’m also going to set the font family in here. I want to go for “Butcherman,” Arial, 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” for opacity. And my opacity is going to be 0.05.
Next, I want to say that I want 0 x-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 0 x-axis, 0 y-axis, 0 blur, and 1 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. This is my app. I’ve spaced it out 50 pixels, I’ve rounded off the edges, I’ve given it a box shadow, and I think this is looking really good.
The next thing I’m going to do is just style 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 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 “create” as a button with a class name of “create,” and this one is going to have a class name of essentially “sign-out,” so we can pick them out and style them accordingly.
They’re also going to essentially have on-clicks, but they’re going to do two different things. So I think perhaps, let’s… Well, we can add an 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 on-click equals sign-out.
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 it generic. Let’s go ahead and grab this and just put it up here with everything that’s generic. 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 also align the items from top to bottom center. That’s what I have done.
Next, I’m also going to style any button that lives inside the button container. So, just like so, it’s going to have a margin of zero on the top and bottom and five pixels on the left and right. 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 right. I’m also going to give each button a border radius of 12 pixels, so it’s kind of more like a pill shape. Let’s just get rid of the background color; I’m going to make the background color transparent. So, if we look at it now, that is what they should both look like at the moment.
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 a font size of 10 pixels. 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. On the list header, I’m essentially going to use display flex and justify the 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. Next, I’m going to use justify content: space between to space out those two child elements. Okay, and I’m also going to give my list header a border bottom; I’m going to make this a gray line, or maybe let’s make it 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.
Great! Those two items have been so both children of the list header, so the H1 element and the div with the class of “button container,” have been spaced evenly. Wonderful! 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 going to need some data. So, let’s go ahead and do that next.
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, we should probably have an 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 [email protected], and then my title of my to-do is just going to be “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. That’s what I’m going to do. And then don’t forget to finish off, and everything that’s a string should be a string in here.
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-Dos by just pasting that in and hitting enter. So that has now been created. Let’s also create a table of users. Great! So at the moment, if we do select all from a table called To-Dos, ta-da! You will see one item in our table. I’ve just added that using the insert into command. So, we have one item 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.