M2 Master A Better Spotify

Team

  • Naomi Schoppa
  • Jakob Panten
  • Piranavi Satkunanathan
  • Phillip Kiele
  • Stefan Böhnert
  • Malin Dulkies
  • Lennard Grimm

Supervision

David Strippgen
Tech Stack

Typescript

Typescript

  • Typescript is the programming language that was used in both front- and backend. It compiles to Javascript but provides more features like type-safety. This avoids runtime errors and improves development flow with suggestions in the IDE.

Backend

NodeJS

  • A Javascript runtime used in the backend

ExpressJS

  • A backend web application framework for NodeJS

Frontend

React

  • React is a widely used frontend JavaScript library that provides user interfaces and was used to work on the visuals and UI components

Sass

  • Sass is a scripting language that is preprocessed and then converted into normal CSS to be read by the browser. We included Sass once more to keep our organizational potential to the max and have it much easier to write our stylesheets.

Figma

  • For design purposes, we used the graphics editor Figma to prepare prototypes for each screen.

Miro

  • Miro, as the online whiteboard platform that it is, was used to hold information, share research in a more visible way than a google document could ever have.

Deployment

Heroku

  • Heroku was used for the Deployment of Better Spotify due to the fact that the HTW Server had some restrictions regarding the playback that held us from using it. Also, the CI/CD process on Heroku was much simpler and easier to set up.

Github

  • During the process of the project, we used Github to share our code with one another, to keep a versioning system and to ensure that branching worked out well. We also made use of the Kanban Boards provided in the ‘Project’ tab of the repository to stay organized and maintain a good overview regarding what state our tickets were in.

Communication

Zoom

  • For any kind of meeting, we used Zoom. May it be merely the Team coming together for the weekly’s, or a talk with our product owner and professor, Zoom was the preferred tool of communication. It was especially helpful during the UX tests we had with our focus group participants in the end.

Discord

  • Where Zoom was used for direct face to face communication, the team chose Discord as the main tool for contacting one another in between meetings. A server was created for the project to distinguish between teams and to furthermore store information, have little polls on dates and much more.