The Wild Oasis

About The Project

Welcome to Wild Oasis! A hotel management web application where hotel staff can manage cabins, reservations and guests. In this project, I used Supabase as Backend and developed this project using advanced React topics such as React Query, HOC, ContextAPI, React Hook Form and ... 😉🏅

Live Site

• https://the-wild-oasis-demolive.vercel.app

Demo

✅ Features

• With the authentication system of this program, we make sure that only hotel employees are allowed to enter and use the program.
• Users can manage their profiles, including uploading avatars and changing passwords.
• The app has a dashboard that shows recent statistics on bookings, arrivals and sales.
• You can create, edit or delete cabins.
• You can check whether the guests have paid their reservation or not, or even manage their check-in and check-out.
• Visual statistics with graphs that show sales, occupancy rates and other important data.
• You can invite or add new employees to the program.
• You can filter or sort your results based on different options.
• It supports dark mode and light mode.

✅ Technologies Used

• React for the frontend.
• Supabase for the database and real-time data updates.
• Styled Components for styling the UI, including dark mode.
• React Router for navigation.
• React Query for data fetching and caching.
• React Hook Form for efficient form handling.
• React-Error-Boundary to handle component rendering errors.
• Context API for managing dark mode and light mode and local states.
• Recharts for data visualization (charts and stats).
• Vite for development environment and build system.
• React-Hot-Toast to show success, error or notification messages.
• React-Icons for icons.

✅ Installation

1. Clone the repo

   git clone https://github.com/mersad-Bxtrue/The-Wild-Oasis.git

2. Go to project folder

   cd The-Wild-Oasis

3. Install NPM packages

   npm install

4. Run the development server

   npm run dev

💛 Last Words

In this super application I learned to work with supabase and create authentication and backend systems and learned how to get data's from server using React Query or even update it and many other things that I learned it in React course on Udemy by Jonas Schmedtmann.