Real Estate App

Overview

This is a Real Estate App built using React.js and Chakra UI. It allows users to view and analyze real estate locations on a map or in a list view.

Home Page

Login Page

Form

Map View

List View

Features

• The app provides a map view where users can see the locations of different real estate properties. The map is powered by Google Maps and allows users to zoom in/out and pan to explore different areas.
• The app displays markers on the map to represent the real estate properties. Each marker provides basic information about the property, such as project name, location, city, latitude, and longitude.
• When a user clicks on a marker, a location information box is displayed, showing detailed information about the selected property. This includes the project name, location, city, latitude, and longitude.
• Users can switch to a list view that provides a tabular representation of the real estate properties. The list includes the same information as the markers on the map, allowing users to easily compare different properties.

Tech Stack

• React
• React Router DOM
• Chakra UI
• Google Maps React

Prerequisites

Make sure you have the following installed:

• Node.js
• npm (Node Package Manager)

Installation

1. Clone the repository and install the dependencies:

• git clone https://github.com/souravpl8092/Real-Estate-App.git
• cd real-estate-app
• npm install

2. Start the development server:

• npm start

3. Open your browser and visit http://localhost:3000 to view the application.

Folder Structure

The project follows the following folder structure:

├── public
│   └── index.html
│
└── src
    ├── Components
    │   ├── AllRoutes.js
    │   ├── Data.js
    │   ├── LocationInfoBox.js
    │   ├── LocationMarker.js
    │   ├── ListView.js
    │   ├── MapView.js
    │   └── Navbar.js
    │
    ├── App.js
    ├── index.css
    └── index.js

• The public folder contains the HTML template file and other static assets.
• The src folder contains the application source code.
• The Components folder includes reusable components used in the application.
• The Pages folder contains the main page components.
• The App.js file is the entry point of the application.
• The index.js file is the root JavaScript file that renders the application.

Thank You