Overlook

Table of Contents

• Description
• Technologies
• Installation and Setup
• Wins
• Challenges and Future Iterations
• Contributors
• Project Specs

Description

This app allows users to search hotel rooms and make bookings. Users can filter hotel rooms by room type and by date. The app will keep track of all of the users bookings and their total cost.

Login

* To login: - use `customer50` as the username - use `overlook2021` as the passwordInput

My Bookings Dashboard

* You will see a 'My Bookings' view that shows all the bookings for that user with the total cost of those bookings.

Filter View

* Click 'Book A Room' to see the filter. Select any date and any of the four room types.

Filtered Rooms Display

* Once you click 'View Rooms', you will see all the rooms available (not already booked) on that date. * When you find the room you want, click 'Book This Room, you'll be taken to a confirmation pageTitle

Booking Confirmation

* After celebrating your newly booked vacation, you can either brows more available rooms or checkout your bookings.

Error Message

* In the case that there is an error with the api call, the user will see this message. And the developer can view the error in the console.

Installation and Setup

• Fork and clone the repo down to your local machine. Github Repo Link
• cd into the directory
• Run npm install
• Run npm start and past the local host url in your browser
• You'll need a local API. To access the api, visit API Repo and clone it down to your machine
• cd into the directory
• Run npm install
• Run npm start
• LoginView

• use customer50 as the username
• use overlook2021 as the passwordInput

Technologies

• Javascript
• eslint
• Atom
• WebPack
• API
• Mocha and Chai
• Sass
• Lighthouse

Wins

• Being able to problem most of the major issues with my own toolbox.
• Creating a satisfying design
• Successful api calls and error handling
• Accessibility was very important and lighthouse scores are 100% for this project.

Challenges and Future Iterations

• Ran into issues with css with the child elements overflowing out of the parent container to the flex start side. Learned that this is a flexbox issue that can be fixed by replacing justify-content: center with margin: auto.
• For the future, I'd like to make the login page more functional where a user can create their own username and password that can be added to the api.
• I'm also learning that it's better to represent all the api data with classes. In real life, we wouldn't want the user to have access to all the bookings so it makes sense to create a hotel class that store rooms and bookings.

Contributors

Jasmyn Hicks

Project specs

• The ruberic and specs for this project can be found here