Simran Report
Simran Report
“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”
CERTIFICATE
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
SIMRAN SHARMA
Roll No-202201504127030
Class: - MCA 4th Sem
6
ACKNOWLEDGEMENT
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.
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.
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.
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
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
TABLE OF DATABASES
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
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:
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:
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. 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.
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
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.
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.
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.Functional Requirements
1.6 Personalization:
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:
Security:
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.
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.
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
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.
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.
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
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
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.6.1 Strengths
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.
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.
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)
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.
Authentication: Uses JWT (JSON Web Tokens) for secure user authentication.
Authorization: Role-based access control to differentiate between admin, user,
and guest access.
7. Security Measures
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
Here is a detailed overview of the data modeling for the Room Rental platform:
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.
If
Register Registered
Login
Back To
Update All Details Login
Stop
3
7
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
These diagrams should give you a clear understanding of how data flows through the
system at different levels.
3
8
1. Product Management
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. The room is listed on the website for users to view and book.
1. Admin Login:
1. Admin logs in and accesses the room management dashboard.
4. Validate Changes:
3
9
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.
3. Confirm Deletion:
1. System prompts for confirmation of deletion.
4. Admin Confirms:
5. Remove Room:
1. System removes the room from the database.
User Registration:
2. Fill in Details:
2. Enter Credentials:
3. Validate Credentials:
4. Create Session/Token:
5. Redirect User:
1. User is redirected to the homepage/dashboard.
4
1
Actors
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:
Browsing Rooms
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:
Customer Support
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
End
4
4
1. Homepage
Objectives:
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.
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:
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.
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
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
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
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');
},
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]
}
});
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);
}
};
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.
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 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." }
];
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>
);
};
fetchRooms();
}, [selectedRoomType]);
// 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)))
);
setFilteredRooms(filtered);
};
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)
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>
);
};
try {
const response = await axios.post('http://localhost:5000/api/auth/login', { userId, email, password });
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:
1. Define schemas for users and rooms, and use Mongoose for database
interactions.
5
9
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
Definition: Software entities (such as classes, modules, and functions) should be open
for extension but closed for modification.
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.
Definition: Clients should not be forced to depend on interfaces they do not use.
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.
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:
pages
hooks
context
styles
services
App.js
public
o Purpose: Contains static assets such as images and the HTML file.
o Files/Classes:
The backend directory contains the server-side code and is responsible for handling
API requests, interacting with the database, and managing application logic.
config
controllers
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: 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
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);
}
});
// 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' });
}
// 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;
// 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);
const payload = {
user: {
7
0
id: user._id,
userId: user.userId,
email: user.email
}
};
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
// models/UploadDetail.js
const mongoose = require('mongoose');
},
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]
}
});
In a MongoDB project, you manage the database connection and operations directly in your application server.
//Server.js
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);
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 });
}
};
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 (req.files) {
updateData.images = req.files.map(file => file.filename);
}
const uploadDetail = await UploadDetail.findOneAndUpdate({ _id: id, userId }, updateData, { new: true });
try {
const rooms = await UploadDetail.find({ typeOfRooms: type });
res.json(rooms);
} catch (err) {
res.status(500).json({ msg: 'Server error' });
7
6
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');
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');
fetchRooms();
}, [selectedRoomType]);
// 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)))
);
setFilteredRooms(filtered);
};
7
8
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',
});
};
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>
);
};
Output:-
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.
Tests:
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
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.
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.
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.
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:
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:
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.
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
Key Highlights:
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.
To further enhance the functionality and appeal of your room rental platform,
consider the following areas for future development:
Advanced Personalization:
Expanded Features:
Social Integration:
1.
Security Enhancements: