1

“ROOM RENTAL SITE”

A Project Report
By

“SIMRAN SHARMA”

“202201504127030”
SUBMITTED TO
SARDAR PATEL UNIVERSITY-MANDI
MANDI (H.P)

IN
PARTIAL FULFILLMENT OF THE REQUIREMENTS
FOR THE DEGREE
OF
MASTERS IN COMPUTER APPLICATION
(MCA 4TH SEMESTER)
BATCH: 2022-2024
Under the Supervision of
“Mr. Ravinder Singh”

DEPARTMENT OF COMPUTER SCIENCE

SARDAR PATEL UNIVERSITY SESSION (2022-2024)
 2

DEPARTMENT OF COMPUTER SCIENCE SARDAR

PATEL UNIVERSITY
SESSION (2022-2024)

CERTIFICATE

This is to certify that the project reported entitled “ROOM RENTAL”

submitted to Department of Computer Science, Sardar Patel
University, Mandi 175001 in Partial fulfillment of the requirement for
the award of the degree of MASTER OF COMPUTER SCIENCE
APPLICATIONS(MCA), is an authentic and original work carried out by
Miss Simran Sharma, with enrolment no. 202201504127030 under
my guidance.

Signature of the Guide

Date:
Mr. Ravinder Singh
Dept. of Computer Science
 3

CERTIFICATE OF 6 MONTH INTERNSHIP

Solitaire Infosys Private Limited
 4

Services Provided:
 Web Development:Web development is the process of
building and maintaining websites and web applications. It
involves a combination of programming, design, and content
management to create functional and interactive websites that
can be accessed through web browsers.
 Web designing:Web designing is the process of creating and
designing the visual elements and user interfaces of websites. It
involves the combination of various disciplines, including graphic
design, user experience (UX) design, and user interface (UI)
design, to create aesthetically appealing and functional websites
that cater to the needs of the target audience.
 App Development: Mobile apps are designed to run on
specific operating systems, like Android or iOS, and offer various
functionalities to meet user needs. App development involves
several stages, including planning, design, development, testing,
and deployment, to ensure a successful and user-friendly
application.
 Digital Marketing: It encompasses a wide range of online
marketing tactics and strategies to reach potential customers,
build brand awareness, drive website traffic, generate leads, and
ultimately, achieve business goals. Digital marketing has become
an essential component of modern marketing efforts due to the
widespread use of the internet and digital devices.
 5

DECLARATION

This is to certify, that the Project Report titled “ROOM RENTAL”

submitted by me is an outcome of my independent and original work.
I have duly acknowledged all the sources from which ideas and
extracts have been taken. The project is free from any plagiarism and
has not been submitted elsewhere to any other University/Institute
for the fulfillment of the requirements of any course of study.

Signature of the Student

Date:

SIMRAN SHARMA
Roll No-202201504127030
Class: - MCA 4th Sem
 6

ACKNOWLEDGEMENT

The successful completion of this MCA project would not have

been possible without the support and guidance of many individuals. I am
deeply grateful for their encouragement, assistance, and contributions
throughout this journey.

It takes this occasion to thank God, almighty for blessing us with his
grace and taking our Endeavour to a successful culmination. It is my
proud privilege to express my profound gratitude to the entire
management of Department of Computer Science and teachers of
the institute for providing me with the opportunity to avail the
excellent facilities and infrastructure. The knowledge values
inculcated have proved to be of immense help at the very start of my
career. Mr. Ravinder Singh, my Project Supervisor has been very
supportive throughout the project and has been very helpful in
guiding me with the project and documentation.

I am also grateful to Solitaire Infosys Pvt. Ltd for providing the

resources and environment necessary for the successful execution of
this project. The practical exposure and experience gained during this
time have been immensely beneficial.
I extend our sincere and heartfelt thanks to our esteemed guide, Mr.
Ravinder Singh for providing us with the right guidance and advice at
the crucial junctures and for showing us the right way. We would
like to thank the other faculty members also, at this occasion. Last
but not the least, we would like to thank friends for the support and
encouragement they given us during the course of our work
 7

ABSTRACT
Room rental websites have become essential platforms for individuals seeking
accommodations, offering numerous benefits that make finding and managing
rental spaces more efficient, convenient, and user-friendly.

This project aims to deliver several key functionalities that cater to both renters
and property owners. The website provides tools for searching and filtering room
options, and viewing detailed information about each property. It also offers a
seamless user experience across devices, making room rental easier and more
accessible.

The website offers a range of functionalities, including:

The web site offers a range of functionalities, including:

1. Centralized Information Hub

 Comprehensive Data: Provides detailed information about available rooms,

rental prices, facilities, and nearby amenities all in one place.
 Up-to-Date Information: Ensures users have access to the latest listings, room
availability, and rental terms.
 Tailored Experiences: Uses user data to provide personalized room
recommendations based on preferences, location, and budget.

2. Convenience and Accessibility

 24/7 Availability: Allows users to search and book rooms at any time, from
anywhere in the world.
 Multi-Device Access: Users can access the website from desktops, tablets, and
smartphones, making it convenient for on-the-go browsing and booking.

3. Time and Cost Efficiency

 8

 Centralized Management: Provides users with a dashboard to view and manage

their property details in one place.User can add multiple property and can edit
previous one.
 Efficient Search and Filter: Users can quickly find rooms that meet their
specific criteria, saving time and effort.

4. User Account Management

 Simple Sign-Up: Users can sign up by providing their email address, creating a
password, and entering basic information such as name and phone number.
 Easy To Edit:Property owner can edit their property detail any time.
 9

TABLE OF CONTENT

Sr. No Particular Page No. Remarks

1 Introduction 12
1.1 Introduction& Benefits 12
1.2 Scope 14
1.3 Key Features 16
1.4 Project Module 17
1.5 Problem of existing system 20
1.6 Project Requirements& Software 22

2 System Analysis
2.1 Objective
2.2 Feasibility Study
2.3 Requirement Gathering
2.4 System Architecture
2.5 Risk Analysis
2.6 SWOT Analysis

3 System Design
3.2 Use case analysis
3.3 Activity Diagram
3.4 User Interface Design
3.5 User Privileges

4 Coding
4.1 Technologies
4.2 MVC Architecture
4.3 Project Structure
5 Testing
Sr. No Particular Page No. Remarks
 1
0

1 Introduction 12
1.1 Introduction & Benefits 12
1.2 Scope 14
1.3 Key Features 16
1.4 Project Module 17
1.5 Problem of existing system 20
1.6 Project Requirements & Software 22

2 System Analysis
2.1 Objective
2.2 Feasibility Study
2.3 Requirement Gathering
2.4 System Architecture
2.5 Risk Analysis

3 System Design
3.1 Process modeling
3.2 Use case analysis
3.3 Activity Diagram
3.4 User Interface Design

4 Coding
5 Testing
6 Result
7 Conclusion
8 Future scope
9 Bibliography
 1
1

TABLE OF FIGURES

Sr. No Particular Page No. Remarks

1.1 Home page 12
1.2 Front end technologies 30
1.3 Back-end technologies
3.1 ERD of Room Rental
3.2 Class diagram
3.3 Level 0 DFD
3.4 Level 1 DFD
3.5 Use case diagram Room Rental
3.7 Activity Diagram
3.8 User Privileges
4.1 Structure of root directory
4.2 Asset’s folder in the structure
4.3 Project folder for frontend
4.4 Server folder for backend
4.5 Images folder
5.1
5.2 Homepage
5.3 Search Rooms
5.4 Apply Filters on Rooms
5.5 Sign up page
5.6 Login page
5.7 Dashboard
5.8 Upload Details &Manage
5.9 Contact Us
5.10
 1
2

TABLE OF DATABASES

Sr. No Particulars Page No. Remarks

1 Database structure for User ‘s
Information
2 Database structure for Rooms
information
3 Database structure for Apply Filter
message information
4 uploads folder for storing images
 1
3

1. INTRODUCTION

1.1 INTRODUCTION:
Welcome to Our Room Rental Website, a platform for finding the perfect place
to stay. In today’s fast-paced world, where finding the right accommodation is
essential, our platform simplifies the process of searching, comparing, and
securing your ideal room. Whether you’re looking for a cozy single room, a
spacious double room, or a luxurious suite, our comprehensive room rental
website is designed to meet your specific needs, making the search for your next
living space as smooth and efficient as possible.

Our Mission

At Room Rental , our mission is to offer a user-friendly, reliable, and

innovative platform that helps individuals and families find their ideal
accommodations with ease. We aim to be the one-stop solution for all your rental
needs, from exploring various room types to securing a place that fits your
budget and preferences. Our goal is to make the process of renting a room
accessible, affordable, and hassle-free for everyone, while also promoting
transparency and user satisfaction.

1.2 Benefits of Using Our Room Rental Website :

Comprehensive Room Listings: Access detailed information about a

variety of rooms, including photos, amenities, and pricing options.

User-Friendly Interface: Easily navigate our intuitive website on any

device, whether it’s a desktop, tablet, or smartphone.

Integrated Listing System: Landlords can easily list their properties,

providing all the necessary details to attract potential renters.
 1
4

Personalized Recommendations: Get tailored room suggestions based on

your preferences, budget, and past searches.

Alerts: Currently Available Rooms will be highlighted

This version now highlights the ease with which landlords can list their
properties, aligning the content with the room rental focus.

1.1 Scope:

1. Homepage:

 Navbar: A top navigation bar providing easy access to different sections of

the website, including Home, Room Listings, Signup, Login, and Owner
Dashboard.
 Search Bar: A prominently placed search bar for users to quickly find
rooms based on location, room type, and rent range.
 Type of Rooms Cards: Display of room categories (e.g., Single Room,
Double Room, PG, Luxurious Room) with links to corresponding listings.
 Signup and Login Pages: Easily accessible pages for users to create an
account or log in to manage their profiles and view saved listings.

2. Room Listings Page:

 Room Categories: Organized room categories with filtering options based

on room type, rent range, location, and amenities.
 Detailed Room Pages: Each room listing includes descriptions, images,
and landlord details, along with user reviews and ratings.

3. Owner Dashboard:

 Upload New Details: A dedicated section where landlords can list new
rental properties, including uploading images, setting rent prices, and
describing amenities.
 Edit Uploaded Details: A feature allowing landlords to modify existing
listings, update availability, or adjust rent prices.
 1
5

4. User Accounts:

 Account Creation & Management: Users can create an account, manage

their profile, and save their favorite room listings for future reference.
 Owner-Specific Features: Landlords have access to additional tools
within their dashboard to manage their properties effectively.

5. Security:
 SSL Certification: Secure encryption of data transmitted between users
and the website.
 Data Protection: Measures to protect user data and prevent unauthorized
access.

6. Technical Specifications:
 Responsive Design: The website layout and elements adjust seamlessly for
