Skip to content

TheXro/Wild-Oasis

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
public
public
 
 
src
src
 
 
.eslintrc.cjs
.eslintrc.cjs
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
index.html
index.html
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

Repository files navigation

WILD-OASIS

license last-commit repo-top-language repo-language-count


🔗 Table of Contents

📍 Overview

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.

👾 Features

  • 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.

📌 Challenges

  1. State Management: Implemented Context API to manage global state effectively across components, ensuring data consistency.
  2. Real-Time Data Syncing: Integrated React Query and Supabase for efficient, real-time data updates.
  3. Modular Design: Utilized compound components and styled-components to streamline UI while maintaining flexibility.
  4. Scalability: Built a maintainable structure for easy scaling and feature addition.

📁 Project Structure

└── 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

📂 Project Index

WILD-OASIS/
__root__
package-lock.json ❯ REPLACE-ME
vite.config.js ❯ REPLACE-ME
package.json ❯ REPLACE-ME
index.html ❯ REPLACE-ME
src
App.jsx ❯ REPLACE-ME
main.jsx ❯ REPLACE-ME
features
cabins
CabinTableOperations.jsx ❯ REPLACE-ME
CabinRow.jsx ❯ REPLACE-ME
useCabins.js ❯ REPLACE-ME
CreateCabinForm.jsx ❯ REPLACE-ME
CabinTable-v1.jsx ❯ REPLACE-ME
CabinTable.jsx ❯ REPLACE-ME
useCreateCabin.js ❯ REPLACE-ME
useEditCabin.js ❯ REPLACE-ME
AddCabins.jsx ❯ REPLACE-ME
useDeleteCabin.js ❯ REPLACE-ME
bookings
BookingTable.jsx ❯ REPLACE-ME
BookingDetail.jsx ❯ REPLACE-ME
useBookings.js ❯ REPLACE-ME
BookingTableOperations.jsx ❯ REPLACE-ME
BookingDataBox.jsx ❯ REPLACE-ME
BookingRow.jsx ❯ REPLACE-ME
authentication
UserAvatar.jsx ❯ REPLACE-ME
SignupForm.jsx ❯ REPLACE-ME
LoginForm.jsx ❯ REPLACE-ME
UpdatePasswordForm.jsx ❯ REPLACE-ME
UpdateUserDataForm.jsx ❯ REPLACE-ME
settings
useUpdateSettings.js ❯ REPLACE-ME
useSettings.js ❯ REPLACE-ME
UpdateSettingsForm.jsx ❯ REPLACE-ME
dashboard
SalesChart.jsx ❯ REPLACE-ME
DashboardLayout.jsx ❯ REPLACE-ME
DurationChart.jsx ❯ REPLACE-ME
Stat.jsx ❯ REPLACE-ME
DashboardFilter.jsx ❯ REPLACE-ME
DashboardBox.jsx ❯ REPLACE-ME
check-in-out
TodayItem.jsx ❯ REPLACE-ME
CheckinBooking.jsx ❯ REPLACE-ME
TodayActivity.jsx ❯ REPLACE-ME
CheckoutButton.jsx ❯ REPLACE-ME
styles
GlobalStyles.js ❯ REPLACE-ME
hooks
useOutsideClick.js ❯ REPLACE-ME
useLocalStorageState.js ❯ REPLACE-ME
useMoveBack.js ❯ REPLACE-ME
pages
Settings.jsx ❯ REPLACE-ME
Account.jsx ❯ REPLACE-ME
Login.jsx ❯ REPLACE-ME
Dashboard.jsx ❯ REPLACE-ME
PageNotFound.jsx ❯ REPLACE-ME
Cabins.jsx ❯ REPLACE-ME
Users.jsx ❯ REPLACE-ME
Bookings.jsx ❯ REPLACE-ME
utils
helpers.js ❯ REPLACE-ME
services
apiSettings.js ❯ REPLACE-ME
apiBookings.js ❯ REPLACE-ME
supabase.js ❯ REPLACE-ME
apiCabins.js ❯ REPLACE-ME
ui
Input.jsx ❯ REPLACE-ME
Tag.jsx ❯ REPLACE-ME
ButtonGroup.jsx ❯ REPLACE-ME
ErrorFallback.jsx ❯ REPLACE-ME
Menus.jsx ❯ REPLACE-ME
Empty.jsx ❯ REPLACE-ME
Button.jsx ❯ REPLACE-ME
Header.jsx ❯ REPLACE-ME
Pagination.jsx ❯ REPLACE-ME
AppLayout.jsx ❯ REPLACE-ME
ConfirmDelete.jsx ❯ REPLACE-ME
Filter.jsx ❯ REPLACE-ME
MainNav.jsx ❯ REPLACE-ME
Modal.jsx ❯ REPLACE-ME
Table.jsx ❯ REPLACE-ME
Logo.jsx ❯ REPLACE-ME
Sidebar.jsx ❯ REPLACE-ME
Flag.jsx ❯ REPLACE-ME
SortBy.jsx ❯ REPLACE-ME
TableOperations.jsx ❯ REPLACE-ME
Textarea.jsx ❯ REPLACE-ME
ButtonIcon.jsx ❯ REPLACE-ME
SpinnerMini.jsx ❯ REPLACE-ME
Heading.jsx ❯ REPLACE-ME
Form.jsx ❯ REPLACE-ME
Spinner.jsx ❯ REPLACE-ME
ButtonText.jsx ❯ REPLACE-ME
FileInput.jsx ❯ REPLACE-ME
Select.jsx ❯ REPLACE-ME
Checkbox.jsx ❯ REPLACE-ME
DataItem.jsx ❯ REPLACE-ME
FormRow.jsx ❯ REPLACE-ME
Row.jsx ❯ REPLACE-ME

🚀 Getting Started

☑️ Prerequisites

Before getting started with Wild-Oasis, ensure your runtime environment meets the following requirements:

  • Programming Language: JavaScript
  • Package Manager: Npm

⚙️ Installation

Install Wild-Oasis using one of the following methods:

Build from source:

  1. Clone the Wild-Oasis repository:
❯ git clone https://github.com/TheXro/Wild-Oasis
  1. Navigate to the project directory:
❯ cd Wild-Oasis
  1. Install the project dependencies:

Using npm   

❯ npm install

🤖 Usage

Run Wild-Oasis using the following command: Using npm   

❯ npm run dev

🔰 Contributing

Contributing Guidelines
  1. Fork the Repository: Start by forking the project repository to your github account.
  2. Clone Locally: Clone the forked repository to your local machine using a git client. 
    git clone https://github.com/TheXro/Wild-Oasis
  3. Create a New Branch: Always work on a new branch, giving it a descriptive name. 
    git checkout -b new-feature-x
  4. Make Your Changes: Develop and test your changes locally.
  5. Commit Your Changes: Commit with a clear message describing your updates. 
    git commit -m 'Implemented new feature x.'
  6. Push to github: Push the changes to your forked repository. 
    git push origin new-feature-x
  7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
  8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph

About

wild-oasis.thexro.xyz/

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages