The Wild Oasis is a custom-built internal application designed for a small boutique hotel featuring eight luxurious wooden cabins. This application is specifically crafted to allow hotel employees to manage all aspects of hotel operations, including bookings, cabin management, and guest check-ins. The application serves as a back-office tool, ensuring efficient and seamless management of hotel activities.
- Project Overview
- Features
- Technology Stack
- Installation and Setup
- Project Structure
- Screenshots
- Contact
The Wild Oasis application is an internal tool designed exclusively for hotel employees. The application allows employees to:
- Manage bookings, including checking in and out guests.
- Handle cabin information, such as updating cabin details and availability.
- View and update guest information.
- Perform various administrative tasks, including managing hotel settings and user accounts.
The application is integrated with a Supabase database, where all data is stored and managed through a custom-built API. The goal is to provide an efficient system that simplifies the hotel's daily operations while offering a user-friendly interface.
- User Authentication: Only registered hotel employees can log into the application. New user sign-up is restricted to internal operations to ensure that only hotel staff can access the system.
- Cabin Management: A table view displays all cabins, including details like photos, name, capacity, price, and current discounts. Employees can create, update, or delete cabin records.
- Booking Management: The application provides a comprehensive booking management system where employees can view booking details, filter bookings by status, and check guests in or out.
- Guest Management: Employee can manage guest data, including personal details and booking history.
- Dashboard: The initial screen features a dashboard with key metrics and statistics, such as recent bookings, sales, and occupancy rates, to give employees a quick overview of hotel operations.
- Application Settings: Employees can configure global settings like breakfast pricing, minimum and maximum stay durations, and guest capacity.
- Overview of recent bookings, sales, and occupancy rates.
- Quick access to tasks such as checking in or checking out guests.
- Charts displaying daily sales and stay duration statistics.
- View all bookings with details on arrival and departure dates, status, and payment information.
- Filter bookings by status (unconfirmed, checked in, checked out).
- Manage booking actions such as checking in/out guests, accepting payments, and adding additional services like breakfast.
- Display all cabins with relevant details.
- Create, update, or delete cabin records.
- Upload photos for cabins.
- Manage guest data, including personal information and booking history.
- Identify guests easily with nationality flags.
- Perform guest check-in/check-out operations directly from the dashboard or booking details page.
- Add breakfast options during check-in if not already included in the booking.
- Configure hotel-wide settings such as breakfast pricing, minimum and maximum booking durations, and maximum guest capacity per booking.
- Secure login for hotel employees.
- Manage user accounts, including avatar upload, name, and password changes.
- Sign-up functionality restricted to internal use only.
The following technologies and tools were used to build The Wild Oasis:
React 18: Frontend library for building user interfaces.
Vite: Next-generation frontend tooling for faster builds and development.
React Router: Declarative routing for React applications.
Styled Components: CSS-in-JS library for styling components.
React Query: Remote state management tool for fetching, caching, and updating server data.
Context API: React's built-in tool for managing UI state across components.
React Hook Form: Library for managing form state and validation.
React Icons: A library of popular icons for React projects.
React Hot Toast: Notifications and toasts for user feedback.
Recharts: Charting library for creating data visualizations.
date-fns: Library for date manipulation and formatting.
Supabase: Backend-as-a-Service for the database, authentication, and storage.
To set up the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/your-username/the-wild-oasis.git
- Navigate to the project directory:
cd the-wild-oasis - Install dependencies:
npm install
- Run the development server:
npm run dev
- Open your browser and go to:
http://localhost:5173
The project is organized into the following key pages:
| Feature Category | Necessary Pages |
|---|---|
| 1. Dashboard | /dashboard |
| 2. Bookings | /bookings |
| 3. Cabins | /cabins |
| 4. Guests | /guests |
| 5. Check-In and Check-Out | /checkin/:bookingId |
| 6. App Settings | /settings |
| 7. Authentication | /login, /users, /account |
Below are screenshots showcasing different parts of the application:
- Login Page (
/login):
- Dashboard (Light Mode) (
/dashboard):
- Dashboard (Dark Mode) (
/dashboard):
- Bookings Overview (
/bookings):
- Cabins Overview (
/cabins):
- Booking Details (
/bookings/:bookingId):
- Check-In Page (
/checkin/:bookingId):
- User Creation Page (
/users):
- Account Settings Page (
/account):
- Hotel Settings Page (
/settings):
This project is a private internal application with a secure authentication system, and access is restricted to hotel staff accounts. However, if you're a recruiter or developer and would like to explore the app for evaluation purposes, feel free to reach out.
- ✅ I’ll be happy to provide demo access upon request.
- 🔒 Sign-up is disabled for public users to maintain security.
Please contact me via email or LinkedIn (links below), and I’ll send you access credentials along with guidance on how to use the app.
For any inquiries or further information, please feel free to reach out:
- 📧 Email: hello@paulanik.com
- 🌐 Portfolio: paulanik.com
- 💼 LinkedIn: LinkedIn Profile
- 📝 Dev.to: Dev.to Profile