{"id":18075688,"url":"https://github.com/bekcodingaddict/the-wild-oasis","last_synced_at":"2026-05-09T10:12:03.687Z","repository":{"id":259230670,"uuid":"868017001","full_name":"BekCodingAddict/The-Wild-Oasis","owner":"BekCodingAddict","description":"The Wild Oasis” is a small boutique hotel with 8 luxurious wooden cabins They need a custom-built application to manage everything about the hotel: bookings, cabins and guests This is the internal application used inside the hotel to check in guests as they arrive They have nothing right now, so they also need the API","archived":false,"fork":false,"pushed_at":"2025-01-05T18:05:56.000Z","size":2608,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-11T17:57:39.289Z","etag":null,"topics":["authentication","backend","front-end","javascript","mern-stack","react-query","styled-components","supabase"],"latest_commit_sha":null,"homepage":"https://bca-the-wild-oasis.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BekCodingAddict.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-10-05T08:55:42.000Z","updated_at":"2025-01-05T18:05:59.000Z","dependencies_parsed_at":"2024-10-23T18:17:53.506Z","dependency_job_id":"1745ba8f-7975-4066-99cd-0f31f498607c","html_url":"https://github.com/BekCodingAddict/The-Wild-Oasis","commit_stats":null,"previous_names":["bekcodingaddict/the-wild-oasis"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BekCodingAddict","download_url":"https://codeload.github.com/BekCodingAddict/The-Wild-Oasis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393538,"owners_count":20931809,"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":["authentication","backend","front-end","javascript","mern-stack","react-query","styled-components","supabase"],"created_at":"2024-10-31T11:06:55.917Z","updated_at":"2026-05-09T10:12:03.681Z","avatar_url":"https://github.com/BekCodingAddict.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The-Wild-Oasis (INTERNAL HOTEL MANAGEMENT APP)\n\n### The Wild Oasis이 무었인가요?\n\n\u003e [!TIP]\n\u003eThe Wild Oasis는 8개의 고급스러운 목조 캐빈이 있는 작은 부티크 호텔입니다. 이 프로젝트는 호텔의 내부 관리 시스템을 구축하는 것으로, 호텔 직원들이 예약, 고객, 캐빈 등을 효율적으로 관리할 수 있도록 돕는 애플리케이션입니다. 현재 이 시스템은 호텔 직원만 사용할 수 있으며, 고객용 예약 웹사이트는 추후 추가될 예정입니다.\n애플리케이션은 직원들이 고객을 체크인할 때 필요한 모든 기능을 제공하며, 호텔 운영을 효율적으로 지원하기 위한 다양한 기능을 포함하고 있습니다. 여기에는 예약 관리, 객실 관리, 고객 데이터 관리, 결제 관리, 대시보드 통계 및 설정 기능 등이 포함되어 있습니다. 이 시스템은 또한 나중에 고객이 사용할 수 있는 웹사이트와 API를 연결하여, 호텔 예약과 관리를 더 원활하게 해줄 것입니다.\n\n### API\n\n```mermaid\ngraph TD;\nAPI--\u003eCUSTOMER_FACING_WEBSITE_TO_BOOK_STAYS;\nAPI--\u003eINTERNAL_HOTEL_MANAGEMENT_APP;\n```\n이 링크 방문하시고 확인 가능 👉 [CUSTOMER FACING WEBSITE TO BOOK STAYS](https://github.com/BekCodingAddict/The-Wild-Oasis-Customer-Website)\n\n## 주요 기능 (Key Features)\n### 1.사용자 관리 (User Management)\n- 호텔 직원만 사용할 수 있도록, 애플리케이션 내에서만 신규 사용자 가입 가능.\n- 직원들은 프로필 사진을 업로드하고, 이름과 비밀번호를 변경할 수 있습니다.\n\n### 2.캐빈 관리 (Cabin Management)\n- 호텔의 모든 캐빈을 테이블 형식으로 표시하며, 캐빈 사진, 이름, 수용 인원, 가격, 현재 할인 정보를 확인할 수 있습니다.\n- 직원들은 캐빈을 추가, 업데이트, 삭제할 수 있습니다.\n\n### 3.예약 관리 (Booking Management)\n- 예약 목록을 관리하며, 예약 상태(“확인되지 않음”, “체크인됨”, “체크아웃됨”)에 따라 필터링 가능합니다.\n- 각 예약에 대한 고객 수, 숙박 일수, 조식 예약 여부 및 가격 등의 정보도 확인할 수 있습니다.\n- 예약을 체크인하거나 체크아웃 처리할 수 있습니다.\n\n### 4.결제 관리 (Payment Management)\n- 체크인 시, 고객이 결제를 완료했는지 확인하고, 결제 상태를 애플리케이션 내에서 확인할 수 있습니다.\n- 체크인 시, 고객이 조식을 추가할 수 있는 기능도 제공합니다.\n\n### 5.대시보드 및 통계 (Dashboard \u0026 Analytics)\n- 대시보드에서 최근 7일, 30일, 90일 동안의 중요한 통계를 한눈에 확인할 수 있습니다.\n- 체크인 및 체크아웃 고객 목록, 최근 예약 및 판매 통계, 일일 판매 차트(총 판매 및 추가 판매) 등을 제공합니다.\n\n### 6.숙박 기간 통계 (Stay Duration Statistics)\n- 고객의 숙박 기간에 대한 통계를 시각적으로 제공하여, 호텔 운영에 필요한 중요한 메트릭스를 제공합니다.\n\n### 7.애플리케이션 설정 (App Settings)\n- 조식 가격, 예약 최소/최대 숙박 일수, 예약 최대 고객 수 등 애플리케이션 전반에 영향을 미치는 설정을 관리할 수 있습니다.\n\n### 8.다크 모드 (Dark Mode)\n- 다크 모드 기능을 제공하여, 사용자 경험을 향상시킵니다.\n\n### FEATURES+PAGES\n\n| Feature Category | Necessary pages  | URL Params          |\n| ---------------- | ---------------- | ------------------- |\n| Dashboard        | Dashboard        | /dashboard          |\n| Bookings         | Bookings         | /bookings           |\n| Check in and out | Booking check in | /checkin/:bookingId |\n| Cabins           | Cabins           | /cabins             |\n| App settings     | App settings     | /settings           |\n| Authentication   | User sign up     | /users              |\n| Authentication   | Login            | /login              |\n| Authentication   | Accaunt Settings | /accaunt            |\n\n### Technologies and Tools:\n\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/javascript/javascript-original.svg\" title=\"JavaScript\" alt=\"JavaScript\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/html5/html5-original.svg\" title=\"HTML5\" alt=\"HTML\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/css3/css3-plain-wordmark.svg\"  title=\"CSS3\" alt=\"CSS\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/react/react-original-wordmark.svg\" title=\"React\" alt=\"React\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/redux/redux-original.svg\" title=\"React Redux\" alt=\"React Redux\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/devicons/devicon/blob/master/icons/reactrouter/reactrouter-original.svg\" title=\"React Router\" alt=\"React Routher\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/BekCodingAddict/Icons/blob/master/icons/styled-component/file-type-styled.svg\" title=\"Styled Component\" alt=\"Styled Component\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://react-hook-form.com/images/logo/react-hook-form-logo-only.png\" title=\"React Hook Form\" alt=\"React Hook Form\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/BekCodingAddict/Icons/blob/master/icons/react-query/logos--react-query-icon.svg\" title=\"React Query\" alt=\"React Query\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/BekCodingAddict/Icons/blob/master/icons/npm/npm-original-wordmark.svg\" title=\"npm\" alt=\"npm\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\u003cimg src=\"https://github.com/BekCodingAddict/Icons/blob/master/icons/supabase/supabase-original.svg\" title=\"Supabase\" alt=\"Supabase\" width=\"40\" height=\"40\"/\u003e\u0026nbsp;\n\n## 얻은 성과 및 배운 점:\n### 1.Supabase 라이브러리를 사용한 효율적인 백엔드 통합:\n- Supabase를 사용해 실시간 데이터베이스와 인증 기능을 간편하게 구축할 수 있었고, 서버리스 환경에서 빠르게 백엔드를 구성하는 방법을 배웠습니다. 기존에 익숙했던 데이터베이스와 API 구축 방식과 달리, Supabase는 직관적이고 설정이 간단해서 빠르게 배워서 익숙할 수 있었습니다.\n### 2.컴포넌트 기반 스타일링:\n- Styled-components를 사용하면서 컴포넌트 단위로 스타일을 관리하는 방식에 익숙해졌습니다. 이는 코드의 재사용성을 높이고, 더 깔끔하고 유지보수가 쉬운 스타일링 방법을 배우게 해줬습니다.\n- Modal Component,Compount Component과 HOC(Higher Ordered Component) 설계하면서 재사용할 수 있는 컴포넌트를 구현해 봤습니다.\n- 물론, 아직 너무 깊게 배웠다고 할 수 없지만 앞으로 더 많은 프로젝트를 수행하면서 Styled-Component를 경험해 보고 싶습니다.\n### 3.데이터 관리 최적화:\n- React Query를 활용하여 서버에서 데이터를 가져오는 효율적인 방법을 배웠습니다. 이를 통해 서버 요청을 최적화하고, 데이터 동기화와 캐싱을 손쉽게 관리할 수 있었습니다.\n### 4.폼 관리의 효율성:\n- React Hook Form을 사용하여 폼의 상태 관리를 최적화하고,Form revalidation 및 error handling 등 성능을 크게 개선할 수 있었습니다. 복잡한 폼을 다룰 때 더 간단하고 직관적인 방식으로 처리할 수 있다는 것을 배웠습니다.\n### 5.날짜 계산 및 관리:\n- date-fns를 사용하여 날짜 관련 문제를 손쉽게 해결할 수 있었습니다. 특히 예약 시스템에서 날짜 계산을 할 때 매우 유용했으며, 다양한 날짜 형식을 처리하는 데 큰 도움이 되었습니다.\n### 6.API 데이터 관리 및 처리\n- Client 및 API side data filtering,sorting, pagination까지 경험해 봤습니다.이는 백언드 데이터 관리를 위한 중요한 patterns인지 깨달았습니다.\n### 7.Rechart 사용 경험\n- Rechart 라는 차트 라이브러리를 통해 다양한 데이터를 더 예쁘고 잘 이해할 수 있도록 UI 설계하는 것을 경험해 봤습니다. 사질은 차트 라이브러리도 재미있었고 여러 Tempo 데이터를 사용하여 재미로 다양한 차트들도 구현해 봤습니다.\n\n## Problems \u0026 Challanges\n| Error \u0026 Problem Title | Status | Difficult | Date |\n|--|--|--|--|\n|[ ♾️ Infinite Loop in useQuery](https://github.com/BekCodingAddict/The-Wild-Oasis/blob/master/Errors/Infinite-Loop-in-useQuery.md) | ![solved](https://img.shields.io/badge/solved-blue) | low | Oct 23, 2024 |\n|[⚠️ Incorrect Storage Bucket Configuration](https://github.com/BekCodingAddict/The-Wild-Oasis/blob/master/Errors/Incorrect-Storage-Bucket-Configuration.md) | ![solved](https://img.shields.io/badge/solved-blue) | low | Oct 11, 2024 |\n|[💡 Dynamic Styling Based on Props Issue](https://github.com/BekCodingAddict/The-Wild-Oasis/blob/master/Errors/Dynamic-Styling-Based-on-Props-Issue.md) | ![solved](https://img.shields.io/badge/solved-blue) | low | Oct 5, 2024 |\n\n## UI/UX\nLogin:\n\u003cimg width=\"1024\" height=\"765\" alt=\"TheWildOasisDashboard\" src=\"https://github.com/user-attachments/assets/23aae76c-d9a9-4948-ad94-8892d21667f0\" /\u003e\n\nDark Mode:\n\u003cimg width=\"1258\" height=\"940\" alt=\"TheWildOasisDashboard-Dark\" src=\"https://github.com/user-attachments/assets/2b6b5302-3096-496e-af06-e7987b9728ea\" /\u003e\n\nLight Mode:\n\u003cimg width=\"1272\" height=\"957\" alt=\"TheWildOasisDashboard-Home\" src=\"https://github.com/user-attachments/assets/7bfbba8c-6dfd-4c3f-bc93-9458a856bba5\" /\u003e\n\nBookings:\n\u003cimg width=\"1274\" height=\"958\" alt=\"TheWildOasisDashboard-Booking\" src=\"https://github.com/user-attachments/assets/5f19c691-b0b7-4be4-be40-7a6026ff4c7b\" /\u003e\n\nCabins:\n\u003cimg width=\"1276\" height=\"957\" alt=\"TheWildOasisDashboard-Cabin\" src=\"https://github.com/user-attachments/assets/1d323a60-c74c-4fb4-9a34-942026bc5e89\" /\u003e\n\nUsers:\n\u003cimg width=\"1275\" height=\"957\" alt=\"TheWildOasisDashboard-User\" src=\"https://github.com/user-attachments/assets/6a8b7184-df46-49b6-afba-a2081e3e664d\" /\u003e\n\n\n\n\n\n\n## 앞으로 추가해야 할 점들:\n### 1.반응형 디자인 구현\n- 반응형 디자인의 구현과 테스트 과정을 통해 다양한 디바이스에서의 사용자 경험을 최적화하는 것\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fthe-wild-oasis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbekcodingaddict%2Fthe-wild-oasis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fthe-wild-oasis/lists"}