This is a React app for employees of The Wild Oasis Hotel. App allows users to manage offered by hotel wood cabins for rest and interact with guests' bookings. App was created with Vite build tool. Data is stored at the Supabase DB.
App is deployed at: https://wild-oasis-hotel-app.vercel.app/
When you first visit this app you'll see a login form. If you want to try using this app, you need to enter:
email - guest@gmail.com
password - guest
After you successfully logged in, you'd be redirected to the home page of the app. It contains bookings stats (bookings & check-ins quantity, total sales income & occupancy rate). You can choose a desired period for stats observation (last 7 / 30 / 90 days). There is also 'Today' section where you can observe today's check-ins & check-outs. In the 'Stay duration summary' and 'Sales' sections you can see visual representation of stats.
Button 'Upload bookings ONLY' on the sidebar will help you to generate sample bookings data if actual data would become outdated.
Here you will get all information about bookings. All bookings can be sorted by status and date. If you press menu button (on the right side of booking) you will see action options possible to do with this booking.
If you select 'Details' option after pressing menu button you'll get more detailed information about booking. Also there are some options to do with current booking ('Check Out' / 'Delete'). Also if the guest ordered cabin without paying for breakfast there is possibility to order and pay for it in situ.
On this page you can find info about all hotel cabins, their current price and discounts.
In order to prevent registration of strangers (persons who do not work in The Wild Oasis Hotel) in the app is implemented feature when a new user can be signed up only from account of already existing user.
User can update his displayed name & password and load avatar image. For that it is necessary to click user icon in the app header and update data.
Hotel settings could be changed on the Settings page in a very simple way - you change some value and click outside the input field.
Design of app has light and dark mode. Mode can be toggled by clicking appropriate icon in the app header.
.
App design was created by brilliant educator Jonas Schmedtmann for his course "The Ultimate React Course 2023: React, Redux & More".