S-FLEX
S-FLEX 프로젝트를 소개합니다!
이 프로젝트는 React, TypeScript, Node.js 및 MongoDB를 사용하여 구축된 넷플릭스 클론입니다. React Query, React Hook, Styled Components 등과 같은 강력한 라이브러리를 활용하여 최적화된 사용자 인터페이스를 제공해 보았습니다.
목차
기능
-
영화 및 TV 프로그램 탐색
- 영화 및 TV 프로그램 목록 탐색.
- 각 영화 또는 TV 프로그램에 대한 상세 정보 보기.
영화 페인 페이지
영화 상세 정보
TV 페인 페이지
TV 상세 정보
TV Season 별 상세 정보
-
장르 선택
- 장르별로 영화 및 TV 프로그램 필터링.
- 선택한 장르와 관련된 콘텐츠 표시.
영화 장르 선택
TV 장르 선택
-
검색 기능
- 영화 및 TV 프로그램 검색.
- 검색 결과를 영화와 TV 프로그램으로 구분하여 표시.
검색 기능
-
마이 페이지
- 아이콘으로 프로필 커스터마이징.
- 좋아하는 장르 선택.
sessionStorage에 정보를 저장하여 페이지 새로고침 후에도 유지.
나의 프로필 - 아이콘과 장르 선택 가능
-
인증
- 사용자 로그인 및 로그아웃 기능.
- Node.js와 MongoDB를 사용한 안전한 사용자 데이터 관리.
로그인
회원가입
사용 기술
프론트엔드
- React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리.
- TypeScript: JavaScript의 상위 집합으로 타입을 지원하는 언어.
- React Query: React를 위한 데이터 페칭 및 상태 관리 라이브러리.
- React Hook: 컴포넌트 로직을 관리하기 위한 커스텀 훅.
- Styled Components: 템플릿 리터럴을 사용하여 React 컴포넌트를 스타일링하는 라이브러리.
- Font Awesome: 다양한 아이콘을 제공하는 라이브러리.
- Axios: HTTP 클라이언트 라이브러리.
- Framer Motion: 애니메이션 라이브러리.
- React Router: 라우팅 라이브러리.
- React Hook Form: 폼 관리를 위한 라이브러리.
- ApexCharts: 차트 라이브러리.
- Recoil: 상태 관리 라이브러리.
백엔드
- Node.js: Chrome V8 JavaScript 엔진을 기반으로 하는 JavaScript 런타임.
- MongoDB: 사용자 데이터 및 콘텐츠 정보를 저장하기 위한 NoSQL 데이터베이스.
- Express: Node.js를 위한 웹 애플리케이션 프레임워크.
- Mongoose: MongoDB를 위한 ODM(Object Data Modeling) 라이브러리.
- JWT: JSON 웹 토큰을 사용한 인증.
- Bcrypt: 비밀번호 해싱 라이브러리.
- Nodemailer: 이메일 전송 라이브러리.
- Cors: 교차 출처 리소스 공유(CORS)를 위한 미들웨어.
- Dotenv: 환경 변수 로드 라이브러리.
- Express Validator: 요청 데이터 유효성 검사를 위한 라이브러리.
- Express Session: 세션 관리를 위한 라이브러리.
프로젝트 구조
📦프론트엔드 src
┣ 📂Api
┃ ┣ 📜Api.ts
┃ ┣ 📜GenreApi.ts
┃ ┣ 📜MovieApi.ts
┃ ┗ 📜TvApi.ts
┣ 📂Components
┃ ┣ 📂Genre
┃ ┃ ┣ 📜GenreBigMovie.tsx
┃ ┃ ┣ 📜GenreBigTv.tsx
┃ ┃ ┣ 📜SliderGenre.tsx
┃ ┃ ┗ 📜SliderGenreTv.tsx
┃ ┣ 📂Loading
┃ ┃ ┣ 📜.DS_Store
┃ ┃ ┣ 📜Loading.tsx
┃ ┃ ┗ 📜MainLoading.tsx
┃ ┣ 📂Movie
┃ ┃ ┣ 📜Movie.tsx
┃ ┃ ┗ 📜Slider.tsx
┃ ┣ 📂Tv
┃ ┃ ┣ 📜SeasonModal.tsx
┃ ┃ ┣ 📜SeasonSelector.tsx
┃ ┃ ┣ 📜SliderTv.tsx
┃ ┃ ┗ 📜TvComponent.tsx
┃ ┣ 📜.DS_Store
┃ ┣ 📜CategoryFont.tsx
┃ ┣ 📜Footer.tsx
┃ ┣ 📜Header.tsx
┃ ┣ 📜ProfileContext.tsx
┃ ┣ 📜Video.tsx
┃ ┗ 📜profil.tsx
┣ 📂Routes
┃ ┣ 📜DropdownMenu.tsx
┃ ┣ 📜GenreMovie.tsx
┃ ┣ 📜GenreTv.tsx
┃ ┣ 📜Home.tsx
┃ ┣ 📜Search.tsx
┃ ┣ 📜SearchSlider.tsx
┃ ┣ 📜TV.tsx
┃ ┣ 📜login.tsx
┃ ┗ 📜signup.tsx
┣ 📂styled
┃ ┗ 📜loginCss.tsx
┣ 📂utils
┃ ┣ 📜PrivateRoute.tsx
┃ ┣ 📜apiUtils.tsx
┃ ┗ 📜authUtils.tsx
┣ 📜.DS_Store
┣ 📜App.tsx
┣ 📜atom.tsx
┣ 📜index.tsx
┣ 📜styled.d.ts
┣ 📜theme.ts
┗ 📜utils.ts
📦 백엔드 src
┣ 📂middleware
┃ ┣ 📜loginAuth.js
┃ ┗ 📜validator.js
┣ 📂models
┃ ┗ 📜User.js
┣ 📜.env
┣ 📜db.js
┣ 📜emailAuth.js
┣ 📜index.js
┗ 📜server.js
API 엔드포인트
인증
| POST /sendVerification | 사용자 이메일 인증 전송 |
| POST /verifyCode | 인증번호 일치 검증 |
| POST /user | 사용자 회원가입 |
| POST /login | 사용자 로그인 |
| GET /user | 사용자 정보 가져오기 |
영화
| GET /api/movie/now_playing | 현재 상영중인 영화 가져오기 |
| GET /api/movie/upcoming | 개봉 예정 영화 가져오기 |
| GET /movie/top_rated | 순위권 영화 가져오기 |
TV 프로그램
| GET /api/tv/popular | 인기 순위별 tv show 가져오기 |
| GET /api/tv/on_the_air | 현재 방영중인 tv show 가져오기 |
| GET /api/tv/top_rated | 순위권 tv show 가져오기 |
| GET /api/search | 콘텐츠 검색 |
장르
| GET /api/genre/movie/list | 영화 장르 list 가져오기 |
| GET /api/genre/tv/list | tv show 장르 list 가져오기 |
| GET /api/discover/movie | 장르 별 영화 상세 정보 가져오기 |
| GET /api/discover/tv | 장르 별 tv show 상세 정보 가져오기 |
이외의 것들
| GET /api/search/multi?query=${keyword} | keyword 검색 결과 가져오기 |
| GET /api/movie/${movieId}/videos | 영화 예고편 가져오기 |
| GET /api/tv/${tvId}/videos | tv 예고편 가져오기 |
기여
커뮤니티의 기여를 환영합니다. 레포지토리를 포크하고 개선 사항이나 버그 수정을 위한 풀 리퀘스트를 제출해주시면 감사하겠습니다 :)
라이선스
프로젝트는 MIT 라이선스를 따릅니다. 자세한 사항은 LICENSE 파일을 참조하세요.
GitHub 배포 주소: https://seoyeon1123.github.io/S-FLEX/
