The Comprehensive Disaster Management System is a full-stack web application developed using the MERN stack, encompassing MongoDB for database management, Express.js for server-side logic, React for the user interface, and Node.js as the runtime environment. The primary goal of this project is to create an efficient and user-friendly system for handling, monitoring, and coordinating disaster-related activities.
Preview of final output: Let us have a look at how the final application will look like.
Approach to create Disaster Management Website:
-
User Authentication:
- Multi-role authentication system for administrators, emergency responders, and volunteers.
- Secure user login and registration processes.
-
Real-time Monitoring and Communication:
- Integration of WebSocket technology for real-time updates and communication.
- Messaging, alerts, and notifications to facilitate quick coordination among stakeholders.
-
Mapping and Visualization:
- Utilization of mapping tools (e.g., Mapbox, Leaflet) for visualizing affected areas and resource locations.
- Dynamic overlays, such as heatmaps and markers, to enhance situational awareness.
- Resource Management:
- Efficient tracking and management of resources, including personnel, equipment, and supplies.
- Real-time availability status and allocation features for effective resource utilization.
-
Reporting and Analytics:
- Reporting tools for generating insights from historical data.
- Analytics features to assess the effectiveness of disaster management strategies.
-
Responsive User Interface:
- Development of a responsive and intuitive user interface using React.
- Different views for administrators, responders, and volunteers.
-
Scalability and Security:
- Deployment on a cloud platform (e.g., AWS, Heroku) to ensure scalability.
- Implementation of security measures, including HTTPS, to safeguard sensitive data.
-
Documentation and Training:
- Comprehensive documentation for developers, administrators, and end-users.
- Training sessions for users and administrators to maximize system utilization.
-
Testing and Maintenance:
- Thorough testing, including unit, integration, and end-to-end testing, to ensure system reliability.
- Ongoing maintenance plan for addressing issues, adding new features, and improving existing functionalities.
Technologies Used:
Functionalities:
- User Management
- Disaster Management
- Real-time Monitoring
- Mapping and Visualization
- Resource Management
- Communication Tools
- Reporting and Analytics
- Security Measures
- Scalability
- Documentation and Training
Steps to Create the Backend:
Step 1: Set up Backend Project using the Command:
npm inti -y
Step 2: Navigate to the Project folder using:
cd <name of project>
The updated dependencies in package.json file will look like:
"dependencies": {
"body-parser": "^1.20.2",
"cors": "^2.8.5",
"express": "^4.18.2",
"mongoose": "^7.6.5",
}
Project Structure:
Example: Below is the code for the backend.
// server/server.js const express = require( 'express' );
const mongoose = require( 'mongoose' );
const bodyParser = require( 'body-parser' );
const cors = require( 'cors' );
const app = express(); const PORT = process.env.PORT || 5000; app.use(cors()); app.use(bodyParser.json()); // Connect to MongoDB (replace 'your_database_url' with your actual MongoDB URL) mongoose.connect( 'mongodb://your_database_url' , { useNewUrlParser: true , useUnifiedTopology: true });
// Define Emergency schema const emergencySchema = new mongoose.Schema({
emergencyNumbers: String,
location: String,
emergencyType: String,
}); const Emergency = mongoose.model( 'Emergency' , emergencySchema);
// API routes app.get( '/emergencies' , async (req, res) => {
try {
const emergencies = await Emergency.find();
res.json(emergencies);
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Internal Server Error' });
}
}); app.post( '/emergencies' , async (req, res) => {
const { emergencyNumbers, location, emergencyType } = req.body;
try {
const newEmergency = new Emergency({ emergencyNumbers, location, emergencyType });
await newEmergency.save();
res.json(newEmergency);
} catch (error) {
console.error(error);
res.status(500).json({ message: 'Internal Server Error' });
}
}); app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`);
}); |
Steps to Create the Frontend:
Step 1: Set up React Project using the Command:
npx create-react-app <name of project>
Step 2: Navigate to the Project folder using:
cd <name of project>
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Below is the code for the frontend:
// client/src/App.js import React from 'react' ;
import ExampleComponent from './components/ExampleComponent' ;
function App() {
return (
<div className= "App" >
<h1>
MERN Disaster
Management System
</h1>
<ExampleComponent />
</div>
);
} export default App;
|
// client/src/components/ExampleComponent.js import React, { useState, useEffect } from 'react' ;
// Import the CSS file import './ExampleComponent.css' ;
const ExampleComponent = () => { // State to manage form inputs
const [emergencyNumbers, setEmergencyNumbers] = useState( '' );
const [location, setLocation] = useState( '' );
const [emergencyType, setEmergencyType] = useState( '' );
// State to store existing emergencies
const [emergencies, setEmergencies] = useState([]);
// Function to fetch existing emergencies
const fetchEmergencies = async () => {
try {
const response =
await
const data = await response.json();
setEmergencies(data);
} catch (error) {
console.error( 'Error fetching emergencies:' , error);
}
};
// Fetch existing emergencies on component mount
useEffect(() => {
fetchEmergencies();
}, []);
// Function to handle form submission
const handleSubmit = async (e) => {
e.preventDefault();
try {
// Send data to the server
const response =
await
method: 'POST' ,
headers: {
'Content-Type' : 'application/json' ,
},
body:
JSON.stringify(
{
emergencyNumbers,
location, emergencyType
}),
});
const data =
await response.json();
console.log( 'Data submitted:' , data);
// Reset form inputs after submission
setEmergencyNumbers( '' );
setLocation( '' );
setEmergencyType( '' );
// Fetch updated emergencies after submission
fetchEmergencies();
} catch (error) {
console.error( 'Error submitting data:' , error);
}
};
return (
<div className= "emergency-form" >
<h2>Report an Emergency</h2>
<form onSubmit={handleSubmit}>
<div className= "form-group" >
<label htmlFor= "emergencyNumbers" >
Emergency Numbers:
</label>
<input
type= "text"
id= "emergencyNumbers"
placeholder= "Enter emergency numbers"
value={emergencyNumbers}
onChange={
(e) =>
setEmergencyNumbers(e.target.value)
}
required
/>
</div>
<div className= "form-group" >
<label htmlFor= "location" >
Location:
</label>
<input
type= "text"
id= "location"
placeholder= "Enter location"
value={location}
onChange={
(e) =>
setLocation(e.target.value)
}
required
/>
</div>
<div className= "form-group" >
<label htmlFor= "emergencyType" >
Type of Emergency:
</label>
<input
type= "text"
id= "emergencyType"
placeholder= "Enter type of emergency"
value={emergencyType}
onChange={
(e) =>
setEmergencyType(e.target.value)
}
required
/>
</div>
<button type= "submit" >
Submit
</button>
</form>
{ /* Display existing emergencies */ }
<div className= "existing-emergencies" >
<h2>Existing Emergencies</h2>
<ul>
{emergencies.map((emergency, index) => (
<li key={index}>
<strong>
Emergency Numbers:
</strong>
{emergency.emergencyNumbers},{ ' ' }
<strong>
Location:
</strong>
{emergency.location},{ ' ' }
<strong>
Emergency Type:
</strong>
{emergency.emergencyType}
</li>
))}
</ul>
</div>
</div>
);
}; export default ExampleComponent;
|
/* client/src/components/ExampleComponent.css */ .emergency-form { max-width : 600px ;
margin : auto ;
padding : 20px ;
border : 1px solid #ddd ;
border-radius: 8px ;
box-shadow: 0 0 10px rgba( 0 , 0 , 0 , 0.1 );
} .form-group { margin-bottom : 15px ;
} label { display : block ;
font-weight : bold ;
margin-bottom : 5px ;
} input { width : 100% ;
padding : 8px ;
box-sizing: border-box;
border : 1px solid #ccc ;
border-radius: 4px ;
} button { background-color : #4caf50 ;
color : white ;
padding : 10px 15px ;
border : none ;
border-radius: 4px ;
cursor : pointer ;
} button:hover { background-color : #45a049 ;
} .existing-emergencies { margin-top : 20px ;
} .existing-emergencies ul { list-style : none ;
padding : 0 ;
} .existing-emergencies li { margin-bottom : 10px ;
} |
Steps to run the Project run the below command in the terminal:
Client : npm start
Server : node server.js
Once the application is running, you can access it in a web browser.
React App (Frontend): Open your browser and navigate to http://localhost:3000
Node.js + Express.js (Backend): The Node.js server is running on http://localhost:5000
Output: