This repository contains a Spotify Clone Web App built using ReactJS and the Spotify Web API. The app is designed for fetches data through a personal Spotify account. This project focuses on the frontend functionality, including data fetching, authentication, but does not include the music playback feature.
- User authentication using Spotify OAuth
- Fetching and displaying user playlists, albums, liked songs, artists, podcast details and tracks.
- Viewing track details
- Responsive design
- Modern UI with ReactJS
- ReactJS (JavaScript)
- Spotify Web API
- CSS (for styling)
- Node.js and npm installed on your machine
- A Spotify Developer account with a registered application
- Clone the Repository
git clone https://github.com/NayanUnni95/Spotify.git
cd Spotify- Install Dependencies
npm install- Create a Spotify Developer Account and Register an App
- Go to the Spotify Developer Dashboard and log in with your Spotify account.
- Click on "Create an App" and fill in the required details.
- Add http://localhost:3000/callback as a Redirect URI in your Spotify app settings.
- Set Up Environment Variables
Create a .env file in the root directory of the project and add the following environment variables:
VITE_CLIENT_ID=your_spotify_client_id
VITE_HOME_URL=http://localhost:3000/- Start development server
npm run devnpx prettier --write <filename>npm run previewnpm run buildnpm install -g http-server;
http-server dist- Authentication
- On the login page, click the "Login" button.
- You will be redirected to Spotify's login page. Log in with your Spotify credentials and authorize the app.
- Browse Playlists
- After logging in, you will be redirected back to the app.
- You can now view your playlists, track details, and user profile information.
This project is licensed under the MIT License. See the LICENSE file for details.