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:
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.