Randomize App Banner

Randomize App

With the overwhelming amount of music released every day, it can be difficult to keep up with new music. Randomize generates short playlists based on the Spotify Global Top 50, Spotify US Top 50, and recommendations from the Randomize community.

Type

Web App / Web Design, Web Development

My Role

Web Developer, Designer, Project Manager

Responsibilities

HTML/CSS, JS, SQL

Collaborators

Emily Zheng, Matthew Nguyen, Ryan Moy, Chris Shea

Course

INST377: Dynamic Web Applications - Spring 2021


The Information Problem

With the overwhelming amount of music released, it may be difficult to determine which songs are worth listening to.

Database

As a requirement for the final project, our team had to use one of the databases we built from a prerequisite class: Database Design and Modeling (INST327). Our team used a Spotify Top Hits database, which was built by myself and another group member the semester prior. Information from the Spotify database was retrieved from the Spotify API.

Spotify Top Hits Database ERD
Entity Relationship Diagram (ERD) of the Spotify Top Hits database built in INST327.

Proposed Solution

Users can select specific genres, artists, etc. to filter out the type of songs their curated playlist would generate. They can also add new songs to the database by including metadata like the title, artist, album, song duration, ranking, and whether it is explicit or not. User-inputted songs would appear on a separate page for the community to explore and also be potentially generated into a playlist.

Technology Stack

  • Design: Figma
  • Back End: MySQL, Sequelize
  • Front End: Bulma (CSS Framework)

Projected Milestones

  • Finalize wireframe and complete pitch presentation
  • Finalize API design of application
  • Begin work on front-end of web application
  • Begin work on back-end of web application
  • Finalize server design
  • Finalize front and back end of web application
  • Debugging and fix
  • Final project deliverables and presentation

UX Sketching

flowmap of sketches

Prototype

Click to test out the prototype!

Wireframes

Initial Wireframe

initial wireframe

Refined Wireframe

Setbacks

Given our timeframe and each member's skills, we adjusted the scope of our project and scaled down complexity.

  • User customization of playlists had to be removed from our original concept
  • Removed user profiles
  • No filtering system
  • Users are not currently able to save song recommendations in the form of a playlist
    • This means that when users use our generator, they can generate as many lists as they want but once a new list of recommendations are formed, they cannot revist the previous ones.

Revised Solution

Randomize is a random song generator that will list 10 recommended songs from a click of a button, allowing users to discover fresh new music.

Demo

Although the original proposal changed significantly, the web app still delivers its core promise of broadening listeners' musical horizons. Check out the demo below!

Known Bugs & Future Development

Bugs:

  • Application does not check whether a song is already in the database if a user adds a pre-existing song
  • Application does not reformat user input to the style standards that were used to create the database
  • Application does not automatically change the table in youraddedsongs.html if a user adds, edits, or deletes a song, which makes it difficult to see if the action succeeded. Users must manually reload the page after each action in order for the table to update.
  • Users cannot specify the artist of a song they are adding because Artists and Songs data are on two different tables within the database. Because of this complexity, only the song name and explicit values are requested (both part of Songs data) and are displayed in the generator table and user-added table.

Future Development:

This functionality can be expanded upon in the future to include certain filters for specific artists, genres, and song content. Future features that would be strong additions to the app include:

  • Continuing with the original plan and implementing custom playlists
  • Cross-checking that user-added songs are real songs available on Spotify or Apple Music
  • Consistently updating the US and Global Top 50 charts to reflect the current songs
  • A playlist organization system that allows the creation and modification of multiple playlists
  • Features that allow users to influence or filter the type of music that is selected to build their random playlist
  • An expanded song library that allows for a greater degree of diversity in the music selected to build a random playlist