/Overlook_Vue

Overlook is a hotel booking application using Vue 3 with Nuxt.js and Cypress for end to end testing

Primary LanguageVue

Overlook Hotel - Currently Under Construction 🦺🛠

Overview

This is a rebuild of an earlier vanilla JS project called Overlook. It's a hotel booking application which allows a user to login with a username and password, view the total amount of money spent at the hotel, view details of their previous stays, and book future stays. The project is under construction using Vue 3 with Nuxt.js so PLEASE PARDON THE MESS. End to end testing will be completed using Cypress.

The original spec for Overlook can be found here
Instructions for cloning and running the Overlook-api can be found here

Instructions

# clone down this repo
$ git clone git@github.com:Meekb/Overlook_Vue.git 
$ cd into project

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

Project Details

  • Built with Vue 3 using components
  • Page routing will be handled by Nuxt.js - UNDER CONSTRUCTION
  • Username: 'customer01' to 'customer50'
  • Password: 'overlook2021'
  • API holds data for users, rooms, and bookings
    • Bookings are for the year 2020
    • No error handling for past check-in dates which currently allows for POSTs in 2020
  • GET and POST implemented with Axios
  • Application testing will be completed using Cypress - UNDER CONSTRUCTION

Walkthrough of Overlook at current stage of development

Providing an incorrect username or password will throw an error for the user then clear the input fields for re-entry overlook-login

Once successfully logged in, the user can view their history with Overlook Hotel including the total dollars they've spent. Wow, that's a lot of money! This hotel must be REALLY popular overlook-history

User searches by providing a check-in date and selecting a room type overlook-search

If no rooms of that type are available for the check-in date, the user will receive a strongly worded message advising them to change the room type or adjust their check-in date overlook-ahshit

Once a room has been booked, the user will receive a success message and confirmation number for their records overlook-confirmation

Tech Stack

Vue 3 Nuxt.js JavaScript ES6 CSS Cypress

Contributors

Beth Meeker GH
Beth Meeker avatar

Turing School of Software & Design - Original Overlook spec