Skip to content

b22mer/Luckquiz-project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LuckQuiz

기술 스택

Frontend

ReactReduxReact RouterTypeScript

HTML5CSS5JavaScriptNPM

BackEnd

springbootApache TomcatspringsecurityJSON Web TokensQuerydslMySQLStompapachekafka

DevOps

kubernetesnginxJenkinsgitlabamazonec2googlecloudargosourcetreeubuntu

Tools

notionjiraintellijideavisualstudiocodepostman

LuckQuiz

image

목차

  1. 기획 배경
  2. 타겟 유저
  3. 프로젝트 소개
  4. 사용 기술
  5. 팀원 소개

기획 배경

image

기존의 정적인 퀴즈 풀이 방식에서 벗어난 동적인 게임이 추가된 새로운 퀴즈 플랫폼!

image


타겟 유저

image


프로젝트 소개

기본적으로 회원가입한 유저만 템플릿을 생성, 퀴즈방을 열 수 있습니다. 

서비스 순서도

image

1 호스트가 방을 열때

호스트가 소캣서버에서 핀번호와 퀴즈정보를 요청하게 됩니다. 이때 카프카를 통해 방 정보를 레디스와 마리아 디비에 업데이트 해줍니다. 그리고 소켓서버를 열게됩니다.


2 참여자가 핀번호를 통해서 방에 참여합니다.

참여자가 방에 참여하게 되면 연결을 하고 메시지를 구독해 퀴즈방에 들어온 참가자의 목록을 받을 수 있습니다.


3 퀴즈 진행

퀴즈가 진행되면서 참여자들이 문제를 풀고 소켓 서버에 제출할 때마다 카프카에 관련 정보가 든 메시지가 쌓이게 되고 채점서버에서 쌓인 데이터를 가져와 채점을 하고 레디스에 결과를 반영합니다. 그리고 해당 방의 모든 채점이 끝나면 소켓서버에 알리고 소켓서버는 결과를 유저와 호스트에 전달합니다.


4 퀴즈 끝

퀴즈가 끝나면 카프카에게 퀴즈 종료 메세지를 보내고 현재 세션에 저장되어있는 퀴즈결과 정보를 계산해서 로그디비에 report로 저장하게 됩니다. 그러면 유저는 레포트를 볼 수 있읍니다.



아키텍처 구조(논리적)

image



아키텍처 구조(물리적)

image



로그인 화면 (호스트)

로그인

카카오, 구글 로그인을 지원합니다. 소유하고 있는 템플릿을 보거나 레포트를 확인할 수 있는 마이페이지로 이동할 수 있습니다.

호스트 퀴즈 출제 화면 순서와 정렬

퀴즈출제

드래그 앤 드롭으로 퀴즈의 순서를 수정할 수 있습니다.

ox문제와 주관식 중복 답안

ox와주관식

주관식 문제에는 중복답안을 입력할 수 있습니다.

임시 저장

퀴즈 임시저장

답변 및 문제의 유효성 체크를 진행해줍니다.

시간 설정 및 완전 저장

퀴즈 시간 설정 및 완전 저장

유효성 검사가 완료되면 온전한 템플릿으로 표시해줍니다.

퀴즈 플레이

호스트 퀴즈 진행 화면

호스트 퀴즈 끝나고 포디움


게임 플레이

알게임 게임장면

감정게임

주요 기술 소개

Frontend

image

웹소켓 비동기 처리에 중점을 두고 개발을 하였습니다. 반응형 웹을 구현하여 모바일, 웹 모든 환경에 최적화된 서비스를 제공하였습니다. 그리고 컴포넌트를 효율적으로 구분하였습니다.

Backend

image

대용량 트래픽 처리에 중점을 두고 개발하였습니다. 쿠버네티스와 카프카를 활용하여 동시에 많은 양의 데이터를 처리하였습니다.

ERD

image

image

팀원 소개

image

UCC 유튜브 링크입니다.

유튜브링크

About

실시간 통신 게임 기반 퀴즈 플랫폼

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published