Foxie

Contents

1. Description
2. Get Started
3. Overview
4. Development
   • Schedule
   • Languages and Tools
   • ERD
   • Members
5. Retrospective

Description

당신만을 위한 영화 커뮤니티, Foxie

• 유저 참여형 추천 시스템
• SNS 형식의 영화 커뮤니티
• UI/UX 중점

Get Started

client

$ git clone https://github.com/modorie/foxie.git
$ cd foxie
$ yarn install
$ yarn serve

server

$ git clone https://github.com/modorie/foxie-api.git
$ cd foxie-api
$ python -m venv venv
$ source venv/Scripts/activate
$ pip install -r requirements.txt

$ python manage.py makemigrations
$ python manage.py 

# tmdb 기반 영화 데이터 추가
$ python manage.py loaddata actors.json directors.json genres.json
$ python manage.py loaddata movies.json
$ python manage.py loaddata castings.json

# 서버 실행
$ python manage.py runserver

Foxie의 유저 기반 추천 서비스를 사용해보고 싶다면 다음 코드를 실행해주세요.

# 가상 유저 700명 생성
$ python manage.py seed_users --number=700

# 영화 리뷰 데이터 추가 (kaggle)
$ python manage.py get_reviews

# 리뷰에 댓글 및 좋아요 추가
$ python manage.py seed_reviews --number=700

# 커뮤니티에 게시글, 댓글, 좋아요 추가
$ python manage.py seed_community --number=100

Overview

영화 추천 서비스

• Foxie는 당신의 활동을 기반으로 영화를 추천해드립니다.
• 영화 리뷰 작성, 유저 팔로잉 등의 활동을 많이 할수록 더 많은 영화 정보가 제공됩니다. 🤗

메인 페이지

• 인기 영화, 리뷰, 게시글 모아보기
• 사이드바에 영화 추천 서비스 제공
• Global Style을 활용한 다크모드 구현

영화 검색

• TMDB API를 활용한 실시간 영화 검색
• 글래스모피즘 레이아웃 및 UX 라이팅

영화 페이지

• 주제별 영화 리스트를 캐러셀을 통해 제공
• 영화 카드 클릭시 상세 페이지 이동

영화 상세 페이지

• 줄거리, 출연배우, 감독, 예고편 정보 제공
• 영화별 리뷰 등록
• 리뷰에 좋아요 및 댓글 기능

리뷰 피드 페이지

• 모든 영화 리뷰 모아보기
• 리뷰 내 영화 카드를 통해 영화 상세 페이지 이동
• 인기 리뷰, 내 팔로워의 리뷰 모아보기

커뮤니티 페이지

• 게시판 형식의 커뮤니티 페이지
• 페이지네이션 구현
• 글 쓰기 기능

커뮤니티 게시글 조회

• 작성자 클릭시 유저 프로필 이동
• 좋아요 및 댓글 기능

커뮤니티 글쓰기

• TOAST UI Editor
• 에디터 디자인 커스터마이징
• base64 형식을 통해 사진, GIF 저장 및 조회 가능

프로필 페이지

• 나의 선호 영화 및 작성 리뷰 모아보기
• 대시보드를 통한 간단한 맞춤형 통계
• 닉네임, 프로필사진, 소개글 변경 기능

메인 페이지 (비로그인)

• 블러 처리를 활용한 영화추천 시스템 미리보기
• UX 라이팅을 활용한 회원가입 안내

로그인 페이지

회원가입 페이지

Development

Schedule

• 기간 : 2021.11.12 ~ 2021.11.25

Languages and Tools

ERD

Members

채연희	소석진
백엔드 Database 설계 및 데이터 소스 구축 추천시스템 구현 API 설계	프로젝트 매니징 협업 도구 및 컨벤션 관리 Git 전략 수립 일정 관리
프론트엔드 Server - Client 연동 서비스 기능 구현 세부 컴포넌트	프론트엔드 프로젝트 초기 세팅 페이지 레이아웃 설계 기능 구현 (외부 라이브러리 지양)
기획 및 디자인 컨셉 디자인 레퍼런스 수집 Figma를 이용한 기본 UI 설계	기획 및 디자인 컨셉 디자인 기술스택 조사 디자인 시스템 CSS 정의

Retrospective

• 채연희
• 소석진