mrjcowman / moodsing

A music recommendation app that suggests music suited to the weather around the user as well as their current mood and preferred genre.

moodSing

moodSing is a music recommendation app that suggests music suited to the weather around the user as well as their current mood and preferred genre. These features bypass the need for users to wander and search for music that fits their mood and helps introduce the users to new music.

Contributors

Front End 
    - Katie Dickson 
    - Ismahan Jamea

Back End 
    - Jacob Cowan - Git Master
    - Andrew Crow - Project Manager
    - Robert Dalton

Credits

Thank you to the developers of the following APIs for making moodSing possible!

Spotify Web API

NOAA Web API Service

Geolocation API

And thank you to the researchers who provided us with the information necessary to map moods to music! (See Citations Below)

Status

Color Scheme

Main color scheme:

Few clouds:

Sunny:

Rain:

Partly Cloudy:

Thunderstorm:

Mist:

Snow:

Data Analysis for Moods

https://docs.google.com/spreadsheets/d/1P7G5RYoqyl5em3w8AbFFX_33M3S1rd1eRJU5-pTjDdA/edit?usp=sharing

Citations

1. Warriner, A.B., Kuperman, V. & Brysbaert, M. Norms of valence, arousal, and dominance for 13,915 English lemmas. Behav Res 45, 1191–1207 (2013). https://doi.org/10.3758/s13428-012-0314-x

2. Castillo, Susana & Wallraven, Christian & Cunningham, Douglas. (2014). The semantic space for facial communication. Computer Animation and Virtual Worlds. 25. 10.1002/cav.1593. https://www.researchgate.net/figure/Two-dimensional-circumplex-space-model-and-its-emotional-samples-plotted-on-the_fig3_50805681

3. Schuller, B., Dorfner, J. & Rigoll, G. Determination of Nonprototypical Valence and Arousal in Popular Music: Features and Performances. J AUDIO SPEECH MUSIC PROC. 2010, 735854 (2010). https://doi.org/10.1155/2010/735854

moodsing's Issues

Playlist not resizing to content

As a user
I want to get a list of songs
So that it fits within the playlist window

Acceptance Criteria

• Have the playlist section resize depending on content.

User Mood to Spotify parameters index

As a developer
I want to have a mood to Spotify parameters index
So that I can use user inputted mood to influence a users music recommendations

Acceptance Criteria

• List all possible outcomes for mood
• Give each outcome corresponding Spotify Parameters
• Create mood.js file
• Create object to hold all mood outcomes and corresponding Spotify Parameters

Setup Schedules

As a Team Member
I want to productive
So that I can work effectively as a team

Acceptance Criteria

• Define Schedules

Place Logo on Page

As a user
I want to see a logo
So that I understand the brand of the app

Acceptance Criteria

• decide where the logo will go with the team
• create an image tag that holds the logo png

Setup Roles

As a Team Member
I want to productive
So that I can work effectively as a team

Acceptance Criteria

• Define Team Roles
• Add Roles to README.md

Choose Color Scheme

As a user
I want to see a compelling color scheme
So that I feel more engaged and drawn into the app

Acceptance Criteria

• Choose a draft color schemes
• Review color schemes with team
• Finalize Color Scheme
• Add color scheme information to READ.md

Link mood.js file in index.html

As a developer
I want access to the mood.js file
So that I can match the mood and output Spotify parameters

Acceptance Criteria

• Link mood.js in index.html

Make loading bars last until next prompt appears

AS A user
I WANT some indication that something is happening in the background while waiting
SO THAT I don't think the app just crashed on me

Acceptance Criteria

• Loading bars should not disappear until the next prompt is rendered
• Only one loading bar maximum should exist at any time

Get Spotify API Key

As a Developer
I want as many API keys as possible
So that the App will work when presenting the final project

Acceptance Criteria

• Jacob Cowan - has a Spotify API Key saved
• Andrew Crow - has a Spotify API Key saved
• Katie Dickson - has a Spotify API Key saved
• Robert Dalton - has a Spotify API Key saved
• Ismahan Jamea - has a Spotify API Key saved

