The full Backend Codes and Location of the Files

server.js in the root

The only new thing here is that I have added and used cors

const express = require("express");
const colors = require("colors");
const dotenv = require("dotenv").config();
const cors = require("cors");
const { errorHandler } = require("./middleares/errorMiddleware");
const connectDB = require("./config/db");

const port = process.env.PORT || 5000;

connectDB();

const app = express();

app.use(express.json());
app.use(cors());

app.use("/api/quotes", require("./routes/quoteRoutes"));
// app.use(errorHandler);

app.listen(port, () => console.log(`Server running on port ${port}`));

db.js inside config subfolder in the backend folder

const mongoose = require("mongoose");

const connectDB = async () => {
  try {
    const conn = await mongoose.connect(process.env.MONGO_URI);

    console.log(`MongoDB Connected: ${conn.connection.host}`.yellow.underline);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

module.exports = connectDB;

quoteController.js inside controllers subfolder in the backend folder

const asyncHandler = require("express-async-handler");
const Quote = require("../models/quotesModel");

const getQuotes = asyncHandler(async (req, res) => {
  //Find quotes
  const quotes = await Quote.find();

  res.status(200).json({ quotes });
});

const createQuote = asyncHandler(async (req, res) => {
  if (!req.body) {
    res.status(400);
    throw new Error("Please add a quote and author field");
  }

  // Create quote
  const quote = await Quote.create(req.body);
  return res.status(200).json(quote);
});

const updateQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  // Update the quote
  const updatedQuote = await Quote.findByIdAndUpdate(req.params.id, req.body, {
    new: true,
  });

  res.status(200).json(updatedQuote);
});

const deleteQuote = asyncHandler(async (req, res) => {
  // Find the quote by Id
  const quote = await Quote.findById(req.params.id);

  if (!quote) {
    res.status(400);
    throw new Error("Quote not found");
  }

  //   Delete the quote
  await quote.remove();

  res
    .status(200)
    .json({ message: `Quote with the id ${req.params.id} deleted` });
});

module.exports = {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
};

errorMiddleware.js inside middleware subfolder in the backend folder

const errorHandler = (err, req, res, next) => {
  const statusCode = res.statusCode ? res.statusCode : 500;

  res.status(statusCode);

  res.json({
    message: err.message,
    stack: process.env.NODE_ENV === "production" ? null : err.stack,
  });
};

module.exports = {
  errorHandler,
};

quoteModel.js inside models folder in the backend subfolder

const mongoose = require("mongoose");

const quoteSchema = mongoose.Schema({
  quote: {
    type: String,
    required: [true, "Quote  is required"],
    maxlength: [250, "Quote cannot be More than 250 Characters"],
    trim: true,
  },

  author: {
    type: String,
    maxlength: [20, "Author's name canot be more than 10 characters"],
  },
});

module.exports = mongoose.model("Quote", quoteSchema);

quoteRoutes.js file inside routes subfolder in the backend folder

const express = require("express");
const router = express.Router();

const {
  getQuotes,
  createQuote,
  updateQuote,
  deleteQuote,
} = require("../controllers/quoteController.js");

router.get("/", getQuotes);

router.post("/", createQuote);

router.put("/:id", updateQuote);

router.delete("/:id", deleteQuote);

module.exports = router;

The screenshot below shows what the folder structure looks like