Code Monkey home page Code Monkey logo

localplaylist's Introduction

RoadieSounds

RoadieSounds is a really simply way to discover new live music, especially while you're travelling. This was a final project for a Lighthouse Labs Cohort in 2017.

Going through concert listing for bands you are unfamiliar with can be tedious and time consuming to find a concert you might be interested in going to. Instead of simply reading through concert listings, RoadieSounds lets you listen to them.

Simply enter the cities you are interested in attending concerts in, and the genres you like. RoadieSounds will not only return the concert listings for those time periods, but it will generate a playlist for you that you can save to Spotify.

demo1

Now you can listen to that playlist, and if there is a band you like, you can simply return and buy tickets for that concert!

demo2

Experience live music listings, instead of reading them!

Screenshots

This is the main page where users can enter up to 5 destinations, and their travel dates for each. The cities are autocompleted with Google Maps API and the date selector is designed to be effortless.

mainpage

After selecting travel dates, users select the genres they are most interested in.

genreselect

After querying the Eventful and Spotify API, a list of concerts is generated for each city along with the top tracks for each artist within that list. The results can be viewed by clicking each dropdown for each city.

results

The concerts and playlist are displayed here. Users can view the concert information or buy tickets. Below is the generated playlist with the top tracks of artists playing during the time. Users can either preview tracks directly (if Spotify provides a preview link), or can save their playlist that was generated to Spotify.

playlist

In order to save a playlist to Spotify users first need to grant Oauth access to their Spotify account.

oauth

Setup

To initialize this repo:

  • clone the repo
  • npm install
  • npm run dev:server
  • visit 0.0.0.0:3000 in browser
  • The sever will refresh whenever changes are made to any app files

Initialize DB

  • psql -d template1 - You may need to use the superuser login eg. -U vagrant
  • CREATE ROLE <username> WITH LOGIN password '<password>'; Set your username and password
  • CREATE DATABASE <dbname> OWNER <role_username>; Create a database name, and set owner to the role username you just created.
  • Copy and configure your .env with the DB info you just created and
  • Run npm run knex migratate:latest

Initialize API keys

You'll need unique API keys to use this for Eventful and Spotify.

Go to both sites developer/API portals and request credentials and update your .env file where there are empty placeholders.

If you are doing server side development, nodemon is installed to make it a bit easier:

  • npm run dev:nodemon
  • Everytime a server-side change is made, a new build will be created, so this process is a bit slower.

To run in a production environment

  • npm run prod:build
  • npm run prod:server
  • visit 0.0.0.0:3000 in browser

Known Issues

  • Currently Oauth isn't always working. It's a know bug that we're working on.
  • Smaller cities, or cities with no results won't work because of the limits on the API
  • Some user interactions don't have feedback such as saving the playlist. We'll add these later once we fix the above issues.

localplaylist's People

Contributors

dennyhollick avatar marshalldanel avatar sanjanadesai27 avatar

Watchers

 avatar  avatar  avatar

localplaylist's Issues

User can follow link to Spotify web app (Stretch)

“As a User, I want to see example playlists of concerts in my current city because I want to explore my local music scene.” 

Scenario

"Given I am on the homepage, when I look under the input boxes, then show links to playlists of local concerts."

Acceptance Criteria

This is done when… User can see links to 4(?) playlists from local (from on user’s ip, etc) concerts based on popular genres.

User can see concert pins on map on results page (Supa Stretch)

User story

As a user, when I visit the home page and enter cities, I want to be able to see where all the cities are on a map so I can visualize my trip.

Scenario

When the user enters city names, it will display all cities as pins on the map under the form.

Acceptance scenario

When the user sees a bunch of pins for cities when they hit enter after typing each city.

User can see current city playlists

“As a User, I want to see local concerts because I want to discover what people are listening to locally.” 

Scenario

"Given I am on the home page, when I click a current city playlist page, then show a playlist of local music for tonight"

Acceptance Criteria

This is done when… User can visit a genre playlist page for local concerts for tonight

User can Specify 1 or more Genres

User Story

“As an Anon User, I want to pick one or more genres of music because I enjoy listening to that style of music.” 

Scenario

"Given I am on the home page, I can select a genre from radio buttons by clicking on it, then show that it is selected.”

Acceptance Criteria

This is done when… User sees their genre selected and it can be passed to a form

Other Info

User can see concert details on track or thumbnails in playlist

User story

As a user, I want to be able to view the concert details for a track or concert thumbnail in the playlist when I click on it so that I can learn more about the concert, or buy tickets.

Scenario