Find APIs

As a developer
I want to find APIs
that give me music suggestions, weather, mood, and location

Criteria Acceptance

• Weather API - required
• Music API - required
• Location API - required

Write function to get latitude and longitude from user

As a user
I want to have my local weather
So that I can have a playlist that is influenced by the weather

Acceptance Criteria

• Function should have unique name
• Request location from window.navigator and provide latitude and longitude
• Set default response if user doesn't respond or can't provide latitude or longitude
• Test most major browsers
• Function be set to return latitude and longitude when called

Choose Typography

As a user
I want to see a uniform typography
So that the app feels cohesive and engaging

Acceptance Criteria

• Choose a few draft typographyies
• Review typographiess with team
• Finalize typographies
• Add typographies to READ.md

Secure the API Key

AS A developer
I NEED to have my API key secured
SO THAT outside actors cannot make use of the personal API key

Acceptance Criteria

• API key must not be visible to the end user
• API key must not be visible on Github

Create Navigation Bar Links

As a user
I want to see a navigation bar
So that I can easily navigate the app

Acceptance Criteria

• decide what links should be included in the navbar
• create the links and check if they are working

Create a Footer

As a user
I want to see a footer
So that I know when the page ends and the copyright

Acceptance Criteria

• Footer that fits the layout of the page and is responsive
• Has a Copyright to
  and console and links to GitHub repo
• Verified that it works on desktop and mobile

Create a script to Dynamically Generate List of Playlists

As a user
I want to see a list of playlists
So that I can choose a playlist that intrigues me

Acceptance Criteria

• Get the layout design from the front-end team look at #43
• Create a script to dynamically create this section
• Verify that we can dynamically generate this section
• Verify with the front-end team that this matches the design

Write function to match user input to mood object

As a User
I want to provide a mood
So that is can be used to influence my playlist

Acceptance Criteria

• Write a function named moodMatcher
• Take user input to match with a preset mood
• Pull Spotify parameters for preset mood from mood.js
• Set default parameters if no match found
• Return Spotify Parameters

Add event listener to Smile button to reset to Mood Prompt

As a user
I want to reset the playlist
So that I can get other lists based off my moods

Acceptance Criteria

• Button resets to mood page
• Button has a toast popup when clicked on initial load

Write the object for mood.js

As a developer
I want to store my moods and Spotify parameters
So that we can influence our recommend playlist with user mood input

Acceptance Criteria

• Create mood.js file
• Add default variable for mood object
• Add placeholder moods with Spotify parameters
• Test to see that you can pull Spotify parameters when matching the mood

Link Materialize CSS Framework

As a developer
I want a linked CSS Framework
So that I can use the framework to style the site

Acceptance Criteria

• Add linkss from https://materializecss.com to index.html
• confirm that the links work

Write event listener to pull input from user

As a developer
I want to have user input
So that we can correctly query the Spotify API with user input

Acceptance Criteria

• Works on submit or enter
• Gather all needed information weather, genre, and mood
• return Weather, genre, and mood

Choose class and id syntax schema

As a developer
I want a uniform way of writing classes and ids
So that everyone on the team can work as efficiently as possible

Acceptance Criteria

• Choose syntax schema
• Post schema in a pinned thread in div and console slack channel

Create Presentation/Pitch

As a Teacher
I want to see a well thought out AP
So that I know this team has set appropriate goals and can have a finished app

Acceptance Criteria

• Decide on topics to present
• Decide on speaking or and who will cover which topics
• Define possible Q&A questions and responses

Create Basic Files

As a developer
I want to have basic files
So that I can build the app

Acceptance Criteria

• Create index.html
• Create style.css
• Create script.js
• Link style.css and script.js in index.html

Move Documentation to Wiki

AS A user
I WANT a concise, clear readme and access to more verbose documentation elsewhere
SO THAT I can make the choice to see what information I desire when I choose to read it

Acceptance Criteria

• Move all the documentation that is currently in README.md to sensible wiki pages
• Give the README a simpler layout including:
  • A short description (like our elevator pitch
  • A screencap of the deployed site
  • A link to the deployed site
  • Credits to the devs and any resources we're taking advantage of
  • A status section for shields.io badges (these are super cool)

Weather and Mood to Spotify Parameters Design

As a Developer
I want to have an index design
So that I can build functions that will recommend the right music to the user

Acceptance Criteria

• Draft Design
• Create visual to present
• Add Visual to READ.md

Add Favicon to Page

As a user
I want to easily identify brand of each tab
So that I can easily navigate back to my favorite app

Acceptance Criteria

• Add Favicon to index.html
• Verify that it shows up in the browser

Design Mood Sing Logo

As a user
I want to see a professional logo
So that I know I'm on a quality site

Acceptance Criteria

• Draft Logo
• Use an approved color scheme
• Incorporate approved typography
• Review draft logo with team
• Finalize logo design
• Create logo SVG
• Create Favicon
• Upload PNG/SVG and Favicon to repo
• Add logo and Favicon to Visuals section of READ.md

Create user genre and mood forms

As a user
I want to input my favorite genre and current mood
So that I can influence the playlist recommendations

Acceptance Criteria

• Input form for mood
• Input form for the genre
• Add submit buttons
• Have unique ids for each input
• Provide those ids to the back-end team
• Verify that each form displays on all screen sizes

Create Playlist Response Layout

As a user
I want to see a list of playlists
So that I can choose a playlist that intrigues me

Acceptance Criteria

• Create a user-friendly layout that shows available playlist
• Create a unique id for this container
• Provide this unique id to the back-end team
• Have the back-end team create a script to dynamically create this section. Look at #44
• Verify that we can dynamically generate this section
• Verify that it works on all screen sizes

Add Color Schemes to CSS Classes

As a user
I want to experience different color schemes
So that the app represents the weather outside

Acceptance Criteria

• Each color scheme has a unique class
• Choose elements that will change with the scheme
• Verify that changing the class it will change the color scheme

Write function for Spotify API

As a user
I want to be recommended playlists that match my local weather, a genre I like, and my current mood
So that I can listen to a playlist that I enjoy

Acceptance Criteria

• Create Function
• Gather data from Location function, Weather Function, and Mood Function
• Create a query for Spotify using provided parameters
• Set API to return an object with playlists
• Send response to render functions

Create weather section

As a user
I want to see what the local weather is
So that I can understand how it will influence my music recommendations

Acceptance Criteria

• Shows local weather
• Works all screen sizes

Create Basic Page Layout

As a user
I want to see a basic page layout
So that I can start to use the app

• insert a nav-bar
• create a header tag with text center
• create a footer tag with moodsing logo (possibly)
• create a container that holds all weather and song boxes
• select a background color

Validation does not restrict input on mood prompt

I can type in something other than the given options for mood, and it will still pass it through despite not being acceptable input.

Acceptance criteria

• Validate input so only expected parameters are available options

Securing Secret API Keys for Spotify

As a Developer
I want to secure the secret for the Spotify API
So that I stay within Spotify's terms of use

Acceptance Criteria

• Create moodSing Security API
• Limit activity to API calls only from moodSing
• Create closure to limit client key visibility
• Verify that this work with Spotify API
• Test and verify pulling the secret key from GitHub Secrets

Write function to get weather with users latitude and longitude

As a user
I want to have my local weather
So that I can have a playlist that is influenced by the weather

Acceptance Criteria

• Function should have a unique name
• Request weather from API using provided latitude and longitude
• Set default weather if user doesn't respond or can't provide latitude or longitude
• Test most major browsers
• Function be set to return shortForecast when called

Write function for rendering dynamic content

As a user
I want to interact with the site
So that I can find a playlist that is influenced by my local weather, genres of music I like, and my current mood.

Acceptance Criteria

• Get the layout design for the site from the front-end team
• Write a function to dynamically create these section
• Initial Page
• Weather Prompt
• Genre Prompt
• Mood Prompt
• Verify that we can dynamically generate this section with user actions
• Verify with the front-end team that this matches the design

Weather API Get request

As a developer
I want to pull local weather information
So that I can use the weather to help suggest what music to listen to

Acceptance Criteria

• Decided on what data we need from Weather API
• Test Get requests to decide on URL needed
• Define parameters that are needed
• Finalize Get URL for weather API

Create wireframe with Excalidraw

As a developer
I want to have and idea how the site will be structured
So that I can easily create the structure and UX for the app

Acceptance Criteria

• Use https://excalidraw.com to create wireframes for each section fo the app
• Save each section as it's own .PNG
• Upload wireframe .PNGs to repo

Create Description of Mood Sing

As a Developer
I want to know what this app does
So that I Can better design a site that matches this description

Acceptance Criteria

• Write draft description
• Review draft description with team
• Finalize draft description
• Add draft description to READ.md

Decide source of seed songs

AS A developer using the spotify recommendation API
I NEED fitting songs, albums, or artists to use as a seed to generate recommendations
SO THAT the user can receive a fitting selection of music for their mood

Acceptance Criteria

• Find a way to generate a selection of up to 5 songs, 5 albums, and/or 5 artists for the mood
• Seed music must fit the mood we're looking for, the weather the user is experiencing, and/or the user's personal music tastes

Have a loading screen prior to the spotify widgets being totally loaded

AS A user
I WANT all my suggestions to appear seamlessly
SO THAT I don't try to interact with something that isn't ready yet

Acceptance Criteria

• Hide the Spotify widgets until they've finished loading in the background
• Show a splash screen that indicates the music is being fetched while waiting
• Hide the splash screen and show the playlist when everything is ready

Weather to Spotify parameters index

As a developer
I want to have a weather to Spotify parameters index
So that I can use local weather to influence a users music recommendations

Acceptance Criteria

• List all possible outcomes from weather API
• Give each outcome corresponding Spotify Parameters
• Create weather.js file
• Create object to hold all weather outcomes and corresponding Spotify Parameters

Write function for background theme change

As a User
I want to see the app theme match the weather
So that I feel the site to be more reactive an engaging

switch statement to apply backrground/theme change
switch(expression) {
case sunny:
(content)=sunnyWeatherTheme
break;
case cloudy:
(content)=cloudyWeatherTheme
break;
default:
(content)=defaultAppTheme
}

Acceptance Criteria

• Function should be named themeChange
• Requests the short forecast from the localWeather function
• Matches short forecast
• Uses a switch statement as outlined above
• Set default if nothing matches short forecast
• Change classes on set elements when short forecast matches a theme

Ip Location API Get request

As a developer
I want to pull use IP
So that I can use this IP to get latitude and longitude for the Weather API

Acceptance Criteria

• Test Get requests to decide on URL needed
• Finalize Get URL for weather IP Location API

Pseudocode project in script.js

As a developer
I want to Pseudocode my app
So that I can breakdown the app into more manageable pieces

Acceptance Critiria

• Draft Pseudocode for app
• Review Pseudocode with back end
• Finalize Pseudocode
• Create issues for each area of Pseudocode

Choose CSS Framework

As a developer
I want to a CSS framework
So that I can easily style a site that is responsive

Acceptance Criteria

• Look at available CSS Frameworks
• Discuss CSS frameworks with team
• Finalize on CSS framework

Make prompt fonts more legible

AS A user
I WANT more legible text at small sizes
SO THAT I can read things more clearly even if I have a small screen or poor eyesight

Acceptance Criteria

• Have a clean font with a thicker size than Poiret One for our smallest elements (we can keep Poiret One for headers and such)
• Make sure themes apply high-contrast font colors to all elements

(Remember, when testing the site, you can call applyTheme("sunny") to test the different themes)

Spotify API Get request

As a developer
I want to pull find recommended music based on user input
So that I can give the user music recommendations based on weather, mood, and location

Acceptance Criteria

• Decided on what data we need from Spotify API
• Test Get requests to decide on URL needed
• Define parameters that are needed
• Finalize Get URL for Spotify API