Table of Contents

Overview

The Problem

Many UH students have musical talents, but there is no easy way for them to find others with similar tastes and compatible musical abilities. Thus, they cannot experience the fun of informal jam sessions which could progress into performing musical groups.

The Solution

The Music Match application developed by Music Match Inc. allows students to login and create a profile indicating their musical tastes, their musical capabilities, and their musical goals (from occasional, informal jam sessions to performing bands). Users can share their own jam sessions through Youtube links to a Youtube video to their own jam.

Approach

Once a profile is created, others can browse the profiles filtered by specific tastes, capabilities, and goals to find compatible musicians to contact.

Students can also set up notifications to find out automatically when a profile is created that satisfies criteria that they specify.

Admins can monitor the site for inappropriate content, and create new categories of musical tastes, capabilities, and goals.

Some mockup pages include:

Deployment

The Music Match Website is available live!

ci-badge

Developer Guide

Installation

$ meteor npm install

Running the Application

$ meteor npm run start

=> Started proxy.
=> Started MongoDB.
W20210424-15:39:27.766(-10)? (STDERR) Note: you are using a pure-JavaScript implementation of bcrypt.
W20210424-15:39:27.867(-10)? (STDERR) While this implementation will work correctly, it is known to be
W20210424-15:39:27.867(-10)? (STDERR) approximately three times slower than the native implementation.
W20210424-15:39:27.867(-10)? (STDERR) In order to use the native implementation instead, run
W20210424-15:39:27.867(-10)? (STDERR) 
W20210424-15:39:27.868(-10)? (STDERR)   meteor npm install --save bcrypt
W20210424-15:39:27.868(-10)? (STDERR) 
W20210424-15:39:27.868(-10)? (STDERR) in the root directory of your application.
I20210424-15:39:28.646(-10)? Creating the default user(s)
I20210424-15:39:28.646(-10)?   Creating user ethanwc@hawaii.edu.
I20210424-15:39:28.818(-10)?   Creating user garcia77@hawaii.edu.
I20210424-15:39:28.968(-10)?   Creating user icce@hawaii.edu.
I20210424-15:39:29.115(-10)?   Creating user ajp808@hawaii.edu.
I20210424-15:39:29.263(-10)?   Creating user john@foo.com.
I20210424-15:39:29.430(-10)? Creating default profiles.
I20210424-15:39:29.430(-10)?   Adding: Philip Johnson (john@foo.com)
I20210424-15:39:29.434(-10)?   Adding: Ethan Chee (ethanwc@hawaii.edu)
I20210424-15:39:29.436(-10)?   Adding: Preston Garcia (garcia77@hawaii.edu)
I20210424-15:39:29.437(-10)?   Adding: Isaiah Eusebio (icce@hawaii.edu)
I20210424-15:39:29.438(-10)?   Adding: Adam Parrilla (ajp808@hawaii.edu)
I20210424-15:39:29.440(-10)? Creating default Music Interests.
I20210424-15:39:29.453(-10)? Creating default Jams.
I20210424-15:39:29.468(-10)? Creating default Featured Jam.
I20210424-15:39:29.477(-10)? Creating list of Possible interests.
I20210424-15:39:29.533(-10)? Monti APM: completed instrumenting the app
=> Started your app.

=> App running at: http://localhost:3000/
   Type Control-C twice to stop.

Ignore “bcrypt warning”: Bcrypt is used for password checking and it is safe to ignore the warning during development stages.

$ meteor reset

User Guide

These will be the mockup pages that will be used as a basis for this final project.

Landing Page

Upon entering the site, the user has the ability to:

Create Profile Page

When a new user registers an account, they will be redirected to create their profile. New users must finish creating their profile before gaining access to the entirety of the site.

At the minimum, new users must enter information in the required fields:

If the user does not fill out any required fields, an error message appears upon clicking the Submit button.

User Home Page

The first variation of the home page involves an existing profile for the logged in user. A preview of this page is shown below:

Upon logging in, the user has the ability to:

The second variation of the home page is only displayed when a user logs in with no profile setup in the system. A preview of this page is shown below: Typically, this page is only seen if the user recently registered an account or if their profile was deleted by an admin.

Upon logging in, the user has the ability to:

Profile Page

This page will be an exploded version of a single user, containing more information such as:

If the profile belongs to the user logged in, they will be able to:

