Javascript – React Big Calendar Not Displaying Events in Production (MERN Stack)

I’m working on a MERN (MongoDB, Express, React, Node.js) stack application that uses React Big Calendar to display events. Everything works perfectly in my development environment, but in production, events do not show up in the calendar. However, tasks (another feature) work fine in both environments. I am using a DigitalOcean VPS to host the backend and database within Docker containers for production. First image is in production, second is in development.
Not sure what else to do anymore.

Here is the setup:

server.js

const express = require("express")
const mongoose = require("mongoose")
const dotenv = require("dotenv")
const cors = require("cors");
const path = require("path")


dotenv.config()
const MONGO_URI = process.env.MONGO_URI
const PORT = process.env.PORT || 80;

const app = express()

app.use(express.json()); // Parses incoming JSON requests
app.use(
    cors({
        origin: (origin, callback) => {
            const allowedOrigins =
                process.env.NODE_ENV === "development"
                    ? ["http://localhost:5173", "http://127.0.0.1:5173"]
                    : [
                        "http://www.<sitename>.com",
                        "https://www.<sitename>.com",
                        "http://api.<sitename>.com",
                        "https://api.<sitename>.com",
                    ];
            // Allow no-origin requests for tools like Postman
            if (!origin || allowedOrigins.includes(origin)) {
                callback(null, true);
            } else {
                callback(new Error("Not allowed by CORS"));
            }
        },
        methods: ["GET", "POST", "PUT", "DELETE"],
        allowedHeaders: ["Content-Type", "Authorization"],
        credentials: true, // Allow credentials if needed
    })
);

const eventsRoutes = require("./routes/events");
app.use("/api/events", eventsRoutes);

const tasksRoutes = require("./routes/tasks");
app.use("/api/tasks", tasksRoutes);


// Connect to MongoDB and start backend server
mongoose
    .connect(MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log("Connected to MongoDB"))
    .catch((error) => console.error("MongoDB connection error:", error));

// Start server
app.listen(PORT, () => console.log(`Server is running in ${process.env.NODE_ENV} mode on port ${PORT}`));

events.js

const express = require("express")
const Event = require("../models/Event")

const router = express.Router()

router.get("/", async (req, res) => {
    console.log("GET /api/events received")
    try {
        const events = await Event.find()
        console.log("Fetched events:", events); // Log the fetched events
        res.json(events)
    } catch (error) {
        console.error("Error fetching events:", error)
        res.status(500).json({message: "Server error"})
    }
})

router.post("/", async (req, res) => {
    try {
        const newEvent = new Event(req.body)
        const savedEvent = await newEvent.save()
        res.status(201).json(savedEvent)
    } catch (error) {
        console.error("Error saving event:", error)
        res.status(500).json({message: "Failed to save event"})
    }
})

router.put("/:id", async (req, res) => {
    try {
        const updatedEvent = await Event.findByIdAndUpdate(req.params.id, req.body, {new: true})
        res.json(updatedEvent)
    } catch (error) {
        console.error("Error updating event:", error)
        res.status(500).json({message: "Failed to update event"})
    }
})

router.delete("/:id", async (req, res) => {
    try {
        await Event.findByIdAndDelete(req.params.id)
        res.status(204).send()
    } catch (error) {
        console.error("Error deleting event:", error)
        res.status(500).json({message: "Failed to delete event"})
    }
})

module.exports = router

Event.js

const mongoose = require("mongoose")

const eventSchema = new mongoose.Schema({
    title: {type: String, required: true},
    start: {type: Date, required: true},
    end: {type: Date, required: true},
    allDay: {type: Boolean, default: false},
    description: {type: String},
    location: {type: String},
})

module.exports = mongoose.model("Event", eventSchema)

For comparison, here is tasks.js

const express = require("express")
const Task = require("../models/Task")

const router = express.Router()

// Get all tasks
router.get("/", async (req, res) => {
    console.log("GET /api/tasks received");
    try {
        const tasks = await Task.find();
        res.json(tasks);
    } catch (error) {
        console.error("Error fetching tasks:", error);
        res.status(500).json({ message: "Server Error" });
    }
});

// Add a new task
router.post("/", async (req, res) => {
    const newTask = new Task(req.body)
    const savedTask = await newTask.save()
    res.status(201).json(savedTask)
})

// Update a task
router.put("/:id", async (req, res) => {
    try {
        const updatedTask = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
        res.json(updatedTask);
    } catch (error) {
        console.error("Error updating task:", error);
        res.status(500).json({ message: "Failed to update task" });
    }
});

// Delete a task
router.delete("/:id", async (req, res) => {
    await Task.findByIdAndDelete(req.params.id)
    res.status(204).send()
})

module.exports = router

Task.js

const mongoose = require("mongoose")

const taskSchema = new mongoose.Schema({
    name: { type: String, required: true },
    completed: { type: Boolean, default: false },
})

module.exports = mongoose.model("Task", taskSchema)

And fetchTasks in the TodoList component

// Base URL for API calls
const api = axios.create({
  baseURL:
    import.meta.env.MODE === "development" ? "/api" : import.meta.env.VITE_API_URL,
});

// Fetch tasks on component load
useEffect(() => {
    const fetchTasks = async () => {
      try {
        const { data } = await api.get("/tasks") // Fetch tasks from backend
        console.log("Fetched tasks:", data)

        // Separate tasks into pending and completed
        const pending = data.filter((task) => !task.completed)
        const completed = data.filter((task) => task.completed)
        setPendingTasks(pending)
        setCompletedTasks(completed)
      } catch (error) {
        console.error("Error fetching tasks:", error.response || error.message)
      }
    }

    fetchTasks()
}, []) // Runs only once on mount