m1073496 / overloook

Overlook

A Front-End Project by Jessica Justice.

1. Overview
2. Planning Resources
3. Set Up
4. Learning Goals
5. Technologies
6. Features
7. Challenges
8. Wins
9. Future Additions

Overview

This is a Turing School of Software and Design - Module 2 solo project.

The purpose of this project was to test knowledge of Mod 2 concepts, including iterator methods, unit-testing, making API requests, and implementing SASS and techniques to ensure users experience a responsive and intuitive design across multiple screen sizes.

The project was Overlook, an app that tracks a user's hotel bookings at the fictitious Overlook hotel, including all their past and current room bookings and their corresponding information, as well as the total price they have spent on all their rooms to date. The app also gives users the ability to search for available rooms by date, to filter those results by room type, and to book any available rooms they would like. Room bookings made on the app are POSTed to the corresponding API, and the DOM is updated instantly. To get to their user dashboard, however, a user must first log in to the app by providing a username and password, and can later log out of the app when they are finished.

My task on this project was to build out the skeleton layout provided, as well as a log in page, including the responsiveness of the app on various screen sizes, to make for a better UI, as well as to write unit tests for each class I implemented for the app. All data used on the app I fetched with an API, and I implemented POST request functionality for booking rooms that subsequently updates the DOM. To style the app, I implemented SASS files, mixins, and variables to DRY up the code, and implemented a reset file so that the styling carries across multiple browsers. I also ensured that the user dashboard scores a 100% on the Lighthouse Accessibility audit.

Planning Resources

• Trello Project Board
• Balsamiq Wireframes
• Jam Board - Class Structure Outline

Set Up (server and application must be running simultaneously)

Overlook API Server

Clone down this repo: Overlook API

cd into directory and run:

npm install

To start the server, run:

npm start

Overlook Application

Clone down this repository to your local machine, then install the library dependencies by running:

npm install

To start application, run:

npm start

If you see Compiled successfully in your terminal, the application is running and the app can be veiwed at http://localhost:8080/ in your browser. Make sure this application, and the Overlook API server, are both running to ensure you see the right information displayed on the app.

Logging In

To log in to the app, you can choose any username between customer1 through customer50 with the password overlook2021.

Learning Goals

• Webpack
• SASS
• Fetch API -> Making GET and POST requests/Error handling
• CSS Grid and Responsive design

Technologies

• HTML5
• SCSS
• Vanilla JavaScript ES6
• Git
• GitHub
• Webpack
• Fetch API
• Lighthouse
• Mocha
• Chai

---

Features

Log-In & Out

Search and Book Room

---

Challenges

• Making POST requests
• Implementing proper error handing for fetch requests
• Styling

---

Wins

• Getting a better understand of the fetch API
• Creating log in and log out functionality (the latter is my own extension)
• Implementing a date picker
• Writing all of the code in 3 days!

---

Future Iterations

• Add hotel room photos
• Implement an intermediary view that lets the user know their room was booked before returning to the dashboard view
• Implementing the Manager extension:
  • Creating a manager log in who can add or remove booking for individual customers

overloook's Issues

Iteration 3: Customer 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.

Iteration 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

Iteration 1: Customer dashboard

As a customer, I should see the following on my dashboard:

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