/The-Wild-Oasis

An Internal Hotel Management Application

Primary LanguageJavaScriptMIT LicenseMIT

The Wild Oasis

An Internal Hotel Management Project built as part of my 3 months Internship as a front-end developer at Trip.com. The project serves as a central hub for hotel staff, providing them with the necessary tools to efficiently manage check-ins, bookings, cabin availability, and guest information.

Main Features

  • User Authentication: Only hotel employees can sign up and log into the application. New users can sign up within the app by other employees, ensuring that only authorized personnel have access. Users have the ability to upload an avatar and update their name and password.

  • Cabin Management: The app includes a table view that displays all cabins with relevant details such as cabin photo, cabin id, capacity, price, and current discount. Users can update, delete, or create new cabins, including the ability to upload cabin photos.

  • Booking Management: The app provides a comprehensive table view of all bookings, showing arrival and departure dates, booking status, paid amount, and associated cabin and guest data. The booking status can be filtered by "unconfirmed," "checked in," or "checked out." Additional booking data includes the number of guests, number of nights, guest observations, and breakfast information. Users can delete, update, create, check in, or check out a booking as guests arrive. On check-in, users can confirm payment receipt (outside the app) and add breakfast for the entire stay if necessary.

  • Guest Management: The app also provides a comprehensive table view of all Guests, showing Their name, address, age, gender, diet-preference and nationality. Guests can be filtered by Gender and sorted by their age, name and many-more. users can create a new guest when they arrive, update their information or delete a guest when necessary.

  • Dashboard: The initial app screen is a dashboard that provides important information for the last 7, 30, or 90 days. It includes a list of guests checking in and out on the current day, statistics on recent bookings, sales, check-ins, number of pre-paid guests and occupancy rate. The dashboard also features charts displaying daily hotel sales (including extras) and stay duration statistics.

  • Application Settings: Users can define application-wide settings such as breakfast price, minimum and maximum nights per booking, and maximum guests per booking.

  • Dark Mode: The app supports a dark mode option for enhanced user experience.

  • supabase: The app uses Supabase API to perform CRUD operations, for data storage and authentication. Supabase provides a secure and scalable infrastructure and backend as a service.

Tech Stack

  • React - To create reusable UI components and efficiently manage the application's state.
  • React Hook Form - To handle form validation, error handling, and form submission.
  • React Hot Toast - To easily display temporary notifications or alerts to users in an unobtrusive manner.
  • React Icons - To easily include icons from popular icon libraries.
  • React Error Boundary - To display a fallback UI instead of crashing the whole application when an error occurs.
  • Recharts - To visualize data in a visually appealing way.
  • Styled Components - To write CSS styles directly within their JavaScript code and create reusable components.
  • Supabase - For data storage, authentication, and real-time updates. For detailed instructions on setting up and using the Supabase API, refer to the Supabase documentation.
  • React Query - For remote state management, data fetching, caching, synchronization, and updating.

react react-query react-hook-form supabase styled components

Login Credentials

Installation

You can fork the app or you can git-clone the app into your local machine. Once done, please install all the dependencies by running

$ npm install - To Install dependencies 
$ npm run dev - Launch the app

Open your browser and visit http://localhost:5173 to view the app.

Contributing

Contributions are welcome and encouraged! To contribute please follow these steps:

  1. Fork this repository by clicking on the "Fork" button at the top right corner of the page.
  2. Create a new branch: `git checkout -b my-new-feature
  3. Make changes to files according to desired feature(s).
  4. Commit your changes: git commit -am 'Add some feature'.
  5. Push to the branch: git push origin my-new-feature.
  6. Submit a pull request by opening PR in the original repository (not yours)

I review all pull requests thoroughly and appreciate every contribution made.

If you find any bugs/issues/errors please create an issue ticket/appropriate category within issues in Github.

License

This project is licensed under MIT license - see LICENSE.md for more details.