Codewarts 👋🏻

코드와트는 알고리즘 문제 풀이에 특화된 온라인 모같코 플랫폼입니다.

* 모같코 : 모여서 같이 코딩하기

친구들과 함께 실시간으로 코드를 치며 알고리즘 문제를 맞혀보세요!

Links 📎

• 코드와트 : https://codewarts.online
• 트러블슈팅 기록 : https://hyejiyeom.notion.site/9534d334cd9a4b4694f5f2a1dd0723a7?pvs=4
• 발표 영상 :
  
  

Features 🪄

🔮 상호작용 가능한 온라인 가상 공간

• 친구들과 함께 교실 맵에서 모임을 가질 수 있어요.
• 각 캐릭터의 움직임은 실시간으로 반영됩니다.

🔮 실시간 공동 편집 코드 에디터

• 다른 사람과 함께 코드를 완성해보세요.
• 컴파일 기능으로 코드 출력 결과를 바로 확인할 수도 있어요.

🔮 알고리즘 문제 제공 및 채점

• 에디터 내 검색 기능으로 문제를 불러올 수 있어요.
• 문제 정보를 읽으며 알고리즘 문제를 풀고, 잘 풀었는지 채점도 해보세요!

🔮 실시간 그림판

• 실시간으로 코드를 보며 텍스트로는 표현하기 어려운 것을 그려보세요.
• 소통의 질이 높아진 걸 느낄 수 있을거예요.

🔮 실시간 음성 채팅

• 강의실과 에디터에서 음성 채팅이 가능합니다! 함께 이야기해보세요.
• 강의실과 각 에디터들의 채팅 룸은 분리되어 있어 각자 화면에 맞게 이야기할 수 있어요.

• 강의실에서 우측 하단 아이콘을 눌러 현재 음성 채팅이 가능한 유저들과 음소거 여부를 볼 수 있습니다.

• 에디터에서도 우측 하단 버튼을 눌러 음성 채팅이 가능한 유저를 볼 수 있습니다.
• 에디터의 주인은 참여한 사람의 마이크/헤드셋을 마음대로 음소거할 수 있어요.

• 에디터의 게스트는 자기 자신의 마이크/헤드셋만 음소거할 수 있습니다.

🔮 게시판 (리더보드 및 메모)

• 나를 포함한 코드와트 학생들의 코딩 랭킹을 확인하고 의지를 불태울 수 있어요.
• 메모를 미션 보드처럼 활용해 알고리즘 스터디를 지속해보세요!

🔮 이모지 & 이펙트

• 이모지를 통해 친구들과 풍부한 상호작용을 할 수 있어요.

• 문제를 맞히거나 에디터를 이용 중인 친구들에게는 특수한 이펙트가 나와요.

• 풍부한 효과를 잘 이용해서 코드와트를 조금 더 재미있게 즐겨보세요!

Stacks 📚

Team Codewarts 🧑‍🤝‍🧑

김준철	이은민	염혜지	한동훈	김세희
플랫폼 그림판 배포환경 구축	에디터 컴파일 문제 검색 및 채점	플랫폼 UI 문제 풀이 랭킹 및 메모	에디터 로그인 이모지 UI	플랫폼 보이스챗 코드 구조 설계
GitHub	GitHub Blog	GitHub	GitHub	GitHub

Poster 🖼

Branch 전략

• main : 최신 개발 브랜치
• deploy/codewarts : 클라우드 배포 브랜치
  
  

How to install ❓

클라이언트와 서버에서 각각 다음 작업 수행

⚙️Server

.env 파일 생성(/server/env.txt 참고)
npm install
npm run dev

⚙️Client

.env 파일 생성(/client/env.txt 참고)
npm install
npm start

License ℹ️

• 캐릭터 이미지 : Wayward
• 배경음악 : https://gongu.copyright.or.kr/gongu/wrt/wrtCl/listWrtSound.do?menuNo=200020 *공유마당에 게시된 음원을 합법적으로 사용하기 위한 출처입니다.

  🎵 bgm1 : https://gongu.copyright.or.kr/gongu/wrt/wrt/view.do?wrtSn=13073758&menuNo=200020
  
  🎵 bgm2 : https://gongu.copyright.or.kr/gongu/wrt/wrt/view.do?wrtSn=13048800&menuNo=200026
  
  🎵 bgm3 : https://gongu.copyright.or.kr/gongu/wrt/wrt/view.do?wrtSn=13073793&menuNo=200020