Welcome to The Wild Oasis! This is a hotel management web app, where hotel employees can manage cabins, bookings, and guests. It uses Supabase as the backend and implements advanced React techniques such as HOCs and React Query.
You can check live website The Wild Oasis.
- Landing Page
-
React Query: Efficient data fetching and caching. -
Styled Components: Modular and scalable component styling. -
React Hook Form: Simple, powerful form handling -
Supabase: Authentication and real-time database. -
🏗️ The Compound Component Pattern: Maintainable UI components.
-
🌑 Dark Mode: Seamless toggle between light and dark themes.
-
📊 Visualizing Data with Recharts: Visualizing user data with dynamic charts
- Cabin Management: Easily manage cabin availability and details.
- Booking Management: Streamline the booking process and keep track of reservations.
- User Management: Administer user roles and permissions efficiently.
- Sales Statistics: Gain insights into sales data to make informed decisions.
- Dark Mode: Enjoy a modern, customizable interface with dark mode support.
- Authentication: Secure user access through integrated authentication.
- Charts: Visualize data with integrated charts for better understanding.
- Responsive Design: Ensures usability on various devices
- Clone the repository:
git clone https://github.com/your-username/the-wild-oasis.git
cd the-wild-oasis
- Install dependencies:
npm i
- Set up supabase by creating email at supabase and get your own URL and API KEY then integrate them in supabase.js file
import { createClient } from "@supabase/supabase-js";
export const supabaseUrl = YOUR_SUPABASE_URL;
const supabaseKey = YOUR_SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
export default supabase;
Run and Test Project
npm run dev
We're excited for you to be a part of this journey. Whether you're fixing a bug or building new features, your contribution will help keep The Wild Oasis flourishing. Feel free to submit issues, pull requests or emailing me Mahmoud Alaa