BookUs 📒👥

Festa! (이벤트 주최 및 예약 서비스) Clone

아이디어 개요

이벤트를 손쉽게 주최하고, 등록할 수 있는 서비스입니다. 무료 / 유료 티켓을 판매하고 관리할 수 있으며 티켓을 통한 이벤트 참여 관리도 가능합니다.

해당 서비스를 기획한 배경, 필요성

Deview, FEConf 와 같이 인기가 많은 이벤트의 예약은 선착순으로 진행되며 많은 사용자들이 티켓 오픈 시간에 맞춰 접속하기 때문에, 트래픽이 순간적으로 급증하게 됩니다. 이러한 상황에서 매우 짧은 시간동안 많은 트래픽을 감당할 수 있으면서, 정해진 인원만 예약을 받을 수 있는 안정적인 서비스가 필요합니다.

기술적인 도전 과제

• 과중한 트래픽이 몰려도 정해진 숫자만큼의 사용자만 예약되는 시스템
• 예약이 필요할 경우에만 서버의 개수가 늘어나는 Scheduled Scaling 시스템
• 호스트 페이지에서 이벤트의 통계 및 현황 시각화
• 재사용 가능한 UI Component 개발
• Storybook + Cypress 를 이용한 Bulletproof 컴포넌트 작성 (test coverage > 80%)

기능 목록

계정

• OAuth(Google)를 이용해서 로그인을 할 수 있다.
• 첫 로그인 시, 회원가입을 진행한다.
  • 이름, 전화번호 입력
• 로그아웃을 할 수 있다.
• 예약 완료된 이벤트를 조회할 수 있다.

메인

• 다가오는 이벤트의 티켓을 modal 형식으로 보여준다.
• 현재 예약 가능한 가장 가까운 이벤트들을 grid 형식으로 보여준다 무한 스크롤이 가능하며, 스크롤을 할 때마다 이벤트들이 추가된다.
• 각각의 이벤트는 이미지와 제목, 이벤트 날짜, 내용과 가격정보를 보여주며 클릭시 이벤트의 상세정보를 조회할 수 있다.
• 상단에는 이벤트를 생성할 수 있는 버튼이 있다.

이벤트 조회 (상세)

• 이벤트에 대한 상세한 내용을 조회할 수 있다.
  • 티켓의 좌석 점유 현황이 실시간으로 새로고침 없이 표시된다. (optional)
  • 이벤트 주최 장소가 (네이버) 지도로 표시된다.
  • 이미지와 이벤트 상세 내용, 제목, 열리는 날짜 등의 입력한 모든 내용을 보여준다.

이벤트 주최 (등록)

• 이벤트를 등록할 수 있다.
  • 공개여부
  • 대표이미지
  • 제목
  • 날짜 및 시간
  • 장소 / 상세주소(네이버 지도) / 장소설명
  • 내용(에디터)
  • 티켓
    • 이름
    • 설명
    • 가격
    • 수량 / 수량숨김여부
    • 1인당 구매 가능 개수
    • 판매 기간
    • 환불 마감 날짜

이벤트 예약 (구입)

• 구매할 티켓 내용이 보여진다.
• 실제 결제는 이루어지지 않음

호스트 조회 (주최자 조회 페이지)

• 주최자의 정보를 보여준다.
• 프로필 사진과 테마 이미지, 상세정보와 현재까지 개최했던 이벤트에 대해 보여준다.

내 페이지

• 우측 상단의 내 이름을 눌렀을 때 접근이 가능하다.
• 내 티켓, (나의) 호스트, 프로필 상세정보(수정가능), 주최한 이벤트 내용을 보여줌
• 상단의 탭 형태의 디자인이며 각각을 누를때마다 다른 기능을 보여준다.

주최자 페이지

• 참석자의 출석을 조회하고 체크할 수 있다.
• 참석자에게 이메일을 발송할 수 있다. (이건 옵션이 좋을 것 같아요.)
• 이벤트의 내용(날짜, 제목, 공개여부, 이미지, 주소, 설명)을 수정할 수 있다.
• 티켓 정보를 수정할 수 있다.(티켓 이름/유형, 설명, 수량, 가격, 수량 숨김 표시)
• 통계자료 추가

이벤트 시작 이전(이벤트 등록 직후)

• 사용자가 이벤트를 조회한 시간의 분포 (그래프)
• 이벤트 알림 설정한 사용자들의 현황 (number) - Service Worker
  • 수요예측 가능(알림 설정한 사람들에 대한 데이터 시각화)

이벤트 시작 이후(티켓판매 시작)

• 남아있는 티켓의 양 (number) / 총 매출 (number)
• 시간당 이벤트 티켓 판매 현황 (그래프)

이벤트 종료 이후(티켓판매 종료)

• 체크인에 대한 시간 분포 (그래프)
• (optional) 사용자의 추가 정보(연령대, 관심사 등)를 이용한 통계

개발 환경

Language : Typescript (Airbnb style)

Front-end : React, Styled Component, Storybook

Back-end : Node.js, Express

Test : Jest, Cypress, Supertest, nGrinder, Codecov

DevOps : Travis CI → Docker → Kubernetes || ncloud

API Documentation Tool : Swagger