desktop, tablet, and mobile devices.
 SEO Optimization: Implementation of SEO best practices, including meta
tags, keywords, and optimized URLs for better search engine ranking.
 Performance Optimization: Techniques to ensure fast loading times and a
smooth user experience.

This version reflects the features and structure of your room rental project,
including the homepage elements, owner dashboard functionalities, and user
account management.
 1
6

Project Modules:

1.Project Initiation & Planning:

1. Objective: Define the project's scope, goals, and deliverable. Identify key
stakeholders, gather requirements, and create a detailed project plan with
timelines and budget estimates to ensure alignment and efficient resource
allocation.
2. Activities:
1. Stakeholder identification and requirement gathering.
2. Project scope definition and goal setting.
3. Creation of project timelines and budget estimates.
4. Resource allocation and risk management planning.

Design & User Experience (UX):

1. Objective: Develop wire frames and high-fidelity mock ups for essential
pages, ensuring a seamless and engaging user experience.
2. Activities:
1. Creation of wire frames for the homepage, room listing pages, and
user account management pages.
2. Development of high-fidelity mock ups and interactive prototypes.
3. User testing and feedback collection to refine design elements.
4. Finalization of design to ensure a consistent and user-friendly
experience.

Development:
1. Objective: Implement the front-end and back-end functionalities required
for the website, ensuring responsiveness and compatibility across devices.
2. Activities:
1. Setting up the development environment and establishing the
website’s structure.
2. Front-end development of the homepage, room listings, search
functionality, and user account pages.
3. Back-end development for user authentication, room listing
management, and database integration.
 1
7

4. Integration of third-party services such as Google Mail for sending

mail to reset password.

3.Integration & Testing:

1. Objective: Integrate third-party services and conduct comprehensive

testing to ensure all components function harmoniously.

Activities:
1. Implementation of Location-Based Search Functionality: Developed and
integrated a location-based search feature using relevant APIs to filter rooms
by proximity to user-specified locations.
2. Testing and Quality Assurance: Conducted unit testing, integration
testing, and user acceptance testing (UAT) to identify and resolve bugs and
ensure functionality.
3. Responsive Design Validation: Validated responsiveness across various
devices and browsers to ensure a seamless user experience.
4. Data Validation and Security: Implemented data validation techniques to
ensure accurate user input and secure handling of user information,
preventing potential vulnerabilities.

Deployment:
1. Objective: Launch the website, ensuring that all configurations and final
checks are completed for a smooth transition to the live environment.
2. Activities:
1. Configuring hosting and domain settings.
2. Deploying the website to the live environment.
3. Final checks for all features and functionalities.
4. Monitoring initial performance and addressing any immediate issues
post-launch.

Training & Documentation:

1. Objective: Provide comprehensive documentation and training for site

administrators to ensure effective management and troubleshooting.
 1
8

2. Activities:
1. Creation of user manuals and technical documentation for site
administrators.
2. Training sessions for managing content, room listings, and user
accounts.
3. Documentation of best practices for security and data management.

Post-Launch Support & Maintenance:

1. Objective: Monitor website performance, gather user feedback, and
provide ongoing maintenance and updates.
2. Activities:
1. Continuous monitoring of website performance and uptime.
2. Implementation of updates and improvements based on user
feedback.
3. Regular management of content, room listings, and user data.
4. Addressing any post-launch issues or bugs.

These modules collectively ensure the successful development, launch, and ongoing
maintenance of the room rental website, catering to the needs of both landlords and
renters while providing a seamless and secure user experience.
 1
9

1.2 Project Requirements:

1.Functional Requirements

1.1 User Registration and Account Management:

1. Create Account: Users should be able to register for an account using an

email address or social media login.
2. Login/Logout: Secure login and logout functionality with options for
password recovery and account management.
3. Profile Management: Users can update personal information, manage
addresses, and view order history.

1.2 Room Browsing and Discovery:

1. Homepage Experience: Users should see an attractive homepage featuring
highlighted room categories, promotions, and featured listings.
2. Search Functionality: A robust search bar with auto-complete and
keyword suggestions to help users find rooms quickly.
3. Filters and Sorting: Options to filter rooms by type (e.g., Single, Double,
PG, Luxurious), price range, and other attributes. Ability to sort by
popularity, price, and availability.

1.3 Room Listings:

1. Detailed Room Pages: Each room page should include high-quality
images, detailed descriptions, rent range, facilities, and customer reviews.
2. Add to Favorites: Users should be able to save rooms to a wish-list or
favorites list for later viewing.

1.4 Dashboard and Room Management:

1. Owner Dashboard: An interface where property owners can upload new
room details, edit existing details, and manage their listings.
2. Room Upload: Owners can add new room listings with multiple images,
descriptions, and price ranges.
 2
0

3. Room Editing: Owners can update existing room details, including

availability status and pricing.

1.5 Customer Support:

1. Contact Methods: Access to customer support through email, and a
contact form.
2. Help Resources: A comprehensive FAQ section to help users find answers
to common questions about listings, and site navigation.

1.6 Personalization:

1. Recommendations: Personalized room recommendations based on user

browsing and search history.
2. Types Of Rooms:Personalized room recommendations based on the types
of rooms single,double, pg, luxurious rooms.

1.7 Admin Panel:

1. User Management: Admins can manage user accounts, monitor activity,

and address any issues.
2. Listing Management: Admins can oversee room listings, approve or reject
new submissions, and ensure content quality.
3. Analytic and Reporting: Tools for tracking website performance, user
behavior, and room listing metrics.
4. Content Management System (CMS): A user-friendly CMS for admins
to update content, manage FAQs, and keep the site up to date.
 2
1

2.3.3 Non-Functional Requirements

1.Performance:

1. Fast Load Times: Pages should load quickly to ensure a smooth user
experience.
2. Efficient Handling: The system should handle a large number of
concurrent users efficiently, especially during peak times.

Scalability:

1. Scalable Architecture: The system should be designed to scale with a

growing number of users and room listings.
2. Cloud-Based Solutions: Utilize cloud-based hosting to manage increased
load and ensure reliability.

Security:

1. Data Security: Secure handling of user data and transactions, with

encryption protocols in place.
2. Compliance: Ensure compliance with data protection regulations like
GDPR and CCPA to protect user privacy and avoid legal issues.

These requirements outline the essential functionalities and performance criteria

needed to ensure the room rental website operates smoothly, securely, and provides a
user-friendly experience for both renters and property owners.
 2
2

Visual Studio Code Overview for MERN Stack Development

1. Enhanced Performance and Scalability:

 Efficient Handling: Visual Studio Code (VS Code) is lightweight and

responsive, handling large code bases and multiple projects effectively without
significant performance issues.
 Fast Startup: Quick launch times and responsive editor features facilitate a
smooth development experience for MERN stack projects.

2. Advanced Debugging and Diagnostics:

 Integrated Debugging: VS Code includes robust debugging tools tailored for

JavaScript and TypeScript, which are essential for debugging Node.js backends
and React frontends. Features like breakpoints, watch variables, and call stacks
make it easier to identify and fix issues.
 Live Share: Real-time collaboration tools like Live Share enable developers to
share code and debugging sessions with team members, which is particularly
useful for MERN stack development.

3. Intelligent Code Assistance:

 Smart Code Suggestions: VS Code provides intelligent code completions and

suggestions using its built-in IntelliSense feature, which supports JavaScript,
TypeScript, and JSON, helping developers write code faster and with fewer
errors.
 Code Refactoring: Tools for refactoring and code navigation support improve
code quality and maintainability, which is important for both backend and
frontend development.

4. Modern Development Features:

 Support for Latest Technologies: VS Code supports modern web development

frameworks and libraries, including React and Express, providing a streamlined
environment for developing full-stack applications.
 Enhanced Web Development Tools: Built-in support for JavaScript,
TypeScript, and various web frameworks helps in developing and maintaining
MERN stack projects efficiently.
 2
3

5. User Experience and Interface:

 Customizable UI: VS Code offers a modern and customizable interface that can
be tailored to suit personal preferences, enhancing productivity.
 Accessibility Features: Enhanced accessibility options ensure that the
development environment is inclusive and user-friendly.

6. Version Control and Collaboration:

 Integrated Git Support: VS Code includes built-in Git integration for version
control, with features for managing repositories, branches, and commits directly
from the editor. This is essential for managing code changes and collaboration in
MERN stack projects.
 Collaboration Tools: Integration with platforms like GitHub and Azure DevOps
facilitates team collaboration and project management.

7. Comprehensive Testing Tools:

 Unit Testing Frameworks: Support for various testing frameworks such as Jest
(for JavaScript testing) and Mocha (for Node.js) ensures code reliability and
quality. VS Code integrates with these tools to run and manage tests.
 Test Explorer: Extensions like the Test Explorer provide insights into test
results and code coverage, helping maintain high code quality across the MERN
stack.

8. Extensibility and Customization:

 Marketplace Extensions: Access to a wide range of extensions for JavaScript,

TypeScript, and React from the Visual Studio Marketplace to enhance
functionality and tailor the IDE for MERN stack development.
 Custom Workloads: Flexible installation options allow developers to install
only the necessary components and extensions for MERN stack projects.

9. Cloud and Container Integration:

 Azure Integration: VS Code integrates with Azure for deploying and managing
cloud-based applications, which is useful for hosting Node.js applications and
managing cloud resources.
 2
4

 Docker Support: Built-in tools and extensions for developing, debugging, and
deploying containerized applications using Docker, which can be beneficial for
managing MERN stack deployments.

10. Security and Compliance:

 Enhanced Security Features: VS Code includes security features to safeguard
code and development environments, such as extensions for linting and code
analysis to enforce best practices.
 Compliance Tools: Tools and extensions to help ensure compliance with coding
standards and security best practices, relevant for developing secure MERN
stack applications.

This overview highlights how Visual Studio Code supports and enhances development
for MERN stack projects, offering a productive environment with powerful tools for
coding, debugging, testing, and deploying applications.
 2
5

2. SYSTEM ANALYSIS

System analysis is crucial for developing a room rental management system. It

involves examining the current system's functionality, identifying pain points, and
designing a solution that meets user needs and business goals. For RoomRental, the
system analysis focuses on streamlining room rentals, enhancing user experience, and
ensuring efficient management.

RoomRental is a room rental management system designed to simplify the process of

finding and managing rental rooms. The system will provide users with a platform to
explore room listings, customize search filters, according to their requirements.

1. Enhance User Experience

 User-Friendly Interface: Design an intuitive and easy-to-navigate website with

a focus on user experience (UX).
 Mobile Responsiveness: Ensure the website is fully responsive and performs
well on all devices (smartphones, tablets, desktops).

2. Streamline Operations
 Room Management: Implement an efficient system for managing room listings,
