Git Product home page Git Product logo

final-project-for-snu-web-21-1's Introduction

Final-Project-for-SNU-Web-21-1

개요

"왜 심리테스트는 많은데, 각자 잘 맞는 마음을 가진 사람들을 만나지는 못할까?" 라는 문제점에서 출발했습니다. 저희는 각자 테스트를 통해 본인의 성향을 파악하고, 그 결과를 바탕으로 자신과 가장 잘 맞는 사람을 찾아서 서로 대화할 수 있게 하기 위해 만들었습니다.

기능명세


개요

회원가입 및 로그인 / 구글 & 깃헙계정으로 진행가능. 회원가입 및 로그인 에러시 에러 메시지 뜸

비로그인시 메인 화면 송출. 로그인을 했으나, profile이 완료 안 됐을 시, 프로파일 완료 셋업 버튼이 뜬다 로그인을 했으나, 아직 테스트를 한 적 없으면, 테스트 버튼만 뜨고 로그인을 했고, 테스트를 했으면, 결과창, 매칭창, 채팅창을 보여준다 내부 라우팅은 /, /test, /result, /matching, /chatting 으로 구성 (React-Router-Dom 사용)

Firebase DB


각자 개발이 달라서 firebase와 firestore를 혼용함.

Realtime DB

  • accounts: 유저 개인 정보 저장
  • partnerList: 파트너 매칭 정보 띄우기
  • testResult: 테스트결과 DB에 저장해둠

Firestore

  • chatRooms: 채팅방 구현

Storage

  • imagesOfFlowers: 각 유형에 맞는 꽃 이미지 저장
  • images/avatars: user profile 저장

Router 설명


./

  • 홈페이지 라우팅
  • 비로그인시 메인 화면 송출.
  • 로그인을 했으나, profile이 완료 안 됐을 시, 프로파일 완료 셋업 버튼이 뜬다
  • 로그인을 했으나, 아직 테스트를 한 적 없으면, 테스트 버튼만 뜨고
  • 로그인을 했고, 테스트를 했으면, 결과창, 매칭창, 채팅창을 보여준다

./test

  • 심리 테스트 진행
  • 테스트마다 다른 결과가 돌아가도록 로직이 짜여있다.

./result

  • 심리테스트 결과값에 따른 결과창을 보여준다.
  • testResult DB에서 각 Type에 맞는 값을 도출한다.

./matching

  • 각 테스트 결과값에 따라서 그 결과값에 맞는 partnerList를 DB에서 불러와준다
  • 각 파트너의 카드를 누르면 그 파트너와의 채팅창이 열리고, 채팅을 시작할 수 있다.

./chatting

  • 이제껏 채팅했던 모든 이들의 리스트가 좌측에 주어진다.
  • 상대를 선택하면 우측에서 메시지 내역을 확인할 수 있다.
  • 채팅 리스트(새로 개설되는 채팅방 포함, 마지막 메시지 기준으로 최신순 정렬)와 현재 열려 있는 채팅방의 메시지가 실시간으로 업데이트된다.

final-project-for-snu-web-21-1's People

Contributors

prrsh22 avatar case-kim avatar victorjeon avatar

Watchers

 avatar  avatar

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.