OpenSpotifyAPI

Description

This project demonstrates how to load and display data from the Spotify API using HTML, CSS, JavaScript, and TypeScript. The app will require you use an API key to login to a spotify account then display the user profile information and the top five songs of the user.

App Features:

1. Display user Profile information.

   

2. Display user's Top 5 songs played.

   

Setup

If you do not already have Git and NodeJS install it (Pick the latest LTS download for your system):

1. Download Git to use git commands: https://git-scm.com/downloads
2. Install nodeJS: https://nodejs.org/en/download/package-manager

Setting up the environment to run OpenSpotifyAPI:

3. Download or clone this repository to your local machine by typing in your terminal:

   git clone https://github.com/Haothai1/OpenSpotifyAPI.git

   

4. Open the project in VScode if you haven't already, you can do so in the terminal:

   code OpenSpotifyAPI

Run the APP locally with your own API key:

5. Create an SpotifyWeb account: https://developer.spotify.com/

   • Login to your Spotify Account (this email will be used for both your Spotify account and the Spotify web API access) and click on your user icon.
   
   • Verify your account with your email.
   

   • Create your API Key.

     

6. Copy and paste your Client ID (or API key) in index.js file. The index.js file can be found under the src folder. (Note: You can skip this step if you send the owner your email to give you access to use their key instead of creating your own API key)

   
7. 4. Make sure you are in the directory of the project in the terminal:

   cd OpenSpotifyAPI

8. Now install npm to use npm packages and commands by typing:

   npm i

9. Go to the terminal and install Vite by typing:

npm install vite

11. Run the app by typing:

npm run dev

11. Click on the provided link after running npm run dev.

    

12. You will be brought to a web page. Sign-in to the Spotify email you used for your Spotify web API to get your user profile information and Top 5 songs. (Note: Using two separate emails will not work, they must be the same email for both your Spotify account and the Spotify Web API).

Troubleshooting (No data is displayed)

1. Relaunch the application by going to the terminal and pressing ctrl+c and typing npm run dev if there are any issues.

   

Usage

• The application will redirect you to the Spotify authorization page.
• Authorize the application to access your profile data.
• Your Spotify profile data will be displayed once you are redirected back.
• Navigate between the "Show Profile" and "Show Top Tracks". This will show your user profile and your top 5 songs you listen to.