Steps to Setup Backend with Node.js and Express

Step 1: Creating express app:

npm init -y

Step 2: Installing the required packages

npm install express mongoose body-parser cors

Project Structure:

Backend Project Structure

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

"dependencies": {
"body-parser": "^1.20.2",
"cors": "^2.8.5",
"express": "^4.18.2",
"mongoose": "^8.0.0",
}

Example: Below is the code example of the backend.

Javascript




// server.js
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
const eventRoutes = require('./routes/eventRoutes');
 
const app = express();
const PORT = process.env.PORT || 5000;
 
// Middleware
app.use(cors());
app.use(bodyParser.json());
 
// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/event_management', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
}).then(() => {
    console.log('Connected to MongoDB')
});
 
// Routes
app.use('/api/events', eventRoutes);
 
// Start server
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});


Javascript




// routes/eventRoutes.js
const express = require('express');
const router = express.Router();
const Event = require('../models/Event');
 
// Get all events
router.get('/', async (req, res) => {
    try {
        const events = await Event.find();
        res.json(events);
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});
// Create a new event
router.post('/', async (req, res) => {
    const event = new Event({
        title: req.body.title,
        date: req.body.date,
        reminder: req.body.reminder || false,
    });
    try {
        const newEvent = await event.save();
        res.status(201).json(newEvent);
    } catch (error) {
        res.status(400).json({ message: error.message });
    }
});
 
// Delete an event
router.delete('/:id', async (req, res) => {
    console.log('****** Deleting event ******');
    try {
        console.log('Delete route called');
        // Use findByIdAndDelete instead of findByIdAndRemove
        await Event.findByIdAndDelete(req.params.id);
        console.log('Event deleted');
        res.json({ message: 'Event deleted' });
    } catch (error) {
        console.error('Error deleting event:', error);
        res.status(500).json({ message: error.message });
    }
});
// Update an event by ID
router.put('/:id', async (req, res) => {
    const eventId = req.params.id;
    const { title, date, reminder } = req.body;
 
    console.log('reminder', reminder);
    try {
        // Find the event by ID in the database
        const event = await Event.findById(eventId);
        if (!event) {
            return res.status(404).json({ message: 'Event not found' });
        }
 
        // Update the event properties
        event.date = date;
        event.title = title;
        event.reminder = reminder;
        console.log('event updated', event.reminder);
        // Save the updated event
        await event.save();
 
        // You can send the updated event in the response if needed
        res.json(event);
    } catch (error) {
        console.error('Error updating event:', error);
        res.status(500).json({ message: 'Internal Server Error' });
    }
});
 
module.exports = router;


Javascript




// models/Event.js
const mongoose = require('mongoose');
 
const eventSchema = new mongoose.Schema({
    title: { type: String, required: true },
    date: { type: Date, required: true },
    reminder: { type: Boolean, default: false },
 
});
const Event = mongoose.model('Event', eventSchema);
 
module.exports = Event;


Steps to run the backend:

node server.js

Event Management Web App using MERN

In this guide, we’ll walk through the step-by-step process of building a feature-rich Event Management Web App. We will make use of the MERN stack to build this project.

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

Final Output of Event Management App

Similar Reads

Prerequisite:

React JS MongoDB Express Node JS...

Approach to create Event Management Application:

Define the structure of an event using Mongoose schemas in a model file (e.g., `Event.js`). Develop routes for handling Create, Read, Update, and Delete (CRUD) operations in a dedicated `eventRoutes.js` file. Set up a MongoDB database and establish a connection in your Express application. Create a server file (e.g., `server.js`) where Express is configured to listen on a specific port. Design and implement a form component (`EventForm.js`) for adding new events. Develop a component (`EventList.js`) to display a list of events fetched from the server. Create a detailed event display component (`EventItem.js`) with features like editing, toggling reminders, and deleting. Style your components for an engaging user interface. You can utilize CSS ....

Steps to Setup Backend with Node.js and Express:

Step 1: Creating express app:...

Steps to Setup Frontend with React

...