Skip to content

SWM-FIRE/modoco-frontend

Repository files navigation

Hits

모도코

모여서 도란도란 코딩👨‍💻👩‍💻
개발기간: 2022.06 ~ 2022.11

배포 주소

정식 버전 : https://modocode.com
개발 버전 : https://dev.modocode.com

TEAM 🔥FIRE🔥 소개

윤영기 : FE 고주형 : BE 이하령 : FE
@071yoon @IamGroooooot @halang
wakatime wakatime wakatime

프로젝트 소개

모도코(모여서 도란도란 코딩) 프로젝트는 모각코를 하고 싶은 사람들이 모여 도란도란 코딩할 수 있게 해주는 플랫폼입니다. 개발자 친화적인 기능을 갖추고 모각코로 만들어진 인연이 이어질 수 있게 만들고자 합니다.


실행방법

Project Setting

환경변수 세팅

# ************************************************* #
#  This is an example env file for modoco frontend  #
# ************************************************* #

# backend server
REACT_APP_BASE_URL=your_backend_server

# channel talk key
REACT_APP_CHANNEL_IO_KEY=your_channel_talk_key

# oauth
# oauth client id
REACT_APP_GITHUB_CLIENT_ID=your_github_oauth_client_id
REACT_APP_KAKAO_CLIENT_ID=your_kakao_oauth_client_id
REACT_APP_GOOGLE_CLIENT_ID=your_google_oauth_client_id
# oauth redirect uri
REACT_APP_KAKAO_REDIRECT_URI=your_kakao_redirect_uri
REACT_APP_GOOGLE_REDIRECT_URI=your_google_redirect_uri

# turn server
REACT_APP_TURN_URL=your_turn_server_url
REACT_APP_TURN_CREDENTIAL=your_turn_server_credential
REACT_APP_TURN_USERNAME=your_turn_server_username

# lambda server
REACT_APP_LAMBDA_INVITE=your_lambda_server_url

Installation

1. Install npm dependency

# install packages
$ yarn install

# clean install packages
$ yarn ci

2. Run React

# run app
yarn start

# run app in https
# need SSL_CRT_FILE=cert.pem SSL_KEY_FILE=key.pem in root
yarn start:https

# check style lint
yarn lint:css

Build

# build app
yarn build

Testing

# start test mode
yarn test

# run app and open cypress
yarn cypress

# open cypress without opening app
npx cypress open

Stacks 🚀

Environment

VSC iTerm Git Github Gitlab

Config

npm Yarn Babel

Development

TypeScript JWT React ReactQuery Styled ChartJS SocketIO WebRTC

Lint

ESLint Prettier StyleLint

Test

Jest Cypress

Communication

Jira Confluence Figma Discord GC

Analytics

GA Wakatime NewRelic


동작 화면 💻

화면 구성

첫 페이지 로그인 회원가입 메인페이지
방 입장 준비 방 입장 채팅 화면 확대

테마

바다 캠핑 모닥불 우주 여행

주요 기능 ✨

⭐️ 진행중인 모각코 방에 입장

  • 현재 진행중인 모각코 방들을 메인화면에서 찾을 수 있어요
  • 방에대한 정보(제목, 태그, 테마)등을 통하여 원하는 방에 입장 할 수 있어요
  • 초대하기 링크를 통해 입장하면 비밀번호가 있는 방에 바로 접속 가능해요

⭐️ 모각코 방 생성

  • 원하는 모각코방이 없으시다면? 방을 직접 만들 수 있어요
  • 친구들만 모으고싶다면, 비밀번호를 설정하세요!

⭐️ 친구 추가

  • 모각코중에 마음에 드는 사람을 만났나요? 친구로 등록해보세요
  • 친구 신청, 친구 수락 및 거절, 친구 삭제 모두 가능해요!

⭐️ 화면 공유

  • 어떤것을 코딩하는지 공유하고 싶다면, 화면을 공유해보세요
  • 화면만으로 부족하다면, 음성을 키고 대화해보세요

⭐️ 채팅

  • 모각코 방에서 여러 사람들과 채팅을 할 수 있어요
  • 친구들과 1:1 채팅 또한 가능해요!

⭐️ 유튜브 플레이리스트 듣기

  • 나만의 플레이리스트로 커스텀하여 친구들과 노래를 들을 수 있어요
  • 원하지 않는 노래는 삭제도 가능해요

⭐️ 프로필 설정

  • 나의 깃허브와 개인 페이지 혹은 블로그 링크를 등록할 수 있어요
  • 간단한 한줄 소개로 자신을 표현해봐요!

⭐ 로비 입장

  • 현재 모도코에 있는 모든 사람들을 확인할 수 있어요
  • 전체 채팅을 통해 같이 모각코할 사람을 구해보세요!

아키텍쳐 ⚒

Full Architecture

full arch

WebRTC Flow

WebRTC Sequence Diagram

DM Flow

direct_message_sequence_diagram


개발로그 ✏️

halang's GitHub stats halang's GitHub stats 071yoon's GitHub stats

영기

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

071yoon's GitHub stats

하령

halang's GitHub stats

halang's GitHub stats

halang's GitHub stats

halang's GitHub stats

halang's GitHub stats

halang's GitHub stats

halang's GitHub stats

halang's GitHub stats


This Project is Sponsored by Software Maestro

This work was supported by the Institute of Information & Communications Technology Planning & Evaluation(IITP) grant funded by the Ministry of Science and ICT(MSIT) (IITP-0000-SW Maestro training course).