Overlook Hotel Application Project

Customer Dashboard

Manager Dashboard

Abstract

The fictional Overlook Hotel website allows customers to log in and see their upcoming reservations, past reservations, and book a new reservation for themselves. Additionally, the customer is shown how much in total they have spent at the Overlook. The Overlook's manager can also log in to view the manager dashboard. The dashboard gives a snapshot of the day including how many of the 25 rooms are currently available, the percent of rooms booked for the day, and how much revenue the hotel is bringing in for the day. The manager is also able to search for any customer by their first name, view the customers upcoming reservations, and book new reservations or delete reservations for that customer

This solo project was created as the final project in the second module (of four) of the Turing front-end software engineering program. This project is the culmination of gained experience and knowledge over the past six weeks listed under the Technologies heading below.

Contributors

Spencer Haka

Research and Documentation

Developed Design:

Agile/Scrum project board created and managed via GitHub Projects:

Technologies

• Fetch API
• Lighthouse and WAVE accessibility tools
• Webpack module bundler
• Git/GitHub
• GitHub project board
• JavaScript
• CSS
• HTML
• Mocha JavaScript testing framework
• Chai assertion library
• Node.JS
• Excalidraw

Methodologies

• Design the UI to adapt to various screen sizes
• Test-driven development
• Error handling
• Ensure accessiblity through WAI ARIA states, roles, and properties
• Implement ES6 classes which support a complex data model
• Use object and array prototype methods to perform data manipulation
• Create a user interface that is easy to use and clearly displays information
• Write modular, reusable code that follows SRP (Single Responsibility Principle)
• Implement a robust testing suite using TDD
• Make network requests to retrieve, post, and delete data
• Demonstrate DRY principles
• Utilize Agile/Scrum project management

Installation Instructions

1. Fork this repository.
2. Clone your new, forked repository to your local machine.
3. Clone this API repository to your machine.
4. cd into the API repository on your local machine and run npm install, then npm start to launch the API's server.
5. In a seperate tab, cd into the main project repository on your local machine and run npm install, then npm start to launch the application's server.
6. Open the link to your local server (listed in your terminal) in your web browser to view the live page.