VacationVibe : 휴가 렌탈 예약 앱
VacationVibe 는 사용자가 휴가 렌털을 예약할 수 있도록 하는 풀 스택 예약 앱으로, 숙박 시설 예약에 대한 원활한 경험을 제공합니다. 이 앱을 사용하면 사용자는 자신의 부동산에 대한 목록을 작성할 수 있으며, 부동산 소유자는 잠재 고객에게 자신의 임대 숙소를 선보일 수 있는 기회를 얻을 수 있습니다. VacationVibe 사용하면 사용자는 쉽게 이용 가능한 부동산을 검색하고, 부동산 세부정보를 보고, 예약하고, 예약을 관리할 수 있습니다.
VacationVibe 직접 경험하려면 당사 웹사이트를 방문하여 라이브 데모를 확인하십시오.
라이브 데모를 보려면 웹사이트를 방문하세요.
주요 특징
- 예약 시스템: 사용자는 이용 가능한 숙소를 쉽게 검색하고 예약할 수 있습니다.
- 목록 생성: 부동산 소유자는 목록을 생성하고 관리할 수 있습니다.
- 대시보드: 부동산 소유자는 목록을 관리하고 예약 요청을 볼 수 있는 대시보드에 액세스할 수 있습니다.
- 사용자 계정: 사용자는 계정을 생성하여 즐겨찾는 숙소를 저장하고 예약을 관리할 수 있습니다.
기술 스택
이 애플리케이션은 다음 기술을 사용하여 개발되었습니다.
- MongoDB: 속성 및 사용자 데이터를 저장하는 데 사용되는 NoSQL 데이터베이스입니다.
- Express.js: RESTful API를 구축하고 서버 측 로직을 처리하기 위한 서버 측 프레임워크입니다.
- React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다.
- Tailwind CSS: 프런트엔드 스타일을 지정하는 데 사용되는 유틸리티 우선 CSS 프레임워크입니다.
- Node.js: 서버 측 코드를 실행하는 데 사용되는 JavaScript 런타임 환경입니다.
- Vercel: 애플리케이션의 프런트엔드를 배포하는 데 사용되는 정적 사이트 호스팅 및 배포용 클라우드 플랫폼입니다.
- AWS S3: 파일 저장을 위한 Amazon Simple Storage Service(S3)를 사용하면 사용자가 속성 이미지를 업로드하고 검색할 수 있습니다. 안전하고 확장 가능한 파일 저장을 가능하게 하여 자산 이미지 처리를 위한 안정적이고 효율적인 시스템을 보장합니다.
시작하기
VacationVibe 앱을 로컬에서 실행하려면 다음 단계를 따르세요.
- 저장소 복제:
git clone https://github.com/junaidsaleem10144/VacationVibe.git - 프로젝트 디렉터리로 이동합니다:
cd VacationVibe - 종속성을 설치합니다.
- 백엔드:
api 폴더로 이동하여 npm install 실행합니다. - 프런트엔드:
client 폴더로 이동하여 npm install 실행합니다.
-
api 폴더에 .env 파일을 생성하고 필요한 환경 변수를 제공합니다. 필수 변수는 .env.example 파일을 참조할 수 있습니다. - 개발 서버를 시작합니다.
- 백엔드:
api 폴더에서 npm run dev 실행합니다. - 프런트엔드:
client 폴더에서 npm run start 실행합니다.
이제 브라우저를 열고 http://localhost:4000 방문하여 VacationVibe 앱에 액세스할 수 있습니다.
폴더 구조
프로젝트는 특정 폴더 구조를 따릅니다.
-
api/ : 서버 설정, 경로 및 모델을 포함한 백엔드 코드가 포함되어 있습니다. -
client/ : React 구성 요소, 스타일 및 자산을 포함한 프런트엔드 코드가 포함되어 있습니다.
감사의 말
VacationVibe 개발에 중요한 역할을 한 다음 리소스와 라이브러리에 감사의 말씀을 전하고 싶습니다.
백엔드
- bcryptjs: 비밀번호를 해싱하고 비교하는 라이브러리입니다.
- cookie-parser: Express에서 쿠키를 구문 분석하기 위한 미들웨어입니다.
- cors: CORS(Cross-Origin Resource Sharing)를 활성화하기 위한 미들웨어입니다.
- dotenv: .env 파일에서 환경 변수를 로드하기 위한 모듈입니다.
- jsonwebtoken: JSON 웹 토큰(JWT)을 생성하고 확인하기 위한 라이브러리입니다.
- mongoose: MongoDB용 ODM(객체 데이터 모델링) 라이브러리입니다.
- multer: Express에서 파일 업로드를 처리하기 위한 미들웨어입니다.
- @aws-sdk/client-s3: 파일 저장을 위해 Amazon S3와 상호 작용하는 클라이언트 라이브러리입니다.
- image-downloader: URL에서 이미지를 다운로드하기 위한 라이브러리입니다.
- mime-types: MIME 유형 작업을 위한 라이브러리입니다.
- express: Node.js용 웹 프레임워크.
개발 종속성(백엔드):
- nodemon: 파일 변경 사항이 감지되면 Node.js 서버를 자동으로 다시 시작하는 유틸리티입니다.
프런트엔드
- axios: HTTP 요청을 만들기 위한 라이브러리입니다.
- date-fns: 날짜를 조작하고 형식을 지정하기 위한 라이브러리입니다.
- React-router-dom: React 애플리케이션에서 라우팅을 처리하기 위한 라이브러리입니다.
- 반응: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리.
- React-dom: React 컴포넌트를 렌더링하기 위한 패키지입니다.
개발 종속성(프런트엔드):
- @types/react: React의 유형 정의입니다.
- @types/react-dom: React DOM에 대한 유형 정의입니다.
- @vitejs/plugin-react: React 지원을 위한 Vite 플러그인입니다.
- autoprefixer: CSS에 공급업체 접두사를 추가하기 위한 PostCSS 플러그인입니다.
- postcss: CSS 후처리 도구.
- tailwindcss: 유틸리티 우선 CSS 프레임워크.
- vite: 최신 웹 개발을 위한 빌드 도구입니다.
VacationVibe 선택해 주셔서 감사합니다! 질문이나 의견이 있으시면 언제든지 문의해 주세요.
기여
VacationVibe 앱에 대한 기여를 환영합니다! 문제를 발견했거나 새로운 기능을 추가하고 싶다면 언제든지 풀 요청을 제출하세요.
특허
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다.
