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

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

Steps to Create the Frontend

Javascript

Javascript

CSS

Disaster Management Website using MERN

Similar Reads