Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/boostcampwm2023/web07-gbs
금쪽이들의 방송 플랫폼 GBS
https://github.com/boostcampwm2023/web07-gbs
nestjs reactjs typescipt
Last synced: about 2 months ago
JSON representation
금쪽이들의 방송 플랫폼 GBS
- Host: GitHub
- URL: https://github.com/boostcampwm2023/web07-gbs
- Owner: boostcampwm2023
- Created: 2023-11-06T02:17:18.000Z (about 1 year ago)
- Default Branch: dev
- Last Pushed: 2024-01-30T04:50:21.000Z (12 months ago)
- Last Synced: 2024-04-14T03:08:32.102Z (9 months ago)
- Topics: nestjs, reactjs, typescipt
- Language: TypeScript
- Homepage: https://gbs-live.site/
- Size: 2.69 MB
- Stars: 58
- Watchers: 3
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔎 프로젝트 소개
```
GBS에서는 아프리카 TV, 트위치와 같이 실시간으로 인터넷 방송을 하거나 볼 수 있습니다.
스트리머는 OBS를 사용해서 GBS로 실시간 방송을 송출할 수 있습니다.
또한, 시청자는 방송을 보면서 채팅을 통해 다른 사람들과 실시간으로 소통할 수 있습니다.
```
# 📺 프로젝트 주소
> https://gbs-live.site/
# 👨👩👧👦 팀 소개
| 👑 J136 정명희 | J011 김경근 | J158 최상원 | J164 한원준 |
| :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :-------------------------------------------------------------------------: |
| BE | BE | FE | FE |
| 
| 
| 
| 
|
| [@jmhee28](https://github.com/jmhee28) | [@kkg5](https://github.com/kkg5) | [@ChoiSangwon](https://github.com/ChoiSangwon) | [@Novrule](https://github.com/Novrule) |
# 🎤 발표 영상
[](https://youtu.be/a8PiFnJqvQM)
# ⚒️ 주요 기능
> 메인 화면에서 현재 진행중인 방송을 볼 수 있어요!
> 네이버 및 구글 아이디로 간편 로그인을 할 수 있어요!
> 원하는 방송에 들어가 채팅을 통해 다른 시청자들과 소통할 수 있어요!
> 방송을 하고 싶다면 방송 비밀 키와 OBS를 연동해 GBS로 방송을 송출할 수 있어요!
# 🔥 기술적 도전
## ⏺ Storybook 적용
- 컴포넌트를 보다 잘 관리하기 위해서 Storybook을 적용했습니다.
- Storybook을 사용하면서 의존성이 낮고 재사용성이 좋은 컴포넌트를 구현하기 위해 고민 할 수 있었습니다.
## ⏺ 다크모드 구현
- 보다 나은 사용자 경험을 위해서 사이트 전체에 대해 다크모드를 적용했습니다.
- 다크모드를 적용하기 위해 ThemeProvider 및 Recoil를 사용하며, 전역 상태 관리에 대해 알 수 있었습니다.
## ⏺ 스트리밍 서비스 구현
- 스트리밍 서비스를 구현하며 RTMP, HLS 프로토콜에 대해 배울 수 있었습니다.
## ⏺ 간편 로그인 구현
- 사용자가 더 쉽고 빠르게 서비스에 접근할 수 있도록 OAuth를 이용한 간편 로그인을 적용했습니다.
- 간편 로그인을 구현하는 과정에서 oAuth의 동작 방식에 대해 공부할 수 있었습니다.
- 쿠키를 통한 로그인 검증을 구현하며, httpOnly나 sameSite와 같은 쿠키의 속성에 대해 배울 수 있었습니다.
## ⏺ 실시간 채팅 구현
- 실시간 채팅을 구현하며, Socket.io와 WebSocket에 대해 학습할 수 있었습니다.
- Clova AI의 비속어 순화 기능을 실시간 채팅에 적용해보며, Clova AI의 동작 및 사용 방법에 대해 알 수 있었습니다.
# ⚙️ 기술 스택
**더 자세한 내용을 보고 싶으시다면 [금쪽이들의 wiki](https://github.com/boostcampwm2023/web07-GBS/wiki)나 [금쪽이들의 notion](https://happy-ozraraptor-565.notion.site/GBS-b3e35f1c05c24973a722bd406218a6ae?pvs=4)를 참고해주세요!**