https://github.com/connect-foundation/2019-21

🙋‍♀️ 🙋‍♂️ 바글바글(Vaagle): 실시간 질의응답 및 투표 공유 서비스
https://github.com/connect-foundation/2019-21

docker express graphql mysql nodejs oauth react redis sequelize-orm socket-io

Last synced: 9 days ago
JSON representation

🙋‍♀️ 🙋‍♂️ 바글바글(Vaagle): 실시간 질의응답 및 투표 공유 서비스

• Host: GitHub
• URL: https://github.com/connect-foundation/2019-21
• Owner: connect-foundation
• Created: 2019-11-01T09:13:36.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-18T22:35:03.000Z (over 1 year ago)
• Last Synced: 2024-04-24T11:01:48.536Z (7 months ago)
• Topics: docker, express, graphql, mysql, nodejs, oauth, react, redis, sequelize-orm, socket-io
• Language: JavaScript
• Homepage:
• Size: 6.73 MB
• Stars: 39
• Watchers: 5
• Forks: 7
• Open Issues: 98
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 바글바글

[sli.do](https://www.sli.do/)에서 아이디어를 영감 받은 실시간 질의응답 및 투표 공유 웹 서비스

![GitHub release (latest by date)](https://img.shields.io/github/v/release/connect-foundation/2019-21)



  

  












## 배포 링크

* [www.vaagle.com](http://www.vaagle.com)

## 데모 영상

- [데모영상](https://www.youtube.com/watch?v=jErevbCtdF0&feature=youtu.be)

## 주요 기능

- 2가지 사용자 모드 제공 (Host: 이벤트를 주관하는 사용자, Guest: 이벤트에 참가하여 질문하는 사용자)

- 실시간 질의응답(Guest 모드)

   - 실시간 질문할 수 있음

   - 질문에 좋아요를 누를 수 있음 (좋아요가 많으면 인기질문 Tab 상단쪽에 노출됨)

   - 질문에 이모지를 추가할 수 있음

   - 질문에 댓글을 달 수 있음

- 실시간 질의응답 (Host 모드)

   - 실시간 질문을 검열하여 특정 질문은 삭제할 수 있음

   - 특정 질문을 상단에 고정시킬 수 있음

   - 답변한 질문은 실시간질문 Tab에서 질문저장소로 이동시킬 수 있음

- 실시간 투표

   - 투표 종류: N지선다(복수선택 지원), 별점주기

   - Host는 투표를 생성하여 Guest들에게 실시간 투표 참여를 요청할 수 있음

   - Guest들은 투표를 할 수 있고, 투표 상황은 실시간 공유됨

## 위키 링크

[wiki](https://github.com/connect-foundation/2019-21/wiki)

## 팀원

-   [권혁(hkwon)](https://github.com/hkwon)

-   [김근영(nuguya)](https://github.com/nuguya)

-   [김유준(demetoir)](https://github.com/demetoir)

-   [홍태의(teihong93)](https://github.com/teihong93)

## 기술 스택

-   Front-end: React, Apollo

-   Back-end: nodejs, MySQL2, Sequelize, GraphQL(Yoga), socket.io, Oauth, Docker

-   Env & etc: Eslint, babel, webpack, prettier, yarn, github, slack

## DataFlow

![vaagleDataFlow](https://user-images.githubusercontent.com/52785648/70682492-6885b080-1ce2-11ea-9f46-609338d4e8d7.jpg)

## 기술적 특징

- Express, socket.io, grpahQL, MySQL 총 4가지 서버가 Docker 위에서 상호작용하며 동작

- 각각의 서버는 서로 의존적으로 연결되어있지 않고 독립적인 성격을 띄기 때문에 유지보수 및 에러 상황 대처에 유연

- 각 서버는 각각의 인증 로직을 가지고 있기 때문에 외부로부터의 개별접근을 차단

- 호스트 앱과 게스트 앱이 나뉘어있지만 서로가 실시간으로 연동

- 실시간 처리를 보장하며 채팅뿐 아니라 채팅검열 및 상단 고정 등이 즉각적으로 여러 클라이언트에 반영

- 실시간 투표를 통해 여러 클라이언트에 투표 결과를 실시간으로 반영

- 모바일 환경을 고려한 모바일 First

- React 컴포넌트 최적화를 통한 클라이언트 반응성 최적화

- Google OAuth 로그인

## 사용자 집단

-   컨퍼런스/세미나/수업 참가자 및 운영자

## 기획 배경 및 필요성

-   수업, 강연, 토론 중 실시간 질의응답 및 투표를 통한 청중의 능동적 참여를 유도함

-   완벽한 한글화 지원 ⇒ 이용자 연령층 확대 (중장년/아동)

-   Front-end, back-end가 적절하게 배분, 4명이 도전적으로 개발할 만한 분량

## 도전적 기능

-   질문에 댓글 기능을 추가함

-   Realtime & Robust: 실시간 질문 공유, 실시간 투표 및 안정적 서버/클라이언트 동작

-   Localization: 한국인에게 친숙한 UI 개발 (카톡의 투표 UI, 다양한 한글폰트 추가 등)

-   Mobile first: Guest 모드는 스마트폰에 최적화된 UI 개발, 최적화 작업 진행

-   Emoji 적용