https://github.com/AurelienAubry/Spotlight

Spotlight is a Spotify dashboard that allows user to visualize his listening habits.
https://github.com/AurelienAubry/Spotlight

backend bootstrap chartjs data data-analysis data-science data-visualization flask frontend javascript js pandas python python3 react react-bootstrap spotify

Last synced: 2 months ago
JSON representation

Spotlight is a Spotify dashboard that allows user to visualize his listening habits.

• Host: GitHub
• URL: https://github.com/AurelienAubry/Spotlight
• Owner: AurelienAubry
• License: gpl-3.0
• Created: 2020-03-27T22:21:09.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-05-02T20:34:28.000Z (over 4 years ago)
• Last Synced: 2024-08-01T21:58:40.977Z (5 months ago)
• Topics: backend, bootstrap, chartjs, data, data-analysis, data-science, data-visualization, flask, frontend, javascript, js, pandas, python, python3, react, react-bootstrap, spotify
• Language: JavaScript
• Homepage:
• Size: 1.33 MB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• project-awesome - AurelienAubry/Spotlight - Spotlight is a Spotify dashboard that allows user to visualize his listening habits. (JavaScript)

README

        


## Spotlight

Spotlight is a Spotify dashboard that allows you to visualize your listening habits. The following metrics are available, over the last 3/6/12 months:

* Total number of tracks listened.

* Total minutes listend.

* Average daily minutes listend.

* Graph of the daily tracks / minutes listened.

* List of favorites artists (most listened).

* Listening clock, displaying at which hour of the day the user listens music the most.

The backend API of this application is built using [Python](https://www.python.org/) and served by a [Flask](https://flask.palletsprojects.com/en/1.1.x/) web server. This server uses *.json* streamings files that the user can download on his Spotify's profile. This list of streaming is then converted in a dataframe, processed with [Pandas](https://pandas.pydata.org/).

The frontend part is made with [React](https://en.reactjs.org/) and [Bootstrap](https://getbootstrap.com/). The graphs are made with [Chart.js](https://www.chartjs.org/) library.

### Usage

- Copy your Spotify's data in the `̀backend/MyData/` folder.

- Start the local Flask's server by running the `backend/app.py` python script.

- Connect to `localhost:5000` to acess the dashboard.

### Folders structure

```

.

├── backend

│   ├── build

│   │   └── static

│   │       ├── css

│   │       └── js

│   └── MyData

└── frontend

    └── spotlight

        ├── public

        └── src

            ├── components

            │   ├── Charts

            │   ├── List

            │   ├── NavBar

            │   └── Recap

            ├── containers

            └── views

                └── Dashboard

18 directories

```