Ascenda Loyalty Hotel Booking System
2022 50.003 Elements of Software Construction

A hotel booking system built using the MERN framework (MongoDB, Express, React, Node)

Cohort 1 Group 6:

Soh Pei Xuan 1005552

Guo Yuchen 1004885

Nicholas Goh 1005194

Adelle Chan 1005418

Table of Contents

• Getting Started
• Features
  • Destination Search
  • Hotel Search Results
  • Hotel Room Details
  • Booking Data
• API Calling
• File Directories
• External Resources

Getting Started

1. Install React and Node.js

2. Install Node and Python dependencies

pip install -r requirements.txt 

cd api       
npm install

cd client      
npm install

3. Running Web Server

To begin running the web application, first start a new terminal and run the backend Express server (http://localhost:8080/)

cd api
npm start

Subequently, start another terminal and run the frontend React server (http://localhost:3000/)

cd client   
npm start

Features

🔍 Destination Search

Text-based autocomplete search that facilitates a fast return of relevant destinations. Accompanied with a datepicker and dropdown for number of guests and rooms.

http://localhost:3000/

🗼 Hotel Search Results

Given a set of parameters (e.g. destination, dates, no. of guests, no. of rooms), provides a list of avaliable hotels, with description and lowest price (paginated).

http://localhost:3000/destinations/destId/checkInDate/checkOutDate/en_US/SGD/SG/adultQty/childrenQty/roomQty/pageNo
✔️ http://localhost:3000/destinations/RsBU/2022-08-09/2022-08-10/en_US/SGD/SG/2/0/1/0

🏨 Hotel Room Details

Given a set of parameters and particular hotel, provides a list of all matching room listings, prices and description. Accompanied with Pigeon Maps API for hotel location and hotel details.

http://localhost:3000/hotels/hotelId/destId/checkInDate/checkOutDate/en_US/SGD/SG/adultQty/childrenQty/roomQty
✔️ http://localhost:3000/hotels/S57Q/RsBU/2022-08-09/2022-08-10/en_US/SGD/SG/2/0/1

📆 Booking Data

By clicking on a room rate card, customers will be redirected to a booking confirmation page and can perform payment through Stripe API. Booking data will also be stored in local database.

http://localhost:3000/checkout

API Calling

Our backend server makes API calls api\routes\api.js to Ascenda's API using the following format:

1. Hotel Static Data:

http://localhost:8080/api/hotel/:id
✔️ http://localhost:8080/api/hotel/diH7

2. Hotel Static Data for a Given Destination:

http://localhost:8080/api/destination/hotels/:id/:page
✔️ http://localhost:8080/api/destination/hotels/4FBY/0

3. Room Prices for a Given Hotel:

http://localhost:8080/api/hotel/price/:hotelid/:destinationid/:checkin/:checkout/:lang/:currency/:countrycode2/:guestnumber
✔️ http://localhost:8080/api/hotel/price/diH7/WD0M/2022-08-25/2022-08-29/en_US/SGD/SG/2

4. Hotel Prices for a Given Destination:

http://localhost:8080/api/destination/prices/:destinationid/:checkin/:checkout/:lang/:currency/:countrycode2/:guestnumber/:page
✔️ http://localhost:8080/api/destination/prices/FkG9/2022-08-25/2022-08-26/en_US/SGD/ES/2/0

File Directories

📦api                  # backend Express files
 ┣ 📂bin
 ┣ 📂controllers       # individual routing controllers
 ┣ 📂node_modules
 ┣ 📂public
 ┣ 📂routes            # api.js, routing for backend
 ┣ 📂stripe            # stripe integration for backend
 ┣ 📂views
 ┣ 📜app.js
 📦client              # frontend React files
 ┣ 📂node_modules
 ┣ 📂public            # images used in webapp
 ┣ 📂src
 ┃ ┣ 📂components      # building blocks for webpage
 ┃ ┃ ┗ 📂utils         # api call function, url checker
 ┃ ┣ 📂database        # static JSON data
 ┃ ┣ 📂pages           # main webpages: hotel, home, error, dest
 ┃ ┣ 📜App.js
 ┃ ┗ 📜index.js
 📦media               # webpage screenshots
 📦testing             # selenium and jmeter testing files
 📜README.md
 📜requirements.txt    # python dependencies
 📜stripe-merging

External Resources

• Date-FNS
• FontAwesomeIcon
• Pigeon-Maps
• React-Confirm-Alert
• React-Date-Range
• React-Paginate
• React-Rating-Stars
• Stripe