Background and Description

For this project, you will be building a hotel management tool for hotel customers and staff to manage room bookings and calculate customer bills.

Goals and Objectives

• Use object and array prototype methods to perform data manipulation
• Create a clear and accessible user interface
• Make network requests to retrieve data
• Implement a robust testing suite using TDD
• Write DRY, reusable code that follows SRP (Single Responsibility Principle)

Timeline

Dates and deadlines to be aware of:

Day One Deliverable: Submit your project here

Tuesday, Week 6 - Project due at 9PM Mountain Time.

Requirements

Workflow

You will want to submit PRs to your accountabilibuddy to:

• You must give your accountabilibuddy collaboration access to your repo.
• You must submit at least 2 PRs to your accountabilibuddy for review.
• You must wait for your accountabilibuddy to review your PRs, and allow THEM to merge any PRs you submit.

It is up to you to decide what changes warrant a PR – remember we want to submit PRs that have significant changes and potential for feedback. Think about what functionality you’re struggling with or have questions about or need help with. As an accountabilibuddy, you are responsible for reviewing at least 2 PRs from your partner.

Please also tag your project manager in any PR you make to your buddy.

Technologies

• Fetch API to retrieve and add data
• Mocha and Chai for testing your code
• Webpack

Initial Setup

For this project, you will want to use this Webpack Starter Kit repo. Setup instructions are in the README.

You will also need to clone down this local server and have it running in a separate tab in your terminal each time you run your client.

Endpoints

Below are all the endpoints set up for this project. You may not use all of them. Pay attention to the functionality required of each iteration when picking the appropriate endpoint.

{
  "Content-Type": "application/json"
}

Iterations

1. Dashboard

As a customer:

• I should see a dashboard page that shows me:
  • Any room bookings I have made (past or upcoming)
  • The total amount I have spent on rooms

2. Customer Interaction

As a customer:

• I should be able to select a date for which I’d like to book a room for myself
• Upon selecting a date, I should be shown a list of room details for only rooms that are available on that date
• I should be able to filter the list of available rooms by their roomType property
• I should be able to select a room for booking
• In the event that no rooms are available for the date/roomType selected, display a message fiercely apologizing to the user and asking them to adjust their room search

Refer to the “Add new booking” section from the endpoints table above!

3. Accessibility

• You must be able to tab through your app and use it without a mouse
• Your app must still be usable when tested with a colorblind extension
• You must score as close to 100% as possible with the Lighthouse and WAVE accessibility audits. Be prepared to explain any accessibility audits your application is failing.
• Your HTML must be written semantically and should use ARIA attributes for any UI elements that are not understood by the screen reader (ONLY if needed / appropriate)

4. Login

When first arriving at the site, a user should be able to log in with a username and password.

As a customer:

• I should be able to login
  • I will see a login page when I first visit the site
  • I can log in with the following credentials:

username: customer50 (where 50 is the ID of the user)
password: overlook2021

• Upon successfully logging in, I should see my dashboard.

Refer to the “Get single user” section from the endpoints table above!

5. Manager Interaction (extension)

Your app should now support two different types of users. In addition to having a customer, you will now add a manager.

As a manager:

• I should be able to login
  • I will see a login page when I first visit the site
  • I can log in with the following credentials:

username: manager
password: overlook2021

As a manager, upon logging in:

• I should see a dashboard page that shows me:
  • Total Rooms Available for today’s date
  • Total revenue for today’s date
  • Percentage of rooms occupied for today’s date

As a manager:

• I should be able to search for any user by name and:
  • View their name, a list of all of their bookings, and the total amount they’ve spent
  • Add a room booking for that user
  • Delete any upcoming room bookings for that user (they cannot delete a booking from the past)

Refer to the endpoints table above for deleting a single booking

Testing

You should NOT use the original data files in the data directory for testing. These are big files to begin with, and a real-world dataset would have millions of records. That’s far too big to use every time you want to run a test.

Instead, for your tests, you should create small, sample datasets that match the structure of the application data. By creating this sample dataset, you will also know if your functions are working correctly because you can do the calculations by hand with a much smaller dataset.

You are expected to:

• Build a robust testing suite. This might include testing pure functions in your scripts.js.

Remember to test all possible outcomes (happy/sad/etc). Ask yourself:

• Does the function return anything?
• Are there different possible outcomes to test based on different arguments being passed in?

You are not expected to test:

• DOM manipulation / DOM manipulating functions (like document.querySelector(...))
• Fetch calls

Minimum Professionalism Expectations

• Commits are atomic and frequent, effectively documenting the evolution/progression of the application.
• A project board is utilized (and updated throughout the project) with Github issues and labels.
• Student uses branches, PRs and thorough code reviews to add new code to the main branch.
• The README is formatted well and at a minimum contains:
• Overview of project and goals
• Overview of technologies used, challenges, wins, and any other reflections
• Screenshots/gifs of your app

Rubric

For the rubric sections below, you will be scored as Wow, Yes or Not Yet depending on whether you have demonstrated competency in that area. Each section lists examples of what types of things we may be looking for as demonstrations of competency. Just as there are many ways to approach code, there are many many ways to demonstrate competency. The following examples are not checklists to complete! There are just some examples.

While M2 rubrics do not have a separate section for WOWs like in M1, there are a few WOW examples noted throughout. In addition to these WOW bullets, you can strive for a WOW by demonstrating not just competency, but excellence and thoroughness across the rubric sections.

Evaluation

Evaluations will be done live with an instructor. You’ll be asked to step through the various parts of your application including accessibility audit, the user interface, running tests and looking at fetch calls and JavaScript code.