https://github.com/pyotato/vinylify

🎶 search, listen to music via spotify api
https://github.com/pyotato/vinylify

genius lyrics search-artists search-music spotify spotify-api vinyl-aesthetics

Last synced: 3 months ago
JSON representation

🎶 search, listen to music via spotify api

• Host: GitHub
• URL: https://github.com/pyotato/vinylify
• Owner: Pyotato
• Created: 2024-07-12T17:07:19.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-01-11T09:31:13.000Z (5 months ago)
• Last Synced: 2025-01-11T09:35:23.757Z (5 months ago)
• Topics: genius, lyrics, search-artists, search-music, spotify, spotify-api, vinyl-aesthetics
• Language: TypeScript
• Homepage: https://vinylify-tau.vercel.app
• Size: 4.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vinylify 🎶 









## Table of Content

- [Introduction](https://github.com/Pyotato/vinylify?tab=readme-ov-file#introduction)

- [Features](https://github.com/Pyotato/vinylify?tab=readme-ov-file#features)

- [Demo](https://github.com/Pyotato/vinylify?tab=readme-ov-file#-%EB%8D%B0%EB%AA%A8-%EC%98%81%EC%83%81-%EB%B3%B4%EA%B8%B0)

- [Screenshots](https://github.com/Pyotato/vinylify?tab=readme-ov-file#screenshots)

- [Development Process](https://github.com/Pyotato/vinylify?tab=readme-ov-file#development-process)

### Introduction

| Description | Techs |

| ----- | ----------------------- |

|Front| ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=flat&logo=typescript&logoColor=white) ![Reactjs](https://shields.io/badge/react-black?logo=react&style=flat)|

|State management & data fetching|![Tanstack Query](https://img.shields.io/badge/-tanstack%20Query-FF4154?style=flat&logo=react%20query&logoColor=white) ![ky badge](https://img.shields.io/badge/ky-red.svg)|

|Build & Deployment|![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=flat&logo=vercel&logoColor=white)|

|Code Quality & Version Control|![Commitlint](https://img.shields.io/badge/commitlint-0352fc.svg?style=flat&logo=commitlint&logoColor=fc4103) ![Yarn](https://img.shields.io/badge/yarn-%232C8EBB.svg?style=flat&logo=yarn&logoColor=white) ![vite](https://img.shields.io/badge/-Vite-B73BFE?style=flat&logo=vite&logoColor=white&style=flat)|

|Error tracking & Monitoring|![Sentry Badge](https://img.shields.io/badge/Sentry-362D59?logo=sentry&logoColor=fff&style=for-the-badge&style=flat) |

|Styling|![Sass Badge](https://img.shields.io/badge/Sass-C69?logo=sass&logoColor=fff&style=for-the-badge&style=flat)|

|APIs|![Spotify Badge](https://img.shields.io/badge/Spotify-1DB954?logo=spotify&logoColor=fff&style=flat)  ![Genius Badge](https://img.shields.io/badge/Genius-FFFF64?logo=genius&logoColor=000&style=flat)|

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

- `내 최근 최다 재생 목록 20곡`

- ~~`내 최근 최다 재생 목록 20곡 기반 추천 20곡`~~ **[2024-11-27](https://developer.spotify.com/blog/2024-11-27-changes-to-the-web-api)기준 api deprecated** 

-  `곡 현재 기기에 재생/중지`

-  `현재 재생 곡 가사 보기`

-  `현재 재생 곡 아티스트 정보 보기`

-  `앨범, 아티스트, 트랙, 플레이리스트 검색` 

### Features

#### 📼 데모 영상 보기

[![Watch the video](https://github.com/user-attachments/assets/19ddf60c-8c43-4ef0-9761-53caab4d8752)](https://www.youtube.com/watch?v=1u26NxKxHNQ)

#### Screenshots

- 로그인 페이지



- 메인 페이지



- 현재 재생 곡 페이지



- 검색 페이지

  - 디폴트 : 최근 최다 재생곡 아티스트, albums 탭으로 설정되어 있습니다.



     - albums/ artists / tracks / playists

  


    

    

    

    

  

  - 검색어 



### Development Process

- 자세한 구현 과정은 [블로그](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8)에서 살펴보실 수 있습니다. (업데이트 중, COMING SOON!)

- [1탄 : spotify dev 계정 만들기](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B81-%EC%A4%80%EB%B9%84%EB%AC%BCspotify-dev-%EA%B3%84%EC%A0%95-application)

- [2탄 : spotify api authorization 담당 서버(1) vercel로 배포](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B82-%EC%A4%80%EB%B9%84%EB%AC%BC-authorization%EC%9D%84-%EB%8B%B4%EB%8B%B9%ED%95%A0-%EC%84%9C%EB%B2%84)

- [3탄 : spotify api authorization 담당 서버(2) 코드 작성](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B83-%EC%A4%80%EB%B9%84%EB%AC%BC-authorization%EC%9D%84-%EB%8B%B4%EB%8B%B9%ED%95%A0-%EC%84%9C%EB%B2%84-%EC%BD%94%EB%93%9C)

- [4탄 : eslint + prettier + commitlint 설정 (+husky)](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B84-eslint-prettier-commitlint-%EC%84%A4%EC%A0%95-husky)

- [5탄 : react router 설정](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B85-react-router-%EC%84%A4%EC%A0%95)

- [6탄 : tanstack query 설정](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B86)

- [7탄 : sentry 설정](https://pyotato-dev.tistory.com/entry/spotify-api-VINYLIFY-%EC%8A%A4%ED%8F%AC%ED%8B%B0%ED%8C%8C%EC%9D%B4-api%ED%99%9C%EC%9A%A9%ED%95%9C-%EA%B2%80%EC%83%89-%EC%9E%AC%EC%83%9D-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B87-Sentry-%EC%84%A4%EC%A0%95)