Youtube Side Project

Version

Theme: Youtube (유튜브)

Click the link to view Demo.   Demo 보러가기

Skills Used

• Language:

  • 

• Framework:

  • 
  • Function Component, React Hooks, React Router Dom, React Query(TanStack Query) etc

• Test:

  • Unit Test
    • 
  • E2E Test
    • 

• UI:

  • 

• State Management: Context API

• Design Pattern: OOP with Dependency Injection

• HTTP Library:

  • 

• API for Data:

  • 

• Icons: React-icons

Features

• Show Hot Trending Videos
  • Video Thumbnails
  • Video Titles
  • Upload Channel Titles
  • Formatted Video Released Dates
• Search Video using keyword
• Show Video Detail
  • Video URL
  • Channel Name, Image
  • Video Description
  • Related Videos List
• Watch Video
• Related Video
• Unit Test
• E2E Test
• Responsive Website

Images

(이미지 클릭 시, 큰 화면으로 보실 수 있습니다.)

• Main Pages
  • Index
  • Search Video
  • Video Detail
  • Related Video
• Test
  • Test Coverage

Videos

Index

랜딩 페이지 입니다.
가장 인기 있는 비디오들의 목록과 메타 정보들(썸네일 이미지, 영상 제목, 채널명, 업로드 시간)을 보여줍니다.

Search Video

보고 싶은 비디오의 제목을 검색합니다.
검색 후, 그와 관련된 비디오들의 목록과 메타 정보들을 확인할 수 있습니다.
아래 예시는 'messi goal'을 검색한 결과 입니다.

(Youtube API의 할당량이 적어 배포된 사이트에는 mock video data 를 사용하였습니다.
따라서 정해진 비디오만 나오게 됩니다.)

Video Detail

보고 싶은 비디오 썸네일을 클릭하면 상세 비디오 화면으로 이동합니다.
Play Button 을 누르면 비디오를 볼 수 있습니다.
비디오 플레이어 밑에는 비디오 제목, 채널 이름, 채널 이미지, 비디오에 관한 설명을 보여줍니다.
오른쪽에는 현재 보고 있는 비디오와 연관된 비디오들의 목록과 메타 정보들을 보여줍니다.

(Youtube API의 할당량이 적어 배포된 사이트에는 mock video data 를 사용하였습니다.
따라서 정해진 비디오만 나오게 됩니다.)

Related Video

상세 비디오 화면에서 연관된 비디오를 클릭했을 때 그 비디오의 상세 화면으로 이동합니다.

(Youtube API의 할당량이 적어 배포된 사이트에는 mock video data 를 사용하였습니다.
따라서 정해진 비디오만 나오게 됩니다.)

Test

Test Coverage

Unit Test의 결과입니다.
Main Feature 테스트는 모두 실시하였으며, 코드 전체의 50.54%를 커버하였습니다.