{"id":23886538,"url":"https://github.com/gah-code/the-wild-oasis","last_synced_at":"2026-04-09T20:03:11.425Z","repository":{"id":268638181,"uuid":"905009634","full_name":"gah-code/the-wild-oasis","owner":"gah-code","description":"The Wild Oasis is a boutique hotel with eight luxurious wooden cabins. This project is a custom-built internal management application that allows hotel employees to handle bookings, cabins, and guests. The app is designed with an intuitive UI and robust backend integration to streamline operations.","archived":false,"fork":false,"pushed_at":"2025-02-19T07:39:12.000Z","size":4519,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-23T03:47:08.539Z","etag":null,"topics":["api","authentication","react-router","reactquery","redux","styled-components","supabase","webapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gah-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-18T01:27:11.000Z","updated_at":"2025-02-19T07:39:16.000Z","dependencies_parsed_at":"2024-12-18T02:34:55.490Z","dependency_job_id":"ef611a58-ddcd-41b4-ab06-4cb03937e67f","html_url":"https://github.com/gah-code/the-wild-oasis","commit_stats":null,"previous_names":["gah-code/the-wild-oasis"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gah-code/the-wild-oasis","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fthe-wild-oasis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fthe-wild-oasis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fthe-wild-oasis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fthe-wild-oasis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gah-code","download_url":"https://codeload.github.com/gah-code/the-wild-oasis/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gah-code%2Fthe-wild-oasis/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262588522,"owners_count":23333179,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","authentication","react-router","reactquery","redux","styled-components","supabase","webapp"],"created_at":"2025-01-04T06:36:56.813Z","updated_at":"2026-04-09T20:03:11.377Z","avatar_url":"https://github.com/gah-code.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The Wild Oasis\n\nA comprehensive project combining modern web development technologies and tools to create a full-featured internal hotel management application.\n\n---\n\n## Table of Contents\n\n1. [Overview](#overview)\n2. [Technologies Used](#technologies-used)\n3. [Features](#features)\n4. [Directory Structure](#directory-structure)\n5. [Setup Instructions](#setup-instructions)\n6. [Modules and Key Concepts](#modules-and-key-concepts)\n   - [React Router with Data Loading](#react-router-with-data-loading)\n   - [Adding Redux and Advanced React Router](#adding-redux-and-advanced-react-router)\n   - [Styled Components](#styled-components)\n   - [Creating a Database with Supabase](#creating-a-database-with-supabase)\n   - [React Query: Managing Remote State](#react-query-managing-remote-state)\n7. [Project Requirements](#project-requirements)\n8. [Additional Resources](#additional-resources)\n\n---\n\n## Overview\n\nThe Wild Oasis is a boutique hotel with eight luxurious wooden cabins. This project is a custom-built internal management application that allows hotel employees to handle bookings, cabins, and guests. The app is designed with an intuitive UI and robust backend integration to streamline operations.\n\n---\n\n## Technologies Used\n\n- **React**: Component-based UI development.\n- **React Router**: Advanced routing with data loading.\n- **Redux**: State management for complex interactions.\n- **Styled Components**: CSS-in-JS for scalable and maintainable styling.\n- **Supabase**: Backend services for database, authentication, and storage.\n- **React Query**: Remote state management and data fetching.\n- **Vite**: Fast build tool and development server.\n- **React Hook Form**: Form management for smooth user interactions.\n- **Recharts**: Data visualization library for dashboards.\n- **date-fns**: Utility library for handling dates.\n- **React Icons \u0026 React Hot Toast**: UI enhancements for notifications and icons.\n\n---\n\n## Features\n\n### Authentication\n\n- Only hotel employees can access the application.\n- Users must be logged in to perform actions.\n- New users can be signed up only inside the application.\n- Users can upload an avatar and update their profile information.\n\n### Cabins Management\n\n- View a list of all cabins with details (photo, name, capacity, price, discount).\n- Create, update, and delete cabins.\n- Upload photos for cabins.\n\n### Bookings Management\n\n- View and manage hotel bookings.\n- Filter bookings by status: “unconfirmed,” “checked-in,” “checked-out.”\n- Track booking details, including guests, nights, breakfast options, and payment status.\n\n### Check-In / Check-Out\n\n- Check guests in and out with a simple interface.\n- Accept payment during check-in and confirm payment status.\n- Allow guests to add breakfast for their entire stay upon check-in.\n\n### Guest Management\n\n- Store guest details: full name, email, national ID, nationality, and country flag.\n\n### Dashboard\n\n- View daily check-ins and check-outs.\n- Monitor recent bookings, sales, and occupancy rates.\n- Visualize hotel performance with sales and stay duration charts.\n\n### Settings\n\n- Configure global settings such as breakfast price, minimum/maximum booking nights, and max guests per booking.\n- Enable dark mode for a customizable user experience.\n\n---\n\n## Directory Structure\n\n```plaintext\n└── gah-code-the-wild-oasis/\n    ├── README.md\n    ├── LICENSE\n    ├── eslint.config.js\n    ├── index.html\n    ├── package.json\n    ├── vite.config.js\n    ├── public/\n    └── src/\n        ├── App.css\n        ├── App.jsx\n        ├── main.jsx\n        ├── assets/\n        ├── data/\n        │   ├── Uploader.jsx\n        │   ├── data-bookings.js\n        │   ├── data-cabins.js\n        │   ├── data-guests.js\n        │   ├── cabins/\n        │   └── img/\n        ├── features/\n        │   ├── authentication/\n        │   │   ├── LoginForm.jsx\n        │   │   ├── SignupForm.jsx\n        │   │   ├── UpdatePasswordForm.jsx\n        │   │   ├── UpdateUserDataForm.jsx\n        │   │   └── UserAvatar.jsx\n        │   ├── bookings/\n        │   │   ├── BookingDataBox.jsx\n        │   │   ├── BookingDetail.jsx\n        │   │   ├── BookingRow.jsx\n        │   │   ├── BookingTable.jsx\n        │   │   └── BookingTableOperations.jsx\n        │   ├── cabins/\n        │   │   ├── CabinRow.jsx\n        │   │   ├── CabinTable.jsx\n        │   │   ├── CreateCabinForm.jsx\n        │   │   ├── useCabins.js\n        │   │   ├── useCreateCabin.js\n        │   │   ├── useDeleteCabin.js\n        │   │   └── useEditCabin.js\n        │   ├── check-in-out/\n        │   │   ├── CheckinBooking.jsx\n        │   │   ├── CheckoutButton.jsx\n        │   │   ├── TodayActivity.jsx\n        │   │   └── TodayItem.jsx\n        │   ├── dashboard/\n        │   │   ├── DashboardBox.jsx\n        │   │   ├── DashboardFilter.jsx\n        │   │   ├── DashboardLayout.jsx\n        │   │   ├── DurationChart.jsx\n        │   │   ├── SalesChart.jsx\n        │   │   └── Stat.jsx\n        │   └── settings/\n        │       ├── UpdateSettingsForm.jsx\n        │       ├── useSettings.js\n        │       └── useUpdateSetting.js\n        ├── hooks/\n        │   ├── useLocalStorageState.js\n        │   └── useMoveBack.js\n        ├── pages/\n        │   ├── Account.jsx\n        │   ├── Bookings.jsx\n        │   ├── Cabins.jsx\n        │   ├── Dashboard.jsx\n        │   ├── Login.jsx\n        │   ├── PageNotFound.jsx\n        │   ├── Settings.jsx\n        │   └── Users.jsx\n        ├── services/\n        │   ├── apiBookings.js\n        │   ├── apiCabins.js\n        │   ├── apiSettings.js\n        │   └── supabase.js\n        ├── styles/\n        │   └── GlobalStyles.js\n        ├── ui/\n        │   ├── AppLayout.jsx\n        │   ├── Button.jsx\n        │   ├── ButtonGroup.jsx\n        │   ├── ButtonIcon.jsx\n        │   ├── ButtonText.jsx\n        │   ├── Checkbox.jsx\n        │   ├── ConfirmDelete.jsx\n        │   ├── DataItem.jsx\n        │   ├── Empty.jsx\n        │   ├── ErrorFallback.jsx\n        │   ├── FileInput.jsx\n        │   ├── Filter.jsx\n        │   ├── Flag.jsx\n        │   ├── Form.jsx\n        │   ├── FormRow.jsx\n        │   ├── Header.jsx\n        │   ├── Heading.jsx\n        │   ├── Input.jsx\n        │   ├── Logo.jsx\n        │   ├── MainNav.jsx\n        │   ├── Menus.jsx\n        │   ├── Modal.jsx\n        │   ├── Pagination.jsx\n        │   ├── Row.jsx\n        │   ├── Select.jsx\n        │   ├── Sidebar.jsx\n        │   ├── Spinner.jsx\n        │   ├── SpinnerMini.jsx\n        │   ├── Table.jsx\n        │   ├── TableOperations.jsx\n        │   ├── Tag.jsx\n        │   └── Textarea.jsx\n        └── utils/\n            └── helpers.js\n```\n\n---\n\n## Interface\n\n## Home Page - Dashboard\n\n![Home Page Dashboard](./docs/home-dashboard.png)\n\n### Dark Mode\n\n![Home Page Dashboard Dark Mode](./docs/home-dashboard-dark-mode.png)\n\n## Booking Page\n\n![Booking Page](./docs/bookings.png)\n\n### Booking Details\n\n![See Booking Details](./docs/bookings-see-details.png)\n\n## Cabins Page\n\n![Cabins Page](./docs/cabins.png)\n\n### Edit\n\n![Edit Cabin](./docs/cabins-edit.png)\n\n### Create\n\n![Create Cabin](./docs/create-cabin.png)\n\n## Create User\n\n![Create User](./docs/create-user.png)\n\n### Profile\n\n![Update User Account Profile](./docs/account-update-profile.png)\n\n## Settings\n\n![Settings Page](./docs/settings.png)\n\n---\n\n## Setup Instructions\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-username/gah-code-the-wild-oasis.git\n   ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd gah-code-the-wild-oasis\n   ```\n\n3. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n4. Start the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n5. Open your browser and navigate to `http://localhost:3000`.\n\n---\n\n## Modules and Key Concepts\n\n### React Router with Data Loading\n\n- Enables dynamic routing and data-driven navigation.\n\n### Redux and Advanced React Router\n\n- Manages complex application state and enhances routing features.\n\n### Styled Components\n\n- Provides modular styling solutions for a scalable UI.\n\n### Supabase for Database \u0026 Authentication\n\n- Manages user authentication, data storage, and security policies.\n\n### React Query for Remote State Management\n\n- Optimizes server-state management with caching and background updates.\n\n---\n\n## Additional Resources\n\n- [date-fns Documentation](https://date-fns.org/docs/Getting-Started)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fthe-wild-oasis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgah-code%2Fthe-wild-oasis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgah-code%2Fthe-wild-oasis/lists"}