Real Estate Management using MERN

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const bodyParser = require("body-parser");
const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());
app.use(bodyParser.json());

// Connect to MongoDB
mongoose
	.connect("mongodb://localhost:27017/real_estate", {
		useNewUrlParser: true,
		useUnifiedTopology: true,
	})
	.then(() => {
		console.log("Connected to MongoDB");
	});

// 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);

// API endpoints
// Route to add a new property
app.post("/api/properties", async (req, res) => {
	try {
		const { title, description, image, contact } = req.body;

		// Validate request data
		if (!title || !description || !image || !contact) {
			return res
				.status(400)
				.json({ message: "Incomplete property data" });
		}

		// Create a new property
		const newProperty = new Property({
			title,
			description,
			image,
			contact,
			reviews: [],
		});

		// Save the new property to the database
		const savedProperty = await newProperty.save();

		// Respond with the newly added property
		res.status(201).json(savedProperty);
	} catch (error) {
		console.error("Error adding property:", error);
		res.status(500).json({ message: "Internal Server Error" });
	}
});

// Route to get all properties
app.get("/api/properties", async (req, res) => {
	try {
		const properties = await Property.find();
		res.json(properties);
	} catch (error) {
		res.status(500).json({ message: error.message });
	}
});

// Route to add a review for a property
app.post("/api/properties/:id/review", async (req, res) => {
	const { user, rating, comment } = req.body;

	try {
		const property = await Property.findById(req.params.id);
		property.reviews.push({ user, rating, comment });
		await property.save();
		res.status(201).json(property);
	} catch (error) {
		res.status(400).json({ message: error.message });
	}
});

// Delete a property by ID
app.delete("/api/properties/:id", async (req, res) => {
	const propertyId = req.params.id;

	try {
		// Find the property by ID and delete it from the database
		const deletedProperty = await Property.findByIdAndDelete(propertyId);

		if (!deletedProperty) {
			return res.status(404).json({ message: "Property not found" });
		}

		res.json({ message: "Property deleted", deletedProperty });
	} catch (error) {
		console.error("Error deleting property:", error);
		res.status(500).json({ message: "Internal Server Error" });
	}
});

app.listen(PORT, () => {
	console.log(`Server is running on port ${PORT}`);
});

// src/App.js
import React, { useState, useEffect } from "react";
import PropertyList from "./components/PropertyList";
import AddProperty from "./components/AddProperty";
import axios from "axios";
import "./App.css";

const App = () => {
	const [properties, setProperties] = useState([]);

	useEffect(() => {
		axios
			.get("http://localhost:5000/api/properties")
			.then((response) => setProperties(response.data))
			.catch((error) => console.error(error));
	}, []); // Empty dependency array to fetch properties once on mount

	const handleAddProperty = (newProperty) => {
		setProperties((prevProperties) => [...prevProperties, newProperty]);
	};

	const handleContactOwner = (contact) => {
		alert(`Contacting the owner of property is ${contact}`);
	};

	const handleDeleteProperty = (propertyId) => {
		axios
			.delete(`http://localhost:5000/api/properties/${propertyId}`)
			.then((response) => {
				// Filter out the deleted property from the state
				setProperties((prevProperties) =>
					prevProperties.filter(
						(property) => property._id !== propertyId
					)
				);
			})
			.catch((error) => console.error(error));
	};

	return (
		<div style={{}}>
			<h1 className="gfg" style={{ margin: "10px 10px" }}>
				GFG
			</h1>
			<h1 style={{ marginTop: "10px" }}>Real Estate Management</h1>
			<div>
				<AddProperty onAddProperty={handleAddProperty} />
				<PropertyList
					onDeleteProperty={handleDeleteProperty}
					properties={properties}
					onContactOwner={handleContactOwner}
				/>
			</div>
		</div>
	);
};

export default App;

//components/ProductList.js

import React, { useContext, useEffect, useState } from "react";
import ProductItem from "./ProductItem";
import { itemContext } from "../context/itemContext";
import "../App.css";

const ProductList = () => {
	const { products } = useContext(itemContext);
	const [sortedProducts, setSortedProducts] = useState([...products]);
	// Keep a local state for sorted products
	const [minPrice, setMinPrice] = useState(0);
	const [maxPrice, setMaxPrice] = useState(3000);
	const [selectedType, setSelectedType] = useState("all");
	// 'all' represents no type filter

	useEffect(() => {
		setSortedProducts([...products]);
	}, [products]);

	const handleSortByPrice = () => {
		const sorted = [...sortedProducts].sort((a, b) => a.price - b.price);
		setSortedProducts(sorted);
	};

	const handleFilterByPriceRange = () => {
		const filtered = products.filter(
			(product) => product.price >= minPrice && product.price <= maxPrice
		);
		setSortedProducts(filtered);
	};

	const handleFilterByType = () => {
		if (selectedType === "all") {
			// Reset the type filter
			setSortedProducts([...products]);
		} else {
			const filtered = products.filter(
				(product) => product.type === selectedType
			);
			setSortedProducts(filtered);
		}
	};

	return (
		<div className="prdt-list">
			<h2>Product List</h2>
			<div className="filter-btn">
				<button onClick={handleSortByPrice}>Sort by Price</button>
				<label>
					Min Price:
					<input
						type="number"
						value={minPrice}
						onChange={(e) => setMinPrice(Number(e.target.value))}
					/>
				</label>
				<label>
					Max Price:
					<input
						type="number"
						value={maxPrice}
						onChange={(e) => setMaxPrice(Number(e.target.value))}
					/>
				</label>
				<button onClick={() => handleFilterByPriceRange()}>
					Filter by Price Range
				</button>
				<label>
					Filter by Type:
					<select
						value={selectedType}
						onChange={(e) => setSelectedType(e.target.value)}
					>
						<option value="all">All</option>
						<option value="Fruit">Fruit</option>
						<option value="Vegetable">Vegetable</option>
						{/* Add more options as needed */}
					</select>
				</label>
				<button onClick={handleFilterByType}>Filter by Type</button>
			</div>
			<ul className="item-card">
				{sortedProducts.map((product) => (
					<ProductItem key={product._id} product={product} />
				))}
			</ul>
			<div className="buy-now-btn">Buy Now</div>
		</div>
	);
};

export default ProductList;

// src/components/AddProperty.js
import React, { useState } from 'react';
import axios from 'axios';
import '../App.css'

const AddProperty = ({ onAddProperty }) => {
	const [newProperty, setNewProperty] = useState({
		title: '',
		description: '',
		image: '',
		contact: '',
	});

	const handleAddProperty = () => {
		// Submit a new property
		axios.post('http://localhost:5000/api/properties', newProperty)
			.then(response => {
				// Notify the parent component about the new property
				onAddProperty(response.data);

				// Clear the newProperty state for the next entry
				setNewProperty({
					title: '',
					description: '',
					image: '',
					contact: '',
				});
			})
			.catch(error => console.error(error));
	};

	return (
		<div>
			<h2 style={{ "color": "#007BFF" }}>
				Add a New Property
			</h2>
			<form onSubmit={(e) => {
				e.preventDefault();
				handleAddProperty();
			}}>
				<div className="form-row">
					<label>Title:
						<input type="text"
							value={newProperty.title}
							onChange={(e) =>
								setNewProperty(
									{
										...newProperty,
										title: e.target.value
									})}
							required />
					</label>
					<label>Description:
						<input type="text"
							value={newProperty.description}
							onChange={
								(e) =>
									setNewProperty(
										{
											...newProperty,
											description: e.target.value
										})} required />
					</label>
				</div>
				<div className="form-row">
					<label>Image URL:
						<input type="text"
							value={newProperty.image}
							onChange={
								(e) =>
									setNewProperty(
										{
											...newProperty,
											image: e.target.value
										})} required />
					</label>
					<label>Contact: <input type="text"
						value={newProperty.contact}
						onChange={
							(e) => setNewProperty(
								{
									...newProperty,
									contact: e.target.value
								})} required />
					</label>
				</div>
				<button type="submit"
					style={{ backgroundColor: "blue" }}>
					Add Property
				</button>
			</form>
		</div>
	);
};

export default AddProperty;