When a user clicks on a track or concert thumbnail, it will get the concert info related to that artist and display it where the marquee once was AND they can 'x' out of it to go back to the marquee. And it will change if the user clicks on another track

Acceptance Criteria

When the user clicks on a track or concert, the dynamic data for that concert is displayed, links to ticket info, and they can 'x' out of it.

User sees a list of concerts for each city/date

User Story

“As a Anon User, I want see concerts where I’m going based on my inputs because I might like to attend them.” 

Scenario

"Given I have generated a bunch of city playlists, when I select one, it will open a marquee of concerts below"

Acceptance Criteria

This is done when… User sees all the concert data and can link to the concert.

Other Info

Using eventful API, displays a formatted list of concerts

User can see recently generated playlists (Stretch)

User Story

“As a User, I want to hear music from around the world because I want to discover what people are listening to around the world.” 

Scenario

"Given I am on the home page, when scroll down, then show recently created playlists and allow me to play them."

Acceptance Criteria

This is done when… User can see multiple recently created playlists on the home page and is able to play them from the same page.

User can share Spotify playlist (Stretch)

“As a User, I want to be able to share my playlist because I want to share my amazing taste in music and convince my friends to come to a concert.” 

Scenario

"Given I have successfully saved a playlist, when I see the success page, then show a link to share the playlist on various platforms."

Acceptance Criteria

This is done when… user can share a Spotify playlist link - Twitter, FB, G+, Copy link

User can Specify Dates

User Story

“As an Anon User, I want to enter a range of dates because that’s when i’ll be traveling to the city I specified.” 

Scenario

"Given I am on the the homepage, when I select a range of dates from a dropdown menu, then display it."

Acceptance Criteria

User sees their dates, in a calendar and can select a start and and date from it. Data passed to form as start_date, end_date.

Other Info

Use this to help, or use simlar method: https://www.npmjs.com/package/react-calendar-date-range-picker

User can enter a location

User Story

“As an Anon User, I want to enter a location because I want discover concerts there.” 

Scenario

"Given I am on the homepage, when I type a city name, then show it in the input box."

Acceptance Criteria

The user sees their text in the input box and it can be passed to a form

Other Info

Optional Predictive text: Possible to pre-populate the list from https://www.npmjs.com/package/all-the-cities

User Sees text based playlist

User Story

“As an Anon User, I want to see a recommended playlist of artists playing at concerts during the timeframe I specified because I want to check out the local music scene.” 

Scenario

"Given I enter all fields on the home page and click submit, when I see the results page, then show me a playlist in text form with relevant info.”

Acceptance Criteria

This is done when… User can see a list of songs based on a combo of their imputed data and data received from spotify

User can login

User Story

“As a User, I want to be able to log in from any page because I want to see my saved concerts.” 

Scenario

"Given I am not logged in, when I click login, a popup will allow me to enter my email and password and click the login button, then log me in."

Acceptance Criteria

This is done when… user can get authenticated and logged into the app.

Other Info

User Specify Popularity (Stretch)

User Story

“As an Anon User, I want to pick what kind of concert I attend because I like to go to small/big concerts.” 

Scenario

"Given I am on the home page, when I pick a venue size/popularity index from a list, then it is shown as selected and is included in my results list."

Acceptance Criteria

This is done when… user can pick a venue size/etc and have it applied to their concert results that they receive back.

User can push playlist to Spotify

“As a User, I want to save my playlist to Spotify because I want to listen to it again.” 

Scenario

"Given I am logged in, on the results page and have picked if the playlist is public or private, when I click save playlist, then save my playlist and show a success page."

Acceptance Criteria

This is done when… User can push a playlist to their spotify profile and see a result page.

User goes to concert page on eventful

User Story

“As an Anon User, I want to see the concert info because I might want to go or buy a ticket.” 

Scenario

"Given I am on the results page, when I click on a concert link, then show more information about that concert on evently."

Acceptance Criteria

This is done when… Users are redirected to a eventful pg for that event

Other Info

User can Name a trip

User Story

As a user, I want to be able to name my trips when I save them because I dislike the default names, and want it to be more descriptive.

Scenario

When a user creates a trip, they can edit the name of the trip and rename it to anything they want.

Acceptance Criteria

When a user can changes the name of a trip, the change is reflected in the view, and also in the database.

User can open a city playlist for details

User Story

As a user, when a list of playlists are generated for my trip, I want to be able to see all of the tracks for each city playlist by clicking on it because I want to see the individual songs or concert info.

User scenario

When a user has a bunch of city playlists, they can click on one and it will display the concerts for that city, and the individual songs they can listen to or export

