A To-do list is a beginner application that many programming students make. It is a list of tasks that you need to do in a day. You can add tasks to it and even delete them when done with them. Often it can be seen that many tutorials leave the to-do list application on the frontend part only. The reader never gets to know how to integrate it with the backend, such that a proper database is used and data is not lost on refresh/restart. This article seeks to do teach you how to make a complete To-do List project.
This article is targeted at the audience that has gained basic knowledge of web development but has not built any projects. Many students know the syntax but are unable to make applications. Just knowing certain technology such as Nodejs is not enough, being able to use it with other technologies and build an application using programming logic is also required. This article is made to help such people sharpen their knowledge by building projects.
Features of our application:
- Dynamic Frontend, through EJS, which is an NPM package.
- Backend built with Nodejs.
- Database Used: MongoDB Atlas.
How the application works:
- A home page is rendered where the user can see his tasks and also insert a new task.
- A new request is sent to the server-side when we click on add button.
- A new request for deleting the item is sent when we check it, once the task is completed.
Note: This article will focus mainly on the backend, thus detailed explanations for the frontend part, i.e., HTML and CSS will not be given, although code will be provided.
Let’s start with step by step implementation.
Step 1: Open an empty folder in VS Code. Create a file with the name index.js inside this folder.
Step 2: Write the following command in the terminal, to initialize this folder for making a Nodejs project.
npm init
Step 3: After this, write the following command to install some packages that we will be using in our application:
npm install –save express ejs body-parser mongodb mongoose
Explanation: The above commands install the required packages, which are required in our application.
- ejs for rendering content on frontend.
- express is a Nodejs framework used to help in code redundancy.
- body-parser for reading data from incoming requests.
- mongodb for being able to use databases and mongoose is its framework for code redundancy and easy connection.
Now create two folders beside our app.js, Name them as public ( for files we want to display to the user ) and views( for EJS files ).
Project Structure: It will look like the following.
Step 4: Now open your index.js file. In this file, we are going to code our server. Where we handle the requests that come from the browser, manage the data in them and respond accordingly. We will deal with two types of requests, which are the most used, get and post. Get request is for reading from server and post request in writing to the server. We will also define on which port of our machine the server this application’s server is accessed. This is the file where all of our application’s logic exist. We even connect to a cloud database in this file.