Git Product home page Git Product logo

camstudy-web's Introduction

Hits

camstudy_web

캠 스터디 서비스인 "공부하는 농부"의 웹 서비스 입니다. Next.js와 Typescript로 구현되었으며 node.js를 이용해 구축된 api 서버를 포함하고 있습니다. (API 명세서를 참고) 공부하는 농부 서비스는 공부방, 작물 심기, 랭킹 기능을 포함하고 있으며 이를 통해 동기 부여 증진을 기대할 수 있습니다.

공부방에서는 미디어 서버를 통해 상대방과 미디어 통신을 합니다. WebRTC 라이브러리인 mediasoup을 이용하여 공부방 기능을 개발했습니다. Mesh 구조의 경우 피어가 3명 이상이 되면 클라이언트의 부하가 심해지기 때문에 P2P로 개발하지 않고 SFU 방식으로 개발했습니다.

셋업

  • firebase에 프로젝트를 생성, 필요한 키 값(apiKey, authDomain, projectId, 등)을 firebase.ts 파일의 firebaseConfig에 대입해준다.
  • Prisma에 DB를 연결하기 위한 URL 값을 env에 DATABASE_URL로 추가해준다.
  • Naver Object Storage 연결을 위한 환경 변수를 env에 추가해준다.
  • 소속 이메일 전송을 위한 mailgun의 Domain URLAPI key를 env에 추가해준다.

실행 방법

  • 터미널 창에 npm run build를 입력해 빌드해준뒤, npm run start로 실행

기술

  • React, Next.js
  • firebase
  • Mobx
  • Prisma
  • Mediasoup, Socket.io
  • mailgun, multer
  • ts-mockito

스크린샷

  • 홈 화면


  • 공부방 화면


  • 작물 관리 화면


  • 랭킹 화면

camstudy-web's People

Contributors

jja08111 avatar kgunwoo26 avatar antonio-990510 avatar

Stargazers

hyeonwoo avatar

camstudy-web's Issues

로깅 추가

운영 및 디버깅을 위한 로깅이 필요하다

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.