Parul Institute of Technology

Internship Report

Jk Estate website using

MERN and tailwind CSS

A PROJECT REPORT

Submitted by

[Rahul Raslal Mandal]

[200305105120]

In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING
in
[Computer Science and Engineering]

Parul Institute of
Technology, Limbda

Parul University, Limbda

March-2024
 Parul Institute of Engineering & Technology, Limbda

CERTIFICATE
This is to certify that the project report submitted along with the project entitled Jk estate

website using MERN and tailwind CSS has been carried out by Rahul Raslal Mandal under

my guidance in partial fulfillment for the degree of Bachelor of Engineering in Computer

Science & Engineering (CSE), 8th Semester of Parul University, Vadodara during the AY 2023-

24.

Assis.Prof. Sweety Patel Prof. Sumitra Menaria

Internal Guide Head of Department CSE

Company Certificate
 Parul Institute of Technology, Limbda

DECLARATION

We hereby declare that the Internship / Project report submitted along with the

Internship / Project entitled JK Estate website using MERN and tailwind CSS

submitted in partial fulfillment for the degree of Bachelor of Engineering in

Computer Science to Parul University, Vadodara, is a bonafide record of original

project work carried out by me at 1Stop.ai under the supervision of Assis.Prof.

Sweety Patel and that no part of this report has been directly copied from any

students’ reports or taken from any other source, without providing due reference.

Name of the Student Sign of Student

1 Rahul Raslal Mandal

I
 ACKNOWLEDGEMENT

Behind any major work undertaken by an individual there lies the contribution of the people who

helped him to cross all the hurdles to achieve his goal. It gives us the immense pleasure to express

our sense of sincere gratitude towards our respected guide Assis.Prof. Sweety Patel outstanding,

invaluable co-operation and guidance. It is our achievement to be guided under him. He is a

constant source of encouragement and momentum that any intricacy becomes simple. We gained

a lot of invaluable guidance and prompt suggestions from him during entire project work. We

will be indebted of him forever and We take pride to work under him. We also express our deep

sense of regards and thanks to Prof. Sumitra Menaria, Assistant Professor and Head of

CSE/IT/ICT Engineering Department. We feel very privileged to have had their precious advices,

guidance, and leadership.

II
 ABSTRACT

This report documents the development process and outcomes of the JK Estate Website project
undertaken during an internship at 1Stop.ai.
The project involved the creation of a dynamic real estate website utilizing the MERN
(MongoDB, Express.js, React.js, Node.js) stack and Tailwind CSS framework. The primary
objective was to build a user-friendly platform that allows users to browse, search,Create there
Listing and interact with real estate listings efficiently.
The website aimed to offer comprehensive features including property listings, search filters,
user authentication, and administrative functionalities. Throughout the internship, various stages
of development were executed, encompassing requirements gathering, system design,
implementation, testing, and deployment. Key challenges encountered during the process
included ensuring seamless integration of the MERN stack components, optimizing user interface
design for enhanced user experience, and implementing robust security measures.
The project leveraged Tailwind CSS for its utility-first approach to styling, facilitating rapid
prototyping and consistent design patterns across the website. Additionally, MongoDB served as
the database backend, while Express.js and Node.js powered the server-side logic and API
endpoints, with React.js handling the frontend user interface.
The report provides a detailed overview of the project's architecture, design decisions,
implementation strategies, challenges faced, and solutions devised. Furthermore, it discusses the
lessons learned, insights gained, and recommendations for future enhancements or iterations of
the JK Estate Website
. Overall, the internship experience offered valuable hands-on learning opportunities in full-stack
web development, collaboration within a professional team environment, and the application of
modern technologies to real-world projects. The JK Estate Website stands as a testament to the
skills, dedication, and creativity cultivated during the internship period at 1Stop.ai.

III
 List of Figures
Fig 1.1 Use case Diagram for User ............................................................................. 20

Fig 1.2 Use case Diagram for admin .......................................................................... 21

Fig 1.3 Block Diagram of website ............................................................................. 22

Fig 2.1 Home page of website ................................................................................... 27

Fig 2.2 Home page of website ................................................................................... 27

Fig 2.3 Home page of website ................................................................................... 28

Fig 2.4 Search page of website .................................................................................. 28

Fig 2.5 Profile page of website ................................................................................. 29

Fig 2.6 Create Listing page of website ....................................................................... 29

Fig 2.7 About us page of website .............................................................................. 30

Fig 2.9 profile page without listing of website ........................................................... 30

Fig 2.8 Listing page of website ................................................................................ 31

Fig 2.10 Footer page of website ................................................................................. 31

Fig 2.11 Home page in phone of website ................................................................... 32

Fig 2.12 search page in phone of website ................................................................... 33

Fig 2.13 Profile page in phone of website ................................................................. 34

Fig 2.14 Listing page in phone of website ................................................................. 35

Fig 2.15 Sign In page of website ............................................................................... 36

Fig 2.16 Sign up page of website .............................................................................. 36

Fig 2.17 Sign up page with Google Authentication of website .................................. 37

Fig 2.18 Code page of website .................................................................................. 37

IV
 List of Tables
Table 1.1 Abbreviations................................................................................................. 1

V
 ABBREVIATIONS

MERN MongoDb, Express, React.js ,Node.js

JWT JSON Web Token

SEO search engine optimization

CMS content management systems

Html HyperText Markup Language

CSS Cascading Style Sheets

REMS Real State management System

HTTP Hypertext Transfer Protocol

Table 1.1

VI
 Table of Contents
