Overlook

OVERLOOK

by Jamie Caudill

DESCRIPTION

Overlook is a web-based hotel-booking application that allows users to login with a username and password. Users will then be taken to a dashboard where they can choose to view their past bookings, their upcoming bookings, the total amount they have spent, or search for new bookings. The search function takes in a date with the option to filter by room type. Once the search results are displayed, the user is able to view room details, and book an available room. Once booked, the room is added to their bookings and the total spent is updated. The users bookings will be available even after page refresh.

LINKS

Project spec: Spec. Project repo: Overlook Deployed link: Deployed

• JavaScript
• HTML
• CSS
• Npm
• Mocha
• Chai
• Git
• WebPack
• Fetch API
• SASS
• WAVE
• Lighthouse
• GitHub Projects

LEARNING GOALS

• Object and array prototype methods
• Accessibility best practices
• Network requests
• TDD
• DRY code that follows SRP
• SASS

SETUP

1. Clone the repository to your local machine
2. cd into the project
3. Run npm i and npm start
4. Enjoy!

LOCAL SERVER SET UP

In a separate terminal:

1. Clone this repository
2. Run npm install
3. Run npm start
4. Open localhost:8080 in browser

TESTING

This project utilized Test Driven Development practices. Mocha (testing framework) and Chai (assertion library) are required to run tests, once installed and running: -cd into the repo -run npm test in the terminal

ACCESSIBILITY

• Scored 100 on Lighthouse’s accessibility test
• Changes reccomended by WAVE were implemented, including adding labels to the form and increasing the contrast of headers
• Tested for tabability and color-blindness

PREVIEW

CONTEXT

This project was the final solo project for MOD 2, wrapping up all that we’ve learned about accessibility, iterators, apis, scope, webpack, and how the internet works.

Challenges/Wins

Challenges:

• working with large amounts of data from different places
• utilizing SASS
• implementing accessibility best practices
• time management and organization

Wins:

• feeling more comfortable with iterators, css, html etc.
• no merge conflicts
• using variables and mixins in index.scss
• getting better at debugging and refactoring

CONTRIBUTORS

Jamie Caudill: https://github.com/JamieCaudill