🔗 Welcome to Tomato Music !
노마드코더에서 진행한 melon 이라는 스트리밍 사이트를 클론코딩한 프로젝트입니다.
Tomato를 좋아해서 토마토를 모티브로 뮤직 플레이어 사이트를 만들어보았습니다.
- last.fm API를 사용하여 pop top 50 인기 차트를 구현하였습니다.
- 또, 저장된 오디오를 이용하여 미니 플레이리스트를 구현하였습니다.
- 로그인 되지 않은 상태이면, 상단 헤더의 버튼이 로그인 버튼으로 바뀝니다.
(🍅 리팩토링 예정입니다.)
- 이메일과 비밀번호를 입력하여 로그인 할 수 있으며, dbTestHandler 파일에 작성된 정보로 로그인이 가능합니다.
- 아래의 아이디와 비밀번호로 로그인 해주세요.
id: doy@gmail.com
pw: 12341234- 정보를 맞게 입력하면, alert 창으로 로그인 성공을 알려줍니다.
- 로그인 후 메인페이지 상단 부분이 My Playlist 로 이동할 수 있도록 바뀌며, my playlist를 아용할 수 있습니다.
- 음악을 재생할 수 있는 플레이리스트 페이지 입니다.
- 현재는 저장된 음악에 한해서만 재생목록에 추가가 가능하며, 따로 상태가 저장되는 처리를 해주지 않아 새로고침시 초기화됩니다.
(🍅 데이터베이스를 사용하는 쪽으로 리팩토링 할 예정입니다.)
- last.fm API를 사용하여 구현한 세계 차트입니다.
- 차트는 각 5위 까지 구현했으며, 세계 카드에 hover 시 차트가 보이도록 구현했습니다.
(hover 시)
- last.fm API를 사용하여 구현한 pop 아티스트에 대한 소개 페이지 입니다.
- 1위 부터 3위 아티스트를 확인할 수 있습니다. 아직 2, 3위 순위 아티스트에 해당하는 소개 페이지는 만들지 않은 상태입니다.
(🍅 추가 구현 예정)
- last.fm API를 사용하여 구현한 k-pop 차트와 k-pop 아티스트에 대한 소개 페이지 입니다.
- k-pop 아티스트 소개 페이지에서 아티스트의 앨범을 상위 10위까지 볼 수 있습니다.
clone 한 프로젝트를 처음 실행시, 다음 명령어로 install 합니다.
// npm 명령어
npm i
npm install
// yarn 명령어
yarnnpm run dev:assets다음 명령어를 통해 실행할 수 있습니다.
npm run dev:server다음 명령어를 통해 실행할 수 있습니다.
fly deploy다음 명령어를 통해 배포할 수 있습니다.