binimini / 2023-Graduation-Project

졸업 프로젝트 : ConCoder : WebRTC와 WebSocket 을 이용한 실시간 알고리즘 화상 교육 웹 플랫폼

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


스크린샷 2022-11-21 오후 3 48 47

ConCoder

WebRTC와 WebSocket 을 이용한 실시간 알고리즘 화상 교육 웹 플랫폼

ConCoder는 ConCurrency + Coder의 합성어로, "동시에 코딩하는 사람들" 이라는 의미를 가지고 있다.

경희대학교 캡스톤디자인 수업 프로젝트의 일환으로 화상통화와 동시 프로그래밍 서비스를 결합하여 편리하게 하나의 웹 사이트에서 이용할 수 있는 서비스를 개발하였다.

Built With

높은 품질과 안정성을 보장하는 알고리즘 화상 교육 웹 서비스를 구현하기 위해 기본적인 웹 프레임워크에 WebRTC , Web Socket 통신, Multi-Thread 처리 등 여러 기술을 더하여 본 서비스를 개발하였다.

기능

메인 페이지

메인화면

사용자 정보 연동

✨ 사용자 아이디를 입력 받아 사이트의 사용자 정보와 연동한다.

사용자 정보 2

문제 카테고리 정보 연동

✨ 카테고리 목록 중 원하는 카테고리를 선택해 해당 카테고리 문제를 랜덤 추천 받을 수 있다.

카테고리 목록 카테고리 문제 조회

실시간 ChatGPT 연결

✨ 실시간으로 질문해 답변받을 수 있도록 ChatGPT를 연결한다. 피드백 버튼으로 작성한 코드에 대해 피드백 받을 수 있다.

gpt 연동 중 gpt 코드 피드백 시작

문제 추천

✨ 연동한 사용자 정보를 기반으로 적합한 문제를 추천받을 수 있다.

문제 추천

Contact

❣️ FRONTEND

민수빈 ✉️ tnqls5417@naver.com

❣️ BACKEND

민수빈 ✉️ tnqls5417@naver.com

기반 프로젝트 : Concoder

기능

메인 페이지

✨ 가장 왼쪽의 섹터에서 백준에 있는 문제들의 정보를 열람할 수 있다. 필터 검색번호 검색을 지원하며, 필터 검색은 DB에서 티어 기준으로 랜덤 추천해준다.

✨ 가운데에는 코드 에디터가 위치해있고, 아래에 컴파일 버튼과 스냅샷 버튼으로 해당 기능들을 이용할 수 있다. 컴파일시 우측 상단 컴파일 정보 섹터에 시간과 메모리 정보를 확인할 수 있으며, 컴파일 실패시 에러 로그를 보여준다.

✨ 우측 중앙에 테스트케이스를 등록하면 컴파일시 각 테스트케이스의 성공 여부도 확인할 수 있다.

✨ 가장 우측 하단에는 채팅 기능을 제공한다.

KakaoTalk_Photo_2022-11-21-15-28-07 002


코드 스냅샷 및 불러오기 기능

KakaoTalk_Photo_2022-11-21-15-28-06 001


타이머

KakaoTalk_Photo_2022-11-21-15-28-07 003

Contact

❣️ FRONTEND

정지원 ✉️ wjdwl001@khu.ac.kr
최지민 ✉️ 527wlals@khu.ac.kr

❣️ BACKEND

민수빈 ✉️ tnqls5417@naver.com
신정아 ✉️ jeonga@khu.ac.kr

About

졸업 프로젝트 : ConCoder : WebRTC와 WebSocket 을 이용한 실시간 알고리즘 화상 교육 웹 플랫폼


Languages

Language:Java 48.7%Language:TypeScript 46.8%Language:SCSS 3.7%Language:Python 0.4%Language:JavaScript 0.2%Language:HTML 0.2%Language:Dockerfile 0.1%