This is a small web app made for employees of a fictional hotel, The Wild Oasis, to track details about bookings and guests. A deployed version (on Netlify) of the app is here (https://the-wild-oasis-hotel-1.netlify.app), which you can try out for yourself!
Login credentials for the demo app are any of the following:
| Account Name | Password | |
|---|---|---|
| Fay Kyuzer | [email protected] | abcdefgh |
| Tess Tyuzer | [email protected] | 12345678 |
Currently, the following features exist:
- Authentication system, which you'll need the above credentials to access if using the demo app.
- Dynamic charts (using Recharts) showing statistics on the home dashboard.
- Check in or check out guest bookings, when they arrive and leave the hotel. Also, you can delete bookings.
- Edit, create or delete cabins in the Cabins panel!
- Note that there are
NO ACTIONForeign Key constraints from Bookings' Cabin ID to the Cabin's ID, which means you cannot delete a cabin if there is a booking associated with it.
- Note that there are
- Also, you can make your own user account after logging in via the demo account. Your login credentials are kept safe (no one can access them, including me), but your account may be destroyed if any major updates are made to the app.
- Update your user account after making it! You can even add an avatar image.
- Adjustable settings for various parameters like the minimum/maximum nights a guests can stay for, the breakfast price and the maximum guests per booking.
- Light mode and dark mode! Automatically switches to your browser preference.
This project was made possible thanks to the following technology:
- React.js
- React Router
- Tanstack React Query
styled-componentsreact-icons- date-fns
- react-hot-toast
- Supabase for its backend database
- Netlify for the demo app hosting
- Vite for putting it all together
This project is made as part of the Ultimate React Course by Jonas Schmedtmann.