https://github.com/crud0626/youtube_clone

https://github.com/crud0626/youtube_clone

firebase html5 javascript netlify postman react redux scss yarn

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/crud0626/youtube_clone
• Owner: crud0626
• Created: 2021-12-12T02:05:34.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-20T12:06:08.000Z (over 1 year ago)
• Last Synced: 2024-10-05T14:24:27.116Z (about 1 month ago)
• Topics: firebase, html5, javascript, netlify, postman, react, redux, scss, yarn
• Language: JavaScript
• Homepage:
• Size: 1.06 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Youtube-clone



Youtube-clone Demo Link


유튜브 클론 코딩 프로젝트로 CSS의 디테일 및 Youtube API에서 제공하는 데이터를 활용하여 실제 유튜브의 기능을 최대한 구현하는데 비중을 둔 프로젝트입니다.

## 사용 기술



  

  

  

  





  

  

  



### 미리보기

| 영역 | 미리보기 |

| --- | :-: |

| - Home 영역 |  |

| - Watch 영역 |  |

| - Search 영역 |  |

## 기능

- 비디오 관련

```

조회수, 채널 정보, 제목, 재생시간, 업로드일자 등의 데이터를 Youtube API로부터 응답받아 알맞게 렌더링되도록 구현하였습니다.

또한, 실제 유튜브에서 적용하고 있는 기능인 설명 부분에 가변 토글 기능을 구현 후 적용하였습니다.

```

- 댓글

```

작성일자, 작성자의 썸네일, 댓글 총 개수 등의 정보를 알맞은 영역에 렌더링되도록 구현하였습니다.

비디오 영역과 마찬가지로 가변 토글 기능을 적용하였습니다.

```

- 검색기능

```

React router를 활용하여 query부분에 검색어를 포함하여 라우팅 처리를 할 수 있도록 구현하였습니다.

```

- 로그인 기능

```

Firebase의 Auth를 활용하여 로그인 기능을 구현하였으며 OAuth 2.0 인증을 통해 좋아요 및 싫어요와 같은 인터랙션 기능을 구현하였습니다.

```