{"id":19093865,"url":"https://github.com/bekcodingaddict/the-wild-oasis-customer-website","last_synced_at":"2026-04-13T15:31:37.112Z","repository":{"id":260738185,"uuid":"882206471","full_name":"BekCodingAddict/The-Wild-Oasis-Customer-Website","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:13:00.000Z","size":9880,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-28T06:34:15.066Z","etag":null,"topics":["nextjs","ssr","supabase","tailwindcss"],"latest_commit_sha":null,"homepage":"https://bca-the-wild-oasis-customer-website.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-02T07:00:35.000Z","updated_at":"2025-02-02T10:41:42.000Z","dependencies_parsed_at":"2024-11-02T08:19:34.727Z","dependency_job_id":"ac7b467c-68f6-4dfa-8276-bc9f2bd31f65","html_url":"https://github.com/BekCodingAddict/The-Wild-Oasis-Customer-Website","commit_stats":null,"previous_names":["bekcodingaddict/the-wild-oasis-customer-website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BekCodingAddict/The-Wild-Oasis-Customer-Website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis-Customer-Website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis-Customer-Website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis-Customer-Website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis-Customer-Website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BekCodingAddict","download_url":"https://codeload.github.com/BekCodingAddict/The-Wild-Oasis-Customer-Website/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FThe-Wild-Oasis-Customer-Website/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31759238,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T15:25:13.801Z","status":"ssl_error","status_checked_at":"2026-04-13T15:25:09.162Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["nextjs","ssr","supabase","tailwindcss"],"created_at":"2024-11-09T03:26:24.054Z","updated_at":"2026-04-13T15:31:37.104Z","avatar_url":"https://github.com/BekCodingAddict.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## The Wild Oasis 프로젝트 - 고객 웹 사이트\n\n\u003e [!TIP]\n\u003e The Wild Oasis는 고객을 위한 웹사이트로, Wild Oasis 호텔의 서비스와 객실 정보를 제공하며, 예약 관리를 쉽게 할 수 있도록 설계된 플랫폼입니다. 이 웹사이트는 잠재 고객 및 실제 숙박 고객을 대상으로 하며, 고객이 필요한 정보를 확인하고 편리하게 예약을 관리할 수 있는 기능을 제공합니다.\n\n### API\n\n```mermaid\ngraph TD;\nAPI--\u003eCUSTOMER_FACING_WEBSITE_TO_BOOK_STAYS;\nAPI--\u003eINTERNAL_HOTEL_MANAGEMENT_APP;\n```\n이 링크 방문하시고 확인 가능 👉 [INTERNAL HOTEL MANAGEMENT APP](https://github.com/BekCodingAddict/The-Wild-Oasis)\n\n## 주요 기능\n### 1.호텔 정보 열람\n- Wild Oasis 호텔 및 각 객실(캐빈)의 세부 정보를 확인할 수 있습니다.\n- 각 캐빈의 최대 수용 인원과 예약 가능 날짜를 확인 가능합니다.\n\n### 2.캐빈 필터링 및 예약\n- 최대 수용 인원을 기준으로 캐빈을 필터링할 수 있습니다.\n- 특정 날짜 범위에 예약 가능한 캐빈을 검색할 수 있습니다.\n- 온라인 결제는 지원되지 않으며, 체크인 시 현장에서 결제하도록 설정됩니다.\n  - 신규 예약 상태는 “미확정”(예약 완료, 체크인 대기)으로 설정됩니다.\n \n### 3.예약 관리\n- 고객은 자신의 과거 및 미래 예약 기록을 확인할 수 있습니다.\n- 예약 정보를 업데이트하거나 삭제할 수 있습니다.\n\n### 4.회원 가입 및 로그인\n- 예약 및 예약 관리 기능을 사용하려면 회원 가입 및 로그인이 필요합니다.\n- 회원 가입 시 고객의 프로필이 데이터베이스에 생성됩니다.\n\n### 5.프로필 관리\n- 고객은 기본 정보를 설정 및 업데이트할 수 있습니다.\n- 업데이트된 프로필 정보는 체크인 과정을 더욱 빠르고 간편하게 만듭니다.\n\n\n### FEATURES+PAGES\n\n| Feature Category | Necessary pages  | URL Params          |\n| ---------------- | ---------------- | ------------------- |\n|Homepage     |     Homepage            |       /       |\n| About        | About page        | /about          |\n| Cabins           | Cabin overview          | /cabins/            |\n| Cabins           | Cabin details          | /cabins/:cabinId            |\n| Reservations    | Cabin details     | /cabins/:cabinId         |\n| Reservations    | Reservation list     | /account/reservations         |\n| Reservations    | Edit reservation      | /account/reservations/edit         |\n| Authentication   | Login            | /login              |\n| profile   | update profile | /account/profile            |\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/BekCodingAddict/3D-Web-Developer-Portfolio/blob/master/src/assets/nextjs.webp\" title=\"Next.js\" alt=\"Next.js\" 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/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\u003e### 성과\n### 1.Next.js 활용\n- **서버 사이드 렌더링(SSR)**과 **정적 사이트 생성(SSG)**을 효과적으로 적용하여 애플리케이션의 성능을 최적화했습니다.\n- Next.js의 내장된 라우팅 시스템과 API 라우트 기능을 활용하여 빠르고 안정적인 사용자 경험을 제공했습니다.\n\n### 2.상태 관리 및 API 통합\n- Supabase를 사용하여 데이터베이스 연동 및 인증 기능을 구현했습니다.\n- 사용자 인증 및 세션 관리에 NextAuth.js를 통합하여 보안성을 강화했습니다.\n\n### 3.날짜와 시간 관리\n- date-fns 라이브러리를 사용해 날짜와 시간 데이터를 효과적으로 관리했습니다.\n- 예약, 이벤트 관리 등의 기능을 구현하여 사용자 경험을 개선했습니다.\n\n### 4.UI/UX 개선\n- Tailwind CSS와 Heroicons를 사용해 직관적인 사용자 인터페이스를 구현했습니다.\n- 간결하고 유지보수가 용이한 스타일링 방식을 적용했습니다.\n\n### 5.개발 환경 최적화\n- ESLint와 Next.js 내장된 린트 설정을 활용하여 코드 품질을 유지했습니다.\n- 개발 속도를 높이고 오류를 줄이기 위해 dotenv로 환경 변수를 관리했습니다.\n\n\u003e### 배운 점\n### 1.Next.js의 잘 이해\n- Next.js의 다양한 렌더링 방식(SSR, SSG, CSR)을 학습하고 프로젝트에 적절히 적용하는 방법을 배웠습니다.\n- 라우팅, 이미지 최적화, API 경로와 같은 Next.js의 핵심 기능을 활용하는 실무 경험을 쌓았습니다.\n  \n### 2.백엔드와의 통합\n- Supabase와 같은 서버리스 데이터베이스를 사용하여 효율적인 데이터 관리와 API 설계를 다시 한번 익혔습니다.\n- 인증 및 데이터베이스 연동과 관련된 문제를 해결하며 보안의 중요성을 이해했습니다.\n\n### 3.효율적인 상태 관리\n- React와 Next.js 환경에서 서버 상태와 클라이언트 상태를 분리 관리하는 방법을 배웠습니다.\n- 프로젝트의 확장성을 고려해 상태 관리 및 데이터 흐름을 설계하는 것을 겅험해 봤습니다.\n\n### 4.디자인 시스템과 사용자 경험\n- Tailwind CSS와 Heroicons를 활용하여 재사용 가능한 컴포넌트를 설계하고, 일관된 디자인 시스템을 구축하는 것을 경험했습니다\n\n### 5.생산성과 협업 기술\n- 패키지 관리, 의존성 업데이트, 효율적인 개발 워크플로를 경험하며 실제 프로젝트 환경에서의 협업 기술을 향상시켰습니다.\n- 린트와 코드 규칙을 준수하며 팀 환경에서도 유지보수가 쉬운 코드를 작성하는 능력을 배웠습니다.\n\n## Problems \u0026 Challanges\n| Error \u0026 Problem Title | Status | Difficult | Date |\n|--|--|--|--|\n|[🖼️ Responsive Image Issue with next/image](https://github.com/BekCodingAddict/The-Wild-Oasis-Customer-Website/blob/master/problems/Responsive-Image-Problem.md) | ![solved](https://img.shields.io/badge/solved-blue) | low | Nov 7, 2024 |\n|[🔄 State/Props Not Passing Back to Server-Side Component](https://github.com/BekCodingAddict/The-Wild-Oasis-Customer-Website/blob/master/problems/Datas-not-passing-back-to-server-side-component.md) | ![solved](https://img.shields.io/badge/solved-blue) | low | Oct 11, 2024 |\n|[🗑️  Caching Error in Next.js](https://github.com/BekCodingAddict/The-Wild-Oasis-Customer-Website/blob/master/problems/Caching-Error-in-Next.js.md) | ![solved](https://img.shields.io/badge/solved-blue) | low | Nov 12, 2024 |\n\n## UI/UX\nHomepage:\n\u003cimg width=\"1073\" height=\"715\" alt=\"TheWildOasis\" src=\"https://github.com/user-attachments/assets/2957811a-036a-4fb2-81f1-69a45d9a209f\" /\u003e\n\nAbout:\n\u003cimg width=\"1042\" height=\"700\" alt=\"TheWildOasis-About\" src=\"https://github.com/user-attachments/assets/7bfd90ee-dd88-46cc-b0c2-0a0f31abd5b2\" /\u003e\n\nCabin List:\n\u003cimg width=\"1040\" height=\"700\" alt=\"TheWildOasis-Cabins\" src=\"https://github.com/user-attachments/assets/ce93ec96-fa5b-4425-be32-c5abd5517642\" /\u003e\n\nCabin Details:\n\u003cimg width=\"1049\" height=\"700\" alt=\"TheWildOasis-Cabin\" src=\"https://github.com/user-attachments/assets/e3632b4b-7f6f-4967-bd08-ba3d5d95570a\" /\u003e\n\nGuest Page:\n\u003cimg width=\"1055\" height=\"700\" alt=\"TheWildOasis-Guest\" src=\"https://github.com/user-attachments/assets/65e7a151-155c-405a-a276-0ec483a9b504\" /\u003e\n\nReservation Process:\n\u003cimg width=\"1057\" height=\"700\" alt=\"TheWildOasis-Reservation\" src=\"https://github.com/user-attachments/assets/d011a175-5c14-4975-9c1e-f223bba27f54\" /\u003e\n\n\n\n\n\n\n\n\n## 앞으로 추가해야 할 점들:\n### 1.반응형 디자인의 구현과 테스트 과정을 통해 다양한 디바이스에서의 사용자 경험을 최적화하는 것\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fthe-wild-oasis-customer-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbekcodingaddict%2Fthe-wild-oasis-customer-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fthe-wild-oasis-customer-website/lists"}