tylrs / overlook-hotel

Overlook Hotel

The Overlook Hotel recreates a basic hotel website. A user can login, view their current and previous bookings, and can also add new bookings based on which rooms are available for a particular date.

The project spec can be found here.

Deployed Link here

Table of Contents

• Install
• Goals
• Features
• Contributors
• Technologies
• Future Iterations

Install

1. Clone down the api server git clone https://github.com/turingschool-examples/overlook-api
   1. This API holds the data our project will fetch in order to populate the browser with info
2. CD into your local clone cd overlook-api
3. Install project dependencies npm install
4. Run npm start
5. Clone down this repository git clone https://github.com/tylrs/overlook-hotel
6. CD into your local clone cd overlook-hotel
7. Install project dependencies npm install
8. Run npm start and open localhost:8080 in your preferred browser

Goals

• Use OOP to drive the design of the application and the code
• Work with an API to send and receive data
• Solidify the code review process
• Create a robust test suite that thoroughly tests all functionality of a client-side application

Features

GIF showing user login

GIF showing users future and past bookings

GIF showing calendar and available cards

GIF showing filter options

GIF showing add new booking

GIF showing responsive app

Contributors

This application was written by Taylor Galloway frontend engineering student at Turing School of Software & Design.

Technologies Used

• JavaScript
• HTML
• SCSS
• Mocha/Chai for testing
• Webpack
• fetch API
• flatpickr for calendar
• dayjs for date formatting

Future Additions:

• Add another user who is a manager who can perform different operations with the same data set.
• Use more mixins to DRY up SCSS
• Give manager option to delete a customer's bookings

overlook-hotel's Issues

Change what add booking in customer class returns if necessary

Currently return boolean, maybe later return a string?

Research other hotel management tools for design inspiration

• Choose 3

Other refactoring before iteration 3

DOM for It 2

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
• Render tags to filter rooms by
• 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

It 3 HTML/CSS

• 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 loggin in, I should see my dashboard.

DOM for IT 1

I should see a dashboard page that shows me:

• Any room bookings I have made (past or present/upcoming)
• The total amount I have spent on rooms

Error Handling for Login

Create Sample Data for tests

• Customer
• Bookings
• Rooms

It 1 HTML/CSS

I should see a dashboard page that shows me:

• Any room bookings I have made (past or present/upcoming)
• The total amount I have spent on rooms

Tests and Implementation Code for It1

It 2 HTML/CSS

• 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

Tests and Implementation Code It 3

DTR

Sort user's bookings by date

Tests and Implementation Code for It2

DOM for it 3

• 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 loggin in, I should see my dashboard.

Base HTML/SASS

fetch POST add new booking

Initial fetch GET working

Plan out overall class structure

Add error handling for api calls and not found rooms

• Display message if no rooms found for date
• Display message if post successful
• Display message if post unsuccessful
• Display message if fetch one user unsuccessful
• Display message if fetch multiple data points unsuccessful

Clean up SASS

• Login Page
• Dashboard page
• Calendar Selection Page
• Available Rooms Page
• Card Styling in general
• Card Full view

Plan out Iteration 4

HTML/CSS it 3

Design wireframe

• General Dashboard page for it 1
• Nav Bar
• Date Selection view
• Room Details View
• Login View
• Mobile View

Research date picker

Accessibility refactoring before iteration 3