Wild Oasis is a web application for managing cabin bookings, providing features for checking availability, booking management, and user settings. The project leverages modern tools and a modular design for scalability.
- User Authentication: Secure login, signup, and password management with Supabase.
- Booking Management: View, create, and manage bookings with status updates.
- Context & Compound Components: Used to manage shared state and reusable UI elements.
- React Router: For smooth, dynamic navigation across pages.
- Search and Filtering: Search Params allow precise filtering in the booking dashboard.
- State Management: Implemented Context API to manage global state effectively across components, ensuring data consistency.
- Real-Time Data Syncing: Integrated React Query and Supabase for efficient, real-time data updates.
- Modular Design: Utilized compound components and styled-components to streamline UI while maintaining flexibility.
- Scalability: Built a maintainable structure for easy scaling and feature addition.
└── Wild-Oasis/
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ ├── default-user.jpg
│ ├── logo-dark.png
│ ├── logo-light.png
│ └── vite.svg
├── src
│ ├── App.jsx
│ ├── data
│ │ ├── Uploader.jsx
│ │ ├── cabins
│ │ │ ├── cabin-001.jpg
│ │ │ ├── cabin-002.jpg
│ │ │ ├── cabin-003.jpg
│ │ │ ├── cabin-004.jpg
│ │ │ ├── cabin-005.jpg
│ │ │ ├── cabin-006.jpg
│ │ │ ├── cabin-007.jpg
│ │ │ └── cabin-008.jpg
│ │ ├── data-bookings.js
│ │ ├── data-cabins.js
│ │ └── data-guests.js
│ ├── features
│ │ ├── authentication
│ │ │ ├── LoginForm.jsx
│ │ │ ├── SignupForm.jsx
│ │ │ ├── UpdatePasswordForm.jsx
│ │ │ ├── UpdateUserDataForm.jsx
│ │ │ └── UserAvatar.jsx
│ │ ├── bookings
│ │ │ ├── BookingDataBox.jsx
│ │ │ ├── BookingDetail.jsx
│ │ │ ├── BookingRow.jsx
│ │ │ ├── BookingTable.jsx
│ │ │ ├── BookingTableOperations.jsx
│ │ │ └── useBookings.js
│ │ ├── cabins
│ │ │ ├── AddCabins.jsx
│ │ │ ├── CabinRow.jsx
│ │ │ ├── CabinTable-v1.jsx
│ │ │ ├── CabinTable.jsx
│ │ │ ├── CabinTableOperations.jsx
│ │ │ ├── CreateCabinForm.jsx
│ │ │ ├── useCabins.js
│ │ │ ├── useCreateCabin.js
│ │ │ ├── useDeleteCabin.js
│ │ │ └── useEditCabin.js
│ │ ├── check-in-out
│ │ │ ├── CheckinBooking.jsx
│ │ │ ├── CheckoutButton.jsx
│ │ │ ├── TodayActivity.jsx
│ │ │ └── TodayItem.jsx
│ │ ├── dashboard
│ │ │ ├── DashboardBox.jsx
│ │ │ ├── DashboardFilter.jsx
│ │ │ ├── DashboardLayout.jsx
│ │ │ ├── DurationChart.jsx
│ │ │ ├── SalesChart.jsx
│ │ │ └── Stat.jsx
│ │ └── settings
│ │ ├── UpdateSettingsForm.jsx
│ │ ├── useSettings.js
│ │ └── useUpdateSettings.js
│ ├── hooks
│ │ ├── useLocalStorageState.js
│ │ ├── useMoveBack.js
│ │ └── useOutsideClick.js
│ ├── main.jsx
│ ├── pages
│ │ ├── Account.jsx
│ │ ├── Bookings.jsx
│ │ ├── Cabins.jsx
│ │ ├── Dashboard.jsx
│ │ ├── Login.jsx
│ │ ├── PageNotFound.jsx
│ │ ├── Settings.jsx
│ │ └── Users.jsx
│ ├── services
│ │ ├── apiBookings.js
│ │ ├── apiCabins.js
│ │ ├── apiSettings.js
│ │ └── supabase.js
│ ├── styles
│ │ └── GlobalStyles.js
│ ├── ui
│ │ ├── AppLayout.jsx
│ │ ├── Button.jsx
│ │ ├── ButtonGroup.jsx
│ │ ├── ButtonIcon.jsx
│ │ ├── ButtonText.jsx
│ │ ├── Checkbox.jsx
│ │ ├── ConfirmDelete.jsx
│ │ ├── DataItem.jsx
│ │ ├── Empty.jsx
│ │ ├── ErrorFallback.jsx
│ │ ├── FileInput.jsx
│ │ ├── Filter.jsx
│ │ ├── Flag.jsx
│ │ ├── Form.jsx
│ │ ├── FormRow.jsx
│ │ ├── Header.jsx
│ │ ├── Heading.jsx
│ │ ├── Input.jsx
│ │ ├── Logo.jsx
│ │ ├── MainNav.jsx
│ │ ├── Menus.jsx
│ │ ├── Modal.jsx
│ │ ├── Pagination.jsx
│ │ ├── Row.jsx
│ │ ├── Select.jsx
│ │ ├── Sidebar.jsx
│ │ ├── SortBy.jsx
│ │ ├── Spinner.jsx
│ │ ├── SpinnerMini.jsx
│ │ ├── Table.jsx
│ │ ├── TableOperations.jsx
│ │ ├── Tag.jsx
│ │ └── Textarea.jsx
│ └── utils
│ └── helpers.js
└── vite.config.js
WILD-OASIS/
__root__
src
features
cabins
bookings
authentication
settings
dashboard
check-in-out
styles
hooks
pages
utils
services
ui
Before getting started with Wild-Oasis, ensure your runtime environment meets the following requirements:
- Programming Language: JavaScript
- Package Manager: Npm
Install Wild-Oasis using one of the following methods:
Build from source:
- Clone the Wild-Oasis repository:
❯ git clone https://github.com/TheXro/Wild-Oasis
- Navigate to the project directory:
- Install the project dependencies:
Using npm 
Run Wild-Oasis using the following command:
Using npm
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your github account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone https://github.com/TheXro/Wild-Oasis
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.'
- Push to github: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph
