The Overlook

Table of Contents

Overview and Project Goals

The Overlook is a hotel booking site designed and built in 6 days. The goal of this Mod2 final solo project was to create a beautiful, responsive website that allows customers to view past hotel bookings, calculate the cost of their stays, and book upcoming stays.

Learning Goals

To solidify and demonstrate the understanding of:

  • Implementing SCSS to DRY up repetitive styling
  • Utilizing Lighthouse to pass ARIA audits
  • Making network requests to API endpoints to retrieve, manipulate, and post data
  • OOP to drive the design of the application and the code
  • Creating an enjoyable user experience and responsive user interface
  • Creating a robust test suite that thoroughly tests all functionality of a client-side application

Check out the deployed app!

Username is Customer + a number 1-50

Password is overlook2021

Functionality

Login View

  • A customer may login using their corresponding username and password
    alt text

Dashboard View

  • Upon login, the customer can view all of their past and upcoming reservations, sorted in their dashboard
    alt text

Book a Room

  • Customer is able to select a desired date and room type to check availablity and book a stay
    alt text

Mobile View/Responsive

  • Site is responsive and will change layouts across desktop, tablet, and phone screens
    alt text

Future Additions

  • Manager Login/Dashboard: functionality to login as a Manager and view all bookings and hotel revenue
  • Date Range: functionality to allow users to book more than one night
  • Share: ability to share an upcoming trip with family and friends via social media or email

Instructions for Running Project Locally

  • git clone this repository
  • cd into the repository on your local machine
  • Run npm install
  • Run npm install dayjs
  • Run npm start
  • git clone this API repository
  • Run npm install
  • Run npm start
  • Enjoy your stay at The Overlook!

Want to contribute?

If you would like to contribute, please fork this repository and clone it down to your local machine. Once you've successfully implemented the changes in code necessary for your intended contribution without changing any of the current functionality of main, submit a pull request for authors to review the changes.

Back to top

Technologies Used

  • JavaScript
  • Semantic HTML
  • SCSS/Sass
  • Mocha & Chai
  • WebPack
  • Dayjs

Contributors

Author

Reviewers

Project Manager


Back to top