Spotify Profile App

This project is a Spotify profile app built with React and Vite. It allows users to authenticate with their Spotify account and view their profile information, including their top tracks and artists.

App in Action:

Features

• User authentication with Spotify.
• Display user's profile information.
• View user's top tracks and artists.
• View detailed track and playlist analysis with bar graphs and radar graphs.
• View the details in your playlists and see the analysis.
• Discover New Tracks: Users can now click the "Get Recommendations" button on any playlist detail page to receive up to 20 recommended tracks based on the current playlist's style and mood.
• Save to Spotify: Found a set of recommendations you love? Simply click "Save on Spotify", and we'll create a public playlist on your Spotify profile named "Recommended Songs Based On (Playlist Name)", with the current date as a description.
• Responsive design for various screen sizes.

Technologies Used

• React: JavaScript library for building user interfaces.
• Vite: Next generation frontend tooling.
• Spotify Web API: API for accessing Spotify music data.
• React Router DOM: Declarative routing for React applications.
• Tanstack Query: Powerful data fetching and caching library for React.
• Tailwind CSS: Utility-first CSS framework for rapidly building custom designs.
• Axios: Promise-based HTTP client for making requests to the Spotify Web API.
• Recharts: Composable charting library built on React components, utilized for visually representing single track or album analysis.

Dependencies

• @tanstack/react-query

• axios

• clsx

• react

• react-dom

• react-icons

• react-router-dom

• recharts

• tailwind-merge

DevDependencies

• @tanstack/eslint-plugin-query

• @types/react

• @types/react-dom

• @typescript-eslint/eslint-plugin

• @typescript-eslint/parser

• @vitejs/plugin-react

• autoprefixer

• eslint

• eslint-plugin-react-hooks

• eslint-plugin-react-refresh

• gh-pages

• postcss

• prettier

• prettier-plugin-tailwindcss

• tailwindcss

• typescript

• vite

Prerequisites

• Node.js and npm installed on your machine.
• Spotify Developer Account to create a Spotify app and obtain API keys.

Installation

1. Clone the repository:

git clone https://github.com/enespcetin/spotify-profile-app.git

2. Navigate to the project directory:

cd spotify-profile-app

3. Install dependencies:

npm install

4. Create a .env file in the root directory and add your Spotify API credentials:

VITE_CLIENT_ID=your_client_id
VITE_CLIENT_SECRET=your_client_secret

5. Start the development server:

npm run dev

1. Open your browser and visit http://localhost:5173/spotify-profile-app/ to view the app.

Usage

1. Click on the "Login with Spotify" button to authenticate with your Spotify account.
2. After successful authentication, you'll be redirected back to the app.
3. Explore your profile information, top tracks, and top artists.

Live Demo

You can try out the live demo of the app here (test mode).

If you'd like to join the testing phase, please email your Spotify information to [email protected]:

• Spotify Name: Name
• Spotify Email: Email

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.