Giter Club home page Giter Club logo

overlook's Introduction

The Overlook Hotel Booking

Description

This app will allow a user to log in to their own personalized dashboard on The Overloook Hotel's booking site to browse their confirmed bookings and make new bookings if desired.

Learning Goals

  • Use object and array prototype methods to perform data manipulation.
  • Create a user interface that is easy to use and clearly displays hotel and booking information.
  • Write DRY, reusable code that follows SRP and trends toward function purity.
  • Implement a robust testing suite using TDD.
  • Make network requests to retrieve and post data.
  • Use branches, PRs and thorough code reviews to add new code to the main branch.
  • Use a project board throughout the evolution of the application.
  • Archive 100% accessibility audit score using the Lighthouse dev tool.

Features

  • Upon page load, the user will see a login page, prompting them to validate their credentials in a login form to see their account and to browse avaiable rooms.

ezgif com-video-to-gif (7)

  • Upon login, the user will see a welcome message, a list of their current confirmed bookings, and their total amount spent on bookings. The user can see a side bar indicating they can make another booking through this part of the dashboard.

user-dashboard

  • The user select a date using a date selector. When choosing a date, they will see all available rooms at The Overlook Hotel on the date chosen. The user may filter these available rooms by room type if desired. In the event there are not rooms avaiable for their chosen date or filter, they will see a message informing them of it and will be prompted to choose another option.

ezgif com-video-to-gif (10)

  • The user can look through the listings and click a button to book their chosen room. They will see a confirmation message, and their dashboard will update to include the new listing and updated total spent.
booking-confirmed

Installation

  1. fork this repository and/or clone it to local
  2. Once you have cloned the repo, change (cd) into the directory and install the project dependencies. Run npm install or npm i to install project dependencies.
  3. Run npm test to see tests
  4. Run npm run lint if you would like to see the linter
  5. Setup local server by cloning the following repo into another directory: https://github.com/turingschool-examples/overlook-api
    • Follow the instructions in the repo's readme to get it setup
  6. Inside the server directory, run npm start
  7. Inside the project directory run npm start and visit localhost:8080

Contributors

Technologies Used

  • JavaScript
  • CSS
  • HTML
  • Mocha
  • Chai
  • Webpack
  • Fetch API
  • Npm packages

Wins & Challenges

  • Wins: Implement Fetch API and login page independently, from start to finish.
  • Challenges: Error handling for UI/UX.

overlook's People

Contributors

paulina-isabel avatar robbiejaeger avatar hannahhch avatar cassandragoose avatar niksseif avatar dependabot[bot] avatar hfaerber avatar khalidwilliams avatar caitlincradick avatar

Watchers

 avatar

overlook's Issues

Dashboard MVP

Create an index.html file that accounts for a dashboard including


1. Any room bookings I have made (past or upcoming)
2. The total amount I have spent on rooms

4: User Stories: 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.
Refer to the “Get single user” section from the project spec page.

http://localhost:3001/api/v1/customers/<id> where<id> will be a number of a customer’s id

Fetch Req

Successfully carry out fetch and fetch-post.

2a: Date Selector

  • 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

2: User Stories: 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
Refer to the “Add new booking” section from the project spec page.

http://localhost:3001/api/v1/bookings

2c: Select a room for booking

  • 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.