Git Product home page Git Product logo

listen-with-me's Introduction

ʟɪꜱᴛᴇɴ ᴡɪᴛʜ ᴍᴇ (Qᴜᴀʀᴛᴇᴛᴛᴇ)

배포 주소

http://listen-with-me.s3-website.ap-northeast-2.amazonaws.com/

회고

https://bit.ly/2SCFSpz

팀원 소개

김정준 (@ᴛᴡᴏ-ᴊᴀʏ) 팀장 이상아 (@ꜱɴᴀᴀɢ) 이원희 (@ᴅᴏᴋᴅᴏ2005) 정인호 (@ᴇɴᴏ76)
음악이 좋아요 음악이 좋아요 아이디어가 좋아요
음악이 좋아요
내가 쓸거에요
아이디어가 좋아요
BE FE BE FE

작업 내역

이상아

  • Navigation Navigation

  • SignIn, SignUp, SignOut User

    • 일반 로그인, 회원가입 및 입력 시 유효성 검사
    • 구글 로그인, 회원가입
    • 로그아웃
  • ListenPage ListenPage

    • 방 생성 및 삭제 기능 (이전에 비정상적으로 종료된 방이면, 방에 입장 시 이전 방 삭제 후 다시 생성)
    • 플레이리스트 좋아요, 좋아요 취소 기능
    • 실시간 채팅 및 음악 재생하도록 하는 기능
    • 유저의 선택에 따라 호스트의 음악을 따라듣거나, 혼자 들을 수 있는 기능
    • 호스트의 퇴장 시 게스트가 듣던 곡만 마저 듣고 나가거나, 아니면 바로 나갈 수 있도록 하는 기능
    • 음악 끝까지 다 들으면 처음 곡 재생하도록 하는 기능
  • ProfilePage ProfilePage

    • 프로필 이미지 수정 기능
    • 닉네임, 인사말 수정 기능
    • 청취자 수 및 좋아요 수 불러오는 기능

기술 스택

프론트엔드

dotenv react react--dom

axios socket.io--client

react--router-dom react--redux redux redux--actions redux--saga redux--thunk

react--google-login react--player

@fortawesome/fontawesome--svg-core@fortawesome/free--brands-svg-icons @fortawesome/free--regular-svg-icons @fortawesome/free--solid-svg-icons @fortawesome/react--fontawesome bootstrap react--bootstrap

백엔드

expresssequelizesequelize--climysql2 socket.io dayjs body--parsercookie--parser   cors nodemondotenv

jsonwebtokenaws--sdkmultermulter--s3 path google--auth-library cookie--session express--session passport

프로젝트 소개

친구와 음악을 똑같이 들을 수 있다면 어떨까? 에서 출발한 서비스 입니다.
내가 원하는 음악을 찾아 들을 수 있고, 친구의 코드를 입력해서 친구와 함께 들을 수도 있습니다.

전체 기능 플로우

flow

db

👉 유저 정보(일반/구글) / 프로필 / 플레이리스트 / 방 참여 / 호스트와 게스트의 상호 작용 / 기록

유저 정보

일반

  • 회원가입

    일반 회원가입--gif

  • 로그인

    일반 로그인--gif

  • 로그아웃

    일반 로그아웃--gif

구글

  • 회원가입

    구글 회원가입--gif

  • 로그인

    구글 로그인--gif

프로필

  • 프로필 사진, 닉네임, 소개글 수정하기

    프로필 정보 변경--gif

플레이리스트

  • 플레이리스트 생성, 수정, 삭제하기

    list 생성과 수정--gif

방 참여

  • 호스트가 연 방에 게스트로 참여하기 (메인 페이지에서 방 클릭 / 유저 검색해서 따라듣기 / 랜덤 듣기) 방 입장--gif

호스트와 게스트의 상호작용

  • 플레이리스트 좋아요 또는 취소

  • 채팅하기

  • 따라듣기 또는 따라듣지않기

  • 호스트가 나가면 따라 나가거나 이 곡만 듣고 나가기

  • 음악 변경

    Host Guest
    h1 g1
    h2 g2

기록

  • 최근 들은 리스트, 최근 좋아요 한 리스트 보기

    기록--gif

listen-with-me's People

Contributors

enolj avatar snaag avatar

Stargazers

 avatar  avatar  avatar  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.