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)

UI Design by Eric Johnson

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://[email protected]/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.