Professional Documents
Culture Documents
Project Report EASYSTAY
Project Report EASYSTAY
Project Report EASYSTAY
Project Report
On
EASYSTAY
Submitted by
BACHELOR OF TECHNOLOGY
In
I
DEPARTMENT OF
CERTIFICATE
Signature:
II
DEPARTMENT OF
DECLARATION
Signature:
Signature:
III
ACKNOWLEDGEMENT
IV
ABSTRACT
Additionally, the system includes features for users to leave reviews, rate
accommodations, and manage bookings. By integrating geolocation services,
EasyStay ensures that users can find accommodations that are conveniently
located and meet their specific needs.
V
----- 11
----- 19
vi
VII
LIST OF FIGURES
VIII
CHAPTER-1
1
INTRODUCTION
Welcome to EASYSTAY a revolutionary platform for hassle-free housing searches. The
challenges people face in finding suitable accommodations, Difficulties in finding quality
rooms, flats, hostels, and PG’s.
2- Customer Attraction: Social media app for easystay provide the facility to post photos
of the products and description of the product to attract the customers.
3- Business expansion: Since this app is useful for increasing the sales of products of the
vendors hence it helps to increase the business by providing good amount of funds in
form of profits by sales of other products.
4- Advertise of Rooms: There is not so much good applications or platforms for the for
the finding of room in short time. This application provides fast and easy way to find
the best room in the area where we can rented room in fast and secure way. It is also
recommended the best place in the living areas.
5- Efficient Search: Implement an efficient and effective search mechanism to save users
time.
6- User Experience: Enhance user experience through a modern and intuitive interface
9- Prepare the Property: Ensure the property is clean, furnished, and meets safety
standards.
10- Set Rental Terms: Decide on the rent amount, security deposit, and included
12- NoBroker: social media, or local advertising to reach the relevant tenants.
2
1.1 - OBJECTIVES
To offer hosts a convenient way to list their rooms for rent and manage bookings.
To enhance the overall experience of both guests and hosts through efficient
communication and streamlined processes
.
For Gurst
User Registration/Login: Guests can create an account or log in using existing
credentials.
Search and Filters: Users can search for accommodations based on location, price
range, amenities, and other preferences.
Booking and Payment: Guests can book rooms securely through the app and make
payments using various methods, including credit/debit cards or digital wallets.
For Hosts:
Listing Management: Hosts can easily create, edit, and manage listings for their
available rooms.
Booking Management: Hosts can view, accept, or reject booking requests from gues
General features
User Reviews and Ratings: Incorporate features for user reviews and ratings to
ensure transparency and reliability
3
1.2 - PROBLEM DEFINITION:
Many individuals, especially students and professionals, struggle to find suitable and
affordable accommodation in their preferred locations. This challenge is exacerbated by
various factors that make the search process cumbersome and frustrating.
PAIN POINTS
Limited Options
Time-Consuming Searches
Inefficient Search Tools: Existing platforms often lack advanced search and
filtering options, making it difficult to quickly find properties that meet specific
criteria.
Fragmented Information: Users need to visit multiple websites and platforms to
gather comprehensive information, leading to a scattered and prolonged search
process
Quality Concerns
Inaccurate Listings: Many listings do not provide accurate or complete
information, leading to mismatched expectations.
Poor Property Conditions: There is often a discrepancy between the advertised
quality of the property and its actual condition, resulting in unpleasant surprises.
Unverified Reviews: Reviews and ratings on many platforms are not always
reliable or verified, making it hard to trust the feedback provided .
Financial Transparency
Hidden Costs: Many listings fail to disclose all associated costs upfront, such as
utility bills, maintenance fees, and other hidden charges, leading to financial
strain.
Inconsistent Pricing: There is often a lack of standardization in pricing, with
significant variations for similar properties, creating confusion and potential
exploitation
4
1.3 – EXISTING SYSTEM DESCRIPTION
a. Before the development of Easy Stay, travelers relied on various methods to find and
book accommodations, including:
b. Manual Search: Travelers would manually search for accommodations through search
engines, travel websites, or contacting hotels directly. This process could be time-consuming
and often involved comparing prices and amenities across multiple platforms.
c. Travel Agencies: Some travelers preferred to use traditional travel agencies to assist
with booking accommodations. However, this method typically involved additional fees
and limited flexibility in terms of available options.
f. While these methods served their purpose, they often fell short in terms of efficiency,
convenience, and user experience. EasyStay seeks to address these shortcomings by
offering a modern, user-centric platform that streamlines the process of finding and
booking accommodations for travelers worldwide.
g. The existing reference application are based on the static document concept. And
commonly these type of application are available on online.ie, online type. The content
of the application is depend on the administrator, so thus make a problem that the
pupation’s are not made directly by user.
h. There is also another problem behind that online concept that the personal information
such like text book name, details its documents are available on the existing system. This
application can overcome this problem by using system database.
i. Now user can overcome these problems by using system database and customize as per
user requirement. The objective of this application is to allow every user to edit and find
out the details and documents. It’ll also facility store new documents. And it can retrieve
within few seconds. Overall, it’ll make an easier way to access all documents and details
by using the USER application. The administrator privilege is used to update the
application contained dynamic documents. Thus it overcome all the drawback of the
existing system. It make the availability of wanted documents any time.
5
1.4 - PROPOSED SYSTEM
c. Intuitive navigation and clear layout enhance usability, ensuring that users can quickly
find the information they need and complete bookings with minimal effort
d. Advanced Search and Filtering: The application offers advanced search and filtering
options, allowing users to specify their preferences based on location, dates, price range,
accommodation type, amenities, and more.
e. Smart search algorithms provide relevant results tailored to each user's preferences and
requirements, minimizing the time spent on browsing through irrelevant listings.
g. Users can choose from hotels, hostels, vacation rentals, home stays, boutique
accommodations, and more, ensuring that there is something suitable for every traveler
and budget.
h. Secure Booking and Payment Processing: The application implements secure booking
and payment processing mechanisms to ensure the confidentiality and integrity of user
data and financial transactions.
i. Integration with reputable payment gateways such as Stripe or PayPal enables users to
make seamless and secure payments using their preferred payment methods.
k. Users can make informed decisions based on the experiences shared by other travelers,
fostering trust and confidence in the platform.
6
CHAPTER-2
7
SYSTEM ANALYSIS
2.1- OBJECTIVES
2.2 - PHASES:
System Development Life Cycle (SDLC) mainly consists of the following 9
phases which can be detailed: -
1. Preliminary Investigation
2. Feasibility Study
3. Request Approval
4. System Analysis
5. System Design
6. Coding
7. Testing
8. Implementation
9. Maintenance
8
2.2.1 – PRELIMINARY INVESTIGATION
a) The system development life cycle begins with this phase. During this
stage, we typically ascertain the client's needs—what precisely is the client
looking for? The needs, goals, and scope of the system must be
understood before any development can begin.
b) b) This preliminary investigation report's goal is to assess whether creating
the EasyStay app is feasible. The goal of this application is to make the
process of looking for and reserving short-term lodging easier. The project
background, problem statement, objectives, methodology, findings,
requirements analysis, alternative solutions, suggestions, and conclusion
will all be covered in this report..
9
2.2.2 – FEASIBILITY STUDY
1. The second phase of the system development life cycle is the feasibility
study. In every software process, things are never difficult at first. Nothing is
actually possible with infinite time and resources. However, that is not true.
Thus, practically speaking, we have a limited amount of time and resources
to work with. Thus, the following factors need to be taken into account for
the system to be feasible. The purpose of the feasibility study is to
determine the viability of the proposed system.
2. The system that has been designed and developed is the one that has been
determined to be the best based on the criteria. The feasibility study
accounts for the risks associated with project development in advance. As a
result, we must conduct a feasibility study during this phase, which involves
testing the website's functionality, impact on the company, ability to satisfy
user needs, and efficient use of resources. We do the feasibility study for
website to analyze the risks, costs and benefits relating to economics,
technology and user organization. Various forms of feasibility exist based on
the aspects they address. Among those imported are:
3. Technical Feasibility: One significant finding from the initial research is this.
It consists of the following queries:
Can Project Bed One be completed using the current tools, software,
and manpower available?
In the event that technology is needed, what avenues for development
exist?
5. Legal Feasibility: It deals with the question related to the legal issues. It
comprises of the following questions:
10
2.2.3 - REQUEST APPROVAL
The third stage of the system development lifecycle is request approval. The
stage of request approval is when all requirements that will be included in
the system are specified. An agreement of sorts exists between the client
and the software development company regarding the approval of the
request. The specified requirements should be accepted by both parties.
This project approval report describes how the EasyStay application was
created to offer a smooth platform for making last-minute hotel
reservations. The project's history, goals, scope, feasibility study, project
plan, risk assessment, benefits analysis, and recommendations are all
covered in the report. The objective is to obtain authorization for the
project's initiation while emphasizing its possible benefits and feasibility..
The need to address inefficiencies in the short-term rental market gave rise
to the idea for EasyStay. The smooth user experience, secure transactions,
and effective property management tools for hosts are areas where current
platforms frequently fall short. EasyStay uses cutting-edge technology and a
user-centric design philosophy to try and close these gaps...
11
2,2,4 – SYSTEM ANALYSIS
Phase II is system analysis, which comes after request approval. During this
stage, we typically examine the entire system that needs to be constructed.
The critical component of the SDLC is system analysis.
An inventive app called EasyStay was created to make the process of locating
and reserving short-term lodging easier and more enjoyable. The application
seeks to ensure a safe and user-friendly environment while offering a smooth
interface for users to search for properties, make reservations, and manage
their bookings.
User Authentication: The ability for users to create accounts, log in, and edit
their profiles is a must. Property Listings: Property owners ought to be able to
list their properties with comprehensive details, images, and costs. Advanced
search filters (such as location, price range, amenities, etc.) are necessary for
search and filter users. Reservation administration Reservations should be
easy for users to make, amend, and cancel. Payment Gateway Integration for
managing transactions using safe payment gateways. Reviews and Ratings:
Visitors ought to be able to rate and write reviews of their experiences.
The goal of the EasyStay app is to provide a scalable, safe, and easy-to-use
way to book short-term lodging. Following the comprehensive
implementation plan and adhering to the specified system requirements will
enable the development team to guarantee a smooth launch and sustained
platform growth.
12
2,2,5 – SYSTEM DESIGN
1. System design refers to the process of creating a system. The two methods
listed below can be used to implement the System.
functional requirements
Detailed Design
Frontend Design: Using EJS, and CSS for a seamless user experience..
Backend Services: Micro services architecture to handle different
functionalities like user management, property management, booking
system, and payment processing
.
Database Schema: MangoDB design with collections for users, properties,
bookings, and reviews.
Technology Stack
Frontend Guidelines –
CSS: Follow BEM (Block, Element, Modifier) naming convention.
JavaScript: Use ‘const’ and ‘let’, and arrow function.
.
Backend Guidelines :
14
Project Structure for frontend
15
Project Structure for Backend
Controllers/ : Contains the controllers which handle the logic for different
functionalities.
listing.js
review.js
user.js
model/: Contains the schema definitions for the database models
listing.js
review.js
user.js
routes/: Defines the routing for different HTTP requests.
listing.js
review.js
user.js
utils/: Contains utility functions and error handlers.
Expresserror.js
wrapAsync.js
app.js: Main application file initializing the app and connecting middleware.
cloudConfig.js: Configuration for cloud services.
error.js: Custom error definitions
middleware.js: Custom middleware for request handling.
Structure for Database
Models/listing.js: Schema and model for listings.
Models/review.js: Schema and model for reviews.
Models/user.js: Schema and model for users.
Key features
Homepage: Displays featured properties and search bar.
Search Results: Lists properties based on search criteria.
listing Details: Detailed view of a listing with booking options.
User Profile: User information and booking history.
MongoDB: Used for storing user data, property listings, bookings, and
reviews.
Schema Design: schemas for users, properties, bookings, and reviews
16
Some example of code are given below
app.js
17
2,2,7 – TESTING
Testing is the stage where the developed system is put to the test. Sixty
percent of the system's development is dedicated to testing. System testing
is crucial because it seeks to identify the various flaws in the system. The
system can be tested using a variety of different testing methodologies.
Testing: Frameworks
Debugging Tools
Frontend: Chrome Dev Tools.
Backend: Node.js Debugger, Postman for API testing.
2,2,8 – IMPLEMENTATION
Software installation was a step in the implementation process for the user. The
actual implementation process varies depending on the system type. Selecting an
appropriate conversion strategy is a step in the process. The following are the
conversion procedures:
Parallel Conversion
Direct Conversion Approach
Pilot Conversion Approach
Phase In Conversion Approach
Deployment Strategy:
18
2,2,0– MAINTENANCE
19
CHAPTER - 3
20
3.2 - SOFTWARE MANAGEMENT LIFE CYCLE
This report outlines the Software Development Life Cycle (SDLC) for the
EasyStay application, detailing each phase from requirements gathering
through to maintenance.The objective is to provide a structured and
comprehensive approach to developing and managing the EasyStay
application to ensure its success and sustainability.
21
3.1 - PROCESS DESCRIPTION
n. Gantt charts (named after its developer Henry Gantt) are useful for resource
planning.
o. A Gantt chart is special type of bar chart where each bar represents an
activity. The bars are drawn along a timeline.
p. The length of each bar is proportional to the duration of the time planned for
the corresponding activity.
User Registration:
User Login:
Registered users log in using their email/phone and password or social media
credentials.
Listing a Property:
22
Managing Listings:
Booking Process:
Users can search for properties using various filters like location, price
range, amenities, and ratings.
2. Property Selection:
Users receive a booking confirmation via email and within the app.
Property owners are notified of the new booking.
1. Payment Options:
23
3.2 - PROJECT MODEL USED
This model has the same phases as the waterfall model, but with fewer
restrictions. Generally the phases occur in the same order as in the waterfall
model, but they may be conducted in several cycles.
EasyStay is an innovative application designed to facilitate the booking of
short-term accommodations. To ensure the successful development and
deployment of EasyStay, we have employed an agile project model,
specifically leveraging the Scrum framework.
This report outlines the project model used, detailing each phase, the roles
involved, tools and technologies, risk management strategies, and quality
assurance processes.
The Agile project management methodology was chosen for the EasyStay
application due to its flexibility and iterative nature. Agile promotes
continuous improvement, collaboration, and adaptability, which aligns well
with the dynamic requirements of the project.
Useable product is released at the end of the each cycle, with each release
providing additional functionality. Customers and developers specify as many
requirements as possible and prepare a SRS document. Developers and
customers then prioritize these requirements.
Developers implement the specified requirements in one or more cycles of
design, implementation and test based on the defined priorities.
The procedure itself consists of the initialization step, the iteration step, and
the Project Control List.
The initialization step creates a base version of the system. The goal for this
initial implementation is to create a product to which the user can react.
It should offer a sampling of the key aspects of the problem and provide a
solution that is simple enough to understand and implement easily.
To guide the iteration process, a project control list is created that contains a
record of all tasks that need to be performed.
It includes such items as new features to be implemented and areas of
redesign of the existing solution. The control list is constantly being revised as
a result of the analysis phase.
24
3.3 - PHASES
2 Incremental development slices the system functionality into increments
(portions). In each increment, a slice of functionality is delivered through
cross- discipline work, from the requirements to the deployment. The unified
process groups increments/iterations into phases: inception, elaboration,
construction, and transition.
4 Elaboration delivers a working architecture that mitigates the top risks and
full fills the non-functional requirements.
5 Construction incrementally fills-in the architecture with production-ready
code produced from analysis, design, implementation, and testing of the
functional requirements.
25
Initiation Phase- 1
1. Project Charter:
2. Stakeholder Identification:
3. Feasibility Study:
Planning Phase- 2
2. Requirement Gathering:
4. Resource Allocation:
Execution Phase- 3
1. Development:
2. Design:
3. Database Development:
4. Integration:
5. Testing:
6. Iteration:
1. Progress Tracking:
27
2.
3. Performance Metrics:
4. Risk Management:
5. Quality Control:
6. Change Management:
Closing Phase- 5
1. Final Testing:
2. Documentation:
3. Training:
4. Deployment:
5. Post-Deployment Support:
28
3.5 – DIAGRAM
3.5.1 – ER DIAGRAM
2 - ER Diagram
In software engineering an entity-relationship model (ERM) is an abstract
and conceptual representation of data. Entity-relationship modeling is a
database modelling method, used to produce a type of conceptual schema or
semantic data model of a system, often a relational database, and its
requirements in a top-down fashion. Diagrams created by this process are
called entity-relationship diagrams, ER diagrams, or ERDs. ER Diagrams
depicts relationship between data objects.
.
29
The attribute of each data objects noted in the entity-relationship diagram
can be described using a data object description. Entity relationship diagram
is very basic, conceptual model of data and it is fundamental to the physical
database design. This analysis is then used to organize data as relations,
normalizing relations, and obtaining a Relational database.
The entity-relationship model for data uses three features to describe data.
These are:
DFD is an acronym for the word Data Flow Diagram. DFD is pictorial
representation of the system. DFD is a graphical representation of the
―flow of data through the information system.
DFD are also used for the visualization of data processing (structured
design). A DFD provides no information the timing of the process, or about
whether process will operate in parallel or sequence.
The strength of DFD lies in the fact that using few symbols we are able to
30
express program design in an easier manner.
0 - LEVEL DFD :
3 - 0 level DFD
The Data Flow Diagram for EasyStay is divided into multiple levels, with
each level providing a more detailed view of the system's data flow. Here,
we present a high-level overview of the DFD for EasyStay.
31
1 - LEVEL DFD:
4 - 1 level DFD
32
2 - LEVEL DFD:
5 - 2 level DFD
33
3.6 – SOFTWARE REQUIREMENT SPECIFICATION
a) Node.js
b) JavaScript for client-side validation.
c) Next.js
It illustrates how data moves through various processes, data stores, and
external entities, facilitating a better understanding of the system's
architecture and functionality. By visualizing the data flow, stakeholders can
gain insights into the
34
interactions between different components of the application, aiding in
system analysis, design, and optimization.
Data Backup: Perform regular data backups to prevent data loss and ensure
data integrity.
User Feedback: Collect and analyze user feedback to identify areas for
improvement and prioritize feature enhancements.
Top-Down designing:
The top - down designing approach started with major components of the
system. It is a stepwise refinement which starts from an abstract design, in
each steps the design is refined two or more concrete levels until we reach a
level where no – more refinement is possible or not needed.
6 - Top-Down Designing
35
Bottom–Up Designing:
7 - Bottom-Up Designing
Login Schema
Posts Schema
36
3.10 – LOW LEVEL DESIGN
Low Level Design creation is one of the most important activities in the
development of any software product. The low-level design document gives
the design of the actual software application. Low level design document is
based on High Level
Design document. It defines internal logic of every sub module. A good low-
level design document will make the application very easy to develop by the
developer. An effective design document results in very low efforts in
developing a Software product.
3.11 – TESTING
b) Software Testing includes selecting test data that have more probability of
giving errors.” The first step in System testing is to develop the plan that all
aspect of system. Complements, Correctness, Reliability and
Maintainability.
d) System Testing is the most useful practical process of executing the program
with the implicit intention of finding errors that makes the program fail.
37
Types of Testing:
b) Use experience and knowledge of domain to identify such test cases. Failing
this a systematic approach may be necessary. Equivalence partitioning is
where the input to a program falls into a number of classes, e.g. positive
numbers vs. negative numbers.
c) Programs normally behave the same way for each member of a class.
Partitions exist for both input and output. Partitions may be discrete or
overlap. Invalid data (i.e. outside the normal partitions) is one or more
partitions that should be tested. Internal System design is not considered in
this type of testing. Tests are based on requirements and functionality.
d) This type of test case design method focuses on the functional requirements
of the software, ignoring the control structure of the program. Black box
testing attempts to find errors in the following categories:
1. Incorrect or missing functions.
2. Interface errors.
3. Errors in data structures or external data base access
All conditional statements tested for both true and false cases. If a unit has
no control statements, there will be up to 2n possible paths through it. This
demonstrates that it is much easier to test small program units than large
ones.
38
Flow graphs are a pictorial representation of the paths of control through a
program (ignoring assignments, procedure calls and I/O statements).
Use flow graph to design test cases that execute each path. Static tools may
be used to make this easier in programs that have a complex branching
structure. Tools support. Dynamic program analyses instrument a program
with additional code. Typically, this will count how many times each
statement is executed. At end print out report showing which statements
have and have not been executed.
c) It is really only possible at unit and module testing stages because beyond
that, the complexity is too high.
This type of testing ignores the internal parts and focus on the output is as
per requirement or not. Black box type testing geared to functionality
requirements of an application.
Entire system is tested as per the requirements Black box type test that is
based on overall requirement specifications covers all combined parts of a
system.
40
CHAPTER - 4
41
IMPLEMENTAION:
// dotenv
if (process.env.NODE_ENV != "production") {
require("dotenv").config();
}
// EJS setup
const ejsMate = require("ejs-mate");
app.engine("ejs", ejsMate);
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
// Passport
const passport = require("passport");
const LocalStategy = require("passport-local");
const User = require("./models/user.js");
// Express-session setup
const expressSession = require("express-session");
const flash = require("connect-flash");
const sessionOptions = {
secret: "mycode",
resave: false,
saveUninitialized: true,
};
app.use(expressSession(sessionOptions));
app.use(flash());
42
// Passport setup
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());
// Database connection
async function main() {
await mongoose.connect("mongodb://127.0.0.1:27017/mainP");
}
main()
.then((res) => {
console.log("Success! Connection to MongoDB");
})
.catch((err) => {
console.log(err);
});
// Routes
const listingRouter = require("./routes/listing.js");
const reviewsRouter = require("./routes/review.js");
const userRouter = require("./routes/user.js");
// Home route
app.get("/", (req, res) => {
res.render("start.ejs");
});
app.use("/listing", listingRouter);
app.use("/listing/:_id/reviews", reviewsRouter);
app.use("/", userRouter);
43
// Error handler
app.use((err, req, res, next) => {
let { statusCode = 500, message = "Something went wrong!" } = err;
res.render("./listings/error.ejs", { err });
});
Listing Schema:-
Review Schema;-
User Schema:-
45
const Schema = mongoose.Schema;
const passportLocalMongoose = require("passport-local-mongoose");
// Passport-local-mongoose will automatically add username and password fields, along with
hash and salt functions
userSchema.plugin(passportLocalMongoose);
46
module.exports = mongoose.model("User", userSchema);
Listing Route;-
// Controllers files
const listingControllers = require("../controllers/listing.js");
const sessionOptions = {
secret: "mycode",
resave: false,
saveUninitialized: true,
};
router.use(expressSession(sessionOptions));
router.use(flash());
router.route("/")
// Our home page
.get(wrapasync(listingControllers.index))
// for inserting the new data
.post(
isLogedin,
// validlisting,
upload.single("image"),
wrapasync(listingControllers.saveNewListing)
);
router.route("/:_id")
// for showing a particular data
.get(wrapasync(listingControllers.showListing))
// updation in database
.put(
isLogedin,
isowner,
validlisting,
47
wrapasync(listingControllers.updateListing)
)
// for deleting the listing
.delete(isLogedin, isowner, wrapasync(listingControllers.deleteListing));
router.get(
"/:_id/edit",
isLogedin,
isowner,
wrapasync(listingControllers.updateFrom)
);
module.exports = router;
Review Route:-
const sessionOptions = {
secret: "mycode",
resave: false,
saveUninitialized: true,
};
router.use(expressSession(sessionOptions));
router.use(flash());
User Route:-
router.route("/login")
// Form for login
.get(userControllers.loginForm)
// Login authentication
.post(
saveRedirectUrl,
passport.authenticate("local", {
failureRedirect: "/login",
}),
userControllers.login
);
module.exports = router;
EJS Template For Listing
Boilerplate.ejs:-
<!DOCTYPE html>
<html lang="en">
<head>
49
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Airbnb</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet" />
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
rel="stylesheet" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:o
psz,wght,FILL,GRAD@24,400,0,0" />
<body>
<!-- Nav bar -->
<nav>
<div class="outer header">
<div class="left"><a href="/listing">EasyStay</a></div>
<ul>
<a href="/listing" class="white">Home</a>
<a href="/about" class="white">About</a>
<a href="/listing/new" class="white">New listing</a>
<div class="login-singup">
<div class="menu-show">
<i class="bx bx-menu login-menu"></i>
<i class="bx bxs-user-circle login-img"></i>
</div>
<div class="login-items">
<% if(!currentUser){ %>
<a href="/login" class="white">Login</a>
<a href="/singup" class="white">Sign-up</a>
<% } %> <% if(currentUser){ %>
50
<a href="/profile" class="white">Profile</a>
<a href="/logout" class="white">logout</a>
<% } %>
<a href="/" class="white">EasyStay your home</a>
<a href="/HelpCente" class="white">Help Center</a>
</div>
</div>
<body>
<div class="listing-container">
<% for (let list of allistring) { %>
<a href="/listing/<%= list._id %>">
<div class="card">
<img src="<%= list.image.url %>" alt="img">
<div class="location white"><%= list.location %>, <%= list.country
%></div>
<a href="/listing/<%= list._id %>" class="white"><%= list.title %></a>
<p class="white" id="click">₹ <%= list.price %> total before
include</p>
</div>
</a>
<% } %>
</div>
</body>
51
Show.ejs:-
<div class="rightS">
<p id="title" class="white"><%= showdata.title %></p>
<p class="white"><%= showdata.owner.username %> : <%=
showdata.owner.email %></p>
<p class="white"><%= showdata.description %></p>
<p class="white">₹ <%= showdata.price %>/night</p>
<p style="text-decoration: underline" class="white">
<i class="fa-solid fa-location-dot"></i> <%= showdata.location %>,
<%= showdata.country %>
</p>
</div>
</div>
</div>
<% } %>
</div>
</div>
<div class="location-c">
<div class="f">
<label for="location" class="form-label white">Location</label>
<label for="country" class="form-label white" id="s-l">Country</label>
</div>
<div class="s">
<input type="text" name="location" class="form-input" />
<span class="material-symbols-outlined titileicon" style="left: -2.9rem;
top: 0.24rem">error</span>
<input type="text" name="country" class="form-input" />
<span class="material-symbols-outlined titileicon" style="left: -2.9rem;
top: 0.24rem">error</span>
</div>
</div>
Edit.ejs:-
<% layout("/layouts/boilerplate.ejs") %>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:o
psz,wght,FILL,GRAD@24,400,0,0" />
<body>
<div id="new-listing">
%>?_method=PUT" id="listing-form">
<label for="title" class="form-label white titlee">Title</label>
<input type="text" value="<%= editlisting.title %>" name="title"
class="form-input" />
<span class="material-symbols-outlined titileicon">error</span>
<div class="location-c">
<div class="f">
<label for="location" class="form-label white">Location</label>
<label for="country" class="form-label white" id="s-l">Country</label>
</div>
<div class="s">
<input type="text" value="<%= editlisting.location %>"
name="location" class="form-input" />
<span class="material-symbols-outlined titileicon" style="left: -2.9rem;
top: 0.24rem">error</span>
<input type="text" value="<%= editlisting.country %>" name="country"
class="form-input" />
<span class="material-symbols-outlined titileicon" style="left: -2.9rem;
55
top: 0.24rem">error</span>
</div>
</div>
<% layout("/layouts/boilerplate.ejs")%>
<body>
<div id="boolFormCaontainer">
<div class="bookFromleft">
<a href="/listing/<%= bookinglisting._id %>">
<img
src="<%= bookinglisting.image.url %>"
alt=""
/>
</a>
<div class="bookingimgtitle"><%= bookinglisting.title %></div>
<div class="bookingprice">
<span style="text-decoration: underline">
<i class="fa-solid fa-location-dot" style="margin-left: 0.3rem"></i>
<%= bookinglisting.location %>, <%= bookinglisting.country %>
</span>
<p class="white" style="margin-left: 0.3rem; font-weight: bold">
₹ <%= bookinglisting.price %>/night
</p>
</div>
</div>
<form
action="/<%= bookinglisting._id %>/book"
method="POST"
id="listing-form"
class="booking-form"
56
style="width: 30%; padding-top: 1.2rem"
<label for="checkIn" class="form-label white">CHECK-IN</label>
<input
type="date"
name="checkIn"
id="checkIn"
class="form-input"
style="width: 90%"
required
/>
<label for="checkOut" class="form-label white">CHECK-OUT</label>
<input
type="date"
name="checkOut"
id="checkOut"
class="form-input"
style="width: 90%"
required
/>
<label for="guest" class="form-label white">GUEST</label>
<input
type="number"
name="guest"
id="guest"
class="form-input spicial"
style="width: 90%"
required
/>
<button type="submit" id="add-btn" style="width:
5.5rem">Reserve</button>
</form>
</div>
src="https://i.pinimg.com/originals/60/5a/bd/605abdb7af3405c6b20a426b1e12
8322.png"
alt="Pay App"
/></span>
<span
><img
src="https://cdn.freelogovectors.net/wp-
content/uploads/2023/11/phonepelogo-freelogovectors.net_.png"
alt="PhonePe"
/></span>
<span
><img
src="https://cdn.iconscout.com/icon/free/png-256/free-paytm-
226448.png?f=webp"
alt="Paytm"
/></span>
</div>
<div class="counter">
<span>Time left : </span>
<span id="countdown">00 : 59</span>
</div>
<div class="total">
<span>Total : </span>
<span id="py-amount">₹ 0</span>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector(".booking-form");
const checkIn = document.querySelector("#checkIn");
const checkOut = document.querySelector("#checkOut");
const guest = document.querySelector("#guest");
const pyPopUp = document.querySelector(".payment-container");
const pyAmount = document.querySelector("#py-amount");
const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || year
% 400 === 0;
58
const [year, month, day] = s.split('-').map(Number);
const monthDays = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31];
return day + monthDays.slice(0, month - 1).reduce((a, b) => a + b, 0) +
year * 365 + Math.floor(year / 4) - Math.floor(year / 100) + Math.floor(year /
400);
};
const startCountdown = () => {
let timeLeft = 59;
const countdownElement = document.getElementById("countdown");
const interval = setInterval(() => {
countdownElement.textContent = `00 : ${timeLeft < 10 ? "0" + timeLeft
: timeLeft}`;
if (timeLeft-- < 0) {
clearInterval(interval);
countdownElement.textContent = "00 : 00";
}
}, 1000);
};
form.addEventListener("submit", e => {
e.preventDefault();
const days1 = noOfDays(checkIn.value);
const days2 = noOfDays(checkOut.value);
const totalDays = Math.abs(days2 - days1);
const guests = parseInt(guest.value, 10);
if (!isNaN(totalDays) && !isNaN(guests)) {
const totalAmount = <%= bookinglisting.price %> * guests * totalDays;
pyAmount.innerHTML = `₹ ${totalAmount}`;
pyPopUp.style.display = "flex";
startCountdown();
setTimeout(() => {
pyPopUp.style.display = "none";
form.submit();
}, 1000 * 60);
}
});
});
</script>
</body>
59
EJS For User
Login.ejs:-
<% layout("/layouts/boilerplate.ejs")%>
<body>
<div id="new-listing">
<form action="/login" method="POST" id="listing-form" style="width:
30%">
<h1>Login</h1>
<label for="username" class="form-label white">Username</label>
<input
type="text"
name="username"
id="title"
class="form-input"
style="width: 90%"
/>
<span class="material-symbols-outlined titileicon" style="left:
20.4rem">error</span>
<div class="login-singup-btns">
<button type="submit" id="add-btn" style="width: 5rem">Login</button>
</div>
</form>
</div>
<script src="/js/script.js"></script>
</body>
Singup.ejs
<% layout("/layouts/boilerplate.ejs")%>
<body>
60
<div id="new-listing">
<form action="/singup" method="POST" id="listing-form" style="width:
30%">
<h1>Sign-Up</h1>
<label for="username" class="form-label white">Username</label>
<input
type="text"
name="username"
id="title"
class="form-input"
style="width: 90%" />
Style.css
*::selection {
color: #ffffff;
background-color: #fe424d;
61
}
body {
margin: 0;
background-color: #ffffff;
font-family: "Roboto", sans-serif;
height: 100vh;
}
.outer {
height: 5rem;
padding: 0 3.06rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e5e7e7;
position: sticky;
top: 0;
transition: background-color 0.2s linear;
}
.left a {
font-size: 2rem;
font-weight: 700;
text-decoration: none;
color: #fe424d;
}
.right {
width: 55%;
}
ul {
width: 55%;
display: flex;
justify-content: space-between;
align-items: center;
}
h3 {
margin: 0;
}
ul a {
62
color: black;
font-weight: 600;
}
a{
text-decoration: none;
}
/* night-mode */
.n-mode {
font-size: 1.5rem;
cursor: pointer;
padding: 12px;
border-radius: 50%;
}
.n-mode:hover {
background-color: rgb(216, 213, 213);
}
.bx-sun {
position: absolute;
left: 73.4rem;
visibility: hidden;
}
footer {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin-top: 5rem;
background-color: rgba(251, 251, 251, 0.569);
height: 8rem;
box-shadow: 0 0 0 0.1px black;
background-color: #e5e7e7;
transition: background-color 0.2s linear;
}
.company-info {
width: 25rem;
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
color: black;
}
.company-info a {
display: inline-block;
}
.social i {
margin-left: 10px;
63
color: black;
font-size: 1.2rem;
}
.listing-container {
margin-top: 2rem;
padding: 0 2.5rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.listing-container .card {
display: inline-block;
width: 17.31rem;
margin-bottom: 1rem;
height: 22.6rem;
border-radius: 10px;
padding-left: 9px;
padding-right: 9px;
}
.card img {
width: 100%;
height: 70%;
border-radius: 10px;
}
.card img:hover {
/* filter: brightness(108%); Decrease brightness of the image on hover */
}
.card .location {
margin-top: 0.5rem;
margin-bottom: 0.2rem;
font-size: 1rem;
font-weight: bold;
color: rgb(28, 28, 28);
}
.card a {
font-size: 1rem;
font-weight: lighter;
color: rgb(132, 129, 129);
}
.card p {
margin-top: 0.3rem;
font-weight: bold;
color: rgb(86, 85, 85);
text-decoration: underline;
font-size: 1rem;
64
}
#new-listing {
display: flex;
margin-top: 2.5rem;
flex-direction: column;
align-items: center;
height: 100vh;
}
form {
width: 53%;
display: flex;
flex-direction: column;
}
form input,
textarea {
margin-bottom: 1.3rem;
height: 1.7rem;
font-size: 1.04rem;
padding-left: 10px;
border: none;
box-shadow: 0 0 0 0.2px black;
border-radius: 3px;
}
form textarea {
height: 3rem;
}
.form-label {
margin-bottom: 0.4rem;
}
#add-btn,
#edit-btn,
#review-btn {
width: 4rem;
height: 2rem;
background-color: #fe424d;
color: white;
font-size: 1rem;
border-radius: 4px;
cursor: pointer;
border: none;
}
#review-btn {
background-color: black;
box-shadow: 0 0 0 0.4px rgb(255, 255, 255);
}
65
.location-c {
display: flex;
flex-direction: column;
}
.f {
margin-bottom: 0.4rem;
}
.s {
display: flex;
flex-wrap: wrap;
}
.tax {
transform: scale(0.9);
margin-left: 7rem;
height: 2.5rem;
display: flex;
align-items: center;
box-shadow: 0 0 0 1px rgb(223, 223, 223);
padding: 0 0.3rem 0 1rem;
transition: 0.3s;
border-radius: 10px;
}
.tax:hover {
box-shadow: 0 0 0 1px rgb(0, 0, 0);
cursor: pointer;
}
66
4.2 – SANPSHOT OF PROJECT
67
SNAPSHOTS OF SINGUP PAGE
68
SNAPSHOTS OF PROFILE PAGE
69
SNAPSHOTS OF EDIT LISTING PAGE
70
SNAPSHOTS OF ALL BOOKING PAGE
71
SNAPSHOTS OF ALL REVIEW PAGE
72
CHAPTER - 5
73
5.1 – FUTURES COPE
Service Expansion into New Locations: Easystay may look into ways to
extend its reach into other cities and areas in order to serve a larger
clientele of people looking for high-quality housing outside of its present
service areas. •
Better User Experience: To make it even simpler and more effective for
people to find appropriate lodging on the platform, ongoing enhancements
to the user interface, search algorithms, and booking procedure can be put
into place.
74
3.2 – CONCLUSION
Easystay is well-positioned to transform the housing search process by
tackling the obstacles people encounter when trying to locate high-quality
apartments. Easystay provides a centralized solution for users by
streamlining the process of finding apartments, rooms, hostels, and private
groups with its extensive online platform. Easystay has enormous potential
to grow into new areas, diversify its lodging options, and incorporate
cutting-edge technologies as it develops further. Easystay strives to not
only meet but surpass its users' expectations by putting a high priority on
the user experience, establishing strategic partnerships, and supporting
sustainability initiatives. Easystay is positioned to maintain its leadership
position in the housing search industry by providing convenience,
efficiency, and satisfaction to people looking for their dream homes. This is
due to its unwavering dedication to innovation and continuous
improvement.
4.2 – REFERENCES
www.airbnb.co.in
www.geeksforgeeks.org
www.github.com
https://firebase.google.com/docs/
https://mongodb.com/docs/
75