Edit Profile Page

This will edit the profile information for a user, which contain edit fields for:

Browse Users Page

The Browse Users page allows users to view a snapshot of other user profiles and easily search for users by name or music interest.

User profiles are displayed on cards that contain the following information:

The “View Profile” button takes the user to the profile page of the card it was clicked on. This page is similar to the My Profile page except that the user cannot edit or delete the profile if they are not the owner.

Users can search for profiles by typing a name or music interest in the search bar. The page will automatically display profiles that adhere to the criteria specified by the search bar.

Browse Jams Page

The Browse Jams page allows users to view jams posted by other users and easily search for jams by title or description.

Jams are displayed on cards where users have the ability to:

Upon clicking on the owner of the jam in the “Recommended By” section, the user will be redirected to the owner’s profile page. This page is similar to the My Profile page except that the user cannot edit or delete the profile if they are not the owner.

Users can search for jams by typing the title or description of the jam in the search bar. The page will automatically display jams that adhere to the criteria specified by the search bar.

My Jams Page

The My Jams page displays all the jams owned by the user.

Jams are displayed on cards that contain the following information:

This page is similar to the Browse Jams page in that the cards of the jams contain the same information with additional features to “Edit” and “Delete” the jam.

If the user has not shared any jams to the site, a page will be displayed notifying them that they do not have any jams and a button to redirect them to share a jam:

Liked Jams Page

This page displays the cards of all the jams the user has liked. Unliking jams on will remove it from this page.

This page is similar to the Browse Jams page in that the cards of the jams contain the same information.

If the user did not like any jams, a page will be displayed notifying them that they do not have any liked jams and a button to redirect them to browse all the jams:

Create Jams Page

This will allow you to create a jam, which requires the three fields for a jam:

Comment Modal

Each jam has a comment functionality. A modal pops up that allows users to:

Browse Users Admin Page

In this page, admin users have the ability to:

Browse Jams Admin Page

In this page, admin users have the ability to:

About Us Page

In this page, viewers have the ability to:

Development History

Community Feedback

I like how it is simple to use and is quick, user friendly, and has a cool name. I am not a fan of the color scheme, particularly the orange with black. I think the black is fine, but maybe not the orange. Also add a dislike button! I’m using this on safari and I couldn’t play the youtube videos on the site. I had to open it on youtube. Good job!

— Tamah Tyau, Biology

I like how you can meet new people and share interesting music that you think others may like. I suggest to add the ability to tag songs when adding them similar to how you made your personal interests, the ability to sort songs differently (alpha, latest posted, most likes, by poster, etc.), further the comment section (comment on a comment), a miniplayer in the background so that you can explore the rest of the site while listening to one song.

— Evan Kawaoka, Economics

I like the nice interface, cute bear gif, and layout of the jams are well sized. The signout page could use touchups (ex. background pictures). I suggest finding a way to tell the user to login/signup to use the site. When creating an account, have short descriptions/directions for each box. Have a big “browse jams” on the home page since its the main focus of the site. Allow user to apply genre filters when uploading jams. Sort jams by likes, genre. Not sure how featured video is picked but ideas could be random, by likes, trending etc.

— Kenton Wong, Mechanical Engineering

I like the simplicity of the overall website, very straight forward. Being nitpicky, I don’t like how the icons on the home page aren’t links that can be clicked on to direct you to ‘Jams’ for example. I suggest making the heart logo and ‘Music Match’ one home page button instead of two separate buttons. When a comment is made on a song can you show how many comments are on the song similar to how many likes there are on a song. Could you make it so that even if you don’t have an account you can see what other people posted, but you need an account to post stuff and like and comment and things like that. The website is easy to navigate but some guidance on the homepage may make it easier for people that are using the website for the first time. Maybe make a way to chat with other people. Since this website is to meet other people with similar musical taste a chat function would be nice to have everything done on the website, but is unnecessary. But would be really cool.

— Scott Yuk, Information and Computer Sciences

Having the ability to add a YouTube link to a Jam is pretty cool. However, there is no pagination of Jams, therefore as the database of Jams increases, the longer I will need to scroll. If I give a really long description, then the card that’s associated with that Jam will be huge. Pretty nice, I think the image in the landing page is bit too blurry and the word “Music Match” can just have a transparent background.

— Jeff Wong, Information and Computer Sciences

Meet the Developers