Mood for Spotify

Mood for Spotify is a single-page application built using React and Styled-Components. It allows users to visualize personalized Spotify data. Users can also create new playlists using their own custom filters.

Setup

1. Register a Spotify App and add http://localhost:8888/callback as a Redirect URI in the app settings
2. Create an .env file in the root of the project.
3. Install dependencies in both client and server directories using npm install.
4. From the client directory: npm start.
5. From the server directory: npm run server.
6. Visit http://localhost:3000/

Dependencies

• axios
• cors
• dotenv
• express
• concurrently
• nodemon
• styled-components
• react-slider
• react-router-dom
• react-bootstrap-icons
• react-chartjs-2
• chart.js
• firebase
• react-dom
• react-fontawesome
• react-scripts

Final Product

Landing Page

Main Page On Login

Drag Icon and Select Genres to Get Recommendation

Get Recommendations Based on the Filters

Save Recommended Songs as a New Playlist

Fine Tune Your Recommendations with Advanced Configuration

Favourites Page

Top Artists Page with Filters

Top Tracks Page with Filters

Recents Page

Artist Page

Track Page

Album Page

Thank you for visiting.