talkingOrange/track1_client_release1.1

Discover your limitless track

Discorver Your Limitless Track

💜 음악 프로듀서 - 보컬 매칭 플랫폼

[프로젝트 소개]

음악 프로듀서가 스케치 곡을 업로드하면 보컬이 이를 다운받아 녹음 후 업로드하여 보다 직관적으로 협업의 기회를 창출할 수 있는 매칭 플랫폼

<<<<<<< HEAD

=======

💜 페이지 별 핵심기능

Track Searh(프로듀서가 올린 음악을 볼 수 있는 페이지)

- 뮤직 플레이어 : 프로듀서가 올린 음원을 재생.

- 필터링 : 장르별 필터링을 통해 장르별 곡 확인

- 무한 스크롤 : 데이터베이스에 있는 모든 트랙데이터를 무한스크롤로 확인.

Comment(프로듀서가 올린 음악에 보컬을 입혀 올릴 수 있는 페이지)

- 보컬 댓글 Post : producer의 음원에 보컬녹음하여 comment를 통해 음원과 설명글 업로드.

Vocal(보컬의 음악을 볼 수 있는 페이지)

Profile(보컬,프로듀서 프로필확인 페이지)

• 무한스크롤 : 업로드한 자신의 음원데이터를 무한스크롤로 확인.
  
  
  

5. Upload(보컬-포트폴리오 / 프로듀서-포트폴리오or게시글)

- 필터링 : 장르별 필터링을 통해 장르별 곡 확인 - 뮤직 플레이어 : 보컬이 올린 음원을 재생.

• Track/Portfolio Post : UserType에 따라서 게시글을 업로드.
  
  
  

97c3720101129243a8238f25ea96db6f221626f7

💜 기술 스택 및 사용 라이브러리

  "axios": "^1.2.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-query": "^3.39.2",
  "react-router-dom": "^6.5.0",
  "react-scripts": "5.0.1",
  "recoil": "^0.7.6",
  "styled-components": "^5.3.6",
  "styled-reset": "^4.4.4",
  "typescript": "^4.9.4",
  "web-vitals": "^2.1.0"

💜 폴더구조

├── __test
│
├── .gitgub
│
├── public
│
├── src
│   ├── @components
│   │   ├── @common
│   │   ├── modal
│   │   ├── //
│   │
│   ├── @pages
│   │   ├── mainPage
│   │   ├── producerProfilePage
│   │   ├── trackPostPage
│   │   ├── trackPage
│   │   ├── vocalProfilePage
│   │   └── vocalPage
│   │
│   ├── assets
│   │   ├── audio
│   │   ├── icon
│   │   ├── image
│   │   └── assets.d.ts
│   │
│   ├── core
│   │   ├── api
│   │   │   ├── axios
│   │   │   └── path
│   │   ├── main
│   │   ├── producerProfile
│   │   ├── trackPost
│   │   ├── tracks
│   │   ├── vocalProfile
│   │   └── vocals
│   │
│   ├── mocks
│   │
│   ├── recoil
│   │
│   ├── style
│   │   ├── globalStyle
│   │   ├── style.d.ts
│   │   └── theme
│   │
│   ├── type
│   └── utils
│       └── hooks
│
├── App
├── index
└── Router

💜Tracker💚