Spotify Stats Anytime

Live website: https://stats-anytime.keven.li

Demo video: https://github.com/brown-cs1680-f24/fp-spotify-unraveled-keven-li/blob/main/assets/demo-video.mkv

Introduction

What were your overall project goals? What (briefly) did you achieve?

The goal of this project was to create my own version of Spotify Wrapped. Instead of waiting until the end of the year, users can now track their music statistics anytime.

Users can access the project through a webpage. It provides a streamlined process for user to authorize the site through Spotify and get redirected back to the site, view their top tracks and artists over three time ranges (about 4 weeks, 6 months, and 1 year), and provides links to open these in Spotify for immediate listening.

Design & Implementation

What did you build, and how does it work? For this part, give an overview of the major components of your system design and how they work, similar what you might write in a readme.

The project is divided into two main components: the frontend and backend, which communicate through RESTful APIs. The frontend manages user authorization and displays data, while the backend interacts with Spotify’s OpenAPI to retrieve and process user data.

Tech stack:

Backend: Go, Gin Web Framework

Frontend: TypeScript, React, Vite, NextUI

Sequence Diagrams

sequenceDiagram
    participant AppF as Application Frontend
    participant SAS as Spotify Accounts Service
    participant User as User

    AppF->>SAS: Request authorization to access data<br/>(client_id, response_type, redirect_uri, state, scope)
    SAS->>User: Display scopes and prompt users to login (if required)
    User->>SAS: Log in, authorize access
    SAS->>AppF: Redirect the user to application, passing access token<br/>(access_token, token_type, expires_in, state)

Loading

sequenceDiagram
    participant User as User
    participant AppF as Application Frontend
    participant AppB as Application Backend
    participant SWA as Spotify OpenAPI

    User->>AppF: Select the data to view
    AppF->>AppB: Call backend APIs with user's access token
    AppB->>SWA: Query Spotify's OpenAPI with user's access token
    SWA->>AppB: Return raw data
    AppB->>AppB: Process raw data
    AppB->>AppF: Return processed data to frontend<br/>(JSON object)
    AppF->>User: Display data to user

Loading

API Docs

Check it out here: API Docs

Discussion & Results

Describe any results you have, what you have learned, and any challenges you faced along the way. For this part, please include any relevant logs/screenshots of your program operating (and/or reference your demo video).

I successfully deployed both the backend and frontend on my personal server using Docker and Nginx. The service is live at: https://stats-anytime.keven.li.

A note on the demo video: The data shown for different time ranges appear the same because I switched to Spotify only a few weeks ago and don't have more extensive data yet. However, I tested it using my friend's account, and it correctly retrieves data for various time ranges.

Conclusion & Future Work

Overall, what have you learned? How did you feel about this project overall? If you could keep working on this project, what would you do next?

This project was a valuable learning experience, especially for someone who previously focused on backend development, this gives me a good exposure to the frontend tech stacks. I also gained experience with CI/CD tools like Docker and Nginx, as well as OAuth.

For future iterations of the project, I plan to expand the functionalities of the app to include the following:

• Generate playlists from top songs and update them dynamically
• Show genre statistics for top songs
• Add a list view for easy sharing of top tracks
• Implement a more secure OAuth flow.