including availability, pricing, and amenities.
 Booking Processing: Automate booking and payment processes to reduce errors
and improve efficiency.
 Customer Support: Provide multiple support channels, including live chat,
email, and a comprehensive FAQ section.

3. Secure and Reliable Transactions

 Data Security: Implement strong security measures to protect customer data and
comply with data protection regulations (e.g., GDPR, CCPA).
 SSL Encryption: Use SSL certificates to encrypt data transmitted between the
website and users.

 2
6

4. Increase Traffic
 SEO Optimization: Optimize the website for search engines to improve organic
search rankings and visibility.
 Digital Marketing: Utilize digital marketing strategies (e.g., social media, email
marketing, pay-per-click advertising) to attract potential renters.

5. Data-Driven Decision Making

 Analytics Integration: Integrate tools like Google Analytics to track website
performance and user behavior.
 Sales Reporting: Generate detailed reports to monitor performance and identify
trends in rooms.

6. Ensure Scalability and Performance

 Scalable Infrastructure: Use cloud-based hosting solutions (e.g., AWS, Azure,
Google Cloud) to ensure scalability.
 Performance Optimization: Optimize website performance for fast load times
and smooth navigation.
 Content Delivery Network (CDN): Utilize a CDN to deliver content quickly to
users worldwide.

7. Maintain Competitive Advantage

 Continuous Improvement: Regularly update the website with new features,

room listings, and enhancements based on user feedback.
 Market Research: Conduct ongoing market research to stay informed about
customer preferences and industry trends.
 Innovation: Implement innovative technologies and features to differentiate the
website from competitors.

8. Customer Loyalty
 Loyalty Programs: Develop customer loyalty programs to reward repeat
renters.
 Customer Engagement: Engage with customers through personalized
communication and social media interactions.
 2
7

2.3 Requirement Gathering

The requirements gathering phase is critical for understanding the needs and
expectations of stakeholders for the RoomRental platform. This involves identifying
and documenting both functional and non-functional requirements to ensure successful
development and operation.

2.3.1 Requirement Gathering Techniques

 Interviews: Conduct interviews with key stakeholders to understand their needs

and expectations.
 Surveys/Questionnaires: Distribute surveys to potential users and stakeholders
to gather quantitative data.
 Workshops: Organize workshops to brainstorm and prioritize requirements.
 Observation: Observe current processes and systems to identify areas for
improvement.
 Document Analysis: Review existing documentation (e.g., competitor websites)
for additional insights.

2.4 Feasibility Study

A feasibility study for the room rental management system evaluates the practicality
and potential success of the project. This includes assessing technical, economic,
operational, and legal feasibility.

1. Technical Feasibility
 Technology Stack: Evaluate technologies (e.g., React, Node.js, MongoDB)
needed for system development.
 Infrastructure: Assess required hardware and software infrastructure.
 Technical Expertise: Ensure the development team has the necessary skills.
 2
8

2. Economic Feasibility
 Initial Costs: Estimate development, software, hardware, and labor costs.
 Operating Costs: Calculate ongoing costs for maintenance, support, and
hosting.
 Revenue Projections: Estimate revenue from rental fees and other sources.
 Return on Investment (ROI): Compare costs and projected revenues to
determine ROI.

3. Operational Feasibility
 User Acceptance: Evaluate if users will accept and use the system.
 Training: Determine training requirements for users and administrators.
 Operational Workflow: Assess how the new system will affect current business
operations and workflows.

4. Legal Feasibility

 Compliance: Ensure compliance with data protection regulations (e.g., GDPR,

CCPA).
 Terms and Conditions: Clearly define and display terms of service and privacy
policies.

This system analysis provides a structured approach to understanding the needs and
challenges of the RoomRental platform, ensuring that the final product aligns with
user needs and business goals.

2.5 Risk Analysis

2.5.1 Security Risks

 Data Breaches and Unauthorized Access: Sensitive user data, including

personal details and payment information, could be compromised.
 2
9

o Mitigation: Implement robust security measures such as data encryption,

secure payment gateways, and regular security audits. Utilize multi-factor
authentication and ensure compliance with data protection regulations.

2.5.2 Performance Risks

 Slow Load Times During High Traffic Periods: High volumes of users
searching for or booking rooms may impact performance.
o Mitigation: Optimize the code-base and database queries for efficiency.
Utilize scalable cloud hosting solutions and a Content Delivery Network
(CDN) to manage peak traffic and ensure fast load times.

2.5.3 Usability Risks

 Poor User Experience Leading to Low Customer Retention: A confusing or
difficult-to-use interface may lead to decreased user satisfaction and retention.
o Mitigation: Conduct regular user testing and gather feedback to
continuously improve the UI/UX. Ensure the website is user-friendly, with
clear navigation, easy-to-use filters, and a responsive design.

2.5.4 Operational Risks

 System Downtime or Failures: Technical issues or outages could disrupt access

to the system and affect user satisfaction.
o Mitigation: Implement redundant systems and have regular maintenance
schedules. Use monitoring tools to quickly detect and resolve issues, and
develop a disaster recovery plan.

2.6 SWOT Analysis

2.6.1 Strengths

 Accessibility: The website is available 24/7, allowing users to browse rooms at

any time from anywhere.
 Comprehensive Listings: Provides detailed information about available rooms,
including pricing, amenities, and location, helping users make informed
decisions.
 3
0

2.6.2 Weaknesses
 Dependence on Internet: Users must have a reliable internet connection to
access the website, which may limit usability in areas with poor connectivity.
 High Competition: The room rental market is highly competitive, making it
challenging to stand out and attract users a midst numerous competitors.

2.6.3 Opportunities
Partnerships with Educational Institutions and Corporates: Collaborating
with colleges, universities, and companies can enhance the platform's visibility
among students and working professionals, leading to an increase in both
property listings and user engagement.

Referral Programs: Implementing referral programs that offer rewards for users
who bring in new tenants or landlords can foster community growth and
encourage more users to join the platform.

AI-Driven User Experience Enhancements: Leveraging AI to provide

personalized room recommendations and advanced search filters can
significantly improve the user experience, making the platform more attractive to
both renters and landlords.

Landlord Support and Resources: Offering resources and guidance to

landlords on effectively listing and managing their properties can attract more
property owners to the platform, increasing the variety and quality of available
listings.

2.6.4 Threats
Market Competition: The rise of competing platforms offering similar room
rental services could reduce user engagement and listings on your platform,
requiring continuous innovation to stay competitive.
 3
1

User Trust and Security Concerns: Ensuring the security of user data and
maintaining trust is crucial. Any breach or misuse of data could lead to a loss of
users and damage the platform's reputation.

Technological Disruptions: Rapid advancements in technology could make

existing features or infrastructure obsolete, necessitating frequent updates and
potential overhauls to remain relevant and user-friendly.

This updated SWOT analysis now aligns more closely with the nature of your website
and the potential challenges it could face.

3. SYSTEM DESIGN
The system design for the Room Rental platform, built with the MERN stack,
incorporates both front-end and back-end components to provide a comprehensive
room rental experience. Here’s an overview:

1. Front-End (Client-Side)

 Technologies: HTML, CSS, JavaScript, React, Bootstrap

 Features:
o Responsive Design: Ensures the platform is mobile-friendly and accessible
on various devices.
o User Interface Components:
 Homepage: Displays featured rooms, search bar, and navigation.
 Room Listings: Shows available rooms with filtering and sorting
options.
 Room Details: Provides detailed information about each room,
including images, amenities, and pricing.
 User Authentication: Handles user registration, login, and profile
management.
 User Profile: Displays user information, property details, and
personal settings.
 Search and Filtering: Allows users to search for rooms by location,
type, price, and other criteria.
 3
2

2.Back-End (Server-Side)
Technologies: Node.js, Express.js

Components:
 User Management: Manages user registration, login, authentication, and profile
management, ensuring secure access and personalized experiences for students,
working professionals, and landlords.
 Room Management: Facilitates CRUD operations for room listings, including
details like availability, room types, rent range, and amenities, allowing landlords
to easily manage their properties.
 Analytic and Reporting: Generates insights into user engagement, room listings,
and search trends, helping landlords and administrators understand user preferences
and optimize the platform.
 API Services: Provides RESTful APIs for seamless integration with the front-end
and potential third-party services, enabling smooth data flow and enhanced user
interactions.
This content should fit well into your project report, reflecting the core functionalities
of your back-end without referencing payment or booking features.

3. Database Design
 Schema: NoSQL (MongoDB)
 Key Collections:
o Users: Stores user details, authentication credentials, and profiles.
o Rooms: Contains room information, including availability, pricing, and
amenities.
o Categories: Organizes rooms into categories for easier filtering.

 Relationships:
 3
3

One-to-Many:
Users to Room Listings: A single user (landlord) can list multiple room properties.
This means that one landlord can have many room listings associated with their
account. Each room listing is linked to one landlord.

 Categories to Rooms: A single category (e.g., single room, double room, PG,
luxurious room) can include multiple room listings. This allows rooms to be
grouped under specific types or classifications, facilitating organized searches and
filtering.
 Users to Search Filters: A single user can apply multiple filters (such as location,
room type, and budget) to refine their search. Each filter option is applied across
many room listings to narrow down the results according to the user’s preferences.

Many-to-One:

 Room Listings to Users: Multiple room listings can be associated with a single
user (landlord). This means that many rooms can be managed by one landlord.
 Rooms to Categories: Multiple rooms can belong to one category. Each room
listing is assigned to a single category, but a category can contain many rooms.
 Search Filters to Rooms: Multiple search filters can be applied to a single room
listing. For example, a room listing can be filtered by location, type, and budget,
allowing the same room to be viewed under various filtered criteria.
 This explanation details how entities in your system are related, focusing on the
practical application of these relationships in your platform's functionality.

4. User Authentication and Authorization

 Authentication: Uses JWT (JSON Web Tokens) for secure user authentication.
 Authorization: Role-based access control to differentiate between admin, user,
and guest access.

5. Scalability and Performance

 Load Balancing: Distributes incoming traffic across multiple servers to ensure

reliability.
 CDN: Uses a Content Delivery Network (CDN) like Cloud-flare for faster
content delivery.
 3
4

6. Search and Filtering

 Search: Includes a search bar for users to easily find rooms based on keywords.
 Filtering: Allows users to filter rooms by various criteria such as location, price
range, type.

7. Security Measures

 Data Encryption: Encrypts sensitive data both in transit and at rest.

 Security Audits: Conducts regular security audits and vulnerability assessments.
 Backup and Recovery: Implements automated backups and disaster recovery
plans.

8. Analytics and Reporting

User Analytics: Tracks user behavior and interactions on the platform to

understand how users engage with the site. This includes monitoring metrics
such as page views, search queries, and user engagement. Tools like Google
Analytics can be used to gather insights into user activity and identify patterns or
areas for enhancement.

Room Listing Performance Reports: Generates detailed reports on the

performance of room listings. This includes analyzing metrics such as the
number of views, user inquiries, and the popularity of different room types.
These reports help landlords assess the effectiveness of their listings and make
data-driven decisions to improve visibility and appeal.

This content focuses on the analytics and reporting features relevant to your website’s
functionality, emphasizing user engagement and room listing performance without
mentioning bookings.

9. Third-Party Integrations

 Email Service: Integrates with services like SendGrid for email notifications.

This design ensures a robust, scalable, and user-friendly Room Rental platform using
the MERN stack, covering all critical aspects from front-end to back-end, including
security and scalability
 3
5

3.1 Data Modelling:

Data modeling is the process of creating a visual representation of the information
system to communicate connections between data points and structures. It illustrates
the types of data used and stored within the system, the relationships among these data
types, how data can be grouped and organized, and its formats and attributes.

Here is a detailed overview of the data modeling for the Room Rental platform:

1. Entities and Attributes

1.Users
1. UserID
2. Email
3. Password
2. Rooms

1. Name
2. Mobile Number
3. Type (e.g., Single, Double, Luxurious)
4. Description
5. Price
6. Availability
7. Address
8. Images (Array of Image URLs)
9. CreatedAt
10. UpdatedAt

2. Relationships
 3
6

 Users and Listing: One-to-Many (One user can place multiple sharing)
 Rooms and Reviews: One-to-Many (One room can have multiple reviews)
 Rooms and user:Many to one(Multiple rooms can be upload by one user)

This model captures the essential components of the Room Rental platform, including
user management, room details, bookings, reviews, and payment processing.

1.ER Diagram (Entity-Relationship Diagram)

The ER diagram visually represents the relationships between entities.

Here's a ER diagram which represent my website flow:-
Start

If
Register Registered

Login

See All Rooms details

Is
Valid

Add Rooms Details

Back To
Update All Details Login

Stop
 3
7

3.2 Process Modeling

Process modeling helps in visualizing and understanding the workflow of various
processes in the Room Rental platform. Below are the main processes involved, along
with detailed steps for each:

 Level 0 (Context Diagram): Shows the entire system as a single process

interacting with external entities like the User and Admin.

 Level 1 DFD: Breaks down the system into major processes like User
Registration/Login, Room Search, Room Details Upload, and Booking Process.

Manage
User Users(Admin)

Room Search

Data Store User Room Rental

registration/Login System

Room Details Manage Room Room Data Store

Upload Listing(Admin)

These diagrams should give you a clear understanding of how data flows through the
system at different levels.
 3
8

1. Product Management

Adding a New Room:

1. Admin Login:
1. Admin logs in and accesses the room management dashboard.
2. Select Add Room:
1. Admin selects the option to add a new room.
3. Enter Room Details:
1. Admin enters room details (Title, description, price, type, availability,
address, images, etc.).
4. Validate Input Data:

1. System validates the input data for completeness and correctness.

5. Save Room Details:
1. If valid, the system saves the room details in the database.
6. List Room:

1. The room is listed on the website for users to view and book.

Updating Room Details:

1. Admin Login:
1. Admin logs in and accesses the room management dashboard.

2. Select Room to Update:

1. Admin selects the room to update.

3. Modify Room Details:

1. Admin modifies the room details as needed.

4. Validate Changes:
 3
9

1. System validates the changes.

5. Update Room:
1. If valid, the system updates the room details in the database.

Deleting a Room:

1. Admin Login:
1. Admin logs in and accesses the room management dashboard.

2. Select Room to Delete:

1. Admin selects the room to delete.

3. Confirm Deletion:
1. System prompts for confirmation of deletion.

4. Admin Confirms:

1. Admin confirms the deletion.

5. Remove Room:
1. System removes the room from the database.

2. User Registration and Authentication

User Registration:

1. Access Registration Page:

1. User accesses the registration page.

2. Fill in Details:

1. User fills in personal details (name, email, password, etc.).

3. Validate Input Data:

 4
0

1. System validates the input data for completeness and correctness.

4. Save User Details:

1. If valid, the system saves the user details in the database.

User Authentication (Login):

1. Access Login Page:

1. User accesses the login page.

2. Enter Credentials:

1. User enters email and password.

3. Validate Credentials:

1. System validates the credentials.

4. Create Session/Token:

1. If valid, the system creates a session/token.

5. Redirect User:
1. User is redirected to the homepage/dashboard.
 4
1

3.2 Use Case Analysis

Actors

 Customer: Manages their account and views room details.

 Admin: Manages rooms and user accounts.
 Guest: Browses rooms without logging in.
 Room Manager: Manages room availability and details, ensuring they are up-to-
date.

Use Cases

1.User Registration

o Actor: Guest
o Description: Allows a new user to create an account on the platform.
o Basic Flow:

1. Guest fills out the registration form (name, email, password, etc.).
2. System validates the information and saves it to the database.

User Login
o Actor: Customer, Admin
o Description: Enables users to log in to their accounts.
o Basic Flow:

3. User enters email and password on the login page.

4. System validates the credentials.
5. If valid, the system creates a session/token and grants access to the
user’s account.
 4
2

Browsing Rooms

o Actor: Guest, Customer

o Description: Allows users to view and search for available rooms.
o Basic Flow:

1. User navigates through room categories or uses the search function.

2. System displays room listings and details based on user queries.

Managing Rooms
o Actor: Admin, Room Manager
o Description: Allows the admin or room manager to add, update, or delete
room listings.
o Basic Flow:

1. Admin/Room Manager logs in and accesses the room management

dashboard.
2. Admin/Room Manager selects the option to add, update, or delete
room details.
3. The system validates the input and updates the room information in
the database accordingly.

Customer Support

o Actor: Customer, Admin

o Description: Provides support for customer issues and inquiries.
o Basic Flow:

1. Customer submits a support request through a contact form or support

portal.
2. Admin receives the request and responds to it, providing assistance or
resolution as needed.
 4
3

This use case analysis outlines the core functionalities of your room rental platform,
focusing on user registrations, logins, room browsing, room management, and
customer support.

3.4 ActivityDiagram:
An activity diagram is a type of UML (Unified Modeling Language) diagram
that visually represents the flow of activities and processes within a system. For
your site, which focuses on room listings and user interactions, an activity
diagram would illustrate how various components and user actions are
connected.
Start

Room Search
User Registration

Upload Rooms Details Filter Rooms

View Rooms Details View Available Rooms

Details

Full Details of Rooms

Manage Listing

End
 4
4

3.5 User Interface Design:

1. Homepage

Objectives:

 Capture user interest immediately.

 Highlight key tours and offers.
 Facilitate easy navigation to other sections.
Key Elements:

 Header:
o Logo
o Navigation Menu (Home, rooms, SignUp,Login, Contact us)
o Search Bar
o Registration
o Login
 Main Banner:
o Large, visually appealing images or sliders showcasing a
searchbar in which user can enter the location.
 Featured Products:
o Grid displaying types of rooms(single,double,pg,luxurious)with
images.
 4
5

 Footer:
o Links to Privacy Policy, Terms of Service, Contact Information, Social
Media Icons

2. Find Rooms

Objectives:

 The objective of the "Find Rooms" page on your room rental platform is to
provide a seamless and user-friendly experience for customers to explore, select,
and view details of available rooms.
 This page should offer all necessary information, inspire confidence, and
facilitate a smooth browsing process to enhance the overall user experience.

Key Elements:

 Visually Appealing: Use high-quality images and engaging visuals of the rooms
and properties.
 Intuitive Navigation: Ensure easy navigation with a clean and organized layout.
 Search Bar: Provide a search bar for users to quickly find specific rooms by
location, type, or rent range.
 Thumbnail Images: Display attractive thumbnail images for each room.
 Basic Details: Include basic details such as room type, rent range, and location.
 4
6

 Detail Button: Include a prominent "Detail" button on each room listing that
allows users to view more information.
 Filter Options: Provide filters for users to narrow down rooms by type,
availability, location, and rent range.
 Detail Button: On the click of the "Detail" button, all related details about the
room are shown.

3. Room Details & Back to List Button

Objectives:
The Room Details page in a room rental management system provides comprehensive
information to help customers make informed decisions and facilitate their room
selection process.

Key Elements:

 Description: A detailed description of the room, including its features,

amenities, and unique aspects (e.g., single room, double room).
 Rent Range: The cost range for renting the room.
 Location: Display the location and any nearby landmarks or conveniences.
 Image: Display images of the room and property to give users a clear idea of
what they are considering.
 "Back to List" Button: Redirects the user to the main room listings page.
 On Click of the Button: When the "Back to List" button is clicked, the user is
returned to the previous page, allowing them to continue browsing other rooms.

4. View Room List

Objectives:

 The "View Room List" page allows users to see all available rooms after
performing a search or applying filters, making it easy to browse and select a
room for more detailed viewing.

Key Elements:
 Room Listings: Display a list of rooms that match the user's search or filter
criteria, including thumbnail images and basic details.
 4
7

 Detail Button: Each room in the list should have a "Detail" button to view more
information.
 Empty State: If no rooms match the search or filter criteria, display a message
encouraging users to adjust their search or filters.

This revised version focuses on room rentals, providing users with an intuitive way to
find and view detailed information about rooms, with the ability to navigate back to
the room listings easily.

2. Manage Room Details

Objectives:

 The objective of the "Manage Room Details" page on your room rental platform
is to provide users (or admins) with a clear and organized interface to upload,
edit, and manage room details efficiently.
 This page should enable users to easily input all necessary information, upload
images, and ensure that room listings are comprehensive and up-to-date.

Key Elements:

 Upload Room Details: Provide a form for users to input room details, such as
type of room, rent range, location, available facilities, and images.
 Image Upload: Allow users to upload images of the room and property, with the
ability to handle multiple images per room.
 4
8

 Save Details: Include a "Save" button to store the entered room details in the
database.
 Edit Functionality: Allow users to edit previously uploaded room details, such
as changing the rent range, updating room availability, or replacing images.
 Delete Option: Provide a clear option to delete a room listing if it is no longer
available.
 View All Listings: Display a summary of all rooms uploaded by the user, with
options to edit or delete each listing.
 4
9

3. Room Details Page

Objectives:

The Room Details page in your room rental system provides a detailed view of each
room, allowing potential renters to understand all aspects of the room before making a
decision.

Key Elements:
 Detailed Description: Provide a detailed description of the room, including its
unique features, facilities, and what makes it appealing (e.g., proximity to
amenities, scenic view).
 Rent Range: Display the rent range and any additional costs (e.g., utilities).
 Location: Include information on the location, distance from key areas, and any
nearby landmarks.
 Image Gallery: Display images of the room and property, allowing users to get a
visual sense of the space.
 "Back to List" Button: Redirect users to the main room listings page.
 Edit Button: Allow users to quickly navigate to the edit page if they need to
update any information.
 Delete Button: Enable users to delete the room listing from this page.
 5
0

4. View and Manage Room Listings

Objectives:

 The "View and Manage Room Listings" page allows users to see all rooms they
have listed, providing easy access to view, edit, or delete any listing.

Key Elements:

 Room Listings Overview: Display a list of all rooms uploaded by the user,
including thumbnail images, room type, rent range, and location.
 Edit Button: Provide an "Edit" button for each room to allow users to update
room details.
 Delete Button: Include a "Delete" button to remove a room listing if it is no
longer available.
 Empty State: If no rooms are listed, display a message encouraging users to add
new room details.
 5
1

5. Contact Us

Objectives:

The "Contact Us" page on your room rental platform is crucial for providing users
with a direct way to reach out for inquiries, support, or feedback. It enhances user trust
and satisfaction.

Key Elements:
 Contact Information: Provide essential contact details such as phone number,
email address, and physical address of the office.
 Contact Form: Include a form for users to submit inquiries directly through the
website or user can directly connect with social media.


 5
2

Backend Implementation

Fetching and Displaying Rooms Details:

 Endpoint Creation:
o Create a GET endpoint (e.g., /api/rent-card) in Express to fetch all
room records from MongoDB.
o The endpoint should retrieve fields like the room type, location, rent range,
and other relevant details.
o Use Mongoose to define the schema for rooms, including fields like
roomType, location, rentRange, availableFor, etc
// models/UploadDetail.js
const mongoose = require('mongoose');

const uploadDetailSchema = new mongoose.Schema({

userId: { type: String, ref: 'User' },
name: {
type: String,
required: true
},
mobileNumber: {
type: String,
required: true
},
typeOfRooms: {
type: [String],
required: true
},
singleRoomRange: {
type: String,

},
doubleRoomRange: {
type: String,

},
facilities: {
type: [String],
enum: ['Almirah', 'Fan', 'Water', 'Washroom', 'Kitchen', 'Geyser', 'Wifi', 'Furniture', 'Balcony', 'AC', 'Parking']
},
near: {
type: String,
required: true
},
distanceFromRoad: {
type: String
},
availableFor: {
type: String,

},
currentlyAvailable: {
type: Boolean,
},
description: {
type: String
},
images: {
 5
3
type: [String]
}
});

module.exports = mongoose.model('UploadDetails', uploadDetailSchema);

Frontend Integration:

 In your React application, implement a "View Details" button for each room
entry.
 The button triggers a modal or redirects to a detail page where specific room
details are fetched and displayed.
useEffect(() => {
const fetchRooms = async () => {
try {
let url = 'http://localhost:5000/api/rent-card';
if (selectedRoomType) {
url += `?type=${selectedRoomType}`;
}
const res = await axios.get(url);
setRooms(res.data);
applyFilters(res.data); // Apply filters once rooms are fetched
} catch (err) {
console.error('Error fetching rooms:', err);
}
};

Search by Room Filters:

 Backend Filtering:
o Add a GET endpoint (e.g., /api/rooms/type) that accepts query
parameters like location, roomType, and rentRange.
o Filter rooms based on these criteria using Mongoose.

exports.getRoomsByType = async (req, res) => {

const { type } = req.query;

try {
const rooms = await UploadDetail.find({ typeOfRooms: type });
res.json(rooms);
} catch (err) {
res.status(500).json({ msg: 'Server error' });
}
};
// Get rooms by type
router.get('/type', uploadController.getRoomsByType);
 5
4

 Frontend Integration:
o Implement dropdowns or input fields in the React application for users to
filter rooms by location, type, and budget.
o When filters are applied, send a request to the /api/rooms/type
endpoint with the appropriate parameters.
import React from 'react';
import { Card, Row, Col } from 'react-bootstrap';
import { FaBed, FaUsers, FaHome, FaCrown } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';
import '../styles/RoomCard.css';

const RoomCard = () => {

const navigate = useNavigate();

const rooms = [
{ name: "Single Room", type: "single", icon: <FaBed size={50} />, description: "Perfect for individuals looking for a cozy and private
space." },
{ name: "Double Room", type: "double", icon: <FaUsers size={50} />, description: "Ideal for sharing with friends or family" },
{ name: "PG", type: "pg", icon: <FaHome size={50} />, description: "Affordable living for students & working professionals." },
{ name: "Luxurious Room", type: "luxurious", icon: <FaCrown size={50} />, description: "Experience the epitome of luxury and comfort." }
];

const handleCardClick = (type) => {

navigate(`/roomlist?type=${type}`);
};

return (
<div className="room-cards-container">
<Row>
{rooms.map((room, index) => (
<Col md={3} key={index} className="mb-4">
<Card className="text-center" onClick={() => handleCardClick(room.type)}>
<Card.Body>
<div className="icon-container mb-3">{room.icon}</div>
<Card.Title>{room.name}</Card.Title>
<Card.Text>{room.description}</Card.Text>
</Card.Body>
</Card>
</Col>
))}
</Row>
</div>
);
};

export default RoomCard;

const RoomList = () => {

const location = useLocation();
const [rooms, setRooms] = useState([]);
const [filteredRooms, setFilteredRooms] = useState([]);
const [selectedRoom, setSelectedRoom] = useState(null);
const [modalStyle, setModalStyle] = useState({});
const [filters, setFilters] = useState({
near: '',
minRent: '',
maxRent: ''
});

// Extract query parameters

const queryParams = new URLSearchParams(location.search);
 5
5
const selectedRoomType = queryParams.get('type') || '';
const nearQuery = queryParams.get('near') || '';

// Fetch rooms from API

useEffect(() => {
const fetchRooms = async () => {
try {
let url = 'http://localhost:5000/api/rent-card';
if (selectedRoomType) {
url += `?type=${selectedRoomType}`;
}
const res = await axios.get(url);
setRooms(res.data);
applyFilters(res.data); // Apply filters once rooms are fetched
} catch (err) {
console.error('Error fetching rooms:', err);
}
};

fetchRooms();
}, [selectedRoomType]);

// Define applyFilters function

const applyFilters = (data) => {
const { near, minRent, maxRent } = filters;

const filtered = data.filter(room => {

const nearMatch = room.near.toLowerCase().includes(near.toLowerCase());

// Handle rent range filtering for both single and double room ranges
const rentMatch = (
(minRent === '' || (room.singleRoomRange && parseInt(room.singleRoomRange) >= parseInt(minRent)) ||
(room.doubleRoomRange && parseInt(room.doubleRoomRange) >= parseInt(minRent))) &&
(maxRent === '' || (room.singleRoomRange && parseInt(room.singleRoomRange) <= parseInt(maxRent)) ||
(room.doubleRoomRange && parseInt(room.doubleRoomRange) <= parseInt(maxRent)))
);

const typeMatch = selectedRoomType ? room.typeOfRooms.includes(selectedRoomType) : true;

return nearMatch && rentMatch && typeMatch && room.currentlyAvailable;

});

setFilteredRooms(filtered);
};

// Apply filters when rooms or filter criteria change

useEffect(() => {
applyFilters(rooms);
}, [rooms, filters]);

// Update filters based on query parameters

useEffect(() => {
setFilters(prevFilters => ({
...prevFilters,
near: nearQuery
}));
}, [nearQuery]);
 5
6

User Registration and Authentication:

 Backend :
o Add a GET endpoint (e.g.,/api/auth/register) that store user data in
database.
o And fetch that that data in login by (.,/api/auth/login)

router.post('/register', registerUser);
router.post('/login', loginUser);

 Frontend:
o Add a GET endpoint (e.g.,/api/auth/register) that store user data in
database.
o And fetch that that data in login by (.,/api/auth/login)

const SignUp = () => {

const [userId, setUserId] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [showAlert, setShowAlert] = useState(false);
const [alertMessage, setAlertMessage] = useState('');
const navigate = useNavigate();

const handleSubmit = async (e) => {

e.preventDefault();

// Validate the form fields

if (!userId && !email) {
setAlertMessage('Either User ID or Email must be provided');
setShowAlert(true);
return;
}

// Email format validation

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (email && !emailPattern.test(email)) {
setAlertMessage('Invalid email address');
setShowAlert(true);
return;
}

if (password.length < 6) {
setAlertMessage('Password should be at least 6 characters');
setShowAlert(true);
return;
}
if (password !== confirmPassword) {
 5
7
setAlertMessage('Passwords do not match');
setShowAlert(true);
return;

try {
const response = await axios.post('http://localhost:5000/api/auth/register', { userId, email, password });
console.log('Form submitted:', response.data);
// Show success message and redirect to login page
setAlertMessage('Registration successful!');
setShowAlert(true);
setTimeout(() => {
navigate('/login');
}, 2000); // Redirect after 2 seconds
} catch (error) {
console.error('Error submitting form:', error.response.data);
setAlertMessage(error.response.data.message);
setShowAlert(true);
}
};
const handleBack = () => {
navigate('/');
};
return (
<div className='bggg'>
<img src="/assets/slide3.jpg" alt="" />
<Container className="signup-container">
<Row className="justify-content-md-center">
<Col md={6}>
<div className="signup-form">
<button onClick={handleBack} className="btn btn-secondary mb-3 backbtn">
<i className="fas fa-arrow-left"></i> Back to Home
</button>

<h2 className="mb-4">Signup</h2>
{showAlert && <Alert variant={alertMessage === 'Registration successful!' ? 'success' : 'danger'}>{alertMessage}</Alert>}
<Form onSubmit={handleSubmit}>
<Form.Group controlId="formUserId">
<Form.Label>User ID</Form.Label>
<Form.Control
type="text"
placeholder="Enter User ID"
value={userId}
onChange={(e) => setUserId(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</Form.Group>
<Form.Group controlId="formPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</Form.Group>
<Form.Group controlId="formConfirmPassword">
<Form.Label>Confirm Password</Form.Label>
<Form.Control
type="password"
placeholder="Confirm Password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
/>
</Form.Group>
 5
8
<Button variant="primary" type="submit">
Signup
</Button>
</Form>

</div>
</Col>
</Row>
</Container>
</div>
);
};

export default SignUp;

try {
const response = await axios.post('http://localhost:5000/api/auth/login', { userId, email, password });

console.log('Login response:', response.data);

if (response.data.token) {
localStorage.setItem('authToken', response.data.token);
localStorage.setItem('userId', response.data.userId || userId);
setAlertMessage('Login successful!');
setShowAlert(true);
setIsLoading(false);
setTimeout(() => {
navigate('/dashboard'); // Redirect to the dashboard
}, 2000); // Redirect after 2 seconds
} else {
setAlertMessage('Unexpected response from server');
setShowAlert(true);
setIsLoading(false);
}
} catch (error) {
console.error('Error logging in:', error.response ? error.response.data : error.message);
setAlertMessage(error.response && error.response.data.msg ? error.response.data.msg : 'Server error');
setShowAlert(true);
setIsLoading(false);
}
};

Technologies Used:

Node.js with Express:

1. Use Express for server-side logic and routing.

2. Utilize middlewares like express-validator for input validation and
morgan for logging.

MongoDB with Mongoose:

1. Define schemas for users and rooms, and use Mongoose for database
interactions.
 5
9

Bootstrap and CSS:

1. Use Bootstrap and React-bootstrap for responsive design and custom CSS
for styling components.

Version Control:

1. Use Git for version control, with branches for features, and maintain the
project on GitHub.

This version aligns with your project, focusing on the core features like room
management, user authentication, and filtering.
 6
0

1. Single Responsibility Principle (SRP)

Definition: A class should have only one reason to change, meaning it should have
only one job or responsibility.

Application in Your Project:

 User Management: Have separate modules or classes for different user-related
functionalities. For example, the AuthController handles only
authentication tasks like login and registration, while another module, like
UserProfileService, manages user profile details such as updating the
user’s contact information.
 Room Management: Ensure that the RoomService class focuses solely on
room-related operations, such as creating, updating, or fetching room details.
Avoid mixing unrelated responsibilities, such as filtering rooms or handling user
data, within this class.

2. Open/Closed Principle (OCP)

Definition: Software entities (such as classes, modules, and functions) should be open
for extension but closed for modification.

Application in Your Project:

 Room Filters: To add new filters (like filtering by proximity to a location or by

room amenities), create new filter classes that extend a base filter class without
altering the existing filter logic. For example, if you have a RoomFilter class,
you can extend it to create PriceFilter, LocationFilter, or
RoomTypeFilter classes.
 Room Types: If in the future, you need to support new room types (e.g., shared
rooms or luxury rooms), you can extend a base Room class without modifying
the existing room types like SingleRoom or DoubleRoom.
 6
1

3. Liskov Substitution Principle (LSP)

Definition: Objects of a superclass should be replaceable with objects of a subclass

without altering the correctness of the program.

Application in Your Project:

 Room Types: Ensure that if you have a base Room class and subclasses like
SingleRoom or DoubleRoom, any part of your system that works with Room
can also work with these subclasses without issues. For example, a function that
calculates the rent or displays room details should work regardless of whether it
is dealing with a SingleRoom or a DoubleRoom.
 Filtering: If you have a base Filter class and specific filters like
LocationFilter and PriceFilter, ensure that the filtering mechanism
can use any filter subclass interchangeably.

4. Interface Segregation Principle (ISP)

Definition: Clients should not be forced to depend on interfaces they do not use.

Application in Your Project:

 Room Interfaces: Instead of a large interface that handles all room operations,
break it down into smaller interfaces. For example, separate RoomCreation,
RoomUpdate, and RoomRetrieval interfaces. This way, different parts of
your system only depend on the specific interface they need.
 User Management: If you have an interface for user operations, break it down
so that different functionalities like authentication (Authenticator) and
profile management (ProfileManager) are separate. This avoids forcing a
class to implement methods it doesn’t need.

5. Dependency Inversion Principle (DIP)

Definition: High-level modules should not depend on low-level modules. Both should
depend on abstractions. Abstractions should not depend on details. Details should
depend on abstractions.

Application in Your Project:

 6
2

 Service Layer: Instead of having your RoomList component directly interact

with a RoomRepository for fetching room data, create an abstract interface
like IRoomRepository. The RoomList component can then depend on this
interface. This allows you to switch out the RoomRepository implementation
(e.g., switching from a MongoDB-based implementation to one using a different
database) without affecting the RoomList component.
 Dependency Injection: Apply dependency injection to pass services like
AuthService and RoomService to your components or controllers. This
ensures your components depend on abstractions (interfaces) rather than concrete
implementations, making it easier to modify and test your code.

By applying these principles, your project will become more modular and easier to
maintain, ensuring that each part of your system is well-defined and adaptable to
changes in the future.
 6
3

Project Structure

Room Rental
Project Strucure:

Frontend Strucure:The frontend directory contains the client-side code and is

responsible for the user interface and interaction with the backend APIs.
src

Purpose: Contains all source code for the React application.

components

 Purpose: Contains reusable React components.

 Files/Classes:
 Navbar.jsx: Navigation bar component.
 RoomCard.jsx: Displays individual room information.

pages

 Purpose: Contains React components for different pages or views.

 Files/Classes:
 HomePage.jsx: The main landing page component.
 6
4

 RoomListPage.jsx: Displays a list of rooms.

hooks

 Purpose: Contains custom React hooks.

 Files/Classes:
 useAuth.js: Custom hook for authentication-related logic.
 useFetch.js: Custom hook for fetching data from APIs.

context

 Purpose: Contains React context providers for global state

management.
 Files/Classes:
 AuthContext.js: Provides authentication state and
functions.
 RoomContext.js: Provides room-related state and functions.

styles

 Purpose: Contains CSS or styled-components for styling the

application.
 Files/Classes:
 App.css: Global styles for the application.
 RoomCard.css: Styles specific to the RoomCard component.

services

 Purpose: Contains services for interacting with backend APIs.

 Files/Classes:
 apiService.js: Functions for making API calls.
 authService.js: Functions related to authentication.

App.js

 Purpose: The main application component that sets up routing and

global providers.
 6
5

public

o Purpose: Contains static assets such as images and the HTML file.
o Files/Classes:

 index.html: The main HTML file for the application.

 logo.png: Static assets like images.
 6
6

2.Back-end Folder strucure:

The backend directory contains the server-side code and is responsible for handling
API requests, interacting with the database, and managing application logic.
config

o Purpose: Contains configuration files and environment variables.

o Files/Classes:
 dbConfig.js: Configures database connections and settings.

controllers

o Purpose: Contains business logic and handles requests from routes.

o Files/Classes:
 userController.js: Manages user-related operations (e.g.,
registration, login).
 uploadController.js: Handles operations related to room
listings and details.
models

o Purpose: Defines Mongoose schemas and models for MongoDB.

o Files/Classes:
 User.js: Schema and model for user data.
 Room.js: Schema and model for room data.

routes

o Purpose: Defines the API endpoints and maps them to controller functions.
o Files/Classes:
 userRoutes.js: Routes related to user actions.
 uploaRoutes.js: Routes related to room listings and interactions.
 6
7

middlewares

o Purpose: Contains middleware functions for request processing and

validation.
o Files/Classes:
 authMiddleware.js: Handles authentication and authorization
checks.
utils

o Purpose: Provides utility functions and helpers used across the application.
o Files/Classes:
 sendEmail.js: Used to send email through nodmailer.

server.js

o Purpose: The main entry point of the application, sets up the server and
connects to the database.
 6
8

Step-1 Create Schema

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({

userId: {
type: String,
required: true,
unique: true,
trim: true,
},
email: {
type: String,
required: true,
unique: true,
trim: true,
lowercase: true,
validate: {
validator: function(v) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); // Basic email format validation
},
message: props => `${props.value} is not a valid email address!`
}
},
password: {
type: String,
required: true,
minlength: 6,
},
resetPasswordToken: String,
resetPasswordExpire: Date
}, { timestamps: true });

// Hash password before saving user

userSchema.pre('save', async function(next) {
if (!this.isModified('password')) return next();

try {
const salt = await bcrypt.genSalt(10);
this.password = await bcrypt.hash(this.password, salt);
console.log('Password Hash:', this.password); // Debugging: log the hashed password
next();
} catch (err) {
next(err);
}
});

// Compare hashed password

userSchema.methods.comparePassword = async function(candidatePassword) {
const isMatch = await bcrypt.compare(candidatePassword, this.password);
console.log('Password Match:', isMatch); // Debugging: log the result of password comparison
return isMatch;
};

const User = mongoose.model('users', userSchema);//you changed schema name

module.exports = User;

Step2 Create controller and middleware:

 6
9

// Register User
const registerUser = async (req, res) => {
const { userId, email, password } = req.body;

try {
// Check if user already exists
let user = await User.findOne({ $or: [{ email }, { userId }] });
if (user) {
return res.status(400).json({ msg: 'User already exists' });
}

// Create a new user

user = new User({
userId,
email: email.toLowerCase(),
password
});

// Hash the password before saving

await user.save();

// Automatically log in the user after registration (optional)

const payload = {
user: {
id: user._id,
userId: user.userId,
email: user.email
}
};

const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' });

res.json({ token });

} catch (err) {
console.error(err.message);
res.status(500).send('Server error');
}
};

// Login User
const loginUser = async (req, res) => {
const { userId, email, password } = req.body;

try {
const normalizedEmail = email ? email.toLowerCase().trim() : null;
const normalizedUserId = userId ? userId.toLowerCase().trim() : null;

let user = await User.findOne({

$or: [{ email: normalizedEmail }, { userId: normalizedUserId }]
});

if (!user) return res.status(400).json({ msg: 'Invalid credentials' });

// Debug: Log the stored password hash and the entered password
console.log('Stored Hashed Password:', user.password);
console.log('Entered Password:', password);

// Compare the password entered by the user with the hashed password stored in the database
const isMatch = await user.comparePassword(password);

// Debug: Log whether the passwords matched

console.log('Password Match:', isMatch);

if (!isMatch) return res.status(400).json({ msg: 'Incorrect password' });

const payload = {
user: {
 7
0

id: user._id,
userId: user.userId,
email: user.email
}
};

const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '1h' });

res.json({ token });

} catch (err) {
console.error('Login Error:', err.message);
res.status(500).send('Server error');
}
};

module.exports = { registerUser, loginUser };

Step3 Create routes:

const express = require('express');
const router = express.Router();
const { registerUser, loginUser } = require('../controllers/authController');

router.post('/register', registerUser);
router.post('/login', loginUser);

module.exports = router;

Step4:Update server.js
mongoose.connect(process.env.MONGODB_URI || 'mongodb://127.0.0.1:27017/mydb', {
useNewUrlParser: true,
useUnifiedTopology: true,
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.error('Database connection error:', err));

// Routes
// app.post('/register', registerUser);
// app.post('/login', loginUser);
app.use('/api/auth', authRoutes);
7
1
 7
2

Step 1: Define Models

1.Now we create another Module for(Rooms Details)-

Define the schema for your room rental details using Mongoose in the models directory. This schema outlines the
structure of the data you will be storing in your MongoDB database

// models/UploadDetail.js
const mongoose = require('mongoose');

const uploadDetailSchema = new mongoose.Schema({

userId: { type: String, ref: 'User' },
name: {
type: String,
required: true
},
mobileNumber: {
type: String,
required: true
},
typeOfRooms: {
type: [String],
required: true
},
singleRoomRange: {
type: String,

},
doubleRoomRange: {
type: String,

},
facilities: {
type: [String],
enum: ['Almirah', 'Fan', 'Water', 'Washroom', 'Kitchen', 'Geyser', 'Wifi', 'Furniture', 'Balcony', 'AC', 'Parking']
},
near: {
type: String,
required: true
},
distanceFromRoad: {
type: String
},
availableFor: {
type: String,

},
currentlyAvailable: {
type: Boolean,
},
description: {
type: String
},
images: {
type: [String]
}
});

module.exports = mongoose.model('UploadDetails', uploadDetailSchema)

 7
3

Step 2: Update Application Context

In a MongoDB project, you manage the database connection and operations directly in your application server.

//Server.js

const express = require('express');

const mongoose = require('mongoose');
const app = express();
const uploadDetailRoutes = require('./routes/uploadDetailRoutes');
const dotenv = require('dotenv');

dotenv.config();

// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.error(err));

// Middleware
app.use(express.json());
app.use('/uploads', express.static('uploads'));

// Routes
app.use('/api/upload-details', uploadDetailRoutes);

// Start the server

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Step-3 Create Controller:-

onst UploadDetail = require('../models/UploadDetail');
const User = require('../models/User');

// Handle form submission and image upload

exports.createUploadDetail = async (req, res) => {
try {
if (!req.user) {
return res.status(401).json({ msg: 'Unauthorized' });
}

const userId = req.user.userId;

let { name, mobileNumber, typeOfRooms, singleRoomRange, doubleRoomRange, facilities, near, distanceFromRoad, availableFor,
currentlyAvailable, description } = req.body;

// Ensure typeOfRooms and facilities are arrays

if (typeof typeOfRooms === 'string') {
typeOfRooms = typeOfRooms.split(',').map(item => item.trim());
}

if (typeof facilities === 'string') {

facilities = facilities.split(',').map(item => item.trim());
}

const images = req.files ? req.files.map(file => file.filename) : [];

 7
4

const uploadDetail = new UploadDetail({

userId,
name,
mobileNumber,
typeOfRooms:JSON.parse(typeOfRooms), // Now guaranteed to be an array
singleRoomRange,
doubleRoomRange,
facilities: JSON.parse(facilities), // Now guaranteed to be an array
near,
distanceFromRoad,
availableFor,
currentlyAvailable,
description,
images
});

await uploadDetail.save();
res.status(201).json({ message: 'Details uploaded successfully!', data: uploadDetail });
} catch (error) {
console.error('Error uploading details:', error);
res.status(500).json({ message: 'Error uploading details', error: error.message });
}
};

exports.handleall= async (req, res) => {

try {
const uploads = await UploadDetail.find();
res.json(uploads);
} catch (err) {
res.status(500).json({ msg: 'Server error' });
}
}

// Retrieve user uploads based on userId or email

// Retrieve user uploads based on userId or email
// Retrieve user uploads based on userId or email
exports.getUserUploads = async (req, res) => {
const { userId, email } = req.query;

if (!userId && !email) {

return res.status(400).json({ msg: 'User ID or Email is required' });
}

try {
 7
5
c
let user;

if (userId) {
// If you have a string-based userId, find the corresponding user
user = await User.findOne({ userId });
} else if (email) {
user = await User.findOne({ email });
}

if (!user) return res.status(404).json({ msg: 'User not found' });

// Query based on the string userId

const uploads = await UploadDetail.find({ userId: user.userId });
res.json(uploads);
} catch (err) {
console.error(err.message);
res.status(500).send('Server error');
}
};
exports.updateUploadDetail = async (req, res) => {
try {
const { id } = req.params;
const { userId, ...updateData } = req.body;

if (req.files) {
updateData.images = req.files.map(file => file.filename);
}

const uploadDetail = await UploadDetail.findOneAndUpdate({ _id: id, userId }, updateData, { new: true });

if (!uploadDetail) return res.status(404).json({ msg: 'Upload not found' });

res.json({ message: 'Details updated successfully!', data: uploadDetail });

} catch (error) {
console.error('Error updating details:', error);
res.status(500).json({ message: 'Error updating details', error: error.message });
}
};

// Delete upload details

exports.deleteUploadDetail = async (req, res) => {
try {
const { id } = req.params;
const { userId } = req.body;

const uploadDetail = await UploadDetail.findOneAndDelete({ _id: id, userId });

if (!uploadDetail) return res.status(404).json({ msg: 'Upload not found' });

res.json({ message: 'Upload deleted successfully!' });

} catch (error) {
console.error('Error deleting details:', error);
res.status(500).json({ message: 'Error deleting details', error: error.message });
}
};

// Retrieve filtered room details based on type

exports.getRoomsByType = async (req, res) => {
const { type } = req.query;

try {
const rooms = await UploadDetail.find({ typeOfRooms: type });
res.json(rooms);
} catch (err) {
res.status(500).json({ msg: 'Server error' });
 7
6

Step 4: Create Routes

Define API routes to handle CRUD operations for UploadDetail using Express.

// routes/uploadRoutes.js
const express = require('express');
const router = express.Router();
const uploadController = require('../controllers/uploadController');
const authMiddleware = require('../middlewares/authMiddleware');
const uploadMiddleware = require('../middlewares/uploadMiddleware');

// Handle form submission and image upload

router.post('/', authMiddleware, uploadMiddleware, uploadController.createUploadDetail);

// Get all uploads

router.get('/', uploadController.handleall);

// Get user-specific uploads

router.get('/user', authMiddleware, uploadController.getUserUploads);

// Get rooms by type

router.get('/type', uploadController.getRoomsByType);

// Update specific upload

router.put('/:id', authMiddleware, uploadMiddleware, uploadController.updateUploadDetail);

// Delete specific upload

router.delete('/:id', authMiddleware, uploadController.deleteUploadDetail);

module.exports = router;

Uploaddetails:-
 7
7

(RoomList.jsx)
import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import axios from 'axios';
import { Card, Carousel, Col, Row, Container, Form, Button } from 'react-bootstrap';
import Modal from 'react-modal';
import '../styles/RoomList.css';

Modal.setAppElement('#root');

const RoomList = () => {

const location = useLocation();
const [rooms, setRooms] = useState([]);
const [filteredRooms, setFilteredRooms] = useState([]);
const [selectedRoom, setSelectedRoom] = useState(null);
const [modalStyle, setModalStyle] = useState({});
const [filters, setFilters] = useState({
near: '',
minRent: '',
maxRent: ''
});

// Extract query parameters

const queryParams = new URLSearchParams(location.search);
const selectedRoomType = queryParams.get('type') || '';
const nearQuery = queryParams.get('near') || '';

// Fetch rooms from API

useEffect(() => {
const fetchRooms = async () => {
try {
let url = 'http://localhost:5000/api/rent-card';
if (selectedRoomType) {
url += `?type=${selectedRoomType}`;
}
const res = await axios.get(url);
setRooms(res.data);
applyFilters(res.data); // Apply filters once rooms are fetched
} catch (err) {
console.error('Error fetching rooms:', err);
}
};

fetchRooms();
}, [selectedRoomType]);

// Define applyFilters function

const applyFilters = (data) => {
const { near, minRent, maxRent } = filters;

const filtered = data.filter(room => {

const nearMatch = room.near.toLowerCase().includes(near.toLowerCase());

// Handle rent range filtering for both single and double room ranges
const rentMatch = (
(minRent === '' || (room.singleRoomRange && parseInt(room.singleRoomRange) >= parseInt(minRent)) ||
(room.doubleRoomRange && parseInt(room.doubleRoomRange) >= parseInt(minRent))) &&
(maxRent === '' || (room.singleRoomRange && parseInt(room.singleRoomRange) <= parseInt(maxRent)) ||
(room.doubleRoomRange && parseInt(room.doubleRoomRange) <= parseInt(maxRent)))
);

const typeMatch = selectedRoomType ? room.typeOfRooms.includes(selectedRoomType) : true;

return nearMatch && rentMatch && typeMatch && room.currentlyAvailable;

});

setFilteredRooms(filtered);
};
 7
8

// Apply filters when rooms or filter criteria change

useEffect(() => {
applyFilters(rooms);
}, [rooms, filters]);

// Update filters based on query parameters

useEffect(() => {
setFilters(prevFilters => ({
...prevFilters,
near: nearQuery
}));
}, [nearQuery]);
const handleShowDetails = (room, event) => {
const cardRect = event.currentTarget.getBoundingClientRect();
const modalWidth = 500;
const modalHeight = 600;

let top = cardRect.top + window.scrollY;

let left = cardRect.left + window.scrollX;

top -= modalHeight / 2;
const rightPadding = 20;
if (left + modalWidth + rightPadding > window.innerWidth) {
left = window.innerWidth - modalWidth - rightPadding;
}
if (left < 20) {
left = 20;
}
if (top < 20) {
top = 20;
}

setSelectedRoom(room);
setModalStyle({
top: `${top}px`,
left: `${left}px`,
transform: 'translate(0, 0)',
position: 'absolute',
width: `${modalWidth}px`,
height: `${modalHeight}px`,
zIndex: 1000,
margin: '10px',
});
};

const handleCloseModal = () => {

setSelectedRoom(null);
};

const handleFilterChange = (e) => {

const { name, value } = e.target;
setFilters(prevFilters => ({
...prevFilters,
[name]: value
}));
};

useEffect(() => {
applyFilters(rooms);
}, [filters, selectedRoomType]);

return (
<Container>
<Row className="mb-4">
<Col md={12}>
<Form>
<Form.Group controlId="filterNear">
<Form.Label>Near</Form.Label>
<Form.Control
type="text"
 7
9
name="near"
value={filters.near}
onChange={handleFilterChange}
placeholder="Enter area..."
/>
</Form.Group>
<Form.Group controlId="filterMinRent">
<Form.Label>Min Rent</Form.Label>
<Form.Control
type="number"
name="minRent"
value={filters.minRent}
onChange={handleFilterChange}
placeholder="Enter minimum rent..."
/>
</Form.Group>
<Form.Group controlId="filterMaxRent">
<Form.Label>Max Rent</Form.Label>
<Form.Control
type="number"
name="maxRent"
value={filters.maxRent}
onChange={handleFilterChange}
placeholder="Enter maximum rent..."
/>
</Form.Group>
<Button
variant="primary"
onClick={() => applyFilters(rooms)}
className='filterbutton'
>
Apply Filters
</Button>
</Form>
</Col>
</Row>
<Row>
{filteredRooms.length === 0 ? (
<p className="no-data-message">
🛑 No rooms found! 🛑<br />
We couldn’t find any rooms that match your search. You might want to explore other categories or check back later. 🛑
</p>
) : (
filteredRooms.map((room, index) => (
<Col key={index} sm={12} md={6} lg={4} xl={3}>
<Card className="mb-4 room-card">
{room.images && room.images.length > 0 ? (
<Carousel>
{room.images.map((image, imgIndex) => (
<Carousel.Item key={imgIndex}>
<img
src={`http://localhost:5000/uploads/${image}`}
alt={`Room ${imgIndex + 1}`}
className="d-block w-100"
onClick={(e) => handleShowDetails(room, e)}
/>
</Carousel.Item>
))}
</Carousel>
) : (
<div className="no-image-placeholder">No images available</div>
)}
<Card.Body>
<Card.Title>{room.name}</Card.Title>
<Card.Text>
<strong>Type of Room:</strong> {room.typeOfRooms.join(', ')}<br />
{room.singleRoomRange && <><strong>Single Room Range:</strong> {room.singleRoomRange}<br /></>}
{room.doubleRoomRange && <><strong>Double Room Range:</strong> {room.doubleRoomRange}<br /></>}
</Card.Text>
{room.currentlyAvailable ? (
<Button
variant="success"
className="blinking-button available"
onClick={(e) => handleShowDetails(room, e)}
 8
0
>
Currently Available
</Button>
) : (
<Button
variant="secondary"
className="not-available"
disabled
>
Not Available
</Button>
)}
<Button variant="primary" onClick={(e) => handleShowDetails(room, e)} className='fulldetail'>
Full Detail
</Button>
</Card.Body>
</Card>
</Col>
))
)}
</Row>

{selectedRoom && (
<Modal
isOpen={!!selectedRoom}
onRequestClose={handleCloseModal}
contentLabel="Room Details"
className="ReactModal__Content"
overlayClassName="ReactModal__Overlay"
style={{
content: modalStyle,
}}
>
<button className="modal-close" onClick={handleCloseModal} style={{
position: 'absolute',
top: '10px',
right: '10px',
background: 'transparent',
border: 'none',
fontSize: '20px',
color: '#fff',
cursor: 'pointer'
}}>✖</button>
<h2>{selectedRoom.name}</h2>
{selectedRoom.images && selectedRoom.images.length > 0 && (
<Carousel>
{selectedRoom.images.map((image, index) => (
<Carousel.Item key={index}>
<img
src={`http://localhost:5000/uploads/${image}`}
alt={`Room Image ${index + 1}`}
className="d-block w-100"
/>
</Carousel.Item>
))}
</Carousel>
)}
<p><strong>Mobile No:</strong> {selectedRoom.mobileNumber}</p>
<p><strong>Type of Room:</strong> {selectedRoom.typeOfRooms.join(', ')}</p>
<p><strong>Single Room Range:</strong> {selectedRoom.singleRoomRange}</p>
<p><strong>Double Room Range:</strong> {selectedRoom.doubleRoomRange}</p>
<p><strong>Facilities:</strong> {selectedRoom.facilities.join(', ')}</p>
<p><strong>Near:</strong> {selectedRoom.near}</p>
<p><strong>Distance From Road:</strong> {selectedRoom.distanceFromRoad}</p>
<p><strong>Available For:</strong> {selectedRoom.availableFor}</p>
<p><strong>Description:</strong> {selectedRoom.description}</p>
</Modal>
)}
</Container>
);
};

export default RoomList;

 8
1

Output:-

Filter Result(for luxrious room):-

 8
2

Testing

Testing all pages of a room rental management system is crucial to ensure the
website functions correctly and provides a seamless user experience. This process
involves conducting various types of tests for each page to validate functionality,
usability, performance, and security.

1. Home Page

Tests:

 Functional Testing: Verify that the navigation menus, search bar, and
featured room listings work as expected.
 Usability Testing: Assess the layout, design, and overall ease of use.
 Performance Testing: Measure page load times and responsiveness under
different conditions.
 Security Testing: Ensure the page is secure against common vulnerabilities.

2. User Registration/Login Page

Tests:

 Functional Testing: Validate the registration and login functionality,

including correct error messages for invalid inputs.
 Usability Testing: Ensure the forms are user-friendly and easy to navigate.
 Security Testing: Test for vulnerabilities such as SQL injection and ensure
passwords are securely encrypted.

3. Room Listing Page

Tests:
 Functional Testing: Verify that rooms are listed correctly, and that filtering
and sorting options work as intended.
 Usability Testing: Check the layout, ease of navigation, and intuitiveness of
the interface.
 Performance Testing: Measure the page load time when displaying a large
number of rooms.
 8
3

4. Room Detail Page

Tests:

 Functional Testing: Ensure room details, images, and booking options are
displayed correctly.
 Usability Testing: Verify that the information is clear, and the booking button
is easy to find and use.
 Performance Testing: Measure page load times for different room listings.

5. User Dashboard Page

Tests:

 Functional Testing: Validate that users can view, edit, and delete their
uploaded room details.
 Usability Testing: Ensure the dashboard is easy to navigate and manage for
users.
 Performance Testing: Measure performance with multiple rooms and user
data loaded.

6. Upload Room Details Page

Tests:
 Functional Testing: Validate that users can successfully upload room details,
including images and other data.
 Usability Testing: Ensure the form is easy to use and understand.
 Security Testing: Verify that the data submitted is properly validated and
stored securely.

8. User Profile Page

Tests:
 Functional Testing: Validate that users can view and update their profile
information.
 Usability Testing: Ensure the profile page is easy to navigate and update.

9. Admin Panel
 8
4

Tests:

 Functional Testing: Validate admin functionalities like managing rooms,

bookings, and user accounts.
 Security Testing: Ensure that only authorized users can access the admin
panel, and verify role-based access control.

10. Contact Us Page

Tests:
 Functional Testing: Ensure that the contact form functions correctly and
messages are sent as expected.
 Usability Testing: Verify that contact information and the form are easy to
find and use.

Conclusion
Developing a room rental website requires careful planning, execution, and
comprehensive testing to ensure a smooth and user-friendly experience. Below is a
summary of key steps and considerations:

Key Steps and Considerations

1. Planning and Analysis

 Market Research: Understand user needs, expectations, and the competitive

landscape.
 Requirements Gathering: Define the functional and non-functional
requirements for the website.
 Feasibility Study: Assess the technical, economic, operational, and legal
feasibility of the project.

2. Design and Development

 User-Centric Design: Create intuitive, responsive, and visually appealing

designs to ensure a positive user experience across all devices.
 8
5

 SOLID Principles: Apply SOLID principles for a maintainable, scalable, and

flexible software architecture.
 Technology Stack: Choose a robust technology stack that supports the
application's needs.

3. Key Features

 User Management: Enable users to register, log in, and manage their profiles.
 Room Listings: Provide detailed information about available rooms, including
images, descriptions, prices, and availability.
 Booking System: Offer a seamless booking process with options to add rooms
to a cart, checkout, and make payments (if applicable).
 Payment Integration: Integrate secure payment gateways to handle
transactions (if applicable).
 Admin Panel: Allow administrators to manage rooms, bookings, and user data
efficiently.
 Contact Us: Include a contact page with a form to help users reach out easily.

4. Testing and Quality Assurance

 Comprehensive Testing: Perform unit testing, integration testing, functional

testing, usability testing, performance testing, security testing, user acceptance
testing (UAT), and regression testing.
 Bug Tracking: Use defect management tools to track and resolve issues
promptly.

5. Deployment and Maintenance

 Deployment Strategy: Deploy the website on reliable and scalable cloud

platforms like AWS, Azure, or Google Cloud.
 Ongoing Maintenance: Regularly update the website with new features,
security patches, and performance enhancements.
 User Feedback: Continuously gather and incorporate user feedback to
improve the website.

This content is aligned with your room rental site and can be included in your
project report to explain the testing approach, key steps, and overall project
considerations.
 8
6

Conclusion

Developing a room rental website involves a multi-dimensional approach,

emphasizing user experience, robust functionality, and scalability. By focusing on
user needs and adhering to best practices, we can create a platform that provides a
seamless and efficient experience for finding and exploring room rental options.

Key Highlights:

SOLID Principles Implementation:

1. Ensures a maintainable and scalable architecture, crucial for future
expansions and ease of maintenance.

Thorough Testing:
1. Guarantees a reliable, secure platform, enhancing user trust and
satisfaction.

User-Centric Design:
1. Focuses on ease of navigation and accessibility, allowing users to find
and explore room options effortlessly.

Future Scope for a Room Rental Website:

To further enhance the functionality and appeal of your room rental platform,
consider the following areas for future development:

Advanced Personalization:

1. AI and Machine Learning: Implement algorithms to analyze user

behavior and preferences, offering personalized room recommendations.
2. Dynamic Filtering: Provide dynamic filters based on user preferences
and previous searches.

Enhanced User Experience:

 8
7

1. Augmented Reality (AR): Integrate AR to offer virtual tours of rooms,

allowing users to preview spaces before making a decision.
2. Voice Search: Incorporate voice search capabilities to improve
accessibility and convenience.

Mobile App Development:

1. Native Mobile Apps: Develop applications for iOS and Android to
reach a wider audience and provide a seamless mobile experience.
2. Offline Functionality: Allow users to access their saved searches and
favorite rooms offline.

Expanded Features:

1. Multi-Room Listings: Allow users to view and compare multiple rooms

in a single view.
2. Last-Minute Listings: Feature special listings or discounts for last-
minute room searches to attract spontaneous users.

Social Integration:

1. Social Sharing: Enable users to share their favorite rooms or searches on

social media platforms.
2. User Reviews and Ratings: Enhance the review system to include
verified reviews and integrate with external review platforms.

Sustainability and Eco-Friendly Options:

1. Green Features: Highlight eco-friendly and sustainable room options to
cater to environmentally conscious users.
2. Carbon Footprint Awareness: Provide tools or information on the
environmental impact of their stay.
 8
8

Improved Customer Support:

1.

1. Chatbots and Virtual Assistants: Implement AI-driven chatbots to

provide instant support and answer queries.
2. Multi-Language Support: Offer support in multiple languages to cater
to a global audience.

Integration with Other Services:

1. Local Experiences: Partner with local businesses to offer additional
services or experiences related to the room rental.
2. Travel Guides: Provide access to travel guides or local
recommendations to enhance the user's stay.

Data Analytics and Insights:

1. User Behavior Analytics: Utilize analytics to gain insights into user

preferences and behaviors, refining marketing strategies and improving
user engagement.
2. Business Intelligence: Implement tools to analyze data on room
availability, user demographics, and market trends.

Security Enhancements:

1. Enhanced Security Measures: Continuously improve security features

to protect user data and ensure compliance with data protection
regulations.
2. Fraud Detection: Implement systems to detect and prevent fraudulent
activities on the platform.
8
9