DECLARATION ............................................................................................................ i
Acknowledgement .........................................................................................................ii
Abstract ........................................................................................................................ iii
List of Figures ............................................................................................................... iv
List of Tables ................................................................................................................. v
List of Abbreviations..................................................................................................... vi
Table of Contents .........................................................................................................vii
Chapter 1 OVERVIEW OF THE COMPANY ......................................................... 1
1.1 History .................................................................................................................. 1
1.2 Scope of work ....................................................................................................... 1
1.3 Capacity of plant................................................................................................... 1
Chapter 2 OVERVIEW OF THE DEPARTMENT ................................................. 2
2.1 Departments Overview ......................................................................................... 2
2.2 Technical specifications ....................................................................................... 2
2.3 Schematic layout .................................................................................................. 2
2.4 Production Stages ................................................................................................. 3
Chapter 3 INTRODUCTION TO PROJECT AND PROJECT
MANAGEMENT. ....................................................................................................... 4
3.1 Project Summary .................................................................................................. 4
3.2 Purpose ................................................................................................................. 4
3.3 Objective............................................................................................................... 5
3.4 Scope .................................................................................................................... 6
3.5 Technology and Literature Review ...................................................................... 7
3.6 Project Planning ................................................................................................. 10
3.6.1 Project Development Approach and Justification ....................................... 10
3.6.2 Project Effort and Time, Cost Estimation ................................................... 10
3.6.3 Roles and Responsibilities ........................................................................... 10
3.6.4 Group Dependencies.................................................................................... 10
Chapter 4 SYSTEM ANALYSIS. ............................................................................. 12
4.1 Study of Current System .................................................................................... 12
4.2 Problem and Weaknesses of Current System .................................................... 12
4.3 Requirements of New System .............................................................................. 12

VII
 4.4 System Feasibility ................................................................................................ 12
4.5 Process in New Proposed System ........................................................................ 13
4.6 Features of New Proposed System....................................................................... 13
4.7 List Main Modules / Components of NewProposed System ............................... 13
4.8 Selection of Hardware / Software / Methodology / Techniques / Approaches and
Justification .................................................................................................................. 14

Chapter 5 SYSTEM DESIGN..................................................................................... 15

5.1 System Design & Methodology ........................................................................... 15
5.2 Process Design ..................................................................................................... 20
5.2 Input / Output and Interface Design..................................................................... 23

Chapter 6 IMPLEMENTATION. .............................................................................. 24

6.1 Implementation Platform / Environment ............................................................. 24
6.2 Process / Program / Technology / Modules Specification(s) ............................... 25
6.3 Finding / Results / Outcomes ............................................................................... 27

Chapter 7 TESTING.................................................................................................... 38
7.1 Testing Plan / Strategy ......................................................................................... 38
7.2 Test Results and Analysis .................................................................................... 39
7.2.3 Test Cases (test ID, test condition, expected output, actual output,
remark) ............................................................................................................... 39

Chapter 8 CONCLUSION AND DISCUSSION. ...................................................... 41

8.1 Overall Analysis of Project Viabilities ............................................................... 41
8.2 Problem Encountered and Possible Solutions...................................................... 41
8.3 Summary of Project work .................................................................................... 41
8.3 Limitation and Future Enhancement .................................................................... 42

References ..................................................................................................................... 43
Appendix ..................................................................................................................... 44

VIII
200305105120 OVERVIEW OF COMPANY

1.0.OVERVIEW OF THE COMPANY:

1.1 HISTORY:

The 1Stop.io is company was founded in 2021 with the vision of providing innovative
and high-quality digital solutions to clients worldwide. Over the years, it has established
itself as a leader in the industry, delivering cutting-edge websites, web applications, and
digital experiences.

1.2 SCOPE OF WORK:

The company specializes in various aspects of web development, including:

Designing and developing custom websites for businesses of all sizes.

Creating web applications tailored to specific client requirements.
Offering e-commerce solutions for online stores.
Providing digital marketing services such as SEO, SEM, and social media management.
Implementing content management systems (CMS) like WordPress, Drupal, or Joomla.
Offering website maintenance and support services.

1.3 ORGANIZATION CHART:

The organization is structured into various departments, including:

Development Team: Responsible for coding, programming, and building websites and
applications.
Design Team: Handles the visual aspects of projects, including layout, graphics, and user
interface design.
Project Management: Coordinates project timelines, resources, and client communication.
Quality Assurance: Ensures the functionality, usability, and performance of deliverables
meet quality standards.
Sales and Marketing: Engages with clients, generates leads, and promotes the company's
services.
Administrative and Support Staff: Manages day-to-day operations, HR functions, and
administrative tasks.

1.4 CAPACITY OF PLANT:

The company operates in a digital environment and does not have physical manufacturing
plants. However, it has a state-of-the-art office equipped with the latest technology and
tools required for web development projects.

1
Parul University PIT
200305105120 OVERVIEW OF DEPARTMENT

2.0 OVERVIEW OF THE DEPARTMENT OF THE

ORGANIZATION AND LAYOUT OF THE
PRODUCTION/PROCESS BEING CARRIED OUT IN THE
COMPANY:

2.1 DEPARTMENTS OVERVIEW:

Development Department: Responsible for coding, programming, and building websites
and web applications.

Design Department: Focuses on creating visually appealing and user-friendly designs for
websites and digital products.

Project Management Department: Coordinates project timelines, resources, and client

communication to ensure successful project delivery.

Quality Assurance Department: Conducts testing and quality checks to ensure

deliverables meet client requirements and industry standards.

Sales and Marketing Department: Engages with clients, generates leads, and promotes
the company's services to drive business growth.

Administrative Department: Handles day-to-day operations, HR functions, and

administrative tasks to support the smooth functioning of the organization.

2.2 TECHNICAL SPECIFICATIONS:

Development Department: Utilizes programming languages such as HTML, CSS,

JavaScript, and frameworks like React.js, Angular, or Vue.js.

Design Department: Utilizes graphic design software such as Adobe Photoshop,

Illustrator, or Figma.

Project Management Department: Utilizes project management tools such as Jira, Asana,
or Trello.

Quality Assurance Department: Utilizes testing tools such as Selenium, Jest, or Mocha.

2.3 SCHEMATIC LAYOUT:

The layout depicts the workflow and sequence of operations involved in the development
process, starting from client onboarding to project delivery and support.

2
Parul University PIT
200305105120 OVERVIEW OF DEPARTMENT

2.4 PRODUCTION STAGES:

Client Onboarding: Initial consultation with the client to understand requirements, goals,
and objectives.
Planning and Analysis: Detailed requirement gathering, feasibility study, and project
planning.
Design and Development: Creation of wireframes, mockups, and coding of
website/application functionalities.
Testing and Quality Assurance: Thorough testing of functionality, usability, and
performance to ensure a bug-free product.
Deployment and Launch: Deployment of the website/application on the client's server
and launch to the public.
Maintenance and Support: Ongoing support, maintenance, and updates to ensure the
website/application remains functional and up-to-date.
Each stage involves collaboration between various departments to ensure seamless project
execution and delivery.

3
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

3.0 INTRODUCTION TO PROJECT AND PROJECT

MANAGEMENT.

3.1 PROJECT SUMMARY.

"The 'Jk Estate' project represents a comprehensive solution aimed at revolutionizing the
real estate management domain. Developed using the cutting-edge MERN stack and
Tailwind CSS Redux toolkit, this platform empowers users to seamlessly list, search, and
manage properties for rent or sale. Our primary objective is to create a user-friendly
interface that facilitates property transactions while prioritizing security and efficiency.
With robust authentication mechanisms, intuitive property listing functionalities, and
advanced search filters, 'Jk Estate' endeavors to streamline the process of property
management for both property owners and potential tenants or buyers.
By leveraging modern technologies and innovative design principles, 'Jk Estate' sets out to
redefine the real estate experience, fostering convenience, transparency, and accessibility
for all stakeholders involved."
 Customer looking to buy or rent a new home, apartment or any other property can
search over the internet.
 Customer can search for desired plot or house in a particular area.They can specify
the no of rooms ,bathroom they need and then can make thesearch
 They can also describe what all facilities they want near their house like
schools,malls, garage, shops etc.
 They can search for apartment or plot which suits there budget they can alsospecify
the amount by entering the cost.
 .Now customers will not have to go to the agents personally they can search fortheir
desired home or apartment of a reasonable rate which suits their pocket.And they
can also have the view of apartment online

3.2 PURPOSE
Facilitate Property Transactions: The primary purpose of the "Jk Estate" project is to
facilitate property transactions by providing a user-friendly platform for property owners
to list their properties for rent or sale, and for potential tenants or buyers to search and
discover available properties.

4
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

Enhance User Experience: The project aims to enhance the overall user experience by
offering intuitive interfaces, streamlined workflows, and advanced search functionalities.
By prioritizing user-centric design principles, the platform seeks to simplify the property
management process for all stakeholders involved.

Ensure Security and Privacy: Another crucial purpose of the project is to ensure the
security and privacy of user data and transactions. Robust authentication mechanisms,
encryption protocols, and data privacy measures are implemented to safeguard sensitive
information and foster trust among users.

Optimize Property Management: "Jk Estate" aims to optimize property management

processes by providing comprehensive tools and features for property owners to efficiently
manage their listings. This includes options for updating property details and managing
inquiries.

Drive Innovation and Technological Advancement: As a technology-driven project, "Jk

Estate" aims to drive innovation and technological advancement within the real estate
management industry. By leveraging modern technologies such as the MERN stack,
Tailwind CSS Redux toolkit, JWT authentication, and Vite, the platform sets a precedent
for future advancements in the field.

3.3 OBJECTIVE
Develop a User-Friendly Platform: The primary objective is to develop a user-friendly
web platform that caters to the needs of property owners, tenants, and buyers. The platform
should offer intuitive interfaces and seamless navigation to enhance user experience.

Enable Property Listing Creation: Implement functionality that allows property owners
to create and manage listings for properties available for rent or sale. This includes features
for adding property details, uploading images, specifying rental/sale terms, and setting
pricing.

Implement Advanced Search Functionality: Enable users to search for properties based
on various criteria such as location, price range, property type, amenities, and more. The
search functionality should be robust, intuitive, and efficient.

Ensure Secure User Authentication: Implement secure user authentication mechanisms

using JWT (JSON Web Tokens) to authenticate users and protect their accounts from

5
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

unauthorized access. This includes features for user registration, login, logout, and
password reset.

Facilitate Property Management: Provide property owners with tools and functionalities to
manage their listings effectively. This includes options for editing property details,
responding to inquiries, tracking listing performance, and marking properties as
rented/sold.
Ensure Data Privacy and Security: Implement robust data privacy and security measures
to protect sensitive user information and transactions. This includes encryption of user data,
adherence to privacy regulations, and regular security audits.
Optimize Performance and Scalability: Ensure that the platform is designed for optimal
performance and scalability to accommodate growth and increasing user demands. This
includes optimizing code, utilizing efficient database queries, and implementing caching
mechanisms.

Provide Detailed Property Information: Ensure that property listings contain

comprehensive information, including property descriptions, images, location maps,
pricing details, availability status, and contact information for property owners.

Promote User Engagement and Retention: Implement features to encourage user

engagement and retention, such as personalized recommendations, saved searches,
notifications for new listings, and social sharing options.

3.4 SCOPE
1. What it Can Do:
Property Listing Creation: Users can create and manage property listings for properties
available for rent or sale. They can input property details, upload images, specify rental/sale
terms, and set pricing.

Advanced Search Functionality: The platform offers advanced search functionality,

allowing users to search for properties based on various criteria such as location, price
range, property type, and amenities.

Secure User Authentication: Users can securely register, log in, and log out of their
accounts using JWT authentication. Password reset functionality is also provided for added
security.

6
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

Property Management: Property owners have access to tools and functionalities to

manage their listings effectively. They can edit property details, respond to inquiries, and
track listing performance.

Data Privacy and Security: Robust data privacy and security measures are implemented
to protect user information and transactions. Encryption of user data and adherence to
privacy regulations ensure data security.

Optimized Performance: The platform is designed for optimal performance and

scalability to accommodate increasing user demands. Code optimization and efficient
database queries ensure smooth operation.

2. What it Can't Do:

Messaging Functionality: The "Jk Estate" project does not include messaging
functionality. Users cannot send messages directly to property owners or potential
tenants/buyers through the platform.

3.5 TECHNOLOGY AND LITERATURE REVIEW

1. Technology

