“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.
- 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
- 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
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/.
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.
- 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)