View as presentation: Presentation
Skip this and get to coding: GettingStarted

Develop a software product that manages hotel reservations across a group of hotels of varying characteristics.

Develop a software product with the following features:

• Create/Modify Users Information
• Create/Modify Hotel Properties (Admin)
• Create/Modify Reservation information (modify or cancel reservation/Users & Admin)
• Ability to search based on criteria (price/date range, amenities, room availability)
• Have an intuitive UI/UX design

• Design:

  • Complete all UI/UX development tasks.

• Structural:

  • Complete all structural development tasks.

• Testing:

  • Complete all tests.

• Approval:

  • Client accepts product meets design specifications.

• a web application that meets all requirements in key objectives.

• Program does not read/write data from/to an external database.

The following sections will discuss the technologies used (version control, programming languages, frameworks/libraries, and additional tools).

The project was made using the following programming languages. Percentages were taken from github-link

React is an open-source, front end, JavaScript library for building user interfaces or UI components. React was used to create UI elements such as navigation bar, search bar, and other components within the UI.

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser.

What follows are the significant node modules utilized in the project and a short description.

MariaDB is a community-developed, commercially supported fork of the MySQL relational database management system, intended to remain free and open-source software under the GNU General Public License. MariaDB was chosen for the project due to the aforementioned reasons.

• For a reservation to exist there must be at exactly one hotel and user.

• reservation is optional for hotel to exist. There can be zero to many of them for a particular reservation.

• reservation is optional for user to exist. There can be zero to many of them for a particular reservation.

• Version control: git and github
• Database GUI: MySQL workbench
• IDE/Text editors: Webstorm, Visual Studio Code, VIM

For both the Modify hotel and Create hotel features, a React useState hook was used to allow us to track the state for each function component. The useState hooks allowed us to track the specific properties for the hotel such as name, rooms available, pricing and amenities available. When creating a new Hotel the properties where set to initially have an empty values. We created react forms to take in the new corresponding properties for the hotels. We configured the input types to match the hotel’s specific properties.

Furthermore, both Modify and Create hotel functionalities were configured to only available to admin user accounts, using a credential validation function.

This project was bootstrapped with Create React App.

go to CMD and type the following command:

mysql -u root -p

Enter root password

create database hoteldb;

CREATE USER 'admin'@'localhost' identified by 'password';

GRANT ALL ON hoteldb.* TO 'admin'@'localhost';

flush privileges;

In the project directory, you can run:

cd hotelReservation_CS3773/;
npm install express --save;
npm install cors;
npm install react-router-dom --save;
npm install react-day-picker --save;
npm start;

In the server directory, you can run:

cd hotelReservation_CS3773/src/server;
npm install bcrypt;
npm install express --save;
npm install cors;
npm run start;

or to run in development mode

npm run devStart

To create schema and populate hotels head to:
http://localhost:3001/build

To populate user and reservations tables with test data head to:
http://localhost:3001/build/test

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify