Project Description

The Wild Oasis - Hotel Management Application

Welcome to The Wild Oasis Hotel Management Application, a user-friendly and feature-rich system developed to streamline hotel operations. This documentation provides an overview of the application's functionalities, key features, technology stack, and how to set it up.

Key Features 📝

Authentication and Authorization

• Hotel employees can log in to perform various tasks.
• New users can only be signed up within the application to ensure only authorized hotel employees have accounts.
• Users can upload avatars, change their names, and update passwords.

Cabins

• Table view with cabin details, including photo, name, capacity, price, and current discount.
• Users can update, delete, or create new cabins, including photo uploads.

Bookings

• Table view with booking details such as arrival and departure dates, status, paid amount, cabin, and guest data.
• Filterable by booking status: "unconfirmed," "checked in," or "checked out."
• Additional booking data includes the number of guests, nights, guest observations, and breakfast details.

Check In/Out

• Users can delete, check-in, or check out a booking as the guest arrives.
• On check-in, users need to accept payment outside the app and confirm payment receipt inside the app.
• Guests can add breakfast for the entire stay during check-in.

Guests

• Guest data includes full name, email, national ID, nationality, and a country flag for easy identification.

Dashboard

• Initial app screen displays important information for the last 7, 30, or 90 days.
• List of guests checking in and out on the current day.
• Statistics on recent bookings, sales, check-ins, and occupancy rate.
• Charts showing daily hotel sales, including "total" and "extras" sales (breakfast).
• Statistics on stay durations.

Settings

• Users can define application-wide settings, including breakfast price, min and max nights per booking, and max guests per booking.
• Dark mode feature.

Technology Used

• React: JavaScript library for UI development.
• Supabase: Cloud database service for real-time and secure data storage.
• @tanstack/react-query: Data-fetching and state management library for React.
• date-fns: JavaScript date utility library.
• react-router-dom: Library for routing and navigation in React apps.
• recharts: Composable charting library for React.
• styled-components: CSS-in-JS library for styling React components.
• react-hot-toast: Customizable toast notification library.
• react-icons: Collection of customizable icons.
• react-hook-form: Library for form state management and validation.

Build With 🏗️

• JavaScript, Typescript
• ReactJs, Redux, react-query (Front-end)
• Styled Component (Styling)
• NodeJs, ExpressJs (Back-end)
• Supabase (Database)

Getting Started

1. Clone the repository.
2. Install dependencies using npm install.
3. Set up the database on Supabase.
4. Configure environment variables.
5. Run the application using npm start.

Deployed App:

https://reactjs-the-wild-oasis.netlify.app/login

id: [email protected]

pass: pass1234

all RLS policies are disabled in Supabase.

Running Locally

Create a .env.local file in your root directory. There you can insert your supabase key and name it VITE_SUPABASE_KEY.

command: npm run dev

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh