시네마스터(Cinemaster) - client

다양한 사용자 맞춤 서비스를 가진 영화 플랫폼

🏆 Prize

• 아주 훌륭한 SW융합인의 도전 - 우수상

👨🏻‍💻 Team

박지헌	이지수	천현우
@jiheon788	@jisulee42	@Hyyena
FE / Design	BE / 배포	BE / RS

🤔 Background

• Problem: 영화 산업은 발전하고, 영화에 대한 추천 및 리뷰를 남길 수 있는 사이트는 무수히 많지만 구독경제를 통한 OTT 플랫폼이 대다수였고, 무료로 영화에 대한 정보를 교류할 수 있는 공간은 대형플랫폼의 댓글을 통한 부속 서비스 뿐

• Solution: 누구나 자유롭게 무료로 이용할 수 있는 영화 리뷰 & 추천 플랫폼

✨ Features

• 유저관리(User): 로그인, 회원가입, 소셜로그인
• 개인관리(Individual): 프로필 수정, 작성 리뷰 관리, 찜 기능
• 리포트(Report): 유저 취향 분석 레포트 기능 (별점분포도, 장르선호도, 리뷰 워드클라우드)
• 영화인포(Movie): 유튜브 트레일러, 영화정보, 영화검색
• 영화리뷰(Review): 리뷰작성, 수정, 삭제, 조회, 별점, 리뷰추천
• 추천(Recommendation): 평점기반, 유저기반, 장르기반 추천서비스

🔮 Demo

1. Home

• 랭킹 영화 중 랜덤으로 배너 출력
• 랭킹, 평점랭킹, 개봉예정작, 사용자 추천 영화
• 영화 검색 기능

2. 로그인 및 회원가입

• 로그인, 회원가입
• 소셜로그인 (카카오, 네이버)

3. 추천시스템

• 평가페이지에서 내가 본 영화에 별점을 매긴 후, 서버에 제출하면 영화 추천을 해준다. (평점기반 추천시스템)
• 평가페이지는 랜덤한 영화 20개를 보여줌
• 1회만 평가하면 계속해서 적용되어있다. 새롭게 추천받고 싶은 경우 다시 평가하기 하면된다.

4. Info

• 유튜브 트레일러, 영화 정보들을 확인 가능
• 북마크 기능
• 유저기반, 장르기반 추천서비스
• 리뷰작성, 수정, 삭제, 조회, 별점, 리뷰 추천

5. 사용자 맞춤 서비스

• 프로필 관리, 작성 리뷰 관리, 북마크 목록
• 유저 취향 분석 레포트 (별점분포도, 장르선호도, 리뷰 워드클라우드)

🛠 Tech Stack

React, Redux, Jquery, ChartJs

⚙️ System Architecture

---

Getting Started

Install

$ npm i

Build

$ npm run build

Start

$ npm start

env

• Fill out .env for your api key & server url

REACT_APP_API_KEY=${your TMDB API key}
REACT_APP_KAKAO_API_KEY=${your kakao rest api key}
REACT_APP_KAKAO_REDIRECT_URL=${your kakao redirect url}
REACT_APP_NAVER_CLIENT_ID=${your naver client ID}
REACT_APP_NAVER_CLIENT_SECRET=${your naver client secret key}
REACT_APP_NAVER_REDIRECT_URL=${your naver redirect url}
REACT_APP_SERVER_URL=${your server url}
REACT_APP_PYTHON_SERVER_URL=${your recommendation server url}