song-feedback: A JavaScript repository from headphonejames

Song Feedback web-app

A React web-app for collecting feedback on music.

Some possible use cases:

Get feedback on unfinished tracks to determine what to invest in
Determine which songs to make videos for
Determine which track of a group to submit to Spotify for potential playlist inclusion
A/B song testing tool

Demo and Analytics Demo (uses cached data to not incur DB costs)

Core functionality:

An elegant way to get feedback on music. It's especially useful if you have multiple tracks you want feedback on.
Intelligently distributes tracks to listeners, ensuring all songs receive equal amount of rating data.
Intelligent looping of unrated tracks to a listener in the case when a listener stops paying attention to the web-app.
Simple and intuitive app for listeners, with optional tutorial. Optional reward system if you want to have give aways (I gave away magnets in return for rating two tracks).
Simple but useful data analytics for collected feedback data. Drill down into specific track metadata.
Easily deployed on AWS. Uses AWS to privately host app, a dynamo database to store feedback data, and a storage bucket to host audio files. AWS has a free tier which will suffice in most scenarios.

In my case, I had 10 complete tracks I wanted feedback on. The app was configured to serve a listener 2 tracks at a time. This enabled me to get quality feedback across all 10 of my tracks. To install there are two parts. There's AWS setup and then React build / config.

AWS Setup

Create a AWS account.
Create the required group + user in IAM.
- Create a group in IAM. I named it admin. Grant it AdministratorAccess permissions
- Create user in IAM. I named it song-feedback. Grant it Programmatic access. Add it to the admin group. Copy down this users Access key ID and Secret access key, which will be used in the React app configuration.

Create a AWS S3 bucket bucket for the music + art and upload song files (.wav/.mp3).

If you want to have art associated with a song, upload a .jpg/.gif/.png/.tif with the same file name. For example, if you uploaded "smile.mp3" then upload "smile.jpg" in the same bucket. The image size should be 250 × 250 pixels.
Use the following permission for CORS configuration of the song bucket:

  <?xml version="1.0" encoding="UTF-8"?>
  <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
      <AllowedOrigin>*</AllowedOrigin>
      <AllowedMethod>PUT</AllowedMethod>
      <AllowedMethod>POST</AllowedMethod>
      <AllowedMethod>GET</AllowedMethod>
      <AllowedMethod>HEAD</AllowedMethod>
      <MaxAgeSeconds>3000</MaxAgeSeconds>
      <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  </CORSConfiguration>

create a AWS S3 bucket to host the react app, and configure the bucket to host a static site.
- Set the Permissions/Public access settings so that all checkboxes are unchecked:
  - "Block new public ACLs and uploading public objects"
  - "Remove public access granted through public ACLs"
  - "Block new public bucket policies"
  - "Block public and cross-account access if bucket has public policies"
- Set the Permissions/Bucket Policy for the bucket to be open:
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[bucket name]/*"
        }
    ]
}
```
Install the AWS CLI and configure for your account.

React setup / install

Make sure you have npm installed.
Clone this repo: git clone https://generalfuzz@bitbucket.org/generalfuzz/song-feedback.git

Configure the .env file in the root directory with your AWS configuration.

The DB_ROOT_PATH is used to define the prefix for all db table names. You can leave it as "song-feedback".

REACT_APP_AWS_ACCESS_KEY_ID=[IAM access key]
REACT_APP_AWS_SECRET_ACCESS_KEY=[IAM secret access key]
REACT_APP_AWS_S3_BUCKET=[song files bucket name]
REACT_APP_AWS_REGION=[your region - mine was "us-east-1"]
REACT_APP_DB_ROOT_PATH=song-feedback

All configurion for the app is set in ./src/config.js. You can configure a 'welcome video', along with your social media here.

export const social_media = {
     facebook: "http://www.facebook.com/generalfuzz",
     insta: "http://www.instagram.com/generalfuzz.music/",
     github: "http://www.github.com/generalfuzz",
     twitter: "http://www.twitter.com/generalfuzz"
 };
 export const welcome_video = "https://www.youtube.com/embed/j8HbpN_IYWc?rel=0";

A default image for all songs can be put in ./images/default.jpg

Install the app: npm install
Start the app locally: npm start open the admin panel: http://localhost:3000/#/admin/admin

under the "options" section, click "Update tracks in db from AWS S3" button. A success response should eventually appear - if not, check web console for what went wrong.
Test the app: http://localhost:3000/#/
Build the app: npm run build and deploy the build/ dir to your webside

or

Build and deploy the app to S3 bucket with: npm run build && aws s3 sync build/ s3://[bucket-name]
Share URL of app to social media, requesting music feedback.

headphonejames/song-feedback

Song Feedback web-app