Skip to content

Latest commit

 

History

History
131 lines (101 loc) · 5.38 KB

README.md

File metadata and controls

131 lines (101 loc) · 5.38 KB
Raw

On The Spot-ify

By: Kayl Eubanks

Useful links to refer to during development

Description

This app is a music quiz using the Spotify API and user data to create a personalized experience. This application is built with React via the create-react-app.

Flow of app

  • User will be prompted to log in using their Spotify account(postponed)
    • OAuth 2.0 token request will prompt user for permission to access their data
  • User will press button to begin a game
  • A game consists of:
    • 10 questions - each prompts user to identify the audio clip being played
    • 4 potential answers per questions (1 correct and 3 incorrect)
    • 30 seconds of audio for each question
    • 30 seconds to submit guess
    • a decreasing points score based on amount of time passed since clip began
    • user will be allowed a single guess per question
    • At end of game user will be shown total number of points scored and number of questions answered correctly
  • Game data flow:
    • initial request for user top artists/user's saved tracks
    • store 10 random artistId/trackId values for answers (assuming every track has 30 sec preview)
    • for each answer artistId:
      • request related artists and store 3 random artist names for each question (30 total)
      • request top tracks:
        • pick random song, store track name, artist name, and preview url
  • Example state object: state: { game results: { answerResults: [boolean, boolean, ..., boolean], answerPoints: [#, #, ..., #] }, game data: { answerArtists: ['string', 'string', ..., 'string'], songData: [{ trackName: 'string', artistName: 'string', trackAudio: 'string' }, {...}, ..., {...}], wrongArtistNames: [['string', 'string', ..., 'string'], [...], ..., [...]] }, user authentication: { userToken: 'string', userRefreshToken: 'string' }, }

Project Proposal:

  • Name of Project: On The Spot-ify

  • Project’s Purpose or Goal: This app will allow users to play a personalized music quiz using their own Spotify API data. Eventually will turn into a two-player competitive quiz using artists/songs known to both players.

  • List the absolute minimum features the project requires to meet this purpose or goal:

  • Will use my personal Spotify account for verification

  • Will play short clip of song and provide 4 choices of potential answers to player

  • Will give points to player if song is identified correctly, point value varies based on time taken to answer question

  • Will track overall point total and average time to answer for a play session

  • What tools, frameworks, libraries, APIs, modules and/or other resources (whatever is specific to your track, and yourlanguage) will you use to create this MVP? List them all here. Be specific.

  • React

  • Spotify API

  • Redux

  • Create React App

  • Firebase or custom Heroku SQL database

  • If you finish developing the minimum viable product (MVP) with time to spare, what will you work on next?

  • Allow input of different user authentication and return more personalized quiz data

  • Connect two instances of app for competitive play

  • Compare two separate users and return commonly shared artists/songs/albums etc.

  • What additional tools, frameworks, libraries, APIs, or other resources will these additional features require?

  • socket.io (?)

  • need more research on connecting two instances of app through internet

Project Log:

  • 7/13/18:

    • Spend morning (8:30am-12pm) attempting to make a successful api call via Postman
    • Unsuccessful. Trouble with authentication and submitting request correctly
    • Speak with Tyler about this if unable to resolve by 7/18/18
    • Created initial project folder and repo on GitHub, gather dependencies and dev tools (1pm-2pm)
    • Recalled Tyler suggesting using Create React App. Decided to scrap and start from scratch
    • Recreate project folder using Create React App
    • Editing README to include Project Proposal and Project Log sections
    • Spend rest of day planning project and reading documentation for Spotify API and Create React App functionality`

  • 7/17/18:

    • Make successful API call in Postman and identified the 30 second preview URL

Setup/Installation Requirement for Developers:

  • Clone repository on your local computer from https://github.com/K-Banks/On-The-Spotify.
  • Navigate into project directory in command line.
  • Install node package manager if not already installed on local machine.
  • Run '$ npm install' to download all needed dependencies.
  • Run '$ npm run start' to serve the app on localhost:8080.

Component Tree

Component Tree

Known Issues

No known bugs at this time. Please contact author at [email protected] with any bugs.

Technologies Used

License

This software is licensed under the MIT license.

Copyright (c) 2018 Kayl Eubanks