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:

• Backend (Node + Express)
• Frontend (React)
• Database (Mongo)

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:

👁 Screenshot-2023-12-20-183403

Example: Below is the code for the backend.

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:

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: