INDUSTRIAL INTERNSHIP REPORT

Internship report on
WEB APPLICATION FOR RESIDENTIAL REAL
ESTATE BUSINESS

Bachelor of Engineering in School of Electronics and

Communication Engineering.
Carried out at
Pravinya Information Technological Services

By:

1. D. Shreyas USN: 01FE20BEC136

2. Nikhil Kumar S Pawar USN: 01FE20BEC147
3. Sanskruti V S USN: 01FE20BEC123
4. Vinod Patil USN: 01FE20BEC143
5. Omkar Bolake USN: 01FE20BEC131

Semester: VIII, 2024-2025

Under the Guidance of

Prof. Preeti Pillai Dr. P. R. Patil

College Guide Industry Guide
KLE Technological University Pravinya Information Technology Services
 K.L.E SOCIETY’S
KLE Technological University,
HUBBALLI-580031
2024-25

SCHOOL OF ELECTRONICS AND COMMUNICATION

ENGINEERING

CERTIFICATE

This is to certify that project entitled “Web Application for Residential Real Es-
tate Business” is a bonafide work carried out by the student team of ”D. Shreyas
(01FE20BEC136), Nikhil Kumar S Pawar(01FE20BEC147), Omkar Bolake
(01FE20BEC131),Vinod Patil(01FE20BEC143),Sanskruti S(01FE20BEC123),”.
The project report has been approved as it satisfies the requirements with respect to the
Minor project work prescribed by the university curriculum for BE (VIII semester) in
School of Electronics and Communication Engineering of KLE Technological University
for the academic year 2024-25.

Prof. Preeti Pillai Dr. Suneeta V. B. Prof. B. S. Anami

Guide Head of School Registrar

Dr. P.R. Patil

Internship Guide

External Viva:

Name of Examiners Signature with date

1.

2.
 ACKNOWLEDGMENT
We are deeply grateful to Pravinya Information Technological Services for offering us this
invaluable internship opportunity, which has provided us with extensive experience and
exposure to cutting-edge web technologies. This experience not only enriched our techni-
cal knowledge but also significantly enhanced our communication skills in a professional
environment.Our heartfelt thanks go to Dr. P.R. Patil, our industry mentor, for his
insightful guidance and innovative ideas throughout the internship. His timely advice was
instrumental in our learning process.
We also extend our sincere gratitude to our university advisor, Prof. Preeti Pillai.,
for her continuous support and constructive feedback. His mentorship has been crucial in
our professional growth.We are immensely thankful to the Head of the School of Electron-
ics and Communication, Dr. Suneeta V. B., and the honorable Vice Chancellor of KLE
Technological University, Dr. Ashok Shettar, for enabling this internship opportunity.
Their support has been foundational to our development and success in this program.

-Shreyas, Nikhil, Sanskruti, Vinod, Omkar

i
 ABSTRACT
This abstract introduces a proposed real estate website that leverages digital technolo-
gies to streamline industry practices. With the digital revolution shaping the real estate
landscape, this platform aims to optimize efficiency in listing management processes. It
provides property owners with an intuitive interface for creating, updating, and deleting
listings, ensuring accuracy and relevance. Additionally, the platform facilitates direct
communication channels, such as email, between property owners and potential buyers,
enhancing interaction and expediting transactions. By integrating automated features,
like personalized email notifications, the platform keeps stakeholders informed and en-
gaged throughout the process. Through embracing digital innovations, this website seeks
to revolutionize real estate management, catering to the evolving needs of property owners
and buyers alike. .

ii
Contents

1 Introduction 2
1.1 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Objectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Literature survey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Need Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Problem statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.6 Organization of the report . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

2 System design 6
2.1 Functional block diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.1.1 Data Flow Diagram (DFD) 0 . . . . . . . . . . . . . . . . . . . . . 7
2.1.2 Data Flow Diagram (DFD) 1.0 . . . . . . . . . . . . . . . . . . . . 8
2.1.3 Data Flow Diagram (DFD) 2.0 . . . . . . . . . . . . . . . . . . . . 8
2.2 Entity Relation Flow Diagram (ER) . . . . . . . . . . . . . . . . . . . . . . 9

3 Tools and Technology Used 10

3.1 HTML 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.4 MongoDB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.5 Express.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.6 React.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
3.7 Node.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.8 Redux Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.9 JSON Web Tokens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.10 Google Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4 Results and discussions 15

4.1 Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.2 Sign In: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.3 Sign Up: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.4 Profile : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.5 About: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.6 Listings : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.6.1 Create Listings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.6.2 Show Listings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.6.3 Update Listings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.6.4 Search Listings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

iii
5 Conclusions and future scope 21
5.1 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.2 Future scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

References 22

iv
List of Figures

2.1 Functional Block Diagram . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2.2 Block Diagram For DFD 0 . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Block Diagram For DFD 1.0 . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.4 Block Diagram For DFD 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.5 Block Diagram For ER flow diagram . . . . . . . . . . . . . . . . . . . . . 9

4.1 Home Page-1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.2 Home Page-2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.3 Home Page-3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.4 Sign In Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.5 Sign Up Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4.6 Profile Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.7 About Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.8 Create Listing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.9 Profile Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.10 About Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.11 About Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

v
Chapter 1

Introduction

In an era marked by rapid technological advancement, innovation has become a corner-

stone of modern living. Our project endeavors to capitalize on this trend by developing
a real-estate website aimed at simplifying the property selection process for users. Our
platform empowers users to browse, select, and engage with property listings tailored to
their preferences, facilitating seamless communication with property owners for negotia-
tion purposes.
To unlock the full functionality of the website, users are required to create an account,
granting them the ability to both upload new property listings and connect with listings
from other users. When uploading a new property, users are prompted to provide essential
details such as the property’s address, number of bedrooms and bathrooms, and additional
features such as parking availability or swimming pools. Furthermore, users have the
flexibility to list properties for sale or rent, specifying both the actual price and any
discounted rates they wish to offer.
In terms of technical architecture, the front end of the website is developed using a
combination of HTML, CSS, and JavaScript, ensuring an intuitive and visually appealing
user experience. On the backend, we leverage the MERN stack, comprising MongoDB,
ExpressJS, ReactJS, and NodeJS, to deliver robust functionality and seamless integration
across the platform. Additionally, we have incorporated Redux Toolkit and JWT (JSON
Web Tokens) for API authentication, enhancing security and user privacy.
To further bolster our platform’s capabilities, we have integrated Google Firebase,
a comprehensive suite of backend cloud computing services developed by Google. This
integration provides a reliable foundation for hosting databases, facilitating seamless au-
thentication, and enabling seamless integration with a wide range of applications.

1.1 Motivation
The motivation behind our project stems from the inefficiencies inherent in traditional
real estate practices. Historically, property advertising relied on manual methods such
as posters, resulting in a cumbersome and time-consuming process for both buyers and
sellers. Our goal is to address these challenges by offering a modern platform that enables
users to search for properties based on their preferences. With advanced search features
and seamless functionality, our website aims to streamline real estate interactions, ulti-
mately enhancing efficiency and convenience for all parties involved.

1
1.2 Objectives
The primary goals of our project are laid forth in this section. These goals will be kept
in mind during the whole endeavor. Therefore, the goals are as follows:

• Develop a robust web application using the MERN stack.

• Provide users with an intuitive interface to search for properties based on their
preferences.

• Permit users to include property descriptions, images, and contact information.

• Enable users to contact landlords directly through the platform.

• Implement secure authentication and authorization mechanisms.

1.3 Literature survey

This section provides a comprehensive review of existing research and developments in
MERN full-stack development. It examines the foundational technologies—MongoDB,
Express.js, React.js, and Node.js and their integration into cohesive web applications. By
exploring previous studies, industry practices, and emerging trends, this survey highlights
the advancements and challenges in the field, offering a contextual background for our
project’s objectives and methodologies.

1. Towards a user-oriented recommendation system for real estate websites

[3]
The project focuses on the creation of a user-friendly recommendation system for real
estate websites, with the goal of addressing the inefficiencies of real estate searches on
the internet. It underlines the growing usage of the internet for home searches, as well
as the limits of existing search tools. To increase the efficiency of real estate searches, an
online homebuyer’s search program was developed based on search behavior research, and
a user-friendly suggestion system for real estate websites was introduced. This system is
intended to improve information management efficiency and suggestion accuracy by in-
tegrating case-based reasoning and an ontological structure. The system was tested with
users, and the results showed that they were very satisfied with the interface and search
procedure.

Overall, the study provides a comprehensive approach to developing a user-oriented rec-

ommendation system for real estate websites, addressing the inefficiencies and limitations
of current search mechanisms and offering a potential solution to enhance the efficiency
and effectiveness of real estate searches on the internet.

2
2.Real Estate Website Using HTML, CSS, JS, PHP, and MYSQL [2]
This paper examines the design and development of a real estate website utilizing HTML,
CSS, JavaScript, PHP, and MySQL to modernize the real estate industry. It also under-
lines the significance of developing a user-friendly online platform that extends beyond
static property listings in order to improve user experience and promote smooth commu-
nication among all stakeholders. The technology stack employed includes HTML, CSS,
JavaScript for the front end, PHP for server-side scripting, and MySQL for database
management, resulting in a cohesive development process that balances aesthetics and
functionality. It recommends the strategic use of technology to change digital interac-
tions in the real estate sector, hence streamlining property transactions and improving
user experience.

3.MERN Stack with modern WEB practices [1]

The Bachelor’s Thesis focused on the creation of a full-stack web application using the
MERN stack, which includes MongoDB, ExpressJS, ReactJS, and NodeJS, as well as
modern web development techniques. The thesis sought to provide a thorough exam-
ination of each technology in the stack and how they interact to construct a powerful
web application. It underlined the significance of understanding important concepts like
React and Redux while developing modern web applications. The implementation phase
included developing a working backend system and user interface for efficient app manage-
ment, as well as demonstrating the MERN stack’s practical use in real-world applications.
By successfully developing a prototype application that exhibited the possibilities of the
MERN stack, the thesis demonstrated the power and variety of employing modern web
technologies to build dynamic and interactive web applications.

1.4 Need Statement

To address the fragmented landscape in the real estate industry, a user-friendly website
is being developed to serve as a comprehensive hub for accessing properties for sale or
rent. This platform aims to simplify the property search process and facilitate seamless
interactions between landlords and potential tenants or buyers.

1.5 Problem statement

Develop a solution for the real estate industry’s fragmented landscape, this project aims
to create a user-friendly website. This platform will address the absence of a centralized
hub where users can readily access properties for sale or rent and engage in direct com-
munication with landlords.

3
1.6 Organization of the report
This report is structured into five comprehensive chapters to guide readers through the
various phases of our MERN full-stack development project. Chapter 1, Introduction,
sets the stage by outlining the project’s objectives, scope, and its overarching signifi-
cance. Following this, Chapter 2, System Design, goes into detail about the system’s
architecture, illustrated through functional block diagrams and thorough explanations of
the design process. In Chapter 3, Tools and Technologies, we explore the software,
frameworks, and libraries that were crucial to our development process, detailing how each
contributes to the project. Chapter 4, Results and Discussions, presents an analysis
of the project outcomes, comparing them to our initial expectations and discussing any
challenges faced during implementation. The report concludes with Chapter 5, Con-
clusion and Future Scope, which summarizes the key findings and explores potential
avenues for future research and enhancements to the project. This format ensures a clear
and logical flow, providing a deep understanding of each facet of the project from incep-
tion to its final stages.

4
Chapter 2

System design

In this chapter we have designed a functional block diagram for real estate web application
which are classified into DFD 0, DFD 1.0, DFD 2.0 and ER diagram which are described
briefly in figures 2.1, 2.2, 2.3, 2.4, 2.5 respectively .

2.1 Functional block diagram

Figure 2.1: Functional Block Diagram

5
 • Front End (React) : This is the user interface of the web application. It’s what
users see and interact with. In this case, the application is built using React, a
JavaScript library for building user interfaces.

• Back End (Node.js):: This is the server-side of the web application. It handles
the business logic of the application, such as processing data and interacting with
the database. This application uses Node.js, a JavaScript runtime environment that
allows you to run JavaScript code outside of a web browser.

• Database (MongoDB) : This is where the application stores its data. This appli-
cation uses MongoDB, NoSQL database that stores data in JSON-like documents.

• Authentication : This component is responsible for verifying the identity of users

who try to log in to the application. It can use services like Firebase or Auth0.

• User Management : This component allows users to log in, sign up, and update
their profiles.

• Listing Management : This component allows users to add, edit, and delete list-
ings. It’s not clear from the diagram what kind of listings this application supports,
but it could be listings for rental properties, products for sale, or something else
entirely.

• Search and Contact : This component allows users to search for listings and
contact the people who posted them. It’s not clear from the diagram if users can
search for listings by location, price, or other criteria.

2.1.1 Data Flow Diagram (DFD) 0

Figure 2.2: Block Diagram For DFD 0

DFD Level 0 provides a high-level overview of the real estate website, showing key entities
(Buyer, Seller, Main Gate Website) and core processes (Add Listings, Registration, User
Information).

6
2.1.2 Data Flow Diagram (DFD) 1.0

Figure 2.3: Block Diagram For DFD 1.0

DFD Level 1 breaks down the main processes for buyers (e.g., property search) and sellers
(e.g. listing properties for rent or sale), showing detailed interactions and data flows.

2.1.3 Data Flow Diagram (DFD) 2.0

Figure 2.4: Block Diagram For DFD 2.0

7
DFD Level 2 offers a more detailed view of specific processes, such as the detailed steps in
property listing, property search, contacting through mail, registration and information
about seller, buyer. It provides a deeper understanding of the system’s functionality and
data processing.

2.2 Entity Relation Flow Diagram (ER)

Figure 2.5: Block Diagram For ER flow diagram

ER diagram provides detailed information like buyer and seller contact details, property
specifications (e.g., number of bedrooms and bathrooms, price, availability, discounts,
images), and ensures comprehensive data capture and connections.

8
Chapter 3

Tools and Technology Used

This section contains the overall tools and technologies used for developing the real estate
website using MERN technology.

3.1 HTML 5
The HyperText Markup Language (HTML) has evolved with HTML5, its most recent
major version offering additional elements, attributes, and APIs for developing contem-
porary, dynamic web content. It gives web developers the ability to organize and arrange
web pages more meaningfully by include semantic elements like <section>, <article>,
<footer>, and <header>. Media material can now be embedded without the need for
third-party plugins thanks to HTML5’s inherent support for multimedia elements like
<audio> and <video>. Complex and dynamic visuals can be created even more easily
with the help of Scalable Vector visuals (SVG) and the <canvas> element.
New HTML5 input types like email, number, and date, as well as attributes like
required and pattern, help forms validate user input more effectively. Additional note-
worthy features are support for native drag-and-drop capabilities, web workers for con-
current scripting, web storage for client-side data persistence, and geolocation APIs for
location-based services. To create web applications that run smoothly offline, HTML5
also offers an offline application cache. HTML5 enables developers to design websites
that are more accessible, user-friendly, and interactive thanks to these developments.

3.2 CSS
CSS (Cascading Style Sheets) is a stylesheet used to manage how HTML texts are pre-
sented and designed. It makes it simpler for developers to maintain and update web pages
by enabling them to isolate content from design. To style elements, CSS offers a vast ar-
ray of attributes, including the ability to determine layouts, colors, fonts, margins, and
padding. Its cascading nature, wherein styles can be applied more specifically to specific
elements or worldwide, and where more specific styles can take precedence over general
styles, is one of its fundamental characteristics. There are several ways to incorporate
styles in an HTML document: inline styles, external stylesheets that link to a different
.css file using the <link> element, and internal stylesheets inside the <style> tag in the
HTML document’s <head>.

9
 Furthermore, CSS allows media queries, which facilitate responsive design by changing
the layout according to the screen size and capabilities of the device. This enables the cre-
ation of websites that work and look great across a range of gadgets, such as PCs, tablets,
and smartphones. Sophisticated elements like CSS Grid and Flexbox offer strong tools for
layout, and transitions and animations enable seamless and captivating user interfaces.
Developers can apply styles to specific components and classes by using selectors; the
more exact these selections are, the more weight each style has. Developers may create
visually beautiful and consistent web experiences across many platforms and devices by
fully utilizing CSS. written in the overleaf style.

3.3 JavaScript
A high-level dynamic programming language called JavaScript is necessary to create dy-
namic, interactive online content. Along with HTML and CSS, it is one of the funda-
mental web technologies and is frequently used to create dynamic, responsive websites.
JavaScript’s syntax is straightforward and adaptable, making it suitable for both novice
and seasoned developers. Because of its dynamic typing and event-driven programming
style, code may be made to react to user inputs like clicks, keystrokes, and mouse move-
ments, and variable usage can be more flexible. JavaScript has strong programming
paradigms with support for prototype-based object orientation, closures, and first-class
functions. Furthermore, JavaScript is a master at asynchronous programming; it provides
structures like async/await, Promises, and callbacks for effective, non-blocking code exe-
cution.
In-depth APIs for interacting with the DOM, launching network queries, and gaining
access to client-side storage are also provided by the language. Well-known JavaScript
frameworks and libraries like Vue.js, Angular, and React.js provide specialized tools and
components along with making development simpler. Moreover, server-side technologies
such as Node.js expand JavaScript’s reach outside of browsers, allowing developers to
leverage the same language throughout the whole web stack. Its adaptability also extends
to employing frameworks like Phaser and React Native to create cross-platform mobile
apps and games. Developers may create engaging and dynamic online experiences for a
variety of platforms and devices by becoming proficient with JavaScript.

3.4 MongoDB
The preferred option for developing contemporary applications is MongoDB, a well-liked
NoSQL database because of its scalability and versatility. Complex and layered data
structures can be easily stored and retrieved from this document-oriented database be-
cause it saves data in a format called BSON (Binary JSON), which is similar to JSON.
MongoDB’s dynamic schemas allow developers to easily adjust to changing data require-
ments without experiencing any downtime, in contrast to traditional relational databases
that have set schema requirements. Effective data retrieval and manipulation are sup-
ported by MongoDB’s broad indexing choices and aggregation structure, which provide
strong query capabilities. The database can manage massive data volumes and heavy
traffic loads with to its built-in sharding and replication features, which also offer high
availability, load balancing, and horizontal scalability.

10
 Additionally, MongoDB offers consistency and dependability for crucial applications
by supporting ACID transactions for operations across many documents. The database
works well with a wide range of frameworks and programming languages, and libraries
and drivers are available for simple data access and management. In order to ensure
database health and performance, MongoDB’s ecosystem includes tools like MongoDB
Atlas for cloud-based deployment and management in addition to backup and monitoring
programs. Modern web and mobile apps can benefit greatly from MongoDB’s scalability,
efficient data operations, and flexible data modeling, all of which can be achieved by
developers using this database.

3.5 Express.JS
Express.js is a popular, simple, and versatile Node.js web application framework that
makes it easier to create online apps and APIs. It offers a comprehensive collection of
features that enable developers to create server-side applications efficiently. Express.js is
known for its simplicity and ease of use, with a basic API for routing, middleware, and
request/response processing.
One of Express.js important features is its routing system, which enables developers
to easily construct routes and handle various HTTP methods (GET, POST, PUT, and
DELETE). This routing system facilitates the development of RESTful APIs and web
applications with well-organized endpoints and logical URL formats.Middleware is a type
of function that runs in the request-response cycle and allows functionality like data pars-
ing, logging, and authentication. Express.js supports middleware. Developers can write
custom middleware for particular application requirements or use built-in middleware for
functions like parsing JSON and URL-encoded input.
With Express.js, developers can easily work with different template engines to manage
server-side rendering for web applications and generate dynamic views. It also enables
delivering files directly from the server—such as photos, CSS, and JavaScript—easy due
to its support for static file serving. Integration with other Node.js libraries and tools, like
Passport for authentication or Mongoose for MongoDB integration, is made simple by the
framework’s vast ecosystem and ease of use.With a large selection of third-party modules
and plugins available to expand its functionality, Express.js is incredibly extensible.A
keystone of the MEAN and MERN stacks (MongoDB, Express, Angular/React, Node),
Express.js is extensively utilized in full-stack web development. It is a great option for
developing web servers, APIs, and web apps using Node.js due to its speed, versatility,
and ease of use.

3.6 React.JS
React is a popular JavaScript toolkit used to create user interfaces, especially for intri-
cate, interactive online applications and single-page apps. React is a Facebook-developed
framework that focuses on declarative programming and component-based architecture,
enabling programmers to create modular and reusable user interface components. The
virtual DOM, an in-memory replica of the real DOM that React employs to effectively
manage and update UI changes, is the fundamental idea behind the framework. React
optimizes efficiency and facilitates seamless user interactions by calculating the minimum
updates required and applying them to the actual DOM when changes happen. Develop-

11
ers may more easily specify how the user interface (UI) should appear and function thanks
to the library’s JSX (JavaScript XML) syntax, which blends HTML-like elements with
JavaScript. In order for each component in React to maintain its own state and re-render
effectively when changes in state occur, state management is an essential component of
React’s component model.
Furthermore, functional components can leverage state and other React capabilities
without requiring classes thanks to React’s powerful hooks feature. In the process of
developing React, this has made code simpler and encouraged the use of functional pro-
gramming. React may be used with other front-end frameworks like Angular and Vue.js,
and it interfaces well with other libraries and frameworks, such as state management
libraries like Redux and context API for applying state management to the entire appli-
cation. React Native also lets developers create native mobile applications with the same
component-based design and fundamental ideas as React, expanding React’s usefulness
to the realm of mobile app development. A wide range of third-party frameworks and
tools for component style, testing, and routing are part of the React ecosystem. Its com-
munity is vibrant and helpful, offering a multitude of guides, tools, and best practices.
In general, React is a strong and adaptable option for creating contemporary, dynamic
web interfaces because of its component-based methodology, virtual DOM, and effective
updating methods.

3.7 Node.JS
JavaScript code can be executed on the server side by developers using Node.js, an
open-source, cross-platform JavaScript runtime environment. The fast and effective V8
JavaScript engine serves as its foundation. JavaScript may now be used for both client-
side and server-side scripting, thanks to Node.js, which completely changed the server-side
development landscape by enabling single-language full-stack development. The non-
blocking, event-driven architecture of Node.js is one of its strongest points; it allows for
little overhead and high efficiency when handling several concurrent connections. Be-
cause of its ability to remain responsive even in the face of high traffic, Node.js is a great
paradigm for developing scalable network applications, including streaming services, on-
line games, and real-time chat apps.
A wide range of built-in modules are available with Node.js, including fs for file system
operations and http for building web servers. Furthermore, it offers a vast ecosystem of
third-party packages accessible via npm (Node Package Manager), which provides tools
and libraries for a range of tasks, such as database connectors, testing libraries, web
frameworks like Express.js, and more. The fluid integration of Node.js with frontend
JavaScript allows for a smooth data flow via JSON data between the client and server,
which is another benefit of the platform. The application’s overall use of JavaScript and
its simplicity of integration contribute to increased code maintainability and development
efficiency. Callbacks, Promises, and async/await are examples of asynchronous program-
ming patterns that Node.js offers. These patterns let developers handle I/O operations
and other tasks without stopping the event loop.
Additionally, Node.js provides developers with a robust toolbox for creating a variety of
server-side apps by offering APIs for working with files, networking, and system activities.
The robust and vibrant Node.js community is always adding to the platform’s growth and
ecosystem expansion. It is now widely used in contemporary web development, which
makes it a well-liked option for creating server-side apps that are effective and scalable.

12
3.8 Redux Toolkit
Redux Toolkit and JSON Web Tokens (JWT) are two key technologies in current web
development. Redux Toolkit is a package that makes state management easier for React
apps, whereas JWT is a technique of securely communicating data between participants
in a web application. Redux Toolkit is an opinionated framework that offers a collection
of tools and best practices for managing application state in React. It builds on the
popular Redux package and provides a more streamlined approach to state management,
including simplified reducers, actions, and selectors. The createSlice function is a major
component of Redux Toolkit, allowing developers to combine reducers and actions in a
simple and orderly manner..

3.9 JSON Web Tokens

JSON Web Tokens (JWT) is a standard that allows parties to securely exchange informa-
tion in the form of a token. JWTs are commonly used for authentication and authorization
in online applications. A JWT is made up of three parts: a header with information on
the token type and signing technique, a payload with data or claims (such as a user ID,
role, or permissions), and a signature that verifies the token’s authenticity and integrity.
A server normally creates and signs JWTs before sending them to a client, where they
can be saved and used in future requests to authenticate the user or access protected
resources. JWTs are simply supplied via HTTP headers, making them ideal for use in
RESTful APIs.

3.10 Google Firebase

Google Firebase is a comprehensive platform that offers a variety of cloud-based services
to help developers create, manage, and expand modern online and mobile apps. Firebase
is well-known for its ease of use and comprehensive integration options, and it provides
a suite of tools for data management, authentication, storage, hosting, and real-time
messaging. The Realtime Database and Cloud Firestore provide flexible, scalable data
storage, while Firebase Authentication streamlines user sign-ins, including social logins
and multi-factor authentication. Firebase also provides Cloud Storage for scalable file
storage, Cloud Messaging for push alerts, and Hosting for quick, dependable web app
development. Advanced solutions like Crashlytics provide information about app crashes,
whereas Firebase Analytics provides event-based tracking and user behavior insights. .

13
Chapter 4

Results and discussions

The complete deployment of the website can be accessed from here

4.1 Home Page

This section introduces the homepage of the website. Figures 4.1, 4.2, and 4.3 display the
homepage, which includes all the listings.

Figure 4.1: Home Page-1

14
Figure 4.2: Home Page-2

Figure 4.3: Home Page-3

15
4.2 Sign In:
This section introduces the sign-in page of the website. Figure 4.4 depicts the sign-in
page.

Figure 4.4: Sign In Page

4.3 Sign Up:

This section introduces the sign-up page of the website. Figure 4.5 depicts the sign-up
page.

Figure 4.5: Sign Up Page

16
4.4 Profile :
This section introduces the profile page of the website. Figure 4.6 depicts the profile page.

Figure 4.6: Profile Page

4.5 About:
This section introduces the About page of the website. Figure 4.7 illustrates this page.

Figure 4.7: About Page

17
4.6 Listings :
This section presents the listing functionality of the website

4.6.1 Create Listings

Figure 4.8: Create Listing Page

4.6.2 Show Listings

Figure 4.9: Profile Page

18
4.6.3 Update Listings

Figure 4.10: About Page

4.6.4 Search Listings

Figure 4.11: About Page

19
Chapter 5

Conclusions and future scope

This chapter contains the conclusion and future scope for real estate website built by
using the MERN technology.

5.1 Conclusion
In conclusion, real estate web application using the MERN (MongoDB, Express.js, Re-
actJs, Node.js) stack provides a strong basis for building dynamic, feature-rich platforms
suited to the particular requirements of the real estate sector. Developers can effec-
tively leverage this technological stack to produce engaging user experiences and optimize
processes for multiple stakeholders. MongoDB offers a scalable and adaptable database
solution, efficiently handling the vast volume of real estate data. Express.js streamlines
backend development with its lightweight framework and middleware architecture, fa-
cilitating seamless communication between frontend and backend components. React.js
enables the creation of dynamic and interactive user interfaces, promoting code reusabil-
ity and maintainability for intuitive frontend experiences. Node.js simplifies server-side
scripting, enabling the creation of scalable and fast server applications. Together, these
technologies empower developers to build sophisticated real estate platforms that meet
the evolving needs of buyers, sellers, agents, and other stakeholders while ensuring per-
formance and scalability as the platform grows.

5.2 Future scope

The potential for real estate web development using the MERN stack (MongoDB, Ex-
press.js, React.js, and Node.js) is very promising. Increasing Real Estate Market: The
real estate business is expanding globally, offering opportunity for creative technology
solutions.

• User Experience :It is critical in real estate web development. React.js allows
developers to design highly interactive and responsive user interfaces that provide
a seamless experience for property buyers, sellers, and agents.

• Scalability:The MERN stack is notable for its capacity to handle enormous amounts
of real estate data, including as property listings, photos, and user information. This
scalability ensures that the platform can grow alongside the business while main-
taining performance.

20
• Data Management: MongoDB, as a NoSQL database, is ideal for managing
unstructured or semi-structured data common in real estate applications. It enables
flexible schema designs, making it easier to respond to changing business needs.

• Geospatial capabilities: It is required for real estate applications, such as prop-

erty search, location-based services, and mapping. MongoDB’s geographical indexes
and libraries such as Mapbox, can be combined with the MERN stack to give these
features.

• Integration with Third-Party APIs: The MERN stack allows for the integration
of a variety of third-party APIs, including payment gateways, property valuation
services, and CRM systems, which improves the real estate platform’s functionality
and value proposition.

• Mobile Responsiveness: As mobile devices are increasingly used for browsing

and transactions, it is critical to develop a mobile-responsive real estate online plat-
form. React.js enables developers to design mobile-friendly interfaces that provide
a consistent experience across multiple devices.

• Emerging Technologies: The MERN stack can be customized to incorporate new

technologies such as artificial intelligence (AI), augmented reality (AR), and virtual
reality (VR) into real estate applications. These technologies can help improve
property visualization and recommendation systems

21
Bibliography

[1] Samikshya Aryal. Mern stack with modern web practices. 2020.

[2] Darshan Gaikwad, Suhas Dangade, Samarth Dahale, and Sayali Chitale. Real estate
website using html, css, js, php, and mysql.

[3] Xiaofang Yuan, Ji-Hyun Lee, Sun-Joong Kim, and Yoon-Hyun Kim. Toward a
user-oriented recommendation system for real estate websites. Information systems,
38(2):231–243, 2013.

22