doradora523 / musicplayer-lyrics

Demo

(https://vocal-cranachan-74e905.netlify.app/)

Stacks

React, Redux-Toolkit, TailwindCSS

Description

• Spotify 2.0 Clone Music App
• Rapid API (Shazam Core), IP Geolocaiton API 를 사용하여 데이터를 받아와 서비스 구현
• 음악 플레이어, 검색, 가사, 노래 탐색 기능, 주변 인기 음악, 전 세계 상위 차트 등 기능 구현

Development Detail

• 사용자가 검색한 결과에 따른 데이터를 Aixos를 이용하여 가져와 Details Page에 검색리스트 구현
• 사용자가 클릭한 음악 재생/멈춤 기능 구현
• 사이드바를 만들어 Top Charts List를 선택할 수 있도록 구현
• IP Geolocation API를 이용하여 사용자의 위치(국가)데이터를 받아와 사용자 위치에서 인기있는 음악을 Shazam Core API를 이용해 데이터를 받아와 내주변 인기리스트를 구현.
• Tailwind CSS 를 사용하여 디자인 구현

What I Learned

• 공공 API 를 사용하여 데이터를 요청하고 받아와 원하는 데이터를 그려주는 방법을 배웠습니다.
• Tailwind CSS 의 사용으로 기존의 CSS, SCSS 보다 훨씬 편리하게 디자인을 적용할 수 있다는 장점과 CSS를 적용하기 위해 설정하던 className을 고민하지 않아도 된다는 점이 굉장히 편리했습니다.