1.1 MERN Stack:

MongoDB: Document-oriented NoSQL database used for storing property listings, user
data, and other application data.
We had use MongoDb to store user auth data and user properties Listing data with the help
of Mongoose schema of User and Listing Model made with mongoose .

Express.js: Web application framework for building robust APIs and handling HTTP
requests/responses it is use in making User SignUp, SignIn ,Listing API and User , Listing
Model.

React.js: Frontend JavaScript library for building user interfaces and dynamic single-page
applications (SPAs) it is used to make frontend UI.

Node.js: JavaScript runtime environment for executing server-side code and building
scalable, event-driven applications.

1.2 Tailwind CSS ,Redux Toolkit and Mongoose :

Tailwind CSS: Utility-first CSS framework used for styling the user interface components

7
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

of the "Jk Estate" project.

Tailwind CSS offers rapid prototyping, customization, and maintainability. Its utility-first
approach enables quick UI prototyping with pre-defined classes. Customization options
allow tailoring designs to specific needs, while modular CSS promotes clean and scalable
codebases, enhancing maintainability.

Redux Toolkit: State management library for managing application state and handling
complex data flows in React.js applications. Redux Toolkit simplifies state management
and ensures predictable updates by offering streamlined APIs, enforcing immutability, and
providing built-in support for asynchronous logic.
Its createSlice function organizes state logic efficiently, while Redux Thunks facilitate
asynchronous actions. Integration with Redux DevTools aids in debugging, enhancing
overall development efficiency.

Mongoose:
Mongoose is a Node.js library that simplifies MongoDB interactions by providing a
schema-based solution for data modeling. It offers features such as schema definition,
model creation, data validation, query building, middleware support, population, and
plugin extensibility, streamlining MongoDB integration in Node.js applications.
We had used Mongoose to connect our Node.js Sever to MongoDB Database and also use
in Making Mongoose schema of User Models and properties Listing Models .

1.3 JWT and Cookie Parser:

JSON Web Tokens (JWT): Authentication mechanism used for securely transmitting
authentication credentials between the client and server.

Cookie Parser: Middleware for parsing HTTP cookies in Node.js applications. Discuss its
role in parsing and handling JWT cookies for user authentication and session management.

1.4 Vite:
Vite: Frontend build tool used for fast and efficient development and production builds of
React.js applications. Explain how Vite optimizes the build process by leveraging native
ES Module support and hot module replacement (HMR).

8
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

2.Literature Review:

2.1 Introduction to Real Estate Management Systems:

Real estate management systems (REMS) have become integral to modern property
transactions, leveraging technology to streamline processes.
These systems offer centralized platforms for listing, searching, buying, selling, renting,
and leasing properties, enhancing efficiency and user experiences.
The adoption of REMS is essential in today's dynamic real estate landscape to stay
competitive and capitalize on emerging opportunities.

2.2 Review of Existing Real Estate Management Systems:

Analysis of popular REMS platforms reveals a diverse range of features and functionalities.
Platforms such as Zillow, Realtor.com, and Trulia offer comprehensive property listings,
search filters, and interactive maps.
Strengths include user-friendly interfaces, extensive property databases, and robust search
capabilities, while challenges may include data accuracy and user trust.

2.3 Emerging Trends and Technologies in Real Estate:

Emerging technologies such as artificial intelligence (AI), virtual reality (VR), and
blockchain are reshaping the real estate industry.
AI-driven property recommendations enhance personalized experiences, while VR enables
virtual property tours, improving remote viewing capabilities.
Blockchain facilitates secure and transparent property transactions, reducing fraud and
increasing trust among stakeholders.

2.4 Challenges and Opportunities in Real Estate Management:

Common challenges in real estate management include data security, transaction

transparency, and market volatility.
Opportunities for innovation lie in AI-driven analytics, blockchain-based transactions, and
customer-centric platforms.
Strategies for addressing challenges include implementing robust security measures,
leveraging data analytics for insights, and embracing emerging technologies.

2.5 Regulatory and Legal Considerations:

Compliance with regulatory standards and legal requirements is crucial in real estate
management.
Considerations include data privacy regulations, property laws, licensing requirements, and
consumer protection measures.
Non-compliance can lead to legal liabilities, financial penalties, and damage to reputation,
emphasizing the importance of adherence to regulations.

9
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

3.6 PROJECT PLANNING

3.6.1.Project Development Approach and Justification:

Adopt an Agile development approach to allow for flexibility and adaptability throughout
the project lifecycle.
Regular sprints and iterations will enable continuous feedback and refinement of features,
ensuring alignment with stakeholder requirements.
Justification: Agile methodologies promote collaboration, transparency, and
responsiveness, essential for delivering a successful and user-centric product like "JK
Estate."

3.6.2 Project Effort and Time, Cost Estimation:

Estimate project effort and time based on the scope of work, resource availability, and
complexity of features.
Break down tasks into smaller increments and assign time estimates to each, considering
potential risks and dependencies.
Cost estimation involves calculating expenses related to development resources, tools,
infrastructure, and potential contingencies.
Utilize project management tools and techniques such as Work Breakdown Structures
(WBS) and Gantt charts for accurate planning and tracking.

3.6.3.Roles and Responsibilities:

Define clear roles and responsibilities for team members, including developers, designers,
testers, and project managers.
Ensure alignment between roles and project objectives, fostering collaboration and
accountability.
Establish communication channels and protocols to facilitate effective coordination and
information sharing among team members.

3.6.4.Group Dependencies:

1. Backend Dependencies
bcryptjs: 2.4.3
cookie-parser: 1.4.6
dotenv: 16.4.5
express: 4.18.3
jsonwebtoken: 9.0.2
mongoose: 8.2.0
nodemon: 3.1.0

10
Parul University PIT
200305105120 INTRODUCTION TO PROJECT

2. FrontEnd Dependencies

 @reduxjs/toolkit: ^2.2.1
 @tailwindcss/line-clamp: ^0.4.4
 collage-project-estate-website: file:..
 D: ^1.0.0
 firebase: ^10.8.1
 react: ^18.2.0
 react-dom: ^18.2.0
 react-redux: ^9.1.0
 react-router-dom: ^6.22.2
 redux-persist: ^6.0.0
 swiper: ^11.0.7
Dev Dependencies:

 @types/react: ^18.2.56
 @types/react-dom: ^18.2.19
 @vitejs/plugin-react-swc: ^3.5.0
 autoprefixer: ^10.4.18
 eslint: ^8.56.0
 eslint-plugin-react: ^7.33.2
 eslint-plugin-react-hooks: ^4.6.0
 eslint-plugin-react-refresh: ^0.4.5
 postcss: ^8.4.35
 tailwindcss: ^3.4.1
 vite: ^5.1.4

11
Parul University PIT
200305105120 SYSTEM ANALYSIS

4.0 SYSTEM ANALYSIS OF JK WEBSITE.

4.1 STUDY OF CURRENT SYSTEM:

The current system involves an analysis of the existing processes and technologies
used in real estate management. This includes evaluating the functionalities,
workflows, and technologies utilized in the current real estate management system.

4.2 PROBLEM AND WEAKNESSES OF CURRENT SYSTEM:

Some of the identified problems and weaknesses of the current system include:
 Limited functionality: The current system may lack certain features required for
efficient property management.
 Poor user experience: Users may encounter difficulties navigating the system or
performing certain tasks.
 Inefficient workflows: Processes within the current system may be time-consuming
or prone to errors.
 Outdated technology: The technology stack used in the current system may be
outdated or not scalable.

4.3 REQUIREMENTS OF NEW SYSTEM:

The requirements of the new system for Jk Estate website include:
 Property listing creation: Allow users to create and manage their property listings.
 Advanced search functionality: Implement a search bar with filters for users to find
properties based on their preferences.
 User profile management: Provide options for users to update their account
information, manage listings, and change profile pictures.
 Seamless integration: Ensure smooth integration with other systems and
technologies, such as JWT cookie parser for authentication.

4.4 SYSTEM FEASIBILITY

 4.4.1 Objective Alignment:
 The proposed system aligns with the overall objectives of Jk Estate, which
aims to provide a user-friendly platform for property management and
search.
 4.4.2 Technology, Cost, and Schedule:
 The system can be implemented using the MERN stack, Tailwind CSS,
Redux Toolkit, JWT cookie parser, and Vite, which are modern and cost-
effective technologies.

12
Parul University PIT
200305105120 SYSTEM ANALYSIS

 The implementation can be completed within the given cost and schedule
constraints.
 4.4.3 Integration Capability:
 The system can be integrated with other systems, such as JWT cookie parser
for authentication, to provide a seamless user experience.

4.5 PROCESS IN NEW PROPOSED SYSTEM:

The proposed system involves:
 Property listing creation process
 Advanced search functionality implementation
 User profile management activities
 Integration with authentication systems

4.6 FEATURES OF PROPOSED SYSTEM:

Key features of the new system include:
 Property listing creation and management
 Advanced property search with filters
 User profile management with options to update account information and manage
listings

4.7 LIST MAIN MODULES PROCESSES PROPOSED SYSTEM:

Main modules and components of the proposed system include:
 User authentication module
 Property listing management module
 Search functionality module
 Profile management module

13
Parul University PIT
200305105120 SYSTEM ANALYSIS

4.8 SELECTION OF HARDWARE / SOFTWARE / ALGORITHMS /

METHODOLOGY / TECHNIQUES / APPROACHES AND JUSTIFICATION

 Hardware: No specific hardware requirements, as the system will be web-based.

 Software: MERN stack, Tailwind CSS, Redux Toolkit, JWT cookie parser, Vite.
 Algorithms: No specific algorithms mentioned, but efficient search algorithms may
be implemented for property search functionality.
 Methodology: Agile methodology may be used for iterative development and quick
adaptation to changes.
 Techniques / Approaches: Component-based development, RESTful API design,
responsive web design techniques.

14
Parul University PIT
200305105120 SYSTEM DESIGN

5.0 SYSTEM DESIGN

5.1 SYSTEM DESIGN & METHODOLOGY

5.1.1 Requirement Analysis:

Conduct thorough requirement analysis based on stakeholder interviews, user

feedback, and market research.
Document functional and non-functional requirements to ensure alignment with
business objectives and user needs.

5.1.2 System Architecture Design:

Design a scalable and modular system architecture that accommodates future

growth and expansion.
Select appropriate architectural patterns, such as MVC (Model-View-Controller) or
Microservices, based on the system's requirements and complexity.

5.1.3 Backend Design:

1. Selection of Backend Framework:

 Chosen Framework: MERN Stack (MongoDB, Express.js, Node.js,
React.js)
 Utilizing Node.js to create and run the server for handling backend
operations.

2. Database Selection:
 MongoDB is chosen as the database for its flexibility and scalability.

3. Integration with Express.js and Mongoose:
 Utilizing Express.js framework to set up routes and handle HTTP requests
and responses.
 Integrating Mongoose with Node.js and Express.js to connect to the
MongoDB database.

4. Schema Modeling:
 Using Mongoose's schema function to define User Schema and Property
Listing Schema.
 These schemas define the structure and properties of user data and property
listings.

5. API Development:
 Developing APIs to facilitate communication between the frontend UI and
the MongoDB database.
 Implementing CRUD (Create, Read, Update, Delete) operations for
handling user sign-up, login, listing creation, and property management.

15
Parul University PIT
200305105120 SYSTEM DESIGN

 Creating endpoints for POST, GET, and DELETE requests to interact with
user data and property listings.

6. Error Handling and Validation:

 Implementing validation checks for user inputs, such as email format
validation and password matching.
 Handling errors gracefully and providing informative error messages to
users.
 Writing test cases to ensure proper functioning of the APIs and to catch any
potential errors.

7. Token-Based Authentication with JWT:
 Implementing JSON Web Tokens (JWT) for secure authentication and
authorization.
 Generating tokens upon user authentication and including them in
subsequent requests for authentication.

8. Security Measures:
 Incorporating bcrypt dependency to securely hash and store user passwords
in the database.
 Ensuring that sensitive data is encrypted and protected from unauthorized
access.

9. Scalability and Performance Optimization:
 Designing the backend architecture to be scalable and able to handle
increased loads as the user base grows.
 Implementing performance optimization techniques, such as indexing and
caching, to enhance response times and efficiency.

10. Deployment and Continuous Integration:
 Deploying the backend application to a hosting platform such as Heroku or
AWS.
 Setting up continuous integration and deployment pipelines to automate the
deployment process and ensure smooth updates.

5.1.4 Frontend Design:

1. Intuitive User Interfaces:

 Develop intuitive and user-friendly interfaces for various functionalities,
including property listing creation, search functionality, user registration,
and profile management.
 Ensure ease of navigation and accessibility to enhance user experience.

2. Responsive Design Principles:

 Incorporate responsive design principles to ensure seamless compatibility
across different devices and screen sizes.
 Utilize media queries and flexible layouts to adapt the UI elements

16
Parul University PIT
200305105120 SYSTEM DESIGN

dynamically.

3. React Framework Usage:

 Implement the frontend using the React framework to create dynamic and
interactive user interfaces.
 Leverage React's component-based architecture for modular development
and code reusability.

4. Redux Toolkit Integration:

 Utilize Redux Toolkit for state management, enabling centralized storage
and manipulation of application state.
 Leverage Redux's useState and useEffect hooks for managing state in
functional components.

5. Authentication and Authorization:

 Implement user authentication using JWT tokens and bcrypt for secure
password encryption.
 Use Firebase Google Authentication for streamlined login experiences and
improved security.

6. Persistent User Sessions:

 Employ Redux Persist to maintain user session data across page refreshes,
ensuring seamless navigation and personalized experiences.
 Utilize private routing to restrict access to certain pages based on user
authentication status.

7. Data Fetching and Validation:

 Write custom hooks for fetching data from the server, utilizing fetch API or
Axios for HTTP requests.
 Implement client-side validation for form inputs to ensure data integrity and
prevent erroneous submissions.

8. Firebase Integration:
 Utilize Firebase for storing profile images and other assets, ensuring
efficient data storage and retrieval.
 Implement Firebase's Cloud Firestore for database management and real-
time data synchronization.

9. Tailwind CSS for Styling:

 Use Tailwind CSS for efficient and responsive styling of UI components,
leveraging its utility-first approach for streamlined development.
 Customize styles and themes to align with the branding and design
requirements of the application.

17
Parul University PIT
200305105120 SYSTEM DESIGN

5.1.5 Technology Stack Selection:

1. technologies and frameworks for backend development,

 Node.js
 MongoDb
 Mongoose
 Express.js
 JWt

2. Frontend development,
 React
 Redux
 Firebase server for image Storage
 Ract rounter dom

3. Database management.
 Mongodb

5.1.6 Development Methodology:

Adopt an Agile development methodology, such as Scrum or Kanban, to enable iterative

development and frequent feedback loops.
Break down the project into manageable sprints with defined deliverables and timelines.
Conduct regular sprint reviews and retrospectives to evaluate progress and identify areas
for improvement.

5.1.7 Testing Strategy:

Implement a comprehensive testing strategy that includes unit testing, integration testing,
and end-to-end testing.
Use automated testing tools and frameworks to streamline the testing process and ensure
the reliability and quality of the system.

5.1.8 Security Measures:

Implement robust security measures to protect user data, prevent unauthorized access, and
mitigate security risks.
Incorporate encryption, authentication, and authorization mechanisms to ensure data
confidentiality and integrity.

5.1.9 Scalability and Performance Optimization:

Design the system with scalability in mind to accommodate a growing user base and
increasing data volume.
Implement performance optimization techniques, such as caching, indexing, and load
balancing, to enhance system responsiveness and efficiency.

18
Parul University PIT
200305105120 SYSTEM DESIGN

5.1.10 Documentatio:

Install dependencies:
npm install

Set up environment variables:

Create a .env file in the root directory and provide necessary variables: PORT=3000
MONGO=your_mongodb_uri JWT_SECRET=your_jwt_secret
VITE_FIREBASE_API_KEY = your firebase api

Run the development server:

npm run dev

Your project should be running at http://localhost:3000.

Project:- https://github.com/rahulmandal9825/Jk-Estate-website-full-stack

19
Parul University PIT
200305105120 SYSTEM DESIGN

5.2 DATABASE DESIGN

Use case Diagram:

A use case diagram is a diagram which consists of set of usecases and actors
enclosed bysystem boundary, and association between usecases
and actors. Usecases diagramespecially important in organizing, modeling
the behavior of the system.Use case is a set of scenarios tied together by a
common user goal. A scenario is asequence of steps describing the interaction
between a user and system.

Use case Diagram for User:

Fig.1.1

20
Parul University PIT
200305105120 SYSTEM DESIGN

Use case Diagram for Admin:

Fig.1.2

21
Parul University PIT
200305105120 SYSTEM DESIGN

Block Diagram:

Fig.1.3

22
Parul University PIT
200305105120 SYSTEM DESIGN

5.3 INPUT / OUTPUT AND INTERFACE DESIGN

User login process

USER EMAIL, PASSWORD LOGIN ACCESS TO WEBSITE

PROCESS

Property Searching Process

USER PROPERTY
BE SEARCHED SEARCHING SEARCH RESULT
PROCESS

Registering New User Process

USER USERNAME,
EMAIL, PASSWORD ACCOUNT DATA SAVED IN MONGODB
CREATION
PROCESS

Create New Listing Process

PROPERTY LISTING
DETAILS CRATE DATA SEAVED IN MONGODB
LISTING
PROCESS

Update Property Process

NEW PROPERTY LISTING

DETAILS UPDATE DATA UPDATE IN MONGODB
LISTING
PROCESS

23
Parul University PIT
200305105120 IMPLEMENTATION

6.0 IMPLEMENTATION

6.1 IMPLEMENTATION PLATFORM / ENVIRONMENT.

The Jk Estate project is implemented on the following platform and environment:

Platform:
 Web Development Framework: MERN Stack (MongoDB, Express.js, React.js,
Node.js)
 MongoDB: NoSQL database used for storing user authentication data and
property listings.
 Express.js: Backend framework for building RESTful APIs and handling
server-side logic.
 React.js: Frontend library for building interactive user interfaces.
 Node.js: JavaScript runtime environment for running server-side code.
Environment:
 Development Environment:
 Operating System: Compatible with Windows, macOS, and Linux.
 Code Editor: Visual Studio Code, Sublime Text, or any text editor of choice.
 Package Manager: npm (Node Package Manager) or yarn for managing
dependencies.
 Version Control: Git for version control and collaboration.
 Deployment Environment:
 Web Hosting Service: Platform-as-a-Service (PaaS) providers such as
Heroku, Netlify, or Vercel.
 Cloud Infrastructure: Infrastructure-as-a-Service (IaaS) providers such as
Amazon Web Services (AWS) or Microsoft Azure for scalable and reliable
hosting.
 Database Hosting: MongoDB Atlas for cloud-based MongoDB database
hosting.
 Continuous Integration / Continuous Deployment (CI/CD): Integration with
CI/CD pipelines for automated testing and deployment.

24
Parul University PIT
200305105120 IMPLEMENTATION

6.2 PROCESS / PROGRAM / TECHNOLOGY / MODULES

SPECIFICATION(S)

6.2.1. FRONTEND PAGES

 Home
 About
 Listing page
 Show user listing
 Sign up
 Create listing
 Profile
 Scarch
 Update account
 Delete account
 Login
 Logout
 Lsiting card

6.2.3. FUNCTIONALITY
 User login page where User can write there Email and password to login.
 Sign up page where User can Sign up with username, email,and password
 Profile page where User can Show there Listing and options for update
account,Delete Account , Create Listing , logout
 Create Lisiting page have form to submit where user can write detail of the
properties they want to List
 Update account page help us to update our username profileimage and password
 Delete Account function help to delete our Account
 Search listings by keyword, city, state, bedrooms and price (Homepage &search
page)
 Listing page is Below
 Listing page have Contact Landlord

25
Parul University PIT
200305105120 IMPLEMENTATION

6.2.4. LISTING PAGE

 Title
 Address
 Description
 Rent or Sell or Both
 Rent price per Month
 Sell price
 Number of Bedrooms
 Number of Bathrooms
 Furniture
 Parking
 Listing owner name img
 Properties image

6.2.5. Possible Future functionality

 Google maps
 Chat Model with user and Listing owner

26
Parul University PIT
200305105120 IMPLEMENTATION

6.3 Finding / Results / Outcomes

1. Home page

Fig. 2.1

Fig. 2.2

27
Parul University PIT
200305105120 IMPLEMENTATION

Fig. 2.3

2. Search page

Fig. 2.4

28
Parul University PIT
200305105120 IMPLEMENTATION

3.Profile.

Fig. 2.5

4. Create Listing page

Fig. 2.6

29
Parul University PIT
200305105120 IMPLEMENTATION

5. About us page.

Fig. 2.7

6. New profile page(without Listing)

Fig. 2.9

30
Parul University PIT
200305105120 IMPLEMENTATION

7.listing page.

Fig. 2.8

8. Footer

Fig. 2.10

31
Parul University PIT
200305105120 IMPLEMENTATION

9. Home page in phone

Fig. 2.11

32
Parul University PIT
200305105120 IMPLEMENTATION

10.Search page in Phone

Fig. 2.12

33
Parul University PIT
200305105120 IMPLEMENTATION

11 . Profile page in phone

Fig. 2.13

34
Parul University PIT
200305105120 IMPLEMENTATION

12. Listing page in phone

Fig. 2.14

35
Parul University PIT
200305105120 IMPLEMENTATION

13 Sign In

Fig. 2.15

14. Sign up

Fig. 2.16

36
Parul University PIT
200305105120 IMPLEMENTATION

14.Sign up with Google authentication with Firebase.

Fig. 2.17

15. code

Fig. 2.18

37
Parul University PIT
200305105120 TESTING

7.0 TESTING

7.1 TESTING PLAN / STRATEGY FOR JK ESTATE

7.1.1. Unit Testing:

Test individual components, functions, and modules in isolation.

Use Jest and React Testing Library for frontend unit tests.
Utilize mock data and stubs to simulate dependencies.

7.1.2. Integration Testing:

Test the interaction between frontend and backend components.

Ensure seamless data flow and communication between layers.
Use Jest and React Testing Library for frontend integration tests.
Utilize supertest or similar libraries for backend integration tests.

7.1.3. End-to-End (E2E) Testing:

Test the entire application flow from user interaction to database interaction.
Use Cypress or Selenium for E2E tests.
Create test scripts to simulate user actions and verify expected outcomes.

7.1.4. User Acceptance Testing (UAT):

Engage stakeholders or designated users to test the application.

Validate usability, functionality, and user satisfaction.
Gather feedback to identify areas for improvement.

7.1.5. Performance Testing:

Evaluate application responsiveness and scalability under varying load conditions.

Use tools like Apache JMeter or k6 for load testing.
Measure response times, throughput, and resource utilization.

7.1.6. Security Testing:

Identify and mitigate potential security vulnerabilities and threats.

Conduct penetration testing, code reviews, and vulnerability assessments.
Test for common security issues such as SQL injection, XSS, and CSRF.

7.1.7. Compatibility Testing:

Test the application on different browsers, devices, and operating systems.

Ensure compatibility and consistency across various platforms.
Use BrowserStack or similar services for cross-browser testing.

38
Parul University PIT
200305105120 TESTING

7.1.8. Accessibility Testing:

Ensure the application is accessible to users with disabilities.

Test for keyboard navigation, screen reader compatibility, and adherence to accessibility
standards.
Use tools like Axe or WAVE for accessibility testing.

7.1.9 Regression Testing:

Perform regression testing after each code change or deployment.

Ensure that new features or bug fixes do not introduce regressions.
Automate regression tests to streamline the process.

7.1.10. Error Handling Testing:

Test error handling mechanisms to ensure graceful degradation and recovery from errors.
Verify that appropriate error messages are displayed to users for common error scenarios.

7.1.11. Load Testing:

Assess application performance under high load conditions.

Determine system capacity and scalability by gradually increasing the load on the
application.
Use load testing tools to measure response times and identify performance bottlenecks.

7.2 Test Results and Analysis

7.2.1 Test Cases

1. Test ID: TC001

 Test Condition: User attempts to register with valid credentials.
 Expected Output: User registration is successful, and the user is redirected
to the login page.
 Actual Output: User registration is successful, and the user is redirected to
the login page.
 Remark: Registration functionality is functioning as expected.

2. Test ID: TC002

 Test Condition: User attempts to log in with correct username and
password.
 Expected Output: User is successfully authenticated and redirected to the
home page.
 Actual Output: User is successfully authenticated and redirected to the
home page.
 Remark: Login functionality is working as intended.

39
Parul University PIT
200305105120 TESTING

3. Test ID: TC003

 Test Condition: User attempts to create a property listing with valid details.
 Expected Output: Property listing is successfully created and added to the
user's profile.
 Actual Output: Property listing is successfully created and added to the
user's profile.
 Remark: Property listing creation functionality is working correctly.

4. Test ID: TC004

 Test Condition: User searches for properties with specific filters applied.
 Expected Output: Properties matching the search criteria are displayed on
the search results page.
 Actual Output: Properties matching the search criteria are displayed on the
search results page.
 Remark: Property search functionality is functioning as expected.

5. Test ID: TC005

 Test Condition: User attempts to update their profile information.
 Expected Output: User profile information is successfully updated and
reflected in the database.
 Actual Output: User profile information is successfully updated and
reflected in the database.
 Remark: Profile update functionality is working correctly.

6. Test ID: TC006

 Test Condition: User attempts delete account.
 Expected Output: User is deleted form database.
 Actual Output: User is deleted form database.
Remark: Account delete is working correctly.

7. Test ID: TC007

 Test Condition: User attempts to Update a property listing with valid details.
 Expected Output: Property listing is successfully Updated and added to the
user's profile.
 Actual Output: Property listing is successfully Updated and added to the
user's profile.
Remark: Property listing Update functionality is working correctly.

8. Test ID: TC008

 Test Condition: User attempts to log out.
 Expected Output: User is successfully log out and redirected to the Sign
page.
 Actual Output: User is successfully log out and redirected to the Sign page.
 Remark: Log out functionality is working as intended.

40
Parul University PIT
200305105120 CONCLUSION

8. CONCLUSION AND DISCUSSION

8.1 OVERALL ANALYSIS OF PROJECT VIABILITIES:

 The Jk Estate project demonstrates strong viability in the real estate domain,
offering essential features for property listing and management.
 The use of MERN stack technology along with Tailwind CSS, Redux Toolkit, JWT
cookie parser, and Vite provides a robust foundation for building a scalable and
responsive web application.
 The integration of user-friendly interfaces, search functionalities, and profile
management options enhances the usability and utility of the application.

8.2 PROBLEMS ENCOUNTERED AND POSSIBLE SOLUTIONS:

Encountered Problem 1: User Session Persistence

 Issue: Users were being logged out of the website every time they refreshed the
page, causing inconvenience and disrupting the user experience.
 Solution: Implemented Redux Persistence to store user authentication data in the
browser's local storage or session storage. This ensured that user sessions were
maintained across page refreshes, allowing users to stay logged in and seamlessly
navigate the website without interruptions.

Encountered Problem 2: Restricted Access to Profile Page

 Issue: It was necessary to restrict access to certain pages, such as the profile page,
only to authenticated users.
 Solution: Implemented private routes using React Router Dom's dependency.
Private routes allowed for conditional rendering of components based on the user's
authentication status. Users attempting to access restricted pages without being
authenticated were redirected to the login page, ensuring the security and integrity
of the application.

8.3 SUMMARY OF PROJECT WORK:

 The Jk Estate project successfully leverages modern technologies and design

principles to create a user-friendly and feature-rich real estate management system.
 Key functionalities such as property listing creation, search capabilities, and user
profile management are implemented effectively, meeting the project requirements.
 Through iterative development and testing, the project has achieved its objectives
of providing a reliable and scalable platform for property management.

41
Parul University PIT
200305105120 CONCLUSION

8.4 LIMITATIONS AND FUTURE ENHANCEMENTS:

 Despite its strengths, the Jk Estate project may have certain limitations, such as
scalability issues under high load conditions, limited feature set compared to
established real estate platforms, or potential security vulnerabilities.
 Future enhancements could include implementing advanced search functionalities,
integrating chat or messaging features for user communication, enhancing security
measures, and optimizing performance for improved user experience.


42
Parul University PIT
200305105120 REFERENCES

9.0 REFERENCES

1. Facebook (2023) React Documentation. https://reactjs.org/

2. Redux Toolkit Contributors (2024) Redux Toolkit Documentation. https://redux-

toolkit.js.org/

3. Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger (2024)
Tailwind CSS Documentation. https://tailwindcss.com/docs

4. MongoDB, Inc. (2024) MongoDB Documentation. https://docs.mongodb.com/

5. Express.js Contributors (2024) Express.js Documentation.

https://expressjs.com/en/4x/api.html

6. RFC Editor (2015) JWT (JSON Web Tokens) Documentation.

https://jwt.io/introduction/

7. Evan You and Vite Contributors (2024) Vite Documentation. https://vitejs.dev/

8. ECMA International (2023) JavaScript (ECMAScript) Documentation.

https://developer.mozilla.org/en-US/docs/Web/JavaScript

9. Node.js Contributors (2024) Node.js Documentation. https://nodejs.org/en/docs/

10. National Association of Realtors (NAR) (Various dates) Real Estate Management
Best Practices. https://www.nar.realtor/research-and-statistics/research-
reports/nar-research

43
Parul University PIT