https://github.com/beberiche/helloworld
프리토킹을 위한 자유로운 대화가 가능한 랜덤 화상채팅
https://github.com/beberiche/helloworld
css-modules jpa kurentomediaserver lombok mysql openvidu react redis redux spring-boot spring-oauth2 spring-security
Last synced: 2 months ago
JSON representation
프리토킹을 위한 자유로운 대화가 가능한 랜덤 화상채팅
- Host: GitHub
- URL: https://github.com/beberiche/helloworld
- Owner: beberiche
- Created: 2022-11-22T03:09:09.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-22T03:20:30.000Z (over 3 years ago)
- Last Synced: 2026-01-03T13:59:39.946Z (6 months ago)
- Topics: css-modules, jpa, kurentomediaserver, lombok, mysql, openvidu, react, redis, redux, spring-boot, spring-oauth2, spring-security
- Language: JavaScript
- Homepage:
- Size: 89.7 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# README
## 프로젝트 이름 및 설명
### **프리토킹**을 위한 자유로운 대화가 가능한 랜덤 화상채팅
## 팀원 소개
## 프로젝트 정보
### 프로젝트 진행 기간
- 2022년 7월 11일 ~ 2022년 8월 19일 (6주)
### 기획의도
- 언제 어디에서나 가볍게 언어교환을 할 수 있는 공간이 있으면 좋겠다.
- 외국인 울렁증 고치고 싶다!
- 내 생각을 외국어로 바로바로 전달하고 싶다!
⇒ 그런 환경을 우리가 만들어보자!
### 이런 포맷은 많은 편, 근데 차별점은?
- 매칭까지는 우리가 해준다, 다만 대화는 너희가 알아서 해라!
- 실전 경험이 처음인 사람들을 위한 유익한 기능을 제공해주면 좋겠다
- 아이스브레이킹을 위해 주제를 던진다거나… (최근 뉴스, 오픽, 토스 단골 질문)
- 첫 취지는 실전 경험 및 공부를 위한 목적
- 문란한 소재들을 제거해보자
- 신고 기능 구현
## 기술스택 및 개발환경
### 프론트엔드
- React : 18.2.0
- Redux : 8.0.2
- CSS Module
### 백엔드
- Spring boot : 2.4.5
- Spring Data Jpa : 2.4.5
- Spring Security : 2.4.5
- Spring Oauth2 : 2.4.5
- Lombok : 1.18.20
### WebRTC
- kurento media server : 6.16.0
- coturn-openvidu: 2.22.0
### OS
- Windows 10
### IDE
- Visual Studio Code : 1.70
- IntelliJ IDEA Ultimate : 2022.2
### DB
- MySQL : 8.0.30
- Redis : 7.0.4
### Server
- Ubuntu 20.04
## 프로젝트 산출물
### ERD
### 와이어프레임 & 프로토타이핑
[https://www.figma.com/file/OqoGzyfLCQ1rtuvCJvuIwr/HelloWorld?node-id=0%3A1](https://www.figma.com/file/OqoGzyfLCQ1rtuvCJvuIwr/HelloWorld?node-id=0%3A1)
### API 명세서
https://subsequent-tuberose-06f.notion.site/f498d3e543d843f2ab3258f553207fa6?v=e5bcbb068609417096d27ebc32cd0d65
## 주요 기능
### 1:1 화상채팅
- 랜덤으로 매칭, 5분이 지나면 로테이션
- 선행 규칙
- 두 유저 가운데, 룸을 생성하는 사람을 룸 생성자라고 규정
- 두 유저 가운데, 존재하는 룸에 참여하는 사람을 룸 입장자라고 규정
- 룸에 유저가 적합한지 분류할 수 있는 기준 필요
- ex: 영어, 중국어, 일본어 등
- 룸 데이터와 socket 인스턴스는 별도로 관리
- ex: Redux와 같은 상태관리 라이브러리
- 로직 구현 순서
### VIP
- 대화 시간을 연장할 수 있음
- 대화에 필요한 주제를 랜덤으로 제공
### 하트
- 대화 후 상대방에게 하트를 건넬 수 있음
- 하트 5개를 사용해 시간 연장이 가능
### 그 외
- 신고 기능
- 공지사항, 대화에 도움이 될 만한 팁 등을 설명하는 포스트를 메인 화면에서 제공
## 결과 예시 화면 및 UCC 링크 {- 유튭 스크린샷 / GIF 넣기 / 유툽링크}
### 유튜브링크
[https://www.youtube.com/watch?v=8ZY0X5w0Hig](https://www.youtube.com/watch?v=8ZY0X5w0Hig)
---
### 랜딩 페이지
▲ 프로젝트 링크 접속 시 가장 먼저 나오는 페이지입니다.
### 회원가입
▲ 올바른 이메일과 비밀번호 등의 회원 정보를 입력합니다.
▲ 국적, 언어, 프로필 이미지를 설정하고 개인정보 처리방침에 동의하면 회원가입이 완료됩니다.
### 포스트
▲ 공지사항, 나라별 문화 등의 내용이 등록된 포스트를 볼 수 있습니다.
### 매칭 & 미팅
▲ 매칭을 시작했을 때 로딩 화면 & 매칭 성공 5초 후 미팅 페이지로 이동합니다.
▲ 마이크 & 카메라 ON/OFF & 채팅 기능을 테스트하는 모습입니다.
▲ 하트 보내기 기능을 테스트하는 모습입니다.
▲ 좌하단에는 질문 예시 텍스트가 제공됩니다.
▲ 설정 페이지로 이동했을 때의 모습입니다.