The Wild Oasis

“The Wild Oasis” is a small hotel with 8 wooden cabins. This is the internal application used inside the hotel to check in guests as they arrive.

Project requirements

• Users of the app are hotel employees. They need to be logged into the application to perform tasks
• New users can only be signed up inside the applications (to guarantee that only actual hotel employees can get accounts)
• Users should be able to upload an avatar, and change their name and password
• App needs a table view with all cabins, showing the cabin photo, name, capacity, price, and current discount
• Users should be able to update or delete a cabin, and to create new cabins (including uploading a photo)
• App needs a table view with all bookings, showing arrival and departure dates, status, and paid amount, as well as cabin and guest data
• The booking status can be “unconfirmed” (booked but not yet checked in), “checked in”, or “checked out”. The table should be filterable by this important status
• Other booking data includes: number of guests, number of nights, guest observations, whether they booked breakfast, breakfast price
• Users should be able to delete, check-in, or check out a booking as the guest arrives (no editing necessary for now)
• Bookings may not have been paid yet on guest arrival. Therefore, on check-in, users need to accept payment (outside the app), and then confirm that payment has been received (inside the app)
• On check-in, the guest should have the ability to add breakfast for the entire stay, if they hadn’t already
• Guest data should contain: full name, email, national ID, nationality, and a country flag for easy identification
• The initial app screen should be a dashboard, to display important information for the last 7, 30, or 90 days:
  • A list of guests checking in and out on the current day. Users should be able to perform these tasks from here
  • Statistics on recent bookings, sales, check-ins, and occupancy rate
  • A chart showing all daily hotel sales, showing both “total” sales and “extras” sales (only breakfast at the moment)
  • A chart showing statistics on stay durations, as this is an important metric for the hotel
• Users should be able to define a few application-wide settings: breakfast price, min and max nights/booking, max guests/booking
• App needs a dark mode

Additional goals outside of the course

• Users should be able to create new bookings
• Users should be able to edit bookings
• Users should be able to set check-in and check-out times for bookings
• Users should be able to get a pdf invoice on check out
• Guest should be able to receive a pdf invoice by email
• Users should be able to change cabin price based on the day of week, month or custom price for any day
• App should have a guest table, displaying their information
• Users should be able to create new guests
• Users should be able to edit guests

Running this project

To run this project you need to download the repository and open it in Visual Studio Code or a similar app. Then you have to open a terminal and run the command npm run dev. By default, it won't open any new tab, so you have to go to http://localhost:5173/.

Working with the app

The app requires you to be logged in to be able to use any features. When you open the login page enter email preview@example.com and password 12345678. From here you can register a new user or use it as an admin.

Technologies used

• React Router - navigation in the SPA
• Styled Components - component-scoped CSS
• React Query - managing remote state
• Context API - managing UI state
• React Hook Form - handling big forms
• React icons - providing icons
• React hot toast - showing notifications
• Recharts - displaying charts
• date-fns - manipulating JavaScript dates
• Supabase - providing back-end (database, Authentication, instant APIs)