Spotify Vault

A personalized daily Spotify stats tracker with the ability to save daily profile snapshots of top genres, top songs, top artists, and listening time.

Features

Authentication and Session Tracking: Interfaces with the Spotify Web API's OAuth2.0 authorization flow so you can log in directly through Spotify. Keeps track of your session so you only need to log in once within an extended time period.

View User Data: See your profile's approximate listening data and top genres in the last 24 hours, as well as your top 5 songs and top 5 artists in the last 4 weeks.

Save User Data: Save the profile statistics you're currently viewing for later. You can save a profile snapshot once every 24 hours.

]

Utilize the Backend API Seperately: You can create your own front-end to interface with user snapshots and profile saving as they're implemented through a backend RESTful API.

API Calls:

• /api/create/
  • method: POST
  • headers:
    • Authorization: <Spotify Web API access token>
  • Creates a profile in the database for access to statistics and snapshot saving.
• /api/recent/
  • method: GET
  • headers:
    • Authorization: <Spotify Web API access token>
  • Returns JSON of a user's most recent data
• /api/save/
  • method: POST
  • headers:
    • Authorization: <Spotify Web API access token>
  • Saves a user's most recently viewed data
• /api/delete/
  • method: DELETE
  • headers:
    • Authorization: <Spotify Web API access token>
  • Deletes a user's profile
• /api/snapshots/
  • method: GET
  • headers:
    • Authorization: <Spotify Web API access token>
  • Returns a JSON list of all a user's snapshots and their date saved.
• /api/snapshots/<snapshot index>/
  • method: GET
  • headers:
    • Authorization: <Spotify Web API access token>
  • Returns JSON of the user's saved data.

Tech Stack

Run Locally

Clone the project

  git clone https://github.com/owen-wang-student/spotify-vault.git

Back End API

cd into the backend directory

  cd backend

Start a virtual environment and install dependencies

  pip install -r requirements.txt

Create a postgres database

  psql
  CREATE DATABASE database_name;

Create a .env file in the backend directory

  └─backend
    ├─spotifyvault
    │  └─...
    ├─.env
    └─...

Define database information, a secret key, and domains allowed to make calls to the backend api in .env

  # .env
  # postgres db host and port can be found with '\conninfo' in psql.
  DB_NAME = ...
  DB_USER = ...
  DB_PASSWORD = ...
  HOST = ...
  PORT = ...

  SECRET_KEY = your secret key
  ALLOWED_ORIGINS = ['domain1', 'domain2', ...]

Start the server

  python manage.py runserver

Front End Website

cd into the frontend directory

  cd frontend

Install dependencies

  npm install

Set your backend API url and optionally set your own spotify app id in auth.config.js

  └─frontend
    ├─src
    │  └─...
    ├─auth.config.js
    └─...

  // auth.config.js
  export const clientID = "...";
  export const apiURL = "backend api url";

Start the server

  npm run dev

Authors

• Brandon Xu (@bxrr)
• Owen Wang (@owen-wang-student)