Disaster Management Website using MERN
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.
Javascript
// 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:
Javascript
// 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; |
Javascript
// 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 fetch( 'http://localhost:5000/emergencies' ); 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 fetch( 'http://localhost:5000/emergencies' , { 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; |
CSS
/* 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: