32 | Our Value
33 |
34 | Value We Give to You
35 |
36 |
37 | We always ready to help by providijng the best services for you.
38 |
39 | We beleive a good blace to live can make your life better
40 |
41 |
42 |
47 | {data.map((item, i) => {
48 | const [className, setClassName] = useState(null);
49 | return (
50 |
51 |
52 |
53 | {/* just for getting state of item */}
54 |
55 | {({ expanded }) =>
56 | expanded
57 | ? setClassName("expanded")
58 | : setClassName("collapsed")
59 | }
60 |
61 |
{item.icon}
62 |
65 | {item.heading}
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
{item.detail}
74 |
75 |
76 | );
77 | })}
78 |
79 |
80 |
81 |
82 | );
83 | };
84 |
85 | export default Value;
86 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | @author:- Pranav Gupta
2 | # Homzy - A Real Estate Website
3 |
4 | 
5 |
6 | ## Overview
7 |
8 | Homzy is a real estate website that simplifies the process of buying and selling properties. It provides a user-friendly interface for property owners to list their properties and for potential buyers to search and view available properties. The website allows users to search for properties in any location and view surrounding areas to get a better understanding of the neighborhood. Additionally, users can like and add properties to their favorites list for future reference. To enhance security and provide a seamless authentication experience, Auth0 is used for both client-side and server-side authentication. The UI components are developed with Mantine to ensure a polished and responsive user interface.
9 |
10 | ## Key Features
11 |
12 | - Property Search: Users can search for properties in any location using the search functionality. The website also provides the ability to view areas around a property on a map.
13 |
14 | - Favorites List: Logged-in users can like properties and add them to their favorites list for easy access and comparison.
15 |
16 | - User Authentication: Auth0 is integrated into the website to handle user authentication securely.
17 |
18 | - Login and Signup: Users can create an account and log in to access additional features and save their preferences.
19 |
20 | ## Tech Stack
21 |
22 | The project is built using the following technologies:
23 |
24 | - React: A popular JavaScript library for building user interfaces.
25 | - Node.js: A server-side JavaScript runtime environment.
26 | - Express: A web application framework for Node.js, simplifying server-side development.
27 | - MongoDB: A NoSQL database used for storing property and user data.
28 | - Auth0: A third-party authentication service that handles user authentication for both the client-side and server-side.
29 | - Mantine: A React component library providing UI components for a polished user interface.
30 |
31 | ## How to Run
32 |
33 | To run Homzy on your computer, follow these steps:
34 |
35 | 1. Clone this repository to your local machine:
36 | git clone https://github.com/prazivi/Homzy-Real-Estate.git
37 |
38 |
39 | 2. Navigate to the project directory:
40 | cd Homzy-Real-Estate
41 |
42 |
43 | 3. Install the required dependencies for both the client and server sides:
44 | cd client
45 | npm install
46 | cd ../server
47 | npm install
48 |
49 |
50 | 4. Set up environment variables:
51 | - For the server, create a `.env` file in the `server` directory and set the required variables for MongoDB connection and Auth0 credentials.
52 |
53 | 5. Start the development server for both the client and server sides:
54 | cd client
55 | npm start
56 | cd ../server
57 | npm start
58 |
59 |
60 | 6. Open your web browser and visit `http://localhost:3000` to access the Homzy website.
61 |
62 | ## Contributing
63 |
64 | Contributions to this project are welcome. If you wish to contribute, please follow the standard GitHub workflow by creating pull requests and discussing any proposed changes via issues.
65 |
66 | ## Reporting Issues
67 |
68 | If you encounter any issues while using the Homzy website or have any suggestions for improvement, please open an issue on the GitHub repository. Your feedback is valuable to us, and we will address any reported issues promptly.
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/client/src/components/Facilities/Facilities.jsx:
--------------------------------------------------------------------------------
1 | import { useAuth0 } from "@auth0/auth0-react";
2 | import { Box, Button, Group, NumberInput } from "@mantine/core";
3 | import { useForm } from "@mantine/form";
4 | import React, { useContext } from "react";
5 | import UserDetailContext from "../../context/UserDetailContext";
6 | import useProperties from "../../hooks/useProperties.jsx";
7 | import { useMutation } from "react-query";
8 | import { toast } from "react-toastify";
9 | import { createResidency } from "../../utils/api";
10 | const Facilities = ({
11 | prevStep,
12 | propertyDetails,
13 | setPropertyDetails,
14 | setOpened,
15 | setActiveStep,
16 | }) => {
17 | const form = useForm({
18 | initialValues: {
19 | bedrooms: propertyDetails.facilities.bedrooms,
20 | parkings: propertyDetails.facilities.parkings,
21 | bathrooms: propertyDetails.facilities.bathrooms,
22 | },
23 | validate: {
24 | bedrooms: (value) => (value < 1 ? "Must have atleast one room" : null),
25 | bathrooms: (value) =>
26 | value < 1 ? "Must have atleast one bathroom" : null,
27 | },
28 | });
29 |
30 | const { bedrooms, parkings, bathrooms } = form.values;
31 |
32 | const handleSubmit = () => {
33 | const { hasErrors } = form.validate();
34 | if (!hasErrors) {
35 | setPropertyDetails((prev) => ({
36 | ...prev,
37 | facilities: { bedrooms, parkings, bathrooms },
38 | }));
39 | mutate();
40 | }
41 | };
42 |
43 | // ==================== upload logic
44 | const { user } = useAuth0();
45 | const {
46 | userDetails: { token },
47 | } = useContext(UserDetailContext);
48 | const { refetch: refetchProperties } = useProperties();
49 |
50 | const {mutate, isLoading} = useMutation({
51 | mutationFn: ()=> createResidency({
52 | ...propertyDetails, facilities: {bedrooms, parkings , bathrooms},
53 | }, token),
54 | onError: ({ response }) => toast.error(response.data.message, {position: "bottom-right"}),
55 | onSettled: ()=> {
56 | toast.success("Added Successfully", {position: "bottom-right"});
57 | setPropertyDetails({
58 | title: "",
59 | description: "",
60 | price: 0,
61 | country: "",
62 | city: "",
63 | address: "",
64 | image: null,
65 | facilities: {
66 | bedrooms: 0,
67 | parkings: 0,
68 | bathrooms: 0,
69 | },
70 | userEmail: user?.email,
71 | })
72 | setOpened(false)
73 | setActiveStep(0)
74 | refetchProperties()
75 | }
76 |
77 | })
78 |
79 | return (
80 |
81 |
113 |
114 | );
115 | };
116 |
117 | export default Facilities;
118 |
--------------------------------------------------------------------------------
/client/src/components/Contact/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Contact.css";
3 | import { MdCall } from "react-icons/md";
4 | import { BsFillChatDotsFill } from "react-icons/bs";
5 | import {HiChatBubbleBottomCenter} from 'react-icons/hi2'
6 | const Contact = () => {
7 | return (
8 |
9 |
10 | {/* left side */}
11 |
12 | Our Contact Us
13 | Easy to contact us
14 |
15 | We always ready to help by providijng the best services for you. We
16 | beleive a good blace to live can make your life better{" "}
17 |
18 |
19 |
8 | 
9 | 
10 | 
11 | 
10 |
11 | Our vision is to make all people 
69 | 
32 |
33 |
34 | {/* menu */}
35 | 
27 | 
84 |