✌️ 수 퀴즈 ✌️

카메라로 사용자의 수어 동작을 인식하여
퀴즈를 풀이하는 게임성 웹사이트

✋ Introduce

	기존에 수어를 쉽게 학습하는 플랫폼의 부족! 교육, 의료, 사회복지 등 다양한 분야에서 수어 관련 서비스 부족! 카메라를 통해 직접 수어 동작을 해보며 수어를 배워봅시다

📝 시스템 구성도

🕹 Feature

초기 홈화면

회원가입, 로그인

메인 화면

카테고리 선택

랜덤으로 제공되는 세가지 수어 학습

수어 퀴즈 풀이

올바른 동작일 경우

틀린 동작일 경우

수어 퀴즈 정답 풀이

랭킹

게임 종료 직후 랭킹 확인

랭킹 페이지

공유

오답노트

📹 Demo

💻 Tech Stack

- Frontend: React, React-Query, Redux, Scss
- Backend : Django, Django-Rest-FrameWork
- WSGI: Gunicorn
- Database: AWS RDS MySQL
- AI : Mediapipe
- Deployment: Docker, AWS EC2, AWS S3 bucket, AWS CloudFront

🎯 ERD

📕 API

• api/v1/users/register : 회원가입
• api/v1/users/login : 로그인
• api/v1/users/emailcheck : 이메일 중복 확인
• api/v1/users/namecheck : 닉네임 중복 확인
• api/v1/incorrect/add : 오답노트 추가
• api/v1/incorrect/list : 사용자 별 오답노트 목록 조회
• api/v1/signlanguage/info : 수어 정보 조회
• api/v1/signlanguage/three : 학습할 세 가지 수어 정보와 정답 라벨
• api/v1/ranks : 랭킹 등록, 조회
• api/v1/ranks/self : 상위 10명의 랭킹 정보 조회

🐳 How to start

1. clone the repository

git clone https://github.com/TUK-2023-Project/docker.git

2. Set environment file

Path: docker/backend/backend/settings.py
Django secret key & MySQL 환경변수 & S3 bucket

from pathlib import Path
import os
BASE_DIR = Path(__file__).resolve().parent.parent


SECRET_KEY = ""

DATABASES = {
    "default": {
        'ENGINE': os.environ.get('', 'django.db.backends.mysql'),
        'NAME': os.environ.get('', ''),
        'USER': os.environ.get('', ''),
        'PASSWORD': os.environ.get('', ''),
        'HOST': os.environ.get('', ''),
        'PORT': os.environ.get('SQL_PORT', '3306'),
    }
}

AWS_STORAGE_BUCKET_NAME = ''

AWS_ACCESS_KEY_ID=env.str("")

AWS_SECRET_ACCESS_KEY=env.str(")

Path: docker/settings/dev/.env.dev MySQL container 환경 변수 & RabbitMQ 환경변수

DEBUG=1
SECRET_KEY=
DJANGO_ALLOWED_HOSTS=
SQL_ENGINE=
SQL_DATABASE=
SQL_USER=
MYSQL_ROOT_PASSWORD=
SQL_HOST=
SQL_PORT=3306
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=

Path: docker/frontend/.env
카카오톡 공유하기 환경변수, 클라우드 프론트 public url

REACT_APP_SHARE_KAKAO_KEY=
REACT_APP_SHARE_URL=
PUBLIC_URL=

3. Run

docker-compose up --build

👨‍💻 Members

정태원	이민지	박수연
Leader, Frontend, Backend	Frontend	Backend

※ Reference

https://github.com/gabguerin/Sign-Language-Recognition--MediaPipe-DTW