The project for this application is separated into two repositories, the front end, and the back end: Back-end Front-end

People on the team: 5

Overview of the kanban board

Front-end tasks:

Back-end tasks :

What was done in this release by @eduardosancho, @Yothu, @Bondok6, @fherrerao, and @sj1978 🎃 :

Thanks for taking the time to review our final capstone!

Try it out live here!!

This project is separated into two repositories: Front End (holds the React App) and Back End (holds the API).

This release was prepared while following these provided design guidelines.

Summary 💯

We built a Full-Stack Web Application where users can register and manage their reservations in hotels from anywhere in the world. Built with Reactand Ruby on Rails.

Splash Screen 🏟️

Initially you'll be greeted by the splash screen, please sign up and log in to use the Reservify App.

(There is also a pre-seeded Admin User you can use to create and delete Hotels) Email: [email protected] Password: 12345678

Sidebar 🛸

This app features a slide-in sidebar that serves as a navigation bar that displays the sections of the web app depending if you're an admin or just a user.

• Admins can create and delete hotels.
• Users can add and cancel reservations.

Main Page 🥇

Showcases a dynamic slider that contains the entire list of available hotels for reservation. Use the side arrows to view more hotels. If the user clicks on the thumbnail, it will be redirected to the Hotel Details Page.

Hotel Details ☁️

Here the user can see further information about the hotel, such as its location, its featured amenities, and room price. If a user clicks on the reserve button, a success message will be displayed. To view the recently made reservation, visit the My Reservations Page.

Reserve Page 🚪

Filter available hotels by country and city, and then reserve a room! On click, a success message will be shown and the reservation can be viewed on the My Reservations Page.

My Reservations Page ✅

This section lists all reservations made by a user, their check-in date, and the option to cancel the reservation.

Add Hotel 🌞

When an admin wants to create a new hotel, he/she must fill out a form to specify the hotel's name, description, location, star-rating, number of rooms, price of a room, available amenities and a preview image.

Delete Hotel 💣

There's an exclusive Delete page for admins to remove hotels. It is displayed as a list with both the hotel name and a Delete Buttton.

That's all folks!

What was done in this PR by @eduardosancho, @Yothu , @Bondok6 🎃 :

• [x] Use FormData() to add an image file and submit it to the API. 👔
• [x] Add a preview of the uploaded image on the AddHotelForm. ✔️
• [x] Implement a clean() after form submit. 🤡
• [x] Add a reducer to delete hotel and call it from a Delete Button. 💥

• [x] Update README.md file

  • [x] Description
  • [x] Build with
  • [x] Link to Back-end Repo (APIs)
  • [x] Acknowledgments section.
  • [x] Authors.
  • [x] Live Demo.
  • [x] Screenshots or Screen video.

• [x] Update MIT.md file

What was done in this PR by @eduardosancho 🎃 :

Closes issue #8

• [x] Create a new path and a component to map all reservations made by a user.
• [x] Reservation data is hard-coded, and should later be gotten from the redux-store.
• [x] Display all information on larger screens.
• [x] Hide checkout date and stars on smaller screens.

The cancel button in /my_reservations dispatches an action that updates the database, the react state and the DOM.

It should render a pop-up that says, are you sure you want to cancel?

• [x] In the details page, the user can click the "Reserve" button.
• [x] Make sure that the "Add item" and "Delete item" links are accessible only by users who are admins.
• [x] When the user clicks the "Add item" link in the navigation panel they can see a form for adding a new item.
• [x] When the user clicks the "Delete item" link in the navigation panel they can see a list of all items with title and "Delete" button.
• [x] When the user clicks the "Delete" button, the selected item is marked as removed and does not show on the main list anymore.

What was done in this PR by @eduardosancho 🎃 :

• [x] Add a mockup/temporary page for hotels index.
• [x] Add a hotel details page and populate it with information from a JSON.
• [x] Style the page, considering responsiveness.

Closes issue #7.

Button actions were moved to issue #36, for addition later.

Hey @eduardosancho, @Yothu

I tried to explain what I did using some comments.

This is the final result, when the user fills the signup form, you should get these steps:

1. the initial state @init
2. auth/register/pending -> we can apply loading spinner or anything later.
3. auth/register/rejected -> of course, we will get rejected at this point because there is no real API yet.
4. auth/register/reset -> to reset the state.

You can use the same approach to implement the login and logout inside the same files.

Hello there!

Created the delete hotel page

Changes

• Created delete hotel page
• Created hotels list for the delete hotel page
• Created row component for the hotel list
• Created hotel reducer

Issues

• #5
• #12

Hello there

Many thanks for reviewing my pull request!

Changes

• Created AddHotel component
• Added AddHotel route
• Added a form to the AddHotel component that is intended to create a Hotel

Issue

• #10