Event Dashboard using MERN Stack

In this article, we’ll walk through the step-by-step process of creating an Event Management System using the MERN (MongoDB, ExpressJS, React, NodeJS) stack. This project will showcase how to set up a full-stack web application where users can manage events by posting details about the event and deleting it when it has been completed.

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

👁 WhatsApp-Image-2024-03-07-at-40

Prerequisites:

• ReactJS
• MongoDB and Mongoose
• Express
• NodeJS
• MERN Stack

Approach to create an Event Dashboard:

• The component displays a event with Titile , Location , Date for each event.
• Dashboard display list of event and allows admin to add new event and update existing event by clicking on corresponding buttons.
• Call Api using axios via useEffect.
• Uses useEffect to handle fetch events and attempts to re-fetch in case of errors.
• In server/server.js file, initialize the server and connect to MongoDB.
• Defines an initial configuration with express.json() and cors.
• server/models/eventSchema.js is the schema for the event model. It contains the title, description, date, and location of the event.

Steps to Create the Backend Server:

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 nodemon

Project Structure(Backend):

👁 WhatsApp-Image-2024-03-07-at-40402-AM

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

"dependencies": {
 "cors": "^2.8.5",
 "express": "^4.18.3",
 "mongoose": "^8.2.1"
}

Example: Write the following code to create backend

Start your application using the following command.

npm run dev

Steps to Create the Frontend Application:

Step 1: Initialize the React App with Vite and installing the required packages.

npm create vite@latest -y

Step 2: Navigate to the root of the project using the following command.

cd client

Step 3: Install the necessary package in your project using the following command.

npm install axios

Step 4: Install the node_modules using the following command.

npm install

Project Structure(Frontend):

👁 WhatsApp-Image-2024-03-07-at-40401-AM-(4)

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

{
 "dependencies": {
 "axios": "^1.6.7",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-router-dom": "^6.22.2"
 },
 "devDependencies": {
 "@types/react": "^18.2.56",
 "@types/react-dom": "^18.2.19",
 "@vitejs/plugin-react": "^4.2.1",
 "eslint": "^8.56.0",
 "eslint-plugin-react": "^7.33.2",
 "eslint-plugin-react-hooks": "^4.6.0",
 "eslint-plugin-react-refresh": "^0.4.5",
 "vite": "^5.1.4"
 }
}

Example: Write the following code in frontend files of the project

To start client server:

npm run dev

Output:

• Data Saved in Database

👁 db

• Browser Output

👁 output