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.

Output Contributed By G. Manikanta

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:

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:

Output