The Wild Oasis

The Wild Oasis is a full-stack internal application designed specifically for managing the operations of a small boutique hotel with 8 luxurious wooden cabins. This application empowers staff to efficiently manage bookings, cabins, guests, and other essential hotel operations. The Wild Oasis offers a seamless experience with light and dark mode settings, a guest check-in feature, breakfast options management, and a comprehensive dashboard displaying business statistics and charts.

Features

Core Functionality:

• User Authentication: Staff can securely log in using email and password via Supabase authentication.

• Light/Dark Mode Toggle: Switch between dark and light modes in the settings.

• Guest Check-In: Check in guests upon arrival and manage their breakfast preferences.

• Business Dashboard: Visualize key business statistics and insights through interactive charts and graphs.

Technology Stack:

Frontend:

• Vite for fast development and builds.

• Styled Components for dynamic styling.

• React Query for server state management.

• React Hook Form for form handling.

• React Router for navigation.

• Context API for global state management.

Other Libraries:

• React Icons for icons.

• React Hot Toast for toast notifications.

• Recharts for data visualization.

• date-fns for date manipulation.

Backend:

• Supabase for database management and authentication.

Deployment:

Hosted on Vercel for fast and reliable deployment.

Roadmap

Completed:

• Development of an internal staff-facing application.

• Secure login with Supabase authentication.

• Implementation of a user-friendly dashboard and essential management features.

Future Plans:

• Build a customer-facing website where guests can book stays using the same API.

• Add more advanced features, such as automated guest notifications, housekeeping management, and revenue tracking.

Acknowledgments

This project was created with the help of The Ultimate React Course 2024: React, Next.js, Redux & More by Jonas Schmedtmann. The tutorial served as a foundation for understanding the core concepts and implementing features, with additional customizations and improvements made to suit the specific requirements of this project.

Getting Started

Prerequisites:

Node.js installed on your machine.

Vite setup for development.

Installation:

1. Clone the repository:
   git clone https://github.com/your-username/the-wild-oasis.git
2. Navigate to the project directory:
   cd the-wild-oasis
3. Install dependencies:
   npm install
4. Start the development server:
   npm run dev
5. Access the application at http://localhost:3000.

Environment Variables:

Ensure the following environment variables are set:

• VITE_SUPABASE_URL

• VITE_SUPABASE_ANON_KEY

Usage

• Log in using the provided staff credentials:
  Email: [email protected]
  Password: testuser123

• Navigate through the dashboard to manage bookings, guests, and cabins.

• Use the settings page to toggle between light and dark mode.

Screenshots

Login Page

Dashboard Page

Booking Page

Cabins Page

Contributing

Contributions are welcome! If you have any ideas for new features or improvements, feel free to open an issue or submit a pull request.

Connect with Me

I’m building The Wild Oasis as part of my developer portfolio to showcase my skills in creating real-world applications. Follow my journey on LinkedIn or check out more of my projects on GitHub.

Thank you for exploring The Wild Oasis! Feel free to reach out if you have any questions or feedback.