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.

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:

npm init -y

Step 2: Installing the required packages

npm install express mongoose body-parser cors

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.

Steps to run the backend:

node server.js

Steps to Setup Frontend with React

Step 1: Create React App:

npx create-react-app event-management-frontend

Step 2: Switch to the project directory:

cd event-management-frontend

Step 3: Installing the required packages:

npm install axios

Project Structure:

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

"dependencies": {
 "axios": "^1.5.1",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Below is the code example of the frontend.

Steps to run the app:

npm start

Output: