https://github.com/sahilsaha7773/spotlight

SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.
https://github.com/sahilsaha7773/spotlight

jwoc node-js react spotify

Last synced: 6 months ago
JSON representation

SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

• Host: GitHub
• URL: https://github.com/sahilsaha7773/spotlight
• Owner: sahilsaha7773
• Created: 2022-01-20T09:03:13.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-09T17:35:18.000Z (over 3 years ago)
• Last Synced: 2025-03-25T17:53:37.951Z (7 months ago)
• Topics: jwoc, node-js, react, spotify
• Language: JavaScript
• Homepage:
• Size: 1.58 MB
• Stars: 9
• Watchers: 1
• Forks: 12
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# SpotLight

SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

# Tech Stack

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

![Spotify](https://img.shields.io/badge/Spotify-1ED760?style=for-the-badge&logo=spotify&logoColor=white)

# Setting Up

- Fork the repo to your account.

- Clone the repo to your local computer `git clone `

- Make sure Node js is installed on your machine (`Node >= 14.0.0 and npm >= 5.6`)

- cd into the project directory and run `npm install`

- Login or create an account at the [Spotify Developers Dashboard](https://developer.spotify.com/dashboard/applications).

- Click on the `Create an App` button in the spotify developers dashboard. Fill the details and submit.

- Note down the `Client ID` of the app just created.

- Go to your app `Edit Settings` and add `http://localhost:3000` as a redirect URI.

- Create a file named `.env.local` at the project root directory with the following content:

 ```

 REACT_APP_CLIENT_ID=

 ```

 Replace `` with the one you got from the spotify console.

- Now run `npm start`

- Open  [http://localhost:3000](http://localhost:3000) on a browser.

# Folder Structure

```

├── src/

    ├── Pages/              Code for the pages

    ├── components/         UI Components

    ├── config/             API configs

    ├── styles/             CSS Files

```

# Resources

- This project uses the `Spotify Web API` to get all the spotify related data. You can find more about it at the official [Spotify Web API documentation](https://developer.spotify.com/documentation/web-api/reference/#/).

- To get started with `React JS` or brush up your skills, check out the official [React JS Documentation](https://reactjs.org/tutorial/tutorial.html).