Real Estate Management using MERN

In this article, we will guide you through the process of building a Real Estate Management Application using the MERN stack. MERN stands for MongoDB, Express, React, and Node. MongoDB will serve as our database, Express will handle the backend, React will create the frontend, and Node.js will be the runtime for our server.

Preview of final output: Let us have a look at how the final application will look like.

Prerequisites

• React JS
• MongoDB
• Express
• Node JS
• MERN Stack

Approach to create Real Estate Management Website using MERN:

• Import Statements:
  • Import necessary dependencies and components.
  • React is imported for defining React components.
  • useState and useEffect are imported from React for managing state and handling side effects respectively.
  • PropertyList and AddProperty are imported, assumed to be custom components.
  • Axios is imported for making HTTP requests.
• Functional Component:
  • Define a functional component named App.
• State Management:
  • Use the useState hook to manage the state of properties, which is initialized as an empty array.
  • The properties state will hold the list of properties fetched from the server.
• Data Fetching:
  • Use the useEffect hook to make an HTTP GET request to 'http://localhost:5000/api/properties' when the component mounts.
  • Update the properties state with the data received from the server.
• Event Handlers:
  • Define event handlers:
    • handleAddProperty: Takes a new property as an argument and adds it to the properties state using the setProperties function.
    • handleContactOwner: Takes contact information as an argument and displays an alert with the contact information.
    • handleDeleteProperty: Takes a property ID as an argument, makes an HTTP DELETE request to delete the property, and then updates the state by filtering out the deleted property.
• Component Rendering:
  • Render a div containing:
    • Two heading elements (h1) with class and inline styles.
    • The AddProperty component, passing the handleAddProperty function as a prop.
    • The PropertyList component, passing the handleDeleteProperty and handleContactOwner functions, as well as the properties state.

Steps to Create the Backend:

Step 1: Create a directory for project

npm init backend

Step 2: Open Restaurant-Recommendation using the command

cd backend

Step 3: Installing the required packages

npm install express mongoose cors body-parser

This will install Express.js for the backend, Mongoose for MongoDB integration, CORS for handling cross-origin requests, and Body Parser for parsing incoming JSON requests.

Project Structure:

The updated dependencies in package.json file for backend will look like:

"dependencies": {
 "body-parser": "^1.20.2",
 "cors": "^2.8.5",
 "express": "^4.18.2",
 "mongoose": "^8.0.0",
}

Example: Create a file named `server.js` in server folder. This file will serve as our backend server.

Step 3: Defining the Property Schema and API Endpoints

Continue the `server.js` file by defining the Property schema and implementing API endpoints for adding properties, getting all properties, adding reviews, and deleting properties.

This is already implemented in Step 2.

 // Define the Property schema
const propertySchema = new mongoose.Schema({
 title: String,
 description: String,
 image: String,
 contact: String,
 reviews: [
 {
 user: String,
 rating: Number,
 comment: String,
 },
 ],
});

const Property = mongoose.model('Property', propertySchema);

Steps to Create the Frontend:

Step 1: Set up React frontend using the command.

npx create-react-app client

Step 2: Navigate to the project folder using the command.

cd client

Step 3: Install axios

npm i axios

Project Structure:

The updated dependencies in package.json for frontend will look like:

"dependencies": {
 "axios": "^1.5.1",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Below is the client code.

Sep to Start Server and React App:

• To start backend server: Go to server folder inside terminal and write below command

node server.js

• To start frontend server: Go to client folder inside terminal and write below command

npm start

Output:

Output of Data saved in Database: