HANOI UNIVERSITY OF SCIENCE AND TECHNOLOGY

SCHOOL OF INFORMATION AND COMMUNICATION TECHNOLOGY

CAPSTONE PROJECT REPORT

BOOKING WEB
Group 17

Hoang Van Phuong [email protected]

Nguyen Minh Quan [email protected]
Nguyen Hoang Quan [email protected]

Major: Information Technology

Specialization: Global Information and Communication Technology

Supervisor: Ph.D. Do Ba Lam

Signature
Department: Science Computer
School: School of Information and Communication Technology

Hanoi, 06/2023
 ABSTRACT
The growing demand for travel has posed a significant challenge in the form of booking
accommodations, particularly during peak travel periods. It can be a frustrating experience for
travelers to arrive at their destination only to discover that no rooms are available. To address this
issue and enhance the overall travel experience, we have developed an innovative online booking
application. This user-friendly app provides tourists with a convenient platform to secure their
desired rooms, ensuring they have a comfortable and hassle-free stay during their trips or overnight
stays. By utilizing this app, travelers can confidently plan their journeys, knowing that their
accommodation needs are well taken care of.
Table of Contents
I. INTRODUCTION ..................................................................................................................... 1
1. Motivation .............................................................................................................................. 1
2. Details descriptions ............................................................................................................... 1
3. Project organization .............................................................................................................. 2
II. Some Techniques...................................................................................................................... 2
1. Front end ................................................................................................................................ 2
2. Back end ................................................................................................................................. 3
3. Database ................................................................................................................................. 3
III. Design Architecture................................................................................................................ 3
Functionality Analysis: ............................................................................................................. 3
Design Usecase: .......................................................................................................................... 4
IV. Source code analysis ............................................................................................................... 5
1. Front end ................................................................................................................................ 5
2. Back end ................................................................................................................................. 7
3. Database ................................................................................................................................. 7
V. Demo Website ........................................................................................................................... 9
1. Home page.............................................................................................................................. 9
2. User authentication and authorization.............................................................................. 10
3. Profile Page .......................................................................................................................... 11
4. Search Place ......................................................................................................................... 11
5. View detail place .................................................................................................................. 11
6. View top loved places .......................................................................................................... 13
7. Booking accommodation .................................................................................................... 13
8. Cancel/Feedback/Rate a Booking ...................................................................................... 14
9. Create new accommodations .............................................................................................. 14
10. Add to Wishlist .................................................................................................................. 16
11. See in Maps ........................................................................................................................ 16
VI. Difficult and Conclusion ...................................................................................................... 18
I. INTRODUCTION
Online booking app aims to enhance the travel experience by ensuring that travelers can
easily book suitable accommodations and enjoy a seamless and stress-free stay. By addressing the
problem of room availability, we strive to contribute to a more enjoyable and satisfying travel
experience for tourists worldwide.
1. Motivation
The motivation behind this research stems from the increasing demand for travel and the
challenges faced by travelers in securing suitable accommodations. As the travel industry
continues to thrive, it is essential to address the issues surrounding the booking process to ensure
a seamless and enjoyable travel experience for individuals and families alike. By developing an
efficient online booking system, we aim to alleviate the frustrations and inconveniences faced by
travelers when it comes to finding available and comfortable rooms during their trips.
2. Details descriptions
Our website offers a comprehensive platform that caters to both renters and bookers,
allowing users to seamlessly switch between the two roles. Whether you're looking to book a place
or list your own, our website provides all the necessary features to facilitate a smooth and efficient
experience.
As a render, you can easily browse through various listings, search for specific criteria, and view
detailed information about each place. Our user-friendly interface ensures a hassle-free booking
process, allowing you to select dates, review pricing details, and complete the transaction with
confidence. For those who have already made a booking, our website enables you to access your
booking details at any time. You can view the status of your booking, including payment
information, and make any necessary changes or cancellations.
As a booker, you have the opportunity to review and rate the places you've booked. This feature
allows you to share your experiences, providing valuable feedback for both the property owners
and future users. To ensure security and personalized access, our website incorporates user
authentication and authorization features. By creating an account, you can manage your
bookings, save your favorite places, and easily access your account information.
For property owners, we offer a simple and streamlined process for listing your place. You can
provide detailed descriptions, upload photos, and specify availability and pricing. This allows you
to showcase your property to potential renters and maximize its visibility. Additionally, our website
features a "Top Review Places" section, highlighting the most highly rated accommodations based
on user reviews. This section serves as a valuable resource for users seeking recommendations and
the best-rated places.

1
3. Project organization
Member
No Work
Phuong HV Quan NM Quan NH
01 Planning and Requirement
34% 33% 33%
Gathering
02 Design Use case and Detail
10% 80% 10%
Requirement
03 User Interfaces 10% 10% 80%
04 Database Design 60% 20% 20%
05 Front-end Development 10% 10% 80%
06 Back-end Development 40% 40% 20%
07 Integration and APIs 40% 20% 40%
08 Testing and Debugging 30% 30% 40%
09 Deployment, User Acceptance
40% 30% 30%
Testing, …
10 Report and Presentation 30% 40% 30%

II. Some Techniques

1. Front end
React JS
• React is a JavaScript library utilized for constructing single-page web applications. React
aids in developing adaptable and maintainable user interfaces by employing the component
concept. Each component within React represents a small portion of the user interface that
can be reused. The arrangement, combination, and interaction between components
contribute to the creation of dynamic and intricate interfaces.
• Virtual DOM: React employs a virtual DOM to optimize interface updates. Instead of
updating the entire DOM whenever changes occur, React solely updates the necessary
components, thereby enhancing rendering speed.
• JSX: React allows the inclusion of HTML code within JavaScript through the use of JSX
syntax, which facilitates the seamless integration of HTML and JavaScript code, resulting
in concise and readable source code.
Yarn
• Yarn is a fast, reliable, and secure package manager for JavaScript applications. It address
some of the limitations of the npm client. Yarn aims to provide faster and more
deterministic package installation by utilizing a parallel and optimized approach.
• Yarn also introduces the concept of a lock file (yarn.lock) that ensures consistent and
reproducible builds across different development environments. This lock file captures the

2
 exact versions of dependencies used in a project, preventing unexpected changes in
dependencies and ensuring reliable builds.

2. Back end
NodeJS
• Node.js is a server-side JavaScript runtime built on the Chrome JavaScript engine. It allows
for efficient development of server-side applications with multi-threading capabilities and
non-blocking event handling.
• Node.js excels in handling asynchronous operations, enabling the processing of multiple
requests simultaneously without being blocked. This makes Node.js suitable for highly
scalable applications that require fast processing.
• Node.js provides a powerful ecosystem that includes libraries and modules managed
through npm (Node Package Manager), allowing for easy downloading and management
of third-party libraries for use in applications.
Express
• Express is a lightweight and flexible web application framework for Node.js. It simplifies
the process of building web applications and APIs by providing a set of intuitive and
powerful features. With Express, developers can easily handle HTTP requests, define
routes, and implement middleware functions.
• Allowing developers to focus on the core functionalities of their applications. Express is
highly popular and widely adopted in the Node.js community due to its simplicity,
scalability, and extensive ecosystem of plugins and libraries.
3. Database
Mongo DB
• A popular open-source document-oriented database system. It falls under the category of
NoSQL databases, which means it does not rely on a traditional relational data model.
Instead, MongoDB stores data in flexible, JSON-like documents called BSON (Binary
JSON).

III. Design Architecture

Functionality Analysis:

Functionalities Details
User authentication and authorization Users can sign up, sign in and sign out on the
website to book accommodation or add new
one. User’s information will be protected by
the system.

3
List all Places Users can view all places that posted by
renders.
Search Place Users can search some place following
information as province address, name or
maps.
View detail place Users can view all place information if they
search it.
View top loved places Users can view top places that are
automatically sorted by system.
Booking accommodation Bookers can book several accommodations at
the same time, make sure that they signed in.
View accommodation booking Bookers can see the list accommodations
booking.
Cancel booking Bookers can also cancel a booking that they
want to change your decision.
Give Feedback After booking, bookers can give some
feedback by reviewing and rating
accommodation.
Create new accommodation As a render, user can add some new
accommodation to website.
Add to Wishlist Users can add some accommodation to their
wishlist.
See in Maps Users can view all accommodation in GG
Maps.

Design Usecase:
Usecase Diagram for Booking Website

4
 Use case Diagram for Viewing Places

IV. Source code analysis

1. Front end

Files Functionalities
node_modules Packages of the application.
src The main source code directory of your
application
.eslintrc.cjs The configuration file for ESLint, a popular
JavaScript linter.
.gitignore Specifies patterns of files and directories that
should be ignored by Git.
Dockerfile Create a Docker image for your application
postcss.config.js The configuration file for PostCSS, a tool for
transforming CSS with JS

tailwind.config.js The configuration file for Tailwind CSS, a

popular utility-first CSS
vite.config.js The configuration file for Vite, a fast
development build tool for modern web.

5
In ./src code

Files Functionalities
AccountNav.jsx Navigation component related to user
accounts.
AddressLink.jsx Component related to displaying and
linking to an address in GG Maps.
App.js The main entry point of our application,
where the overall structure of the
application is defined.
BookingDates.jsx Component related to booking dates or
selecting dates.
BookingWidget.jsx A widget related to the booking
functionality of the application.
Footer.jsx The code for a footer component.
Header.jsx The code for a header component.
Layout.jsx Component that defines the overall
structure of a page or a section of the
application.

Perk.jsx Code for a component related to

displaying and highlighting a specific
perk or feature of the application.
PlaceGallery.jsx Code for a component related to
displaying a gallery of images/ media for
a particular place.
Rate.jsx Rating or reviewing a particular item.
UserContext.jsx Creating and managing a user context.

In ./src/pages
Files Functionalities
AllPlaces.jsx UI list places
BookingPage.jsx UI booking page
FindPlace.jsx UI search place
IndexPage.jsx UI page for Province
LoginPage.jsx UI login page
PlacePage.jsx UI for detail place
ProfilePage.jsx UI for user information page
RegisterPage.jsx UI for register page
WishlistPage.jsx UI for wishlist page

6
 2. Back end
Files Functionalities
/models Schemas for our application's data
/node_modules Packages of the application.
.env Store environment variables for your
application
app.js The main entry point of your backend
application
Dockerfile Create a Docker image for your
application
package.json yarn to manage dependencies, scripts,
and other metadata of your backend
project.
yarn-error.log Errors or issues related to package
installation
yarn.lock Yarn package manager

In ./models
Files Functionalities
Booking.js Model base of Booking.
Feedback.js Model base of Feedbacks.
Place.js Model base of Place.
User.js Model base of User.
Wishlist.js Model base of Wishlist.

3. Database
User model
No Field name Type Require Functionalities
1 id String Hash User identification
2 first_name String Optional User first name
3 last_name String Optional User last name
4 email String True User’s email
5 password String True User’s password

Place model
No Field name Type Require Functionalities

7
 1 id String Hash Place identification
2 owner String Reference to user Owner of place
3 title String Optional title of Place
4 address String Optional Place’s address
5 photos [String] Optional User’s password
6 description String Optional Description of Place
7 perks [String] Optional Perks for each Place
8 extraInfor String Optional Extra Information for Place
9 checkIn Number Optional Check in Time
10 checkOut Number Optional Check out Time
11 maxGuests Number Optional Number of max Guests can book
12 price Number Optional Price of accommodation

Booking model
No Field name Type Require Functionalities
1 id String Hash Booking identification
2 place String Reference The accommondation
3 user String Reference User who books room
4 checkIn String True Check In time
5 checkOut String True Check Out time
6 name String True Name of user
7 phone String True Phone of user

Feedback model
No Field name Type Require Functionalities
1 id String Hash Feedback identification
2 place String Reference The booked accommondation
3 rating Number Optional Rate the place
4 feedback [String] Optional An array can include >1 feedback
5 feedback/user String Reference User booking
6 feedback/date Date True Date of comment
7 feedback/comment String True Content of feedback
8 feedback/rate Number Optional Rate of place

Wishlist model
No Field name Type Require Functionalities
1 id String Hash Wishlist identification
2 owner String Reference User who uses website
3 wishlist [String] Optional List of wishlist
4 wishlist/place String Reference Place that booked

8
V. Demo Website

1. Home page
In this home page we can view and access some accommodations as Popular destinations and
Hotels loved by guests.

9
 2. User authentication and authorization
User can register and login to use all functionality of the website. After login, user can book hotel,
review and rate a place. Beside they also can add some new accommodation to the system.

10
 3. Profile Page
User can access profile page to see your information details. This page also provides some features
as booking, accommodations and wishlist like image below.

4. Search Place
User can search some place by text in search bar following image below

5. View detail place

Users can view information detail about the place that they want to book, they can consider and
book hotel depending on their demand.

11
12
 6. View top loved places

7. Booking accommodation
If users want to book an accommodation, they need to fill all fields to confirm. After they book a
hotel, they can see the list of hotels that they booked.

13
 8. Cancel/Feedback/Rate a Booking
In this page for cancel/feedback/rate a booking, users can give some their opinion and send it to
renders. After users rate, the system will calculate the average rate of all user that rated.

9. Create new accommodations

14
Render can create new accommodations, save and send to the system. The new accommodations
will be save in system database and post to website.

15
 10. Add to Wishlist
User can add some destinations to their wishlist and view it at their Wishlist

11. See in Maps

User can see an destination in GG Maps. This functionality help user can easily determine
location of the destination.

16
17
VI. Difficult and Conclusion

Designing and developing a booking website can pose various challenges such as
• Complexity: Developing a booking website involves managing intricate features that may
exceed the scope of our course timeline.
• Data Management: A booking website handles substantial data, such as user information,
bookings, availability, and reviews. We are working on effectively organizing and
managing this data to enhance the functionality of our project.
• User Experience: Throughout the Web Technology course, we have learned various
frameworks and techniques. However, applying them to practical challenges requires
further experience. Hence, we are continually updating our code to achieve the best
possible version.

In conclusion, despite the challenges, a well-designed and implemented booking website

can bring numerous benefits. It allows users to easily find and book accommodations, provides
opportunities for businesses to reach a broader customer base, and streamlines the booking process
for both parties. With careful planning, attention to user experience, and efficient backend
management, a booking website can be a valuable tool in the travel and hospitality industry.

18