/Hi-Five

Share the Vibe!

Primary LanguageJavaScript

Hi-Five

Share the Vibe!

Hi-Five is an application that is designed to share music with your friends. In this application, users can post their favorite song of the day, listen to their friends posts, "Hi-Five" a song to add it to your Hi-Five playlist (assessible through Spotify), and follow friends.

This project is for CSEN 174, taken in Spring of 2024.

Demo (click)

Hi-Five Demo

Table of Contents

Tech Stack

  • JavaScript
  • React Native
  • Expo
  • HTML
  • CSS
  • Firebase
  • Spotify API

Product Vision Statement

FOR people who enjoy listening to music
WHO want an easy way to find music that their friends are listening to
Hi-Five is a music recommendation and social media application
THAT allows people to share music with each other daily
UNLIKE Airbuds Widget
OUR PRODUCT allows users to select what songs their friends see, allowing for more accurate sharing of songs

Users & User Stories

  • Young Adults
    • As a young adult, I want to use an intuitive user interface to interact with the other parts of the application, so that I can easily use all functionality.
  • Music Listeners
    • As a casual music listener, I want to listen to and discover new music, so that I can diversify the genres and songs that I listen to on a day to day basis.
    • As a casual music listener, I want to find out more the listening habits of my coworkers, family members, and old friends, so that I can bond with them.
  • Influencers
  • DJs
    • As a DJ, I want to add my liked friends songs to a playlist so I can use them in my Spotify library, because I don't want to lose the songs that I liked.

Design Considerations

Designing a user-centric application requires deep insight into how users can esaily interact with all of the elements that we would like to add to our applicaiton. We wanted to highlight some of the considerations that were taken into account:

  • Timing: When would users post their song for the day? How can we ensure that users are interested at posting at said time?
  • Brand: How should the Hi-Five brand be highlighted within the application?
  • Playback: How should users listen to their friends songs? What technological limiatations do we need to take into account?
  • Database: How can we efficiently and securely store data about user posts?
  • Backend: Would a serverless architecture serve our needs? What are some alternatatives?
  • Contraints: How can we design our app to efficiently use the Spotify API? How can we ensure that our users will not hit rate limits of the API?

Software Diagrams

System Context Diagram

Sysytem Context Diagram

Container Diagram

Container Diagram

Entity Relationship Diagram

Entity Resource Diagram

Future Additions

This project was completed for COEN 174 as a class project. Thus, we have a ten week time contraint. In the future we would like to implement the following features.

  • Comments: Interacting with your friends is a vital part to any successful social media application. We would like to expand our database to account for comments on posts, and also develop the necessary moderation features to ensure a safe platform for all of our users.
  • Recently Posted: Seeing your previous posts and the comments within is important to recount the songs that you have been listening to. While the functionality mostly exists in our application, we ran into rate limits, which prevented us from laoding the song icons from Spotify.
  • Notifications: While we elected to prioritize more immportant functionality during the ten week period, we would like to add notifications to remind users to post their song or hear their friends.
  • Deleting Data: Privacy is an important right for a user to have, so we would like to add a feature for a user to permanently delete all of their information.
  • Swap API: Due to limitations set by Spotify, this application could not go into production as playback is not allowed. If this application were to be posted to the app store, we would need to indentify a provider which could provide playback for our users.

Screenshots

Splash Page

Permission Page

Add Song Page

Feed Page

Playlist Page

Following Page

Profile Page

Team Members

  • Brian Wiebe (@wiebecoding)
  • Hilary Le (@hilllls)
  • Matty Herzig (@mattyHerzig)
  • Srivatsa Puranam (@VatsaPuranam)
  • Anshuman Sahu (@Anshu-Sahu1)