🥇WE-TNESS (위트니스)🥈

WebRTC와 모션인식을 활용한 운동 게임 서비스

✨ 목차

서비스 소개
1. 주요 기능 및 시연화면
2. 기본 기능 및 시연화면
개발환경
1. 시스템 환경
2. Technical Architecture Diagram
팀원 소개

🔎 서비스 소개

항상 작심 일일을 실행하고 있진 않으신가요?

요즘 날씨, 밖에 나가서 운동하기 힘들죠?

그냥 숨쉬기도 버거운데 운동이 재미없으면 어떻게 해요?

하지만 운동을 게임처럼 즐겁게 할 수 있다면?

위트니스와 함께라면 가능합니다.

💻 주요기능 및 시연화면

게임 화면 - 플레이 화면

운동 - 푸시업

운동 - 런지

운동 -스쿼트

운동 - 버피

Teachable Machine - 버피, 스쿼트, 푸시업, 런지

💻 기본기능 및 시연화면

홈 화면 - 현재 생성된 방

방 생성 - 게임 종류, 제목 및 암호 설정

튜토리얼 - 카메라 세팅 및 운동 별 가이드

랭킹 페이지 - 게임 종류 별(중복 선택 가능) 및 지역 별 랭킹

검색 - 유저, 방 검색 및 유저 운동 기록 조회

📃 개발환경

시스템 환경

🔗 Frontend
- React v5.0.1
- node.js v16.14.0
- npm v8.7.0
- redux-toolkit v1.8.3
- styled-components v5.3.5
🔗 CI/CD & Database
- AWS ec2 - Ubuntu 20.04.4 LTS
- Docker 20.10.12
- Jenkins 2.346.3
- nginx/1.18.0 (Ubuntu)
- MySQL 8.0.30-0ubuntu0.20.04.2
- certbot 0.40.0
🔗 Backend
- Spring Boot 2.7.1
- Spring Data JPA 2.7.1
- Spring Security 5.7.2
- Spring Cloud 2.2.6
🔗 Web RTC
- openVidu 2.22.0
🔗 Tools
- Intellij 2022.2
- VS Code
- Google Chrome 104.0.5112.81

Technical Architecture Diagram

🤸‍♀️ 팀원 소개

오혜린(팀장)
- 백엔드
- User, Rank관련 API 구현
- 데이터베이스 설계
- Jenkins를 사용한 자동빌드
- nginx세팅
- EC2 서버 환경 세팅 및 배포
- 최종 발표
김윤석
- 백엔드
- user 로그인 관련 기능 개발
- 팔로우, 알림, 신고, 어워드 기능 개발
류현수
- 백엔드
- Spring Security 활용한 user 인증 구현
- Openvidu 활용 WebRTC 환경 구축
- 소셜 로그인 구현(카카오)
배준성
- 프론트엔드
- 요구사항 명세서 작성
- react-toolkit & react-router-dom 활용 SPA 구현
- axios 요청을 통한 api 통신
- 튜토리얼 페이지 제작
- 디자인 및 프로토타입 제작
- 운동별 애니메이션 제작
- styled-components 활용 css 스타일링
- 협업과 코드 리팩토링을 위한 ESLint 설정
이동근
- 프론트엔드
- react 컴포넌트 구조 설계
- react-toolkit & react-router-dom 활용 SPA 구현
- axios 요청을 통한 api 통신
- 회원 CRUD 구현 (회원가입, 로그인, 정보 수정, 비밀번호 수정, 팔로우 등)
- 소셜 로그인 구현 (카카오)
- Openvidu 활용 게임방 실시간 데이터 교환 구현
- teachable machine 활용 동작인식 구현
- styled-components 활용 css 스타일링
한유연
- 백엔드
- 게임 관련 기능 (게임 생성 및 결과 저장 등) API 구현
- 사용자 운동 기록 관련 API 구현
- 다이어리 관련 기능, S3 버킷 연동 통해 리소스 관리 API 구현
- EC2 서버 환경 세팅 및 배포
  - DB 세팅 및 관리
  - Nginx 통한 프록시 설정
  - Certbot 통해 SSL 구축