1. OVERVIEW

CodeBnb: Airbnb 사이트 클론 프로젝트

세계 최대의 숙박 공유 서비스인 에어비앤비는 보다 광범위하고 다양한 종류의 숙소 및 서비스를 공급합니다. 집주인은 숙소에 대한 소개, 사진, 숙소의 규칙과 같은 여러 형태의 정보들을 쉽고 자세하게 설명해 놓으며, 이용객은 자신이 원하는 숙박 유형, 날짜, 위치, 인원 수, 가격 등의 필터를 이용해 적합한 방을 찾아 예약을 하게 됩니다.

다양한 조건 검색 기능과 라이브러리 사용을 통해 에어비앤비를 이용하는 사람들이 경험할 A to Z를 구현해볼 수 있을 것 같아 이 사이트를 2차 프로젝트 사이트로 선정하였습니다. 짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론했습니다. 개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 부분은 모두 백엔드와 연결하여 개발하였습니다.

2. 개발 인원 및 기간

개발 기간: 2020.12.28 ~ 2021.01.08 (총 12일간)
개발 인원: 6명
FE- 이은진(PM), 김성훈, 한채빈
BE- 김승재, 김기수, 이수한

3. 사용한 기술 스택

Front-End

React Hooks, ES6, Styled Components, Scss

Back-End

Python, Django, Bcrypt, JWT, MySQL, AWS, Docker

협업 도구

Git, Github, Trello, Slack

4. 구현한 기능

일반회원 로그인,회원가입 / 카카오 로그인,회원가입
메인페이지 지역, 날짜, 인원수 선택 후 검색 기능
리스트페이지 숙소유형 / 가격 / 방 갯수 / 시설 / 지역 등 검색결과 필터링 팝업, 라이브러리 적용, 페이지네이션 기능
상세페이지 이미지 / 침실유형 / 편의시설 / 평점 / 유의사항 등 조회, 좋아요, 예약 정보 수정, 예약하기 기능
예약페이지 예약 후 예정된 일정 확인, 예약 숙소 세부정보 확인, 예약 취소하기 기능
전체 기능 백엔드 API 연결
전체 기능 회원 Authorization
Date Picker, Material UI, Kakao API

5. 데모 영상