Vinylify 🎶

Table of Content

• Introduction
• Features
• Demo
• Screenshots
• Development Process

Introduction

Description	Techs
Front
State management & data fetching
Build & Deployment
Code Quality & Version Control
Error tracking & Monitoring
Styling
APIs

vinlyify(바이닐리파이)는 스포티파이 프리미엄 구독 시 아래의 기능을 제공합니다.

• 내 최근 최다 재생 목록 20곡
• 내 최근 최다 재생 목록 20곡 기반 추천 20곡 2024-11-27기준 api deprecated
• 곡 현재 기기에 재생/중지
• 현재 재생 곡 가사 보기
• 현재 재생 곡 아티스트 정보 보기
• 앨범, 아티스트, 트랙, 플레이리스트 검색

Features

📼 데모 영상 보기

Screenshots

• 로그인 페이지

• 메인 페이지

• 현재 재생 곡 페이지

• 검색 페이지
  • 디폴트 : 최근 최다 재생곡 아티스트, albums 탭으로 설정되어 있습니다.

- albums/ artists / tracks / playists

- 검색어

Development Process

• 자세한 구현 과정은 블로그에서 살펴보실 수 있습니다. (업데이트 중, COMING SOON!)
• 1탄 : spotify dev 계정 만들기
• 2탄 : spotify api authorization 담당 서버(1) vercel로 배포
• 3탄 : spotify api authorization 담당 서버(2) 코드 작성
• 4탄 : eslint + prettier + commitlint 설정 (+husky)
• 5탄 : react router 설정
• 6탄 : tanstack query 설정
• 7탄 : sentry 설정