This is the frontend part of the the project playListify which is web app using which spotify users can create playlists of the top tracks and top artitst they listen on spotify.
You just need to login through your spotify account and give permission to it. Feel free to try it at: https://playlistifyweb.vercel.app/
- You can view the tracks and artists you listen most of the time on Spotify.
- You can also view your recent history of the songs you played.
- You can click a song to listen a 30 seconds preview of it and to stop the playback just move the cursor out from the song card and if you are on mobile just click outside of the song card to stop playback.
- You can create playlists of your Top Tracks and Top Artists, for artists it creates a playlist of Top 4 tracks of each artist.
To fetch a users data about the tracks and artist he/she listen most of the time, it uses Spotify Web Api. It is also being used to create playlists and adding tracks.
The following parts of the API were used in this project :
- React
- Tailwind CSS
- Node
- Express
You can checkout the Node and express part in the backend repository here: playLlistify-Backend
You need to have Node installed on your machine.
1. Clone the github respository and install all the dependencies
git clone https://github.com/chetas411/playListify-Frontend.git
cd playlistify-Frontend
npm install
2. Run script for building CSS file from tailwind configuration
npm run build:css
3. You need to have a Spotify Developer Account, if not then you can create one on https://developer.spotify.com/dashboard/. Now follow steps mention in https://developer.spotify.com/documentation/general/guides/app-settings/#register-your-app to register a new app
4. Now you require an auth url for that follow instructions in the backend repository docs from here https://github.com/chetas411/playListify-Backend
5. Create a .env file and add the auth url you got from above as a value for the enviornament variable
REACT_APP_SPOTIFY_AUTH_URL=https://example.com
6. Now run the project by running npm start and visit localhost:3000 in browser
