This five-day project is the final solo challenge in Module 2 of the Turing School of Software and Design Front-End program. THe goal of this project was to build a hotel booking app that demonstrates the use of Object Oriented Programming, APIs to send and receive data, a solid code review process, and robust testing suites to test all functionality. The app allows users to log in and see past and upcoming bookings, track the total amount they've spent, as well as create new bookings.
Login screen for The Overlook Hotel, which requires the user to enter a username and password to access the app:
After loging in, users will see a dashboard of their total spending, upcoming booked rooms, and previous booked rooms. Users can also book new rooms, and are able to sort all available rooms by date and room type:
First, open a Terminal window and clone down the following API repo: . Then, in the terminal, type npm install and npm start to start the API.
Second, open a new Terminal window and clone down this repo. Then type npm install and npm start to get the app running.
Third, in your web browser, visit http://localhost:8080/ to use the Overlook Hotel App.
Log in with the following information:
- Username: customer50
- Password: overlook2021
- HTML
- Sass/CSS
- JavaScript
- Webpack
- Mocha/Chai
- fetch API to GET and POST data
- VS Code
- Lighthouse and WAVE via Chrome
Primary Author: Eric Sergeant; Code Reviewer: Will McGuire; Project Manager: Hannah Hudson
This was the first solo project to use fetch to both retrieve data from the API and update the API with information flowing back to it. It was also challenging to keep track of the various class constructors, the methods of each, and the ways they all interacted with each other. This was also my introduction to SCSS, which was it's own learning curve.
Overall, I was able to successfully implement the MVP for this project, including the new challenging material such as GET/POST and SCSS. I was also able to get a fully-tabable page with 100% Lighthouse accesssibility and no ARIA errors/issue. Using project and issue tracking on GitHub, I was able to keep track of all iterations, user stories, and bugs to successfully complete the project in a very limited amount of time.
- Refactoring: Since this was only a week-long project, there are opportunities for improvement. Specificaly, I would like to improve the general layout and design of the app. I would also like to move from
innerHTMLadjustments to usingNode.appendChild()instead. - Manager login: Adding a manager login, along with the ability to delete bookings via the API.