스케치퀴즈

Typescript로 작성된 오픈소스 그림퀴즈 웹 어플리케이션입니다.

캐치마인드와 skribbl.io로 대표되는 인기 게임 장르이나,

완성도가 높은 웹 버전 오픈소스가 없어 제작했습니다.

백엔드와 프론트엔드를 모두 포함합니다.

백엔드 (./server)

Express와 socket.io를 기반으로 한 node.js 서버입니다.

소켓 통신 규약은 PROTOCOL.md에 정의되어 있습니다.

Usage

$ yarn으로 의존성을 설치합니다.

$ yarn start로 서버를 엽니다. 포트는 3000입니다.

$ yarn test로 서버 코드를 테스트합니다.

$ yarn build로 서버를 빌드합니다.

프론트엔드 (./web)

React.js와 tailwindcss를 기반으로 한 클라이언트입니다.

Usage

$ npm i로 의존성을 설치합니다.

본인의 백엔드 서버 URI를 SocketContext.ts에 입력합니다.

$ npm start로 디버그용 개발 서버를 엽니다.

$ npm run-script build로 프로덕션 빌드를 할 수 있습니다.

배포

Docker Compose를 통해 서버를 구성할 수 있습니다. 프론트엔드 페이지는 빌드되어 nginx로 서빙됩니다. 리포지토리 최상단 디렉토리에서 $ docker-compose up를 입력하세요.

브랜치

• develop: 현재 개발중인 버전입니다.
• master: 릴리즈된 버전입니다.