Giter Club home page Giter Club logo

15-2nd-codebnb-frontend's Introduction

CodeBnb Project

OVERVIEW

  • Airbnb 사이트 클론 프로젝트
  • 짧은 프로젝트 기간동안 개발에 집중해야 하므로 디자인/기획 부분만 클론했습니다.
  • 개발은 초기 세팅부터 전부 직접 구현했으며, 아래 데모 영상에서 보이는 부분은 모두 백엔드와 연결하여 개발하였습니다.

개발 인원 및 기간

  • 개발 기간: 2020.12.28 ~ 2021.01.08 (총 12일간)
  • 개발 인원: 프론트엔드 3명, 백엔드 3명

프로젝트 선정 이유

  • 세계 최대의 숙박 공유 서비스인 에어비앤비는 보다 광범위하고 다양한 종류의 숙소 및 서비스를 공급합니다. 집주인은 숙소에 대한 소개, 사진, 숙소의 규칙과 같은 여러 형태의 정보들을 쉽고 자세하게 설명해 놓으며, 이용객은 자신이 원하는 숙박 유형, 날짜, 위치, 인원 수, 가격 등의 필터를 이용해 적합한 방을 찾아 예약을 하게 됩니다.
  • 다양한 조건 검색 기능과 라이브러리 사용을 통해 에어비앤비를 이용하는 사람들이 경험할 A to Z를 구현해볼 수 있을 것 같아 이 사이트를 2차 프로젝트 사이트로 선정하였습니다.

팀원 소개

FE 이은진(PM)

FE 김성훈

FE 한채빈

BE 김승재

BE 김기수

BE 이수한

사용한 기술 스택

Front-End

  • React Hooks
  • ES6
  • Styled Components
  • Scss

Back-End

  • Python
  • Django
  • Bcrypt
  • JWT
  • MySQL
  • AWS
  • Docker

협업 도구

  • Git, Github, Trello, Slack

구현한 기능

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

데모 영상

레퍼런스

  • 이 프로젝트는 에어비앤비사이트를 참조하여 학습목적으로 만들었습니다.
  • 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.

15-2nd-codebnb-frontend's People

Contributors

bonbon0202 avatar cbhan0102 avatar claire-euni avatar diazyouknow avatar eunjinii avatar joonsikyang avatar seungjaekim-git avatar tonyk0901 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.