Quartz 4

Home

2 min read

SoundCloud Stats Viewer

SoundCloud Stats Viewer is a full-stack web application built as part of our DevOps project at ESIEE Paris. It is a dashboard that lets users log in with their SoundCloud account and visualize their tracks, likes and playlists in one place. Users can also discover other members who have connected their account. In the following website, you will find documentation for the project and for the DevOps labs. You can use the left side bar to navigate through each part.

What we built

  • Frontend : A static dashboard with a login view, tabs for Tracks, Playlists, All Users, and Settings, built with plain HTML/CSS/JS and served by nginx
  • Backend : A Node.js/Express REST API that handles SoundCloud OAuth authentication and serves user data
  • Database : A PostgreSQL database storing user profiles, tokens, and cached stats snapshots
  • SoundCloud Integration : OAuth2 login flow and real-time fetching of tracks and playlists from the SoundCloud API
  • CI/CD : GitHub Actions pipeline for automated testing and Docker image builds on every push
  • Infrastructure : Containerized with Docker and deployable on Kubernetes via Minikube

Team Members and Project Work Split

First, all team members brainstormed around the possible projects we could work on and how to integrate DevOps culture to our team.

Then the project was mainly split across 5 roles:

  • SoundCloud Integration : Melchior LAURENS
  • CI/CD : Kévin FELTRIN
  • Database : Assia LOUBANE
  • Frontend : Théo PHAN
  • Backend : Asmae OISKHINE

Each member developed their part independently and then integrated it progressively. As the project leader, Melchior made sure the work was structured all along and consistently provided “to follow steps” to the team.

About the labs

Each member of the team completed the 5 first labs on their own. Following that :

  1. The team agreed to use Asmae’s reports for each lab and complete the missing parts/exercises with their own
  2. Assia also worked on the lab6 and added her report to the others
  3. Melchior worked on converting all the reports into .md files so that they can be easily integrated into the website

Use of AI

Throughout the labs, AI was used as an assistant to identify the traps, correct errors, and clarify concepts that were initially difficult to grasp. For the project, AI assisted in producing code and validating that our overall architecture made sense.

Graph View