Overview:

The Spotify Profile web app is designed to visualize personalized Spotify data. It utilizes various technologies including Spotify Web API, Create React App, Express, Reach Router, and Styled Components to provide users with an interactive platform to view their Spotify information.

Features:

• Personalized Data Visualization: Users can view their Spotify data in a visually appealing format.
• Integration with Spotify Web API: The app seamlessly connects to the Spotify Web API to retrieve user information.
• Responsive Design: The web app is responsive and works well across different devices.
• Easy Deployment: Instructions for deploying the app to Heroku are provided, making it accessible to a wider audience.

Installation:

To install the Spotify Profile web app, follow these steps:

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 based on .env.example.
3. Set up the environment using nvm use, then install dependencies with yarn && yarn client:install.
4. To run the app locally, use yarn dev.
5. For deploying to Heroku, create a new Heroku app, set Heroku environment variables, push the code to Heroku, and add http://app-name.herokuapp.com/callback as a Redirect URI in the Spotify application settings.
6. Access the live app on Heroku by visiting http://app-name.herokuapp.com/login.

Summary:

The Spotify Profile web app offers users a dynamic way to explore and visualize their Spotify data. By leveraging the Spotify Web API and modern web development technologies, users can enjoy a personalized experience with their music preferences. The clear deployment instructions make it convenient for users to access the app both locally and on the web.