Acceptance criteria

When a user clicks on the city, it displays a partial view with the playlist info. When they click it again, it closes.

User can connect to Spotify -- (O-Auth)

“As a User, I want to connect to Spotify because I want to listen to the full-length songs and not the preview.

Scenario

"Given I am logged in, I can connect with spotify, and when I am logged in to spotify, I can hear the full-length songs instead of the previews.

Acceptance Criteria

This is done when… User can successfully signin to Spotify and we have access to their data

User can Register

User Story

“As a Anon User, I want register a new account because I can access more features.” 

Scenario

"Given I am on the register page, when I fill in the relevant input boxes and click submit, then create an account and redirect me."

Acceptance Criteria

This is done when… user is successfully added to the DB and then redirected to the home page

BUG: User login & Register Broken

Registration:

image

image

Appears to create a new user, but the screen does not change. Cannot get out of the register screen. Have to restart the app. Appeared to try create two of the same user?

What needs to be fixed?:

  • No dupe users
  • Throw err to clientside if dupe users
  • Change state after register (close register form)
  • Update state of user for props

Login

Same deal. Click login, and it will not do anything client side

image

image

User remains null
image

If wrong user info is entered, app crashes rather than throwing clientside error:

image

What needs to be fixed?:

  • Don't crash on wrong input
  • Throw err to clientside if wrong password/email
  • Change view on success
  • Update state of user with their userID and firstName

User Can Go to homepage

User story

As a user, when I visit the URL or click home, I want to go to a homepage so I can interact with the service

Scenario

Given I visit the URL, it will take me to a homepage with some basic information about the service

Acceptance Criteria

There is a styled homepage that a form can later be embedded into

User can save a trip

User Story

“As a User, I want to save a trip because I want to remember what artists/songs were on it.” 

Scenario

"Given I am logged in and on the results page, when i click the ‘Save Trip’ button, then save it to my ‘Trips’ and notify me of the save success.”

Acceptance Criteria

This is done when… a user can save a trip to their profile and is notified of success or failure.

User can play sample of each song

User Story

“As a Anon User, I want to sample the recommend song in the playlist because I want to hear if I like the artist” 

Scenario

"Given I entered all info correct and I hit submit, when I am sent to the results page, then I can play a spotify sample of each song individually”

Acceptance Criteria

This is done when… User can natively sample all songs from the generated playlist

Other Info

User can name a playlist

“As a User, I want name my playlists because I make the best names and because I hate the default name and I make the best names.” 

Scenario

"Given I have created a playlist and am on the results page, when I enter text into the ‘Playlist Title’ box, then display the text."

Acceptance Criteria

This is done when… User can see the text displayed in the form and playlist is saved with the specified name (Default - city, travel dates)

User can view concert thumbnails in playlist

User story

As a user, when I open a city playlist, I want to be able to see all of the concert details for that city playlist in case I want to attend a concert.

Scenario

When the user clicks on the city playlist, it will display a marquee of concerts for that city above the playlist tracks.

Acceptance scenario

When the user sees a bunch of thumbnails for concerts when they open the playlist.

User can make playlist public or private

“As a User, I want to decide the privacy options of my playlist because I like my privacy and some people are creepy.” 

Scenario

"Given I am signed in am viewing a playlist, when I pick with public or private, then change the playlist view settings and signal the change has occurred. "

Acceptance Criteria

This is done when… user can visibly see their selection and when user submits their playlist, privacy settings are set as specified

User can enter 2(min) or more locations

User Story

“As an Anon User, I want to enter cities I am visiting during my trip because I want to check out local music.” 

Scenario

"Given I am on the homepage, when I type a start and end city name, then show it in the input box and give me the option of adding more locations."

Acceptance Criteria

The user sees their text in the input box and it can be passed to a form

Other Info

Optional Predictive text: Possible to pre-populate the list from https://www.npmjs.com/package/all-the-cities

User can see all saved trips

Display all saved playlists --

“As a User, I want to see all my saved trips because I want to remember who and what the hell I listened to.” 

Scenario

"Given I saved one or more trips when I go to my ‘Playlist Page’, then show a list of all saved trips that I own."

Acceptance Criteria

This is done when… User can go to a saved trips page and see all saved playlists

User can see roadtrip map (Stretch)

User story

As a user, when I submit a list of destinations when a playlist is generated, I want the next page to display a map of where I'm going because it's super cool and I am a hipster going places.

Scenario

When a user submits their destinations, on the playlist page it will display a map of where they are going.

Acceptance Criteria

When the map displays above the playlist of all their destinations.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.