├── .env.example
├── .eslintrc.json
├── .babelrc
├── public
├── favicon.ico
└── vercel.svg
├── assets
└── images
│ ├── house.jpg
│ └── noresult.svg
├── pages
├── api
│ └── hello.js
├── _app.js
├── search.js
├── index.js
└── property
│ └── [id].js
├── .github
├── FUNDING.yml
└── dependabot.yml
├── next.config.js
├── components
├── Footer.jsx
├── Layout.jsx
├── Navbar.jsx
├── SearchFilters.jsx
├── ImageScrollBar.jsx
└── Property.jsx
├── styles
├── globals.css
└── Home.module.css
├── utils
├── fetchApi.js
└── filterData.js
├── .gitignore
├── package.json
├── LICENSE.md
├── CONTRIBUTING.md
├── README.md
└── CODE_OF_CONDUCT.md
/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_APP_RAPID_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXX
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["next/babel"],
3 | "plugins": []
4 | }
5 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanidhyy/real-estate-app/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/assets/images/house.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanidhyy/real-estate-app/HEAD/assets/images/house.jpg
--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 |
3 | export default function handler(req, res) {
4 | res.status(200).json({ name: 'John Doe' })
5 | }
6 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [sanidhyy]# Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: sanidhy
5 | custom: https://www.buymeacoffee.com/sanidhy
6 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | images: {
5 | domains: ["bayut-production.s3.eu-central-1.amazonaws.com"],
6 | },
7 | };
8 |
9 | module.exports = nextConfig;
10 |
--------------------------------------------------------------------------------
/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import { Box } from "@chakra-ui/react";
2 |
3 | // Footer
4 | const Footer = () => (
5 |
12 | {new Date().getFullYear()} Realtor, Inc.
13 |
14 | );
15 |
16 | export default Footer;
17 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
7 | }
8 |
9 | a {
10 | color: inherit;
11 | text-decoration: none;
12 | }
13 |
14 | * {
15 | box-sizing: border-box;
16 | }
17 |
--------------------------------------------------------------------------------
/utils/fetchApi.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | // Base URL
4 | export const baseURL = "https://bayut.p.rapidapi.com";
5 |
6 | // Fetch Data from API
7 | export const fetchApi = async (url) => {
8 | const { data } = await axios.get(url, {
9 | headers: {
10 | "X-RapidAPI-Key": process.env.NEXT_APP_RAPID_API_KEY,
11 | "X-RapidAPI-Host": "bayut.p.rapidapi.com",
12 | },
13 | });
14 |
15 | return data;
16 | };
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env
30 | .env*.local
31 |
32 | # vercel
33 | .vercel
34 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | # To get started with Dependabot version updates, you'll need to specify which
2 | # package ecosystems to update and where the package manifests are located.
3 | # Please see the documentation for all configuration options:
4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
5 |
6 | version: 2
7 | updates:
8 | - package-ecosystem: "npm" # See documentation for possible values
9 | directory: "/" # Location of package manifests
10 | schedule:
11 | interval: "weekly"
12 |
--------------------------------------------------------------------------------
/components/Layout.jsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import { Box } from "@chakra-ui/react";
3 |
4 | import Navbar from "./Navbar";
5 | import Footer from "./Footer";
6 |
7 | // Layout
8 | const Layout = ({ children }) => (
9 | <>
10 | {/* Head Tag */}
11 |
12 | Realtor - Real Estate App
13 |
14 |
15 | {/* Header */}
16 |
19 | {/* Main Body */}
20 | {children}
21 | {/* Footer */}
22 |
25 |
26 |
27 | );
28 |
29 | export default Layout;
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "real-estate-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@chakra-ui/react": "^2.2.1",
13 | "@emotion/react": "^11.14.0",
14 | "@emotion/styled": "^11.13.5",
15 | "axios": "^1.12.0",
16 | "dotenv": "^16.4.7",
17 | "framer-motion": "^6.3.13",
18 | "millify": "^6.1.0",
19 | "next": "15.4.8",
20 | "nprogress": "^0.2.0",
21 | "react": "18.3.1",
22 | "react-dom": "18.2.0",
23 | "react-horizontal-scrolling-menu": "^8.2.0",
24 | "react-icons": "^4.4.0"
25 | },
26 | "devDependencies": {
27 | "eslint": "9.22.0",
28 | "eslint-config-next": "15.0.3"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Sanidhya Kr. Verma
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import Router from "next/router";
2 | import Head from "next/head";
3 | import NProgress from "nprogress";
4 | import { ChakraProvider } from "@chakra-ui/react";
5 |
6 | import Layout from "../components/Layout";
7 | import "../styles/globals.css";
8 |
9 | // App
10 | function MyApp({ Component, pageProps }) {
11 | // configure nprogress
12 | NProgress.configure({ showSpinner: false });
13 |
14 | // start progress on route start
15 | Router.events.on("routeChangeStart", () => {
16 | NProgress.start();
17 | });
18 |
19 | // stop progress on route complete
20 | Router.events.on("routeChangeComplete", () => {
21 | NProgress.done();
22 | });
23 |
24 | return (
25 | <>
26 | {/* Head */}
27 |
28 |
35 |
36 |
37 | {/* Layout */}
38 |
39 |
40 |
41 |
42 |
43 |
44 | );
45 | }
46 |
47 | export default MyApp;
48 |
--------------------------------------------------------------------------------
/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import {
3 | Menu,
4 | MenuButton,
5 | MenuList,
6 | IconButton,
7 | Flex,
8 | Box,
9 | Spacer,
10 | MenuItem,
11 | } from "@chakra-ui/react";
12 | import { FcMenu, FcHome, FcAbout } from "react-icons/fc";
13 | import { BsSearch } from "react-icons/bs";
14 | import { FiKey } from "react-icons/fi";
15 |
16 | // Navbar
17 | const Navbar = () => (
18 |
19 | {/* Logo */}
20 |
21 |
22 | Realtor
23 |
24 |
25 |
26 |
27 | {/* Menu */}
28 |
50 |
51 |
52 | );
53 |
54 | export default Navbar;
55 |
--------------------------------------------------------------------------------
/components/SearchFilters.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Flex, Select, Box } from "@chakra-ui/react";
3 | import { useRouter } from "next/router";
4 |
5 | import { filterData, getFilterValues } from "../utils/filterData";
6 |
7 | // Search Filters
8 | const SearchFilters = () => {
9 | const router = useRouter();
10 | const [filters, setFilters] = useState(filterData);
11 |
12 | // Search Properties
13 | const searchProperties = (filterValues) => {
14 | const path = router.pathname;
15 | const { query } = router;
16 | const values = getFilterValues(filterValues);
17 |
18 | // set search query
19 | values.forEach((item) => {
20 | if (item.value && filterValues?.[item.name]) {
21 | query[item.name] = item.value;
22 | }
23 | });
24 |
25 | router.push({ pathname: path, query });
26 | };
27 |
28 | return (
29 |
30 | {/* Show Each Filter */}
31 | {filters.map((filter) => (
32 |
33 |
47 |
48 | ))}
49 |
50 | );
51 | };
52 |
53 | export default SearchFilters;
54 |
--------------------------------------------------------------------------------
/components/ImageScrollBar.jsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import Image from "next/image";
3 | import { Box, Icon, Flex } from "@chakra-ui/react";
4 | import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
5 | import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from "react-icons/fa";
6 |
7 | // Left Arrow
8 | const LeftArrow = () => {
9 | const { scrollPrev } = useContext(VisibilityContext);
10 |
11 | return (
12 |
13 | scrollPrev()}
16 | fontSize="2xl"
17 | cursor="pointer"
18 | d={["none", "none", "none", "block"]}
19 | />
20 |
21 | );
22 | };
23 |
24 | // Right Arrow
25 | const RightArrow = () => {
26 | const { scrollNext } = useContext(VisibilityContext);
27 |
28 | return (
29 |
30 | scrollNext()}
33 | fontSize="2xl"
34 | cursor="pointer"
35 | d={["none", "none", "none", "block"]}
36 | />
37 |
38 | );
39 | };
40 |
41 | // Image Scrollbar
42 | export default function ImageSrollbar({ data }) {
43 | return (
44 |
49 | {data.map((item) => (
50 |
57 |
66 |
67 | ))}
68 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
65 | Bitstream Vera Sans Mono, Courier New, monospace;
66 | }
67 |
68 | .grid {
69 | display: flex;
70 | align-items: center;
71 | justify-content: center;
72 | flex-wrap: wrap;
73 | max-width: 800px;
74 | }
75 |
76 | .card {
77 | margin: 1rem;
78 | padding: 1.5rem;
79 | text-align: left;
80 | color: inherit;
81 | text-decoration: none;
82 | border: 1px solid #eaeaea;
83 | border-radius: 10px;
84 | transition: color 0.15s ease, border-color 0.15s ease;
85 | max-width: 300px;
86 | }
87 |
88 | .card:hover,
89 | .card:focus,
90 | .card:active {
91 | color: #0070f3;
92 | border-color: #0070f3;
93 | }
94 |
95 | .card h2 {
96 | margin: 0 0 1rem 0;
97 | font-size: 1.5rem;
98 | }
99 |
100 | .card p {
101 | margin: 0;
102 | font-size: 1.25rem;
103 | line-height: 1.5;
104 | }
105 |
106 | .logo {
107 | height: 1em;
108 | margin-left: 0.5rem;
109 | }
110 |
111 | @media (max-width: 600px) {
112 | .grid {
113 | width: 100%;
114 | flex-direction: column;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Contributing
2 |
3 | [fork]: /fork
4 | [pr]: /compare
5 | [style]: https://standardjs.com/
6 | [code-of-conduct]: CODE_OF_CONDUCT.md
7 |
8 | Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
9 |
10 | Please note that this project is released with a [Contributor Code of Conduct][code-of-conduct]. By participating in this project you agree to abide by its terms.
11 |
12 | ## Issues and PRs
13 |
14 | If you have suggestions for how this project could be improved, or want to report a bug, open an issue! We'd love all and any contributions. If you have questions, too, we'd love to hear them.
15 |
16 | We'd also love PRs. If you're thinking of a large PR, we advise opening up an issue first to talk about it, though! Look at the links below if you're not sure how to open a PR.
17 |
18 | ## Submitting a pull request
19 |
20 | 1. [Fork][fork] and clone the repository.
21 | 1. Configure and install the dependencies: `npm install`.
22 | 1. Make sure the tests pass on your machine: `npm test`, note: these tests also apply the linter, so there's no need to lint separately.
23 | 1. Create a new branch: `git checkout -b my-branch-name`.
24 | 1. Make your change, add tests, and make sure the tests still pass.
25 | 1. Push to your fork and [submit a pull request][pr].
26 | 1. Pat your self on the back and wait for your pull request to be reviewed and merged.
27 |
28 | Here are a few things you can do that will increase the likelihood of your pull request being accepted:
29 |
30 | - Follow the [style guide][style] which is using standard. Any linting errors should be shown when running `npm test`.
31 | - Write and update tests.
32 | - Keep your changes as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
33 | - Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
34 |
35 | Work in Progress pull requests are also welcome to get feedback early on, or if there is something blocked you.
36 |
37 | ## Resources
38 |
39 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
40 | - [Using Pull Requests](https://help.github.com/articles/about-pull-requests/)
41 | - [GitHub Help](https://help.github.com)
42 |
--------------------------------------------------------------------------------
/components/Property.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import Image from "next/image";
3 | import { Box, Flex, Text, Avatar } from "@chakra-ui/react";
4 | import { FaBed, FaBath } from "react-icons/fa";
5 | import { BsGridFill } from "react-icons/bs";
6 | import { GoVerified } from "react-icons/go";
7 | import millify from "millify";
8 |
9 | import DefaultImage from "../assets/images/house.jpg";
10 |
11 | // Property
12 | const Property = ({
13 | property: {
14 | coverPhoto,
15 | price,
16 | rentFrequency,
17 | rooms,
18 | title,
19 | baths,
20 | area,
21 | agency,
22 | isVerified,
23 | externalID,
24 | },
25 | }) => (
26 |
27 |
35 | {/* Property Image */}
36 |
37 |
43 |
44 |
45 |
46 |
47 | {/* Verified badge */}
48 |
49 | {isVerified && }
50 |
51 | {/* Price */}
52 |
53 | AED {millify(price)}
54 | {rentFrequency && `/${rentFrequency}`}
55 |
56 |
57 |
58 | {/* Agency Logo */}
59 |
60 |
61 |
62 | {/* More Info */}
63 |
70 | {rooms} | {baths} | {millify(area)} sqft{" "}
71 |
72 |
73 | {/* Title */}
74 |
75 | {title.length > 30 ? `${title.substring(0, 30)}...` : title}
76 |
77 |
78 |
79 |
80 | );
81 |
82 | export default Property;
83 |
--------------------------------------------------------------------------------
/pages/search.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { useRouter } from "next/router";
3 | import Image from "next/image";
4 | import { Flex, Box, Text, Icon } from "@chakra-ui/react";
5 | import { BsFilter } from "react-icons/bs";
6 |
7 | import SearchFilters from "../components/SearchFilters";
8 | import Property from "../components/Property";
9 | import { baseURL, fetchApi } from "../utils/fetchApi";
10 | import noResultsImage from "../assets/images/noresult.svg";
11 |
12 | // Search
13 | const Search = ({ properties }) => {
14 | const [searchFilters, setSearchFilters] = useState(false);
15 | const router = useRouter();
16 |
17 | return (
18 |
19 | {/* Property Filters */}
20 | setSearchFilters((prevFilters) => !prevFilters)}
31 | >
32 | Search Property by Filters
33 |
34 |
35 | {searchFilters && }
36 |
37 | Properties {router.query.purpose}
38 |
39 | {/* Properties */}
40 |
41 | {properties.map((property) => (
42 |
43 | ))}
44 |
45 |
46 | {/* No Properties Found */}
47 | {properties.length === 0 && (
48 |
55 |
56 |
57 | No Results Found.
58 |
59 |
60 | )}
61 |
62 | );
63 | };
64 |
65 | // fetch filtered properties
66 | export async function getServerSideProps({ query }) {
67 | const purpose = query.purpose || "for-rent";
68 | const rentFrequency = query.rentFrequency || "yearly";
69 | const minPrice = query.minPrice || "0";
70 | const maxPrice = query.maxPrice || "1000000";
71 | const roomsMin = query.roomsMin || "0";
72 | const bathsMin = query.bathsMin || "0";
73 | const sort = query.sort || "price-desc";
74 | const areaMax = query.areaMax || "35000";
75 | const locationExternalIDs = query.locationExternalIDs || "5002";
76 | const categoryExternalID = query.categoryExternalID || "4";
77 |
78 | const data = await fetchApi(
79 | `${baseURL}/properties/list?locationExternalIDs=${locationExternalIDs}&purpose=${purpose}&categoryExternalID=${categoryExternalID}&bathsMin=${bathsMin}&rentFrequency=${rentFrequency}&priceMin=${minPrice}&priceMax=${maxPrice}&roomsMin=${roomsMin}&sort=${sort}&areaMax=${areaMax}`
80 | );
81 |
82 | return {
83 | props: {
84 | properties: data?.hits,
85 | },
86 | };
87 | }
88 |
89 | export default Search;
90 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import Image from "next/image";
3 | import { Flex, Box, Text, Button } from "@chakra-ui/react";
4 |
5 | import { baseURL, fetchApi } from "../utils/fetchApi";
6 | import Property from "../components/Property";
7 |
8 | // Banner
9 | const Banner = ({
10 | purpose,
11 | title1,
12 | title2,
13 | desc1,
14 | desc2,
15 | buttonText,
16 | linkName,
17 | imageURL,
18 | }) => (
19 |
20 | {/* Image */}
21 |
22 |
23 | {/* Text */}
24 |
25 |
26 | {purpose}
27 |
28 |
29 | {title1}
30 |
31 | {title2}
32 |
33 |
34 | {desc1}
35 |
36 | {desc2}
37 |
38 |
39 | {/* Button */}
40 |
43 |
44 |
45 | );
46 |
47 | // Home
48 | export default function Home({ propertiesForSale, propertiesForRent }) {
49 | return (
50 |
51 | {/* Banner for renting property */}
52 |
62 |
63 | {/* Properties for rent */}
64 |
65 | {propertiesForRent.map((property) => (
66 |
67 | ))}
68 |
69 |
70 | {/* Banner for buying property */}
71 |
81 | {/* Properties for sale */}
82 |
83 | {propertiesForSale.map((property) => (
84 |
85 | ))}
86 |
87 |
88 | );
89 | }
90 |
91 | // fetch all properties
92 | export async function getStaticProps() {
93 | const propertyForSale = await fetchApi(
94 | `${baseURL}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`
95 | );
96 | const propertyForRent = await fetchApi(
97 | `${baseURL}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`
98 | );
99 |
100 | return {
101 | props: {
102 | propertiesForSale: propertyForSale?.hits,
103 | propertiesForRent: propertyForRent?.hits,
104 | },
105 | };
106 | }
107 |
--------------------------------------------------------------------------------
/assets/images/noresult.svg:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Realtor - A Next JS Real Estate App
2 |
3 | 
4 |
5 | [](https://github.com/Technical-Shubham-tech)
6 | [](https://github.com/Technical-Shubham-tech/real-estate-app/blob/main/LICENSE.md)
7 | [](https://github.com/Technical-Shubham-tech/real-estate-app/commits/main)
8 | [](https://github.com/Technical-Shubham-tech/real-estate-app/branches)
9 | [](https://github.com/Technical-Shubham-tech/real-estate-app/commits)
10 | [](https://real-estate-app-react.vercel.app/)
11 | [](https://github.com/Technical-Shubham-tech/real-estate-app/issues)
12 |
13 | ## ⚠️ Before you start
14 |
15 | 1. Make sure **Git** and **NodeJS** is installed
16 | 2. **Yarn** is faster than Npm. So use [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/).
17 | 3. Create .env file in root folder.
18 | 4. Contents of **.env**
19 |
20 | ```
21 | NEXT_APP_RAPID_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXX
22 | ```
23 |
24 | 5. Now, to setup API, go to [Rapid API Website](https://rapidapi.com/) and create an account.
25 |
26 | 6. Enable this API to fetch Real estate data: [API: Bayut](https://rapidapi.com/apidojo/api/bayut/).
27 |
28 | 
29 |
30 | 7. After enabling you can get your API Keys and paste them in `.env` file in `NEXT_APP_RAPID_API_KEY`.
31 |
32 | **NOTE:** Make sure you don't share these keys publicaly.
33 |
34 | ## 📌 How to use this App?
35 |
36 | 1. Clone this **repository** to your local computer.
37 | 2. Open **terminal** in root directory.
38 | 3. Type and Run `npm install` or `yarn install`.
39 | 4. Once packages are installed, you can start this app using `npm run dev` or `yarn dev`
40 | 5. Now app is fully configured and you can start using this app :+1:
41 |
42 | ## 📃 Built with
43 |
44 | [
](https://www.javascript.com/)
45 |
46 | [
](https://reactjs.org/)
47 |
48 | [
](https://nextjs.org/)
49 |
50 | [
](https://rapidapi.com/)
51 |
52 | [
](https://github.com/Technical-Shubham-tech)
53 |
54 | ## 🔧 Stats
55 |
56 | 
57 |
58 | ## 🙌🏼 Contribute
59 |
60 | You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.
61 |
62 | ## Buy Me a Coffee 🍺
63 |
64 | [
](https://www.buymeacoffee.com/sanidhy "Buy me a Coffee")
65 |
66 | ## 🚀 Follow Me
67 |
68 | [](https://github.com/Technical-Shubham-tech)
69 | [](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2FTechnical-Shubham-tech%2Fmedical-chat-app)
70 | [](https://www.youtube.com/channel/UCNAz_hUVBG2ZUN8TVm0bmYw)
71 |
72 | ## ⭐ Give A Star
73 |
74 | You can also give this repository a star to show more people and they can use this repository.
75 |
--------------------------------------------------------------------------------
/pages/property/[id].js:
--------------------------------------------------------------------------------
1 | import { Box, Flex, Spacer, Text, Avatar } from "@chakra-ui/react";
2 | import { FaBed, FaBath } from "react-icons/fa";
3 | import { BsGridFill } from "react-icons/bs";
4 | import { GoVerified } from "react-icons/go";
5 | import millify from "millify";
6 |
7 | import { baseURL, fetchApi } from "../../utils/fetchApi";
8 | import ImageScrollBar from "../../components/ImageScrollBar";
9 |
10 | // Propery Details
11 | const PropertyDetails = ({
12 | propertyDetails: {
13 | price,
14 | rentFrequency,
15 | rooms,
16 | title,
17 | baths,
18 | area,
19 | agency,
20 | isVerified,
21 | description,
22 | type,
23 | purpose,
24 | furnishingStatus,
25 | amenities,
26 | photos,
27 | },
28 | }) => (
29 | // Property Images
30 |
31 | {photos && }
32 |
33 |
34 |
35 | {/* Verified badge */}
36 |
37 | {isVerified && }
38 |
39 | {/* Price */}
40 |
41 | AED {millify(price)}
42 | {rentFrequency && `/${rentFrequency}`}
43 |
44 |
45 |
46 | {/* Agency Logo */}
47 |
48 |
49 |
50 | {/* More Info */}
51 |
58 | {rooms} | {baths} | {millify(area)} sqft{" "}
59 |
60 |
61 |
62 | {/* Title */}
63 |
64 | {title}
65 |
66 | {/* Description */}
67 |
68 | {description}
69 |
70 |
71 |
76 | {/* Type */}
77 |
84 | Type
85 | {type}
86 |
87 | {/* Purpose */}
88 |
95 | Purpose
96 | {purpose}
97 |
98 | {/* Furnishing Status */}
99 | {furnishingStatus && (
100 |
107 | Furnishing Status
108 | {furnishingStatus}
109 |
110 | )}
111 |
112 | {/* Amenities */}
113 |
114 | {amenities.length && (
115 |
116 | Amenities
117 |
118 | )}
119 |
120 |
121 | {amenities?.map((item) =>
122 | item?.amenities?.map((amenity) => (
123 |
133 | {amenity.text}
134 |
135 | ))
136 | )}
137 |
138 |
139 |
140 |
141 | );
142 |
143 | export default PropertyDetails;
144 |
145 | // fetch a property
146 | export async function getServerSideProps({ params: { id } }) {
147 | const data = await fetchApi(`${baseURL}/properties/detail?externalID=${id}`);
148 |
149 | return {
150 | props: {
151 | propertyDetails: data,
152 | },
153 | };
154 | }
155 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | issues.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/utils/filterData.js:
--------------------------------------------------------------------------------
1 | // Filter Raw Data (Don't Change)
2 | export const filterData = [
3 | {
4 | items: [
5 | { name: "Buy", value: "for-sale" },
6 | { name: "Rent", value: "for-rent" },
7 | ],
8 | placeholder: "Purpose",
9 | queryName: "purpose",
10 | },
11 | {
12 | items: [
13 | { name: "Daily", value: "daily" },
14 | { name: "Weekly", value: "weekly" },
15 | { name: "Monthly", value: "monthly" },
16 | { name: "Yearly", value: "yearly" },
17 | ],
18 | placeholder: "Rent Frequency",
19 | queryName: "rentFrequency",
20 | },
21 | {
22 | items: [
23 | { name: "10,000", value: "10000" },
24 | { name: "20,000", value: "20000" },
25 | { name: "30,000", value: "30000" },
26 | { name: "40,000", value: "40000" },
27 | { name: "50,000", value: "50000" },
28 | { name: "60,000", value: "60000" },
29 | { name: "85,000", value: "85000" },
30 | ],
31 | placeholder: "Min Price(AED)",
32 | queryName: "minPrice",
33 | },
34 | {
35 | items: [
36 | { name: "50,000", value: "50000" },
37 | { name: "60,000", value: "60000" },
38 | { name: "85,000", value: "85000" },
39 | { name: "110,000", value: "110000" },
40 | { name: "135,000", value: "135000" },
41 | { name: "160,000", value: "160000" },
42 | { name: "185,000", value: "185000" },
43 | { name: "200,000", value: "200000" },
44 | { name: "300,000", value: "300000" },
45 | { name: "400,000", value: "400000" },
46 | { name: "500,000", value: "500000" },
47 | { name: "600,000", value: "600000" },
48 | { name: "700,000", value: "700000" },
49 | { name: "800,000", value: "800000" },
50 | { name: "900,000", value: "900000" },
51 | { name: "1000,000", value: "1000000" },
52 | ],
53 | placeholder: "Max Price(AED)",
54 | queryName: "maxPrice",
55 | },
56 | {
57 | items: [
58 | { name: "Lowest Price", value: "price-asc" },
59 | { name: "Highest Price", value: "price-des" },
60 | { name: "Newest", value: "date-asc" },
61 | { name: "Oldest", value: "date-desc" },
62 | { name: "Verified", value: "verified-score" },
63 | { name: "City Level Score", value: "city-level-score" },
64 | ],
65 | placeholder: "Sort",
66 | queryName: "sort",
67 | },
68 | {
69 | items: [
70 | { name: "1000", value: "1000" },
71 | { name: "2000", value: "2000" },
72 | { name: "3000", value: "3000" },
73 | { name: "4000", value: "4000" },
74 | { name: "5000", value: "5000" },
75 | { name: "10000", value: "10000" },
76 | { name: "20000", value: "20000" },
77 | ],
78 | placeholder: "Max Area(sqft)",
79 | queryName: "areaMax",
80 | },
81 | {
82 | items: [
83 | { name: "1", value: "1" },
84 | { name: "2", value: "2" },
85 | { name: "3", value: "3" },
86 | { name: "4", value: "4" },
87 | { name: "5", value: "5" },
88 | { name: "6", value: "6" },
89 | { name: "7", value: "7" },
90 | { name: "8", value: "8" },
91 | { name: "9", value: "9" },
92 | { name: "10", value: "10" },
93 | ],
94 | placeholder: "Rooms",
95 | queryName: "roomsMin",
96 | },
97 | {
98 | items: [
99 | { name: "1", value: "1" },
100 | { name: "2", value: "2" },
101 | { name: "3", value: "3" },
102 | { name: "4", value: "4" },
103 | { name: "5", value: "5" },
104 | { name: "6", value: "6" },
105 | { name: "7", value: "7" },
106 | { name: "8", value: "8" },
107 | { name: "9", value: "9" },
108 | { name: "10", value: "10" },
109 | ],
110 | placeholder: "Baths",
111 | queryName: "bathsMin",
112 | },
113 | {
114 | items: [
115 | { name: "Furnished", value: "furnished" },
116 | { name: "Unfurnished", value: "unfurnished" },
117 | ],
118 | placeholder: "Furnish Type",
119 | queryName: "furnishingStatus",
120 | },
121 | {
122 | items: [
123 | { name: "Apartment", value: "4" },
124 | { name: "Townhouses", value: "16" },
125 | { name: "Villas", value: "3" },
126 | { name: "Penthouses", value: "18" },
127 | { name: "Hotel Apartments", value: "21" },
128 | { name: "Villa Compound", value: "19" },
129 | { name: "Residential Plot", value: "14" },
130 | { name: "Residential Floor", value: "12" },
131 | { name: "Residential Building", value: "17" },
132 | ],
133 | placeholder: "Property Type",
134 | queryName: "categoryExternalID",
135 | },
136 | ];
137 |
138 | export const getFilterValues = (filterValues) => {
139 | const {
140 | purpose,
141 | rentFrequency,
142 | categoryExternalID,
143 | minPrice,
144 | maxPrice,
145 | areaMax,
146 | roomsMin,
147 | bathsMin,
148 | sort,
149 | locationExternalIDs,
150 | } = filterValues;
151 |
152 | const values = [
153 | {
154 | name: "purpose",
155 | value: purpose,
156 | },
157 | {
158 | name: "rentFrequency",
159 | value: rentFrequency,
160 | },
161 | {
162 | name: "minPrice",
163 | value: minPrice,
164 | },
165 | {
166 | name: "maxPrice",
167 | value: maxPrice,
168 | },
169 | {
170 | name: "areaMax",
171 | value: areaMax,
172 | },
173 | {
174 | name: "roomsMin",
175 | value: roomsMin,
176 | },
177 | {
178 | name: "bathsMin",
179 | value: bathsMin,
180 | },
181 | {
182 | name: "sort",
183 | value: sort,
184 | },
185 | {
186 | name: "locationExternalIDs",
187 | value: locationExternalIDs,
188 | },
189 | {
190 | name: "categoryExternalID",
191 | value: categoryExternalID,
192 | },
193 | ];
194 |
195 | return values;
196 | };
197 |
--------------------------------------------------------------------------------