TutorialsDSAData ScienceWeb TechCourses oS Databases SQL MySQL PostgreSQL PL/SQL _MongoDB SQLCheat Sheet SQL Interview Questions Todo List Application using MERN Last Updated : 27 May, 2024 Todo list web application using MERN stack is a project that basically implements basic CRUD operation using MERN stack (MongoDB, Express JS, Node JS, React JS). The users can read, add, update, and delete their to- do list in the table using the web interface. The application gives a feature to the user to add a deadline to their task so that it user can be reminded of the last day to complete the project Preview of final output: Let us have a look at how the final application will Look like. Todo List Todo List Add Task me ote | ene [est a Compe Asignrent Conpkted rornare3. 2coon mt ESE ek ss raj comptes sz0m EE sas Practice O54 Congeingttiane3 7cocor frees ene bug reniogtarinen.escoom GRE —— 5 = Technologies used / Pre-requisites:* MongoDB Express JS React JS Node JS HTML, CSS, JavaScript Requirements: Nodes installed in your machine. MongoDB installed locally or use MongoDB Atlas online. Code editor (Recommended : VS code) Approach to create Todo List: * In frontend, the react component called “Todo” is used to display tasks, deadlines and its status and form to add new todo item with edit and deletion feature. In backend, application fetches data from MongoDB using backend API called ‘/getTodoList”. New data can be added to the database using ‘faddTodoList” API. ‘JupdateTodoList/id” API is used to edit the existing specific data from the table. ‘/deleteTodoList/‘id” API is used to delete the specific data from the table. Functionalities Of Todo Application: * Add new todo: User can add new todo task using the form. On clicking “submit” button, The new data will be saved to database. * Display todo list: User can view the todo list in table format. * Edit existing data: User can click on “Edit” button to make the table row to editable fields. On clicking “Edit” button, new buttons call “Save” and“Reset” will be created, “Save” button is to update the edited data to database. “Reset” button is to reset the data in the field. * Delete existing data: User can click on “Delete” button available in the table row to delete the data from database. Project Structure: Steps to create the project: Step 1: Create directory for project. mkdir Todo-List Step 2: Create sub directories for frontend and backend. Open Todo-List directory using following command cd Todo-List Create separate directories for frontend and backend. mkdir frontend mkdir backend Use “Ls” command to list created folders. Is Step 3: Open backend directory using the following command.cd backend Step 4: Initialize Node Package Manager using the following command. nom init odo-List> ate ele odo-List Step 5: Install express, mongoose and cors package in backend using the following command npm install express mongoose cors Step 6: Come back to Todo-List folder (project main folder). cd w./ Step 7: Open frontend directory using the following command cd frontend Step 8: Create react application in the current directory using the following command. npx create-react-app . Step 9: Install bootstrap, axios and react-router-dom package in backend using the following command. npm install bootstrap axios react-router-dom Step 10: Open Todo-List using your familiar code editor. Come back to Todo-List folder (project main folder) cd ./If you are using VS code editor, run the following command open VS code in current folder. code » Step 11: Navigate to frontend directory in code editor. Step 12: Delete files inside ‘src’ folder and ‘public’ folder (Don't delete folder) Step 13: Add files in frontend directory as per the project structure with below code. Step 14: Navigate to backend directory in code editor. Step 15: Create serverjs and model file as per project structure. Step 16: Add files in backend directory as per the project structure with below code. Step 17: Replace database connection URL with your own connection URL in serverjs file. Final Project Structure should be Like this, The updated dependencies in package.json for frontend will look like: "dependencies": { "@testing-Library/jest-dom": "5.17.0", "@testing-library/react": "13.4.0", "@testing-Library/user-event": "13.5.0", "axios": "41.5.8","bootstrap": "95.3.2", "react": "18.2.8", “react-dom": "18.2.0", "react-router-dom": "6.16.6", “react-scripts": "5.0.1", "web-vitals": "42.1.4" The updated dependencies in package.json for backend will look like: "dependencies": { "cons": "*2.8.5"s "express": "*4.18.2", "mongoose": "47.5.2" Example : Write the following code in respective files Frontend code: * Appjs: This is our main file which routes to the Todo component. * Todo,js: This component contains all the logic for displaying Tasks, Status of tasks and deadlines of the tasks fetched from database in table format, adding new todo list to database, deleting existing todo from database and editing existing todo in database. HTML JavaScript JavaScript JavaScript &

Backend:* Server.js: This is a file which contains logic to start the backend server, APIs to interact with database. * todoListjs: This is a model file called a wrapper of the Mongoose schema. This file is used to define the schema of table that stores the todo list. JavaScript JavaScript server. js const express = require(‘express’) G _ const mongoese = require( mongoose" ) const cors = require(‘cors') const TodoModel = require("./models/todoList*) var app = express(); app.use(cors()); app.use(express.json()); // Connect to your MongobB database (replace with your database URL) mongoose. connect ("mongodb: //[email protected]/todo"); // Check for database connection errors mongoose.connection.on("error”, (error) => { corsole.error("NongobB connection error:", error); ns // Get saved tasks from the database app.get("/getTodolist", (req, res) => { TodoMocel.Find({}) sthen((todeList) => res.json(todeList)) seateh((err) => res.json(err)) ns // Add new task to the database app.post("/addTodolist", (req, res) =: TodoNodel .create({ task: req.body.task, status: req.body.status, deadline: req.body.deadline, » -then( (tode) scatch((err) res. json(toca) ) res. json(err)); ns // Update task fields (including deadline) app.post("/updateTodoList/:id", (req, res) const id = req.params.ids const updateData - { task: req.bedy. task, status: req.body.status, deadline: req.body.deadline, i TodoMocel.findByIcAndUpdete(id, updateData) «then((tode) => res. json(toco)) seateh((err) => res. json(err))5 ns// velete task fron the database app.delete("/deletetodoList/:id", (req, res) => { const id = req.params.id; TodoMocel. fincByIcAndDelete({ _id: id }) «then((tode) => res. json(toco)) seatch((err) => res.json(err))5 ns app. listen(3001, () => { corsole,log('Server running on 3¢01°); ns Steps to run application: Step 1: Open Todo-List/backend folder in new terminal / command prompt. Step 2: Execute the command to start backend API server. npm start Now, our backend server is running in localhost on port 3001 http: //localhost :3061/ Step 3: Open Todo-List/frontend folder in another new terminal / command prompt. Step 4: Execute the following command to run react app. npm start Open the browser and navigate to the following link to open the application. http: //localhost : 30¢e/ Output:todolist-demo Tedo list application using MERN Want to be a Software Developer or a Working Professional looking to enhance your Software Development Skills? Then, master the concepts of Full-Stack Development. Our Eull Stack Development - React and Node,js Course will help you achieve this quickly. Learn everything from Front-End to Back-End Development with hands-on Projects and real-world examples. This course enables you to build scalable, efficient, dynamic web applications that stand out. Ready to become an expert in Full-Stack? Enroll Now and Start Creating the Future! © mani... 6 Previous Article Next Article ‘Address Book using MERN Food Delivery Application using MERN Stack Similar Reads Todo List CLI application using Node.js CLI is a very powerful tool for developers. We will be learning how to create a simple Todo List application for command line. We have seen TodoList as a. 13 min read Todo List Application using MEAN Stack