Steps to Create the Backend

Step 1: Create a directory for project

mkdir server
cd server

Step 2: Initialized the Express app and installing the required packages

npm init -y
npm i express mongoose cors dotenv

Project Structure:

Backend Folder Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.18.2",
    "mongoose": "^8.2.0"
}

Example: Create ‘server.js’ and write the below code.

Javascript

//server.js
 
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();
 
const app = express();
const port = process.env.PORT || 5000;
 
app.use(cors());
app.use(express.json());
 
mongoose.connect(process.env.MONGODB_URI)
    .then(() => console.log("Database Connected!"))
    .catch(err => console.error("Database connection error:", err));
 
const taskSchema = new mongoose.Schema({
    title: String,
    description: String,
    status: String
});
 
const Task = mongoose.model('Task', taskSchema);
 
async function getTask(req, res, next) {
    try {
        const task = await Task.findById(req.params.id);
        if (!task) {
            return res.status(404).json({ message: 'Task not found' });
        }
        res.task = task;
        next();
    } catch (err) {
        return res.status(500).json({ message: err.message });
    }
}
 
app.get('/tasks', async (req, res) => {
    try {
        const tasks = await Task.find();
        res.json(tasks);
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});
 
app.post('/tasks', async (req, res) => {
    const task = new Task({
        title: req.body.title,
        description: req.body.description,
        status: req.body.status
    });
    try {
        const newTask = await task.save();
        res.status(201).json(newTask);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});
 
app.put('/tasks/:id', getTask, async (req, res) => {
    if (req.body.title != null) {
        res.task.title = req.body.title;
    }
    if (req.body.description != null) {
        res.task.description = req.body.description;
    }
    if (req.body.status != null) {
        res.task.status = req.body.status;
    }
    try {
        const updatedTask = await res.task.save();
        res.json(updatedTask);
    } catch (err) {
        res.status(400).json({ message: err.message });
    }
});
 
app.delete('/tasks/:id', getTask, async (req, res) => {
    try {
        await res.task.deleteOne();
        res.json({ message: 'Task deleted' });
    } catch (err) {
        res.status(500).json({ message: err.message });
    }
});
 
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

To start the application run the following command:

node server.js

Output:

Output of data saved in Database:

MongoDB Data Store

Browser Output:

Final Output

Task Manager App using MERN Stack

Task Manager is very crucial to manage your tasks. In this article, we are going to develop a task manager application using the MERN stack. This application helps users to manage their tasks efficiently, offering essential features like creating new tasks, editing existing ones, and deleting tasks as needed. We’ll walk through the step-by-step process of creating this application.

Output Preview: Let us have a look at how the final output will look like.

Preview of Final Output

Tags:

#Dev Scripter 2024 #MERN-Projects #Dev Scripter #MERN Stack #Project #Web Technologies

Project Structure:

Steps to Create the Backend

Javascript

Task Manager App using MERN Stack